标签操作

样式操作

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>

jQuery其他操作与bootstrap框架的更多相关文章

  1. jQuery操作标签，jQuery事件操作，jQuery动画效果，前端框架

    jQuery操作标签 jQuery代码查找标签绑定的变量名推荐使用 $xxxEle 样式类操作 addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类 ...

  2. python操作三大主流数据库(4)python操作mysql④python服务端flask和前端bootstrap框架结合实现新闻展示

    python操作mysql④python服务端flask和前端bootstrap框架结合实现新闻展示 参考文档http://flask.pocoo.org/docs/0.11/http://flask ...

  3. Sublime text代码补全插件(支持Javascript、JQuery、Bootstrap框架)

    Sublime text代码补全插件(支持Javascript.JQuery.Bootstrap框架)   插件名称:javascript-API-Completions 支持Javascript.J ...

  4. Web前端学习笔记：Bootstrap框架

    很久之前就有很多人给我推荐twitter的Bootstrap框架,但是直到前几天我才真正学习了下Bootstrap,的确是相当棒的框架,至少从视觉体验上超越了很多以前碰到了前端UI框架.今天我要聊聊B ...

  5. Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单

    一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...

  6. Bootstrap框架(基础篇)

    本文引用慕课网http://www.imooc.com/learn/141  作者大漠  讲的很详细,我没有全篇都引用,其中很多是添加了自己的一些理解. Bootstrap框架是基于JQuery 所以 ...

  7. python全栈开发day51-jquery插件、@media媒体查询、移动端单位、Bootstrap框架

    一.昨日内容回顾 技术行业 (1)ajax技术 XMLHttpRequest() <1>创建XMLHttpRequest()对象 <2>检测状态(通过readyState的改变 ...

  8. Bootstrap 框架、插件

    Bootstrap,前端工程师比较常用的框架.插件,根据它的定义,我们不妨这样理解,Bootstrap就是用于前端开发的一个模板,就是别人做好了我们直接可以搬过来直接使用或者根据自己需要略加修改设计自 ...

  9. 如何使用bootstrap框架

    Bootstrap是前端工程师比较常用的框架.插件,根据它的定义,Bootstrap就是用于前端开发的一个模板,就是别人做好了我们直接可以搬过来直接使用或者根据自己需要略加修改设计自己的页面效果的成品 ...

随机推荐

  1. 让IE兼容background-size的方法_background-size ie下使用

    ie6,ie7,ie8下对css background-size并不支持,那么如何在ie下兼容background-size呢?在ie下把图片完整的居中显示在一定范围内在css中添加如下代码: fil ...

  2. 手把手教你打造一个纯CSS图标库

    来,干了这碗安利 写这篇文章的目的其实就是为了安利一下我的图标库:iconoo,所以,开门见山,star吧少年少妇们!(这样的我是不是应该要加个github互粉的团伙了?) 主题说完了,下面进入正题. ...

  3. C# 委托专题

    单播委托:一个委托只指向一个方法: 多播委托:一个委托指向多个方法,形成一个方法链: Main是静态方法,里面只能引用静态方法,而不能引用实例方法: Main可以进行类的实例化,然后引用实例化后的方法 ...

  4. 使用vue-cli构建工具构建vue项目时候组件的使用

    <template> <div class="contains"> <!-- <div class="main"> & ...

  5. 底部footer挡住上面内容的bug

    当设置底部footer的样式为: .footer{ position: fixed; height: 49px; bottom: 0; background: #fff; } 这样会挡住上面的内容,修 ...

  6. 使用pyttsx3实现简单tts服务

    操作系统:Windows 10_x64 python版本:Python 3.9.2_x64 pyttsx3版本: 2.90   pyttsx3是一个tts引擎包装器,可对接SAPI5.NSSS(NSS ...

  7. SpringBoot2.x修改Redis序列化方式

    添加一个配置类即可: /** * @Author FengZeng * @Date 2022-03-22 13:43 * @Description TODO */ @Configuration pub ...

  8. c++对c的拓展_指针的引用

    套用引用公式:Type & ref =val; 假设:type 类型为int * 由公式得 int * & ref = val; // int * *const ref=&va ...

  9. Python-术语对照表

    >>> 交互式终端中默认的 Python 提示符.往往会显示于能以交互方式在解释器里执行的样例代码之前. ... 具有以下含义: 交互式终端中输入特殊代码行时默认的 Python 提 ...

  10. 在线操作word和在线预览查找的资料记录

    在线操作word和在线预览查找的资料记录 在线操作word查找的资料记录 富文本操作 http://fex.baidu.com/ueditor/ 控件类 通过 js 调用控件操作 word 文档 1. ...