标签操作

样式操作

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. SCSS学习笔记（一）

    SCSS的由来 SCSS就是加强版的CSS,要讲SCSS那就一定要从SASS讲起 SASS Sass(英文全称:Syntactically Awesome Stylesheets)是一个最初由Hamp ...

  2. 面试题：给你个id，去拿到name，多叉树遍历

    前天面试遇到一个多叉树面试的题目,在这里分享记录一下. 题目:一个树形的数据(如下数据),面试官给你一个id,然后拿到对应的name? 数据结构大概是这个样子 var cityData = [ { i ...

  3. 小程序生成海报demo

    效果图: <view class='poste_box' id='canvas-container' style="margin:0 auto;border-radius:16rpx; ...

  4. Java---基本程序结构

    一个完整的Java程序: /** * 文档注释 * * @author wind8 * */ public class Hello { /** * @param args */ public stat ...

  5. Solon 1.6.36 发布，更现代感的应用开发框架

    相对于 Spring Boot 和 Spring Cloud 的项目 启动快 5 - 10 倍 qps 高 2- 3 倍 运行时内存节省 1/3 ~ 1/2 打包可以缩小到 1/2 ~ 1/10(比如 ...

  6. MySQL入门学习day3随笔2

    用户创建及权限部分 1 create user Cra2iTeT identified by '123456'-- 创建用户 2 3 alter user 'Cra2iTeT'@'%' identif ...

  7. 省掉80%配置时间，这款Mock神器免费又好用

    前端的痛苦 作为前端,最痛苦的是什么时候? 每个迭代,需求文档跟设计稿都出来了,静态页面唰唰两天就做完了.可是做前端又不是简单地把后端吐出来的数据放到页面上就完了,还有各种前端处理逻辑啊. 后端接口还 ...

  8. MDL锁

    mdl锁的主要作用是用来维护表元数据的一致性.在表上有活动事务的时候,不可以对表元数据进行修改操作. 如果没有MDL锁的保护,那么session2可以直接执行,并导致session1出错. MDL锁是 ...

  9. 记一次docker安装成功，启动失败的原因

    问题 按照错误提示,先查看docker的状态: systemctl status docker 可以看到,非常明显的一行大红字:Failed to start Docker Application C ...

  10. Service vs Factory vs provider的迷惑

    刚开始我很迷惑的,但是经过一段时间的项目,还有看大漠老师的东西,似乎明白了,他们的区别也就是  一个人喜欢吃面还是吃饭或者肯德基区别.目的就是填饱肚子! 以下是它们在AngularJS源代码中的定义: ...