标签：jQuery body function 标签 bootstrap init class fn

• jQuery操作标签

• jQuery事件操作

• jQuery动画效果

• 前端第三方框架

• jQuery操作标签

'''
jQuery代码查找标签绑定的变量名推荐使用$xxxEle
'''
# addClass()  增加css类名  相当于原生js中的classList.add()
var $divEle = $('div').first()
$divEle.addClass('c3')
S.fn.init [div.c1.c2.c3, prevObject: S.fn.init(1)]

# removeClass()  # 移除css类名  相当于原生js中的classList.remove()
$divEle.removeClass('c3')
S.fn.init [div.c1.c2, prevObject: S.fn.init(1)]

# hasClass()  # 判断有没有指定的css类名  相当于原生js中的classList.contains()
$divEle.hasClass('c2')
true

# toggleClass()  # 有则移除， 无则添加   相当于原生js中的classList.toggle()
$divEle.toggleClass('c4')
S.fn.init [div.c1.c2.c4, prevObject: S.fn.init(1)]

# 样式操作
增加一个粉红色的实现边框
$divEle.css('border','3px solid pink')

# 位置操作
$(window).scrollTop()  用于获取左侧滚动条距离顶端的位置
"""
 实时监测距离
  $(window).scroll(function () {
      if($window).scrolltop() > 500){
      alert('超过本页500了')
      }
  })

"""

• 文本值操作

jQuery	         DOM
# 获取文本
text()			 innerText
# 获取HTML标签
html() 			 innerHTML	
# 获取value值
val() 			 value
"""
 使用空括号就是获取，括号里面放操作代码就是设置
"""

# 实操
$('body').text()
"\n    \n    \n    \n    \n        $(window).scroll(function(){\n            if($(window).scrollTop() > 500){\n                alert('超过500了')\n            }\n        })\n\n    \n\n"
$('body').html()
`\n    <div style="height: 600px;background-color: blueviolet"></div>\n    <div style="height: 600px;background-color: blue"></div>\n    <div style="height: 600px;background-color: rebeccapurple"></div>\n    \x3Cscript>\n        $(window).scroll(function(){\n            if($(window).scrollTop() > 500){\n                alert('超过500了')\n            }\n        })\n\n    \x3C/script>\n\n`
$('body').val()
''
$('body').text('哎嘿')
S.fn.init [body, prevObject: S.fn.init(1)]
$('body').html('<h1> 芜湖</h1>')
S.fn.init [body, prevObject: S.fn.init(1)]

• 属性操作

# 获取第一个标签为style属性值
$('div').attr('style')
# 批量设置单个
$('div').attr('class','c1')
# 批量设置多个
$('div').attr({'name':'owen','pwd':111})
# 批量移除
$('div').removeAttr('class') 

"""
 获取标签属性的时候， 针对动态属性尤其是复选框不建议使用attr()
 prop('checked')  # 结果为布尔值
 prop('checked',false) # 动态设置
"""

• 文档处理

# 内部添加
$(A).append(B)   # 把B追加到A
$(A).prepend(B)  # 把B前置到A

#外部添加
$(A).after(B)  # 把B放到A前面
$(A).before(B)  # 把B放到A前面

# 清空内容
$('body').empty()  # 直接清空 body里面的所有东西

# 代码实操
let $pEle = $('<p>')
undefined
$pEle.text('这是一个p标签')
S.fn.init [p]
$('body').append($pEle)
S.fn.init [body, prevObject: S.fn.init(1)]
$('body').prepend($pEle)
S.fn.init [body, prevObject: S.fn.init(1)]
$('body').after($pEle)
S.fn.init [body, prevObject: S.fn.init(1)]
$('body').empty()
S.fn.init [body, prevObject: S.fn.init(1)]

jQuery事件操作

'''js绑定操作'''
标签对象.onclick = function(){}
标签对象.onchange = function(){}
''' jQuery绑定'''
jQuery对象.click(function(){})
jQuery对象.change(function(){})

# 克隆操作
<button id="d1">小朋友快来玩呀</button>
<script>
    $('#d1').click(function () {
        // $('body').append($(this).clone())  // 不克隆事件(克隆的不是实体， 只有一个实体)
        $('body').append($(this).clone(true))  // 克隆事件(克隆的都是实体)
        })
</script>

• 悬浮事件

# 鼠标悬浮在上面和移开时触发各一次
$('#d1').hover(function () {alert('芜湖芜湖')})

# 想要将悬浮和移开分开执行不同的操作，就要写两个函数
    $('#d1').hover(
       function () {alert('今天要来点新鲜的吗')},

	   function () {alert('这么快就走啦')}
)

• 值监听事件

"""
 jQuery绑定事件有两种方式
   $('#d1').click(function(){})
   $('#d1').on('click', function(){})
"""

# 实操
<input type="text" id="d1">
<script>
    $('#d1').on('input',function () {
        console.log($(this).val())
    })
</script>

• 阻止后续事件

"""
  如果给已经有事件的标签绑定事件， 那么会依次执行
  如果想要取消后续时间的执行有两种方式
"""
方式一:
    $('#di').click(function(){
        alert()
        return false
    })
方式二:
    $('#d1').click(function (e) {
            alert('bibibi')
            e.preventDefault()
    })
# 推荐使用第一个

• 事件冒泡

"""
 在多个标签嵌套的并且都有相同事件的情况下， 会出现逐级汇报的现象
"""
方式1
	return false
方式2
	e.stopPropagation()

# 代码实现
<div id="d3"> 这是div标签
    <p id="d2"> 这是p标签
        <span id="d1"> 这是span标签</span>
    </p>
</div>
<script>
    $('#d1').click(function (){
        alert('span')
        return false
    })
    $('#d2').click(function (e){
        alert('p')
        e.stopPropagation()
    })
    $('#d3').click(function (){
        alert('div')
        return false
    })

• 事件委托

"""
 针对动态创建的标签，提前写好的事件默认都是无法生效的
"""
# 书写格式
$('body').on('事件类型','选择器',function(){})

# 将body内所有的点击事件交给button标签处理
$('body').on('click','button',function(){})

jQuery动画效果

hide # 隐藏
show # 展示
slideUp # 收起
sildeDown # 放下
fadeIn  # 淡入(透明度, 时间)
fadeOut  # 淡出(透明度, 时间)
animate  # 自定义

前端第三方框架

# bootstrap 框架
  内部提供了很多漂亮的标签样式和功能，我们只需要CV即可
    
# bootstrap版本
 推荐使用V3
  
# 使用方式
 先导入再使用
1、本地导入
2、cdn导入

# 文件组成
	bootstrap需要导入两个文件
  	一个是css文件
    一个是js文件

• 布局容器

class = 'container'  # 两边有留白
class = 'container-fluid'  # 没有留白

• 栅格系统

class = 'row'  默认开设一行均分12份
class = 'col-md-n'  指定需要几份(电脑屏幕)
# 栅格参数可以做到响应式布局xs sm md lg...
如果一行十二份用不完 可以调整位置
	col-md-offset-3

• 表格样式

class="table table-hover table-striped table-bordered"
# 单元格颜色
class="active"
class="success"
class="warning"
class="danger"
class="info"

# 代码实操
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">

            <h1 class="text-center">数据展示</h1>
            <div class="col-md-8 col-md-offset-2">
                <table class="table table-hover table-striped table-bordered">
                    <thead>
                        <tr>
                            <th class="text-center danger">序号</th>
                            <th class="warning">姓名</th>
                            <th class="success">性别</th>
                            <th class="info">年龄</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="danger">
                            <td>1</td>
                            <td>owen</td>
                            <td>male</td>
                            <td>20</td>
                        </tr>
                    <tr class="success">
                            <td>2</td>
                            <td>mary</td>
                            <td>female</td>
                            <td>28</td>
                        </tr>
                    <tr class="info">
                            <td>3</td>
                            <td>tony</td>
                            <td>female</td>
                            <td>38</td>
                        </tr>
                    <tr class="warning">
                            <td>4</td>
                            <td>jerry</td>
                            <td>male</td>
                            <td>48</td>
                        </tr>
                    <tr>
                            <td>5</td>
                            <td>oscar</td>
                            <td>male</td>
                            <td>58</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

</body>
</html>

• 表单样式

.pull-left			左浮
.pull-right			右浮
class='form-control'
针对radio和checkbox不能加

• 按钮与图片

# 按钮样式
class = 'btn'
# 按钮颜色
<a href="" class="btn btn-info">言多必失</a>
<a href="" class="btn btn-danger">言多必失</a>
<a href="" class="btn btn-warning">言多必失</a>
<a href="" class="btn btn-primary">言多必失</a>
<a href="" class="btn btn-success">言多必失</a>
# 按钮尺寸
<a href="" class="btn btn-success btn-sm">言多必失</a>
<a href="" class="btn btn-success btn-lg">言多必失</a>
<a href="" class="btn btn-success btn-block">言多必失</a>

• 图标样式

<span class="glyphicon glyphicon-user"></span>
# 更多图标
http://www.fontawesome.com.cn/

标签：jQuery,body,function,标签,bootstrap,init,class,fn
来源： https://www.cnblogs.com/lsw8898/p/16217239.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。