jQuery和bootstrap

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/

文本值操作

属性操作

文档处理

悬浮事件

值监听事件

阻止后续事件

事件委托

布局容器

栅格系统

表格样式

表单样式

按钮与图片

图标样式

相关推荐