jQuery其他操作与bootstrap框架

目录

• 标签操作
  • 样式操作
  • 位置操作
  • 文本值操作
  • 属性操作
  • 文档处理
• 事件操作
  • 常见事件
  • 克隆案例
  • 悬浮事件hover()
  • 监听input输入值事件
  • 阻止后续事件
  • 事件委托
• 动画效果
• bootstrap框架
  • 布局容器
  • 栅格系统
  • 表格样式
  • 表单样式
  • 按钮
  • 图片
  • 组件
  • JS效果
• 练习

标签操作

样式操作

class属性操作

jQuery语法	相当于DOM	描述
addClass()	classList.add()	添加class属性值
removeClass()	classList.remove()	移除class属性值
hasClass()	classList.contains()	查询是否有class属性值
toggleClass()	classList.toggle()	如果已有属性值，那么删除；如果没有这个属性值，那么添加；

css操作

jQuery里操作css样式的语法更为简单

标签对象.css(属性,值)  // 等价于DOM中：标签对象.style.属性 = 值

如：设置第一个p标签颜色为红色

$('p:first').css('color', 'red')
// 等价于DOM中：document.getElementsByTagName('p')[0].style.color = 'red'

位置操作

方法	描述
scrollTop()	获取匹配元素相对滚动条顶部的偏移
scrollLeft()	获取匹配元素相对滚动条左侧的偏移
position()	获取匹配元素相对父元素的偏移
offset()	获取匹配元素在当前窗口的相对偏移或设置元素位置

常用操作

$(window).scrollTop()  // 获取滚动条距离顶端的偏移量

实时监测距离顶部的距离：

$(window).scroll(function () {
    if($(window).scrollTop() > 600){
        alert('超过600了 架不住了')
    }
})

文本值操作

jQuery语法	描述	相当于DOM
text()	只获取文本	innerText
html()	获取文本和标签	innerHTML
val()	获取标签的value值	value

如果括号内不写值，那么就是获取；如果括号内写了值，那么就是设置。

属性操作

方法	描述
attr(属性名)	返回第一个匹配元素的属性值
attr(属性名, 属性值)	为所有匹配元素设置一个属性值
attr({属性1: 值1, 属性2:值2})	为所有匹配元素设置多个属性值
removeAttr(属性名)	从每一个匹配的元素中删除一个属性
prop(属性名)	动态返回第一个匹配元素的布尔值
prop(属性名,属性值)	动态为所有匹配元素设置一个属性值

attr在对一些动态属性时，不建议使用，比如单选框、复选框，网页选择更改时，attr获取的属性值并不会更改。

所以再对一些动态属性时，可以使用prop动态获取和设置。

文档处理

方法	描述
$(A).append(B)	把B追加到A内容的末尾
$(A).prepend(B)	把B放在A内容的最前面
$(A).after(B)	让B跟在A后
$(A).before(B)	把B放到A的前面
$(A).empty()	清空A的内容
$(A).clone()	克隆A，参数为true会同时克隆事件

事件操作

常见事件

事件	描述
click()	单击事件
dbclick()	双击事件
hover()	鼠标指针悬停事件和鼠标指针离开事件
focus()	聚焦事件
blur()	失焦事件

绑定方式

// 第一种
$().click(function(){

})
// 第二种
$().on('click',function(){

})

克隆案例

<button id="d1">克隆按钮</button>
<script>
    $('#d1').click(function () {
    // $('body').append($(this).clone())  // 不克隆事件
    $('body').append($(this).clone(true))  // 克隆事件
})
</script>

悬浮事件hover()

hover()有两次触发条件：鼠标悬浮和鼠标移开，如果要使这两个事件有不同操作，需要写两个函数。

$('p').hover(
    function () {  // 悬浮触发
        this.style.color = 'red'
    },
    function () {  // 移走触发
        this.style.color = 'black'
    }
)

监听input输入值事件

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

阻止后续事件

如果给已经有事件的标签绑定事件，那么会依次执行；比如form表单中的重置按钮已经有了一个重置的事件。

如果想要取消后续事件的执行，可以使用两种方式阻止：

方式一：函数返回false

$('#d1').click(function () {
    alert(123)
    return false  //  取消当前标签对象后续事件的执行
})

方式二：使用特殊方法

$('#d1').click(function (e) {
    alert(123)
    e.preventDefault()
})

事件冒泡概念

在多个标签嵌套的并且都有相同事件的情况下，会出现逐级汇报的现象，称为事件冒泡。

事件委托

针对动态创建的标签，提前写好的事件默认是无法生效的。比如我先给所有p标签设置了单击事件，打开网页后添加的p标签都是没有单击事件的。

这时候就需要用到事件委托：把一个标签里的一个事件都委托给子标签。

// 将body内所有的点击事件交给p标签处理
$('body').on('click', 'p', function (){
    $(this).css('color','red')
})

动画效果

动画(speed单位毫秒)	描述
hide(speed)	以左上角为终点消失
show(speed)	以左上角为起点出现
slideUp(speed)	以顶部为终点收起
slideDown(speed)	以顶部为起点展开
fadeIn(speed)	淡入
fadeOut(speed)	淡出
animate()	自定义动画

自定义动画实现点赞效果：

点赞动画示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>点赞动画示例</title>
  <style>
    div {
      position: relative;
      display: inline-block;
    }
    div>i {
      display: inline-block;
      color: red;
      position: absolute;
      right: -16px;
      top: -5px;
      opacity: 1;
    }
  </style>
</head>
<body>

<div id="d1">点赞</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
  $("#d1").on("click", function () {
    var newI = document.createElement("i");
    newI.innerText = "+1";
    $(this).append(newI);
    $(this).children("i").animate({
      opacity: 0
    }, 1000)
  })
</script>
</body>
</html>

bootstrap框架

bootstrap框架内部提供了很多好看的标签样式和功能，我们只需要在编写时给标签加上class属性值就可以使用样式了。

在使用bootstrap框架之前，需要导入css、js，如果要使用动态效果还需要jQuery。

详情：全局 CSS 样式 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)

布局容器

class值	作用
container	固定宽度并在页面居中，两边留有空白
container-fluid	宽度占满页面

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

class值	作用
row	默认开设一行均分12份
col-md-1	占一行的1/12
col-md-2	占一行的2/12
...	...
col-md-12	占一行的12/12
偏移量
col-md-offset-1	向右偏移1/12
col-md-offset-2	向右偏移2/12
...	..
col-md-offset-12	向右偏移12/12
其他设备
col-xs-	超小屏幕 手机 (<768px)
col-sm-	小屏幕 平板 (≥768px)
col-md-	中等屏幕 桌面显示器 (≥992px)
col-lg-	大屏幕 大桌面显示器 (≥1200px)

表格样式

链接：表格样式官网说明

class值	作用
table	美化表格
table-hover	每一行对鼠标悬停状态作出响应
table-striped	每一行增加斑马条纹样式
table-bordered	为表格和其中的每个单元格增加边框
table-condensed	表格更加紧凑
状态类	通过这些状态类可以为行或单元格设置颜色
active	鼠标悬停在行或单元格上时所设置的颜色
success	标识成功或积极的动作（浅绿）
info	标识普通的提示信息或动作（浅蓝）
warning	标识警告或需要用户注意（淡黄）
danger	标识危险或潜在的带来负面影响的动作（淡红）

表单样式

链接：表单样式官网说明

class值	作用
form-control	设置宽度为100%并美化

按钮

链接：按钮详细说明

class值	作用
btn	按钮样式
颜色
btn-default	默认样式
btn-primary	蓝色（首选项）
btn-success	绿色（成功）
btn-info	浅蓝（一般信息）
btn-warning	黄色（警告）
btn-danger	红色（危险）
尺寸
btn-lg	大按钮
btn-sm	小按钮
btn-xs	超小尺寸
btn-block	拉伸至父元素100%的宽度，并变为了块级元素

图片

链接：图片详细说明

class值	作用
img-rounded	图片四个角变圆滑
img-circle	图片border-radius设为50%
img-thumbnail	图片有个边框

组件

链接：组件

更多图标：http://www.fontawesome.com.cn/

JS效果

链接：JS效果

练习

1.编写一个回到顶部的案例

点击查看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <!--    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>-->
    <!--    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">-->
    <style>
        .d1 {
            height: 600px;
            width: 200px;
            background-color: #1b6d85;
        }

        .d2 {
            height: 600px;
            width: 200px;
            background-color: salmon;
        }

        .d3 {
            height: 600px;
            width: 200px;
            background-color: aqua;
        }

        #d4 {
            width: 40px;
            height: 40px;
            background-color: #bce8f1;
            position: fixed;
            right: 50px;
            bottom: 100px;
            padding: 5px;
            text-align: center;
            display: none;
        }

        #d4:hover {
            background-color: #2e6da4;
        }
    </style>
</head>
<body>
    <div class="d1">

    </div>
    <div class="d2">

    </div>
    <div class="d3">

    </div>
    <div id="d4">返回顶部</div>

    <script>
        $(window).scroll(function () {
            if ($(window).scrollTop() > 600) {
                $('#d4').fadeIn(1000)
            }
        })
        $('#d4').click(function () {
            $(window).scrollTop(0)
            $(this).fadeOut(1000)
        })
    </script>
</body>
</html>

2.编写一个简易版本的全选功能，扩展:反选 取消等功能

点击查看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <style>

    </style>
</head>
<body>
    <form action="">
        <input id="all" type="checkbox">全选
        <input class="c1" type="checkbox">1
        <input class="c1" type="checkbox">2
        <input class="c1" type="checkbox">3
    </form>
    <script>
        $('#all').on('input', function () {
            if ($(this).prop('checked') === true) {
                $('.c1').prop('checked', 'checked')
            } else {
                $('.c1').prop('checked', null)
            }
        })
        $('.c1').on('input', function () {
            for(var i = 0;i < $('.c1').length;i++) {
                if ($('.c1')[i].checked === false) {
                    $('#all').prop('checked', null)
                    return
                }
            }
            $('#all').prop('checked', 'checked')

        })
    </script>
</body>
</html>

3.编写一个删除单元格的功能

点击查看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <style>

    </style>
</head>
<body>
    <div class="container">
        <table class="table table-striped table-hover table-bordered">
            <thead>
                <tr class="row">
                    <th class="col-md-3">编号</th>
                    <th class="col-md-3">姓名</th>
                    <th class="col-md-3">年龄</th>
                    <th class="col-md-3">操作</th>
                </tr>
            </thead>
            <tbody class="tbody">
                <tr class="row" id="tbody-tr">
                    <td class="col-md-3">1</td>
                    <td class="col-md-3">tom</td>
                    <td class="col-md-3">18</td>
                    <td class="col-md-3"><button class="btn add">添加</button>&nbsp;<button class="btn delete">删除</button></td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        var row = 1
        $('.add').click(function () {
            $('.tbody').append($(this).parent().parent().clone(true))
            row++
        })
        $('.delete').click(function () {
            if(row === 1) {
                alert('别删了，再删就没了！')
                return
            }
            $(this).parent().parent().empty()
            row--
        })
    </script>
</body>
</html>