jQuery介绍
jQuery是一个快速，小巧，功能丰富的JavaScript库。它带有大量的易于使用的API，使得HTML文档遍历和操作，事件处理，动画和Ajax更加简单。
另外，它只是封装了js的DOM的操作和ajax，其它的未封装，所以js是包含jQuery的。使用jQuery，可以更加方便的操作DOM。
jQuery兼容多个浏览器的，你在使用jQuery的时候就不需要考虑浏览器兼容问题。
jQuery的宗旨是：write less, do more
使用jQuery可以做很多事情，比如：
选择器、筛选器、样式操作、文本操作、属性操作、文档处理、事件、动画、插件
each、data、Ajax(重点 django部分学)
jQuery是js的一个库，这类似Python中的模块，使用jQuery之前需要先导入jQuery。
jQuery导入方式
目前jQuery的主要使用版本是：3.4、3.5
第一种方式：本地文件导入
其实，jQuery本质上就是一个js文件，我们从官网https://jquery.com/download/下载该文件后，在我们的HTML代码中，通过script标签的src属性引入即可
补充：jQuery文件我们一般使用两种：压缩版（.min.js结尾）和不压缩版（.js结尾）。压缩版主要用在线上生产环境；不要主要在实际项目开发中。
第二种方式：jquery的CDN服务
CDN（Content Delivery Network）直接翻译：内容分发网络。其实就是将一个地方的网络资源分布在不同的网络位置，这样当用户请求资源时，就可以就近获取资源，节省时间。
CDN有免费的也有付费的服务。使用CND引入的方式必须保证当前计算机有网络。
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script> // 前端免费的cdn网站:bootcdn
jQuery基本语法
jQuery(选择器).action() # 可以简写如下
$(选择器).action()
jQuery与原生js对比
// eg:将p标签内部的文本颜色改为红色
// 原生js代码操作标签
let pEle = document.getElementById('d1')
pEle.style.color = 'red'
// jQuery操作标签
$('p').css('color','blue')
补充：
jQuery对象在保存名字时，规范命名方式：$pEle
标签对象和jQuery对象
掌握两点：（区别标签对象和jQuery对象；两者之间的转换）
- jQuery对象通过索引值为0的值就是标签对象
- 标签对象套一个$就是jQuery对象
$('#d1')[0] // jQuery对象 ----> 标签对象 <div id="d1"> … </div> document.getElementById('d1') <div id="d1"> … </div> $(document.getElementById('d1')) // 标签对象 ----> jQuery对象 w.fn.init [div#d1]
查找标签
基本选择器
类似CSS的基本选择器：id选择器、class选择器、标签选择器
$('#d1') // id选择器， w.fn.init [div#d1]0: div#d1length: 1__proto__: Object(0) $('.c1') // class选择器 $('span') // 标签选择器 $('*') // 所有的
// id选择器 $('#d1') w.fn.init [div#d1]0: div#d1length: 1__proto__: Object(0) // class选择器 $('.c1') w.fn.init [p.c1, prevObject: w.fn.init(1)]0: p.c1length: 1prevObject: w.fn.init [document]__proto__: Object(0) // 标签选择器 $('span') w.fn.init(3) [span, span, span, prevObject: w.fn.init(1)] """一定要区分开(重点)""" // jQuery对象如何变成标签对象 undefined $('#d1')[0] <div id="d1">…</div> document.getElementById('d1') <div id="d1">…</div> // 标签对象如何转jQuery对象 undefined $(document.getElementById('d1')) w.fn.init [div#d1]
层级选择器/分组嵌套
层级选择器，或者说是组合选择器。个人感觉层级选择器的叫法更加见名知其意。
类似CSS的层级选择器和分组选择器
$('div span') // 后代 空格 $('div>span') // 儿子，> $('div+span') // 毗邻, + $('div~span') // 弟弟, ~ $('#d1, .c1,p') // 选择多个,逗号分割 $('div#d1') // w.fn.init [div#d1, prevObject: w.fn.init(1)]，同时满足条件的 $('div.c1')
$('div') w.fn.init(2) [div#d1, div.c1, prevObject: w.fn.init(1)] $('div.c1') w.fn.init [div.c1, prevObject: w.fn.init(1)]0: div.c1length: 1prevObject: w.fn.init [document]__proto__: Object(0) $('div#d1') w.fn.init [div#d1, prevObject: w.fn.init(1)] $('*') w.fn.init(19) [html, head, meta, title, meta, link, script, script, body, span, span, div#d1, span, p#d2, span, span, div.c1, span, span, prevObject: w.fn.init(1)] $('#d1,.c1,p') # 并列+混用 w.fn.init(3) [div#d1, p#d2, div.c1, prevObject: w.fn.init(1)] $('div span') # 后代 w.fn.init(3) [span, span, span, prevObject: w.fn.init(1)] $('div>span') # 儿子 w.fn.init(2) [span, span, prevObject: w.fn.init(1)] $('div+span') # 毗邻 w.fn.init [span, prevObject: w.fn.init(1)] $('div~span') # 弟弟 w.fn.init(2) [span, span, prevObject: w.fn.init(1)]
属性选择器
类似CSS的属性选择器，[]
$('[username]') $('[username="the3times"]') $('input[username="the3times"]') $('[type]') $('input[type="text"]')
基本筛选器
$('ul li') // 后代选择器， ul下面所有的li $('ul li:first') // 大儿子, ul的第一个li $('ul li:last') // 小儿子, ul的最后一个li $('ul li:eq(2)') // 索引值等于，某个值的li $('ul li:gt(2)') // 索引值大于，某个值的li $('ul li:lt(2)') // 索引值小于，某个值的li $('ul li:even') // 偶数索引的li(包含0) $('ul li:odd') // 奇数索引的li $('ul li:not("#d1")') // 获取排除id是d1的所有li $('div:has("p")') // 获取有子标签，且子标签中有是p标签的div
表单筛选器
仅用在form表单标签内的那些标签上，如：input、select、textarea标签
$('input[type="text"]') $('input[type="password"]') // 完整的选择器写法 $(':text') //简化的写法 $(':password') // 下面这些都是简化后的方式 :text :password :file :radio :checkbox :submit :reset :button ...
除了input的type属性可以简化，其他的表单属性也可以有类似的简化写法。
:enabled :disabled :checked // $(':checked') :selected
特殊情况：
- checked的简化写法不仅获取input还获取option
- selected的简化写法只获取option
- 如果使用checked获取input时，手动添加限制条件：$('input:checked')
$(':checked') # 将checked和selected都拿到 w.fn.init(2) [input, option, prevObject: w.fn.init(1)]0: input1: optionlength: 2prevObject: w.fn.init [document]__proto__: Object(0) $(':selected') w.fn.init [option, prevObject: w.fn.init(1)] $('input:checked') # 自己加一个限制条件 w.fn.init [input, prevObject: w.fn.init(1)]
筛选器方法
筛选器方法，其实和上述选择器的目的一样，区别在于它是通过某一个基准jQuery象的内置方法，来定位其他的jQuery对象。
定位同层级的jQuery对象
$('#d1').next() // 同层级下面一个 $('#d1').nextAll() // 同层级下面所有的 $('#d1').nextUntil('.c1') // 同级别下面的所有，直到指定对象之前的（不包括指定的对象） $('.c1').prev() // 类似，同层级上面一个 $('.c1').prevAll() $('.c1').prevUntil('#d2') $('#d2').siblings() // 同级别上下所有
定位不同层级的jQuery对象
$('#d3').parent() // 第一级父标签，可以链式找到document $('#d3').parent().parent() // 链式 $('#d3').parents() // 所有的父级标签，直到html $('#d3').parentsUntil('body') // body标签以下的父级标签 $('#d2').children() // 所有的子标签
其他
$('div').find('p') // 等价于 $('div p'), 找div里面的p标签 $('div span').first() // 等价于 $('div span:first')，找第一个span $('div span').last() // 找最后一个span $('div span').not('#d3') // 等价于 $('div span:not("#d3")'), 排除id是d3的所有div中的span标签 $('div span').hasClass('C1') // 返回布尔值 true/false
jQuery练习题
题目
<!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>jQuery选择器筛选器练习</title> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <style> .my-padding { padding: 10px 0; } .my-dark { background-color: #f5f5f5; } .footer { background: #111; font-size: 0.9em; position: relative; clear: both; } .my-white { color: #ffffff; } body { margin: 0; } #progress { height: 2px; background-color: #b91f1f; transition: opacity 500ms linear; } #progress.done{ opacity: 0; } </style> </head> <body> <div id="progress"></div> <!--导航栏开始--> <nav class="navbar navbar-inverse my-nav"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="http://www.oldboyedu.com/"><strong>OldBoy Edu</strong></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="#">Python学院<span class="sr-only">(current)</span></a></li> <li><a href="#">Linux学院</a></li> <li><a href="http://luffy.oldboyedu.com">路飞学城</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">好好学习</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">联系我们<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Jason</a></li> <li><a href="#">Sean</a></li> <li><a href="#">Oscar</a></li> <li role="separator" class="divider"></li> <li><a href="#">Jason</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <!--导航栏结束--> <div class="container"> <div class="jumbotron"> <div id="i1" class="container"> <h1 class="c1">Jason</h1> <h1 class="c1">带你学习jQuery</h1> <p id="p1"><a class="btn btn-primary btn-lg" href="https://q1mi.github.io/Blog/2017/07/10/about_jQuery/" role="button">查看更多</a></p></div> </div> <hr> <div class="row"> <div class="col-md-12"> <table class="table table-bordered table-striped"> <thead> <tr> <th>#</th> <th>姓名</th> <th>爱好</th> <th>操作</th> </tr> </thead> <tbody> <tr> <th>1</th> <td>Jason</td> <td>学习</td> <td> <button class="btn btn-warning">编辑</button> <button class="btn btn-danger">删除</button> </td> </tr> <tr> <th>2</th> <td>Oscar</td> <td>大饼</td> <td> <button class="btn btn-warning">编辑</button> <button class="btn btn-danger">删除</button> </td> </tr> <tr id="tr3"> <th>3</th> <td>Egon</td> <td>吹牛逼</td> <td> <button class="btn btn-warning">编辑</button> <button class="btn btn-danger">删除</button> </td> </tr> </tbody> </table> </div> </div> <hr> <div class="row"> <div class="col-md-12"> <form id="f1"> <div class="form-group"> <label for="exampleInputEmail1">邮箱</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> <div class="form-group"> <label for="exampleInputPassword1">密码</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputFile">上传头像</label> <input type="file" id="exampleInputFile"> <p class="help-block">只支持img格式。</p> </div> <button id="btnSubmit" type="submit" class="btn btn-default">提交</button> </form> </div> </div> <hr> <div class="row"> <div class="col-md-12"> <div class="checkbox-wrapper"> <div class="panel panel-info"> <div class="panel-heading">jQuery学习指南</div> <div id="my-checkbox" class="panel-body"> <div class="checkbox"> <label> <input type="checkbox" value="0"> jQuery一点都不难 </label> </div> <div class="checkbox"> <label> <input type="checkbox" value="1" checked> jQuery一学就会 </label> </div> <div class="checkbox"> <label> <input type="checkbox" value="2"> jQuery就要多练 </label> </div> <div class="checkbox"> <label> <input type="checkbox" value="3" disabled> jQuery学不好 </label> </div> </div> </div> </div> <hr> <div class="radio-wrapper"> <div class="panel panel-info"> <div class="panel-heading">我来老男孩之后...</div> <div class="panel-body"> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 我的心中只有学习 </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> 学习真的太TM有意思了 </label> </div> </div> </div> </div> </div> </div> <hr> <div> <i class="fa fa-hand-pointer-o fa-lg fa-rotate-90" aria-hidden="true"></i> <a class="btn btn-success" href="http://jquery.cuishifeng.cn/">jQuery中文API指南</a> </div> <hr> <div class="row"> <div class="col-md-12"> <h2>练习题：</h2> <ol id="o1"> <li>找到本页面中id是<code>i1</code>的标签</li> <li>找到本页面中所有的<code>h2</code>标签</li> <li>找到本页面中所有的<code>input</code>标签</li> <li>找到本页面所有样式类中有<code>c1</code>的标签</li> <li>找到本页面所有样式类中有<code>btn-default</code>的标签</li> <li>找到本页面所有样式类中有<code>c1</code>的标签和所有<code>h2</code>标签</li> <li>找到本页面所有样式类中有<code>c1</code>的标签和id是<code>p3</code>的标签</li> <li>找到本页面所有样式类中有<code>c1</code>的标签和所有样式类中有<code>btn</code>的标签</li> <p id="p2" class="divider"></p> <li>找到本页面中<code>form</code>标签中的所有<code>input</code>标签</li> <li>找到本页面中被包裹在<code>label</code>标签内的<code>input</code>标签</li> <li>找到本页面中紧挨在<code>label</code>标签后面的<code>input</code>标签</li> <li>找到本页面中id为<code>p2</code>的标签后面所有和它同级的<code>li</code>标签</li> <p id="p3" class="divider"></p> <li>找到id值为<code>f1</code>的标签内部的第一个input标签</li> <li>找到id值为<code>my-checkbox</code>的标签内部最后一个input标签</li> <li>找到id值为<code>my-checkbox</code>的标签内部没有被选中的那个input标签</li> <li>找到所有含有<code>input</code>标签的<code>label</code>标签</li> </ol> </div> </div> </div> <div class="my-dark my-padding"> <div class="container"> <div class="col-sm-8 my-center"> <p>写很少的代码，做很多的事。</p> <h4>所以说</h4> <p>学好jQuery真的很重要，学好jQuery真的很重要，学好jQuery真的很重要。</p> </div> </div> </div> <div class="footer"> <div class="row"> <div class="col-md-12 text-center"> <span class="my-white">©2020 Jason</span> </div> </div> </div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
答案
$('#i1') r.fn.init [div#i1.container] $('h2') r.fn.init [h2, prevObject: r.fn.init(1)] $('input') r.fn.init(9) [input#exampleInputEmail1.form-control, input#exampleInputPassword1.form-control, input#exampleInputFile, input, input, input, input, input#optionsRadios1, input#optionsRadios2, prevObject: r.fn.init(1)] $('.c1') r.fn.init(2) [h1.c1, h1.c1, prevObject: r.fn.init(1)] $('.btn-default') r.fn.init [button#btnSubmit.btn.btn-default, prevObject: r.fn.init(1)] $('.c1,h2') r.fn.init(3) [h1.c1, h1.c1, h2, prevObject: r.fn.init(1)] $('.c1,#p3') r.fn.init(3) [h1.c1, h1.c1, p#p3.divider, prevObject: r.fn.init(1)] $('.c1,.btn') r.fn.init(11) [h1.c1, h1.c1, a.btn.btn-primary.btn-lg, button.btn.btn-warning, button.btn.btn-danger, button.btn.btn-warning, button.btn.btn-danger, button.btn.btn-warning, button.btn.btn-danger, button#btnSubmit.btn.btn-default, a.btn.btn-success, prevObject: r.fn.init(1)] $('form').find('input') r.fn.init(3) [input#exampleInputEmail1.form-control, input#exampleInputPassword1.form-control, input#exampleInputFile, prevObject: r.fn.init(1)] $('label input') r.fn.init(6) [input, input, input, input, input#optionsRadios1, input#optionsRadios2, prevObject: r.fn.init(1)] $('label+input') r.fn.init(3) [input#exampleInputEmail1.form-control, input#exampleInputPassword1.form-control, input#exampleInputFile, prevObject: r.fn.init(1)] $('#p2~li') r.fn.init(8) [li, li, li, li, li, li, li, li, prevObject: r.fn.init(1)] $('#f1 input:first') r.fn.init [input#exampleInputEmail1.form-control, prevObject: r.fn.init(1)] $('#my-checkbox input:last') r.fn.init [input, prevObject: r.fn.init(1)] $('#my-checkbox input[checked!="checked"]') r.fn.init(3) [input, input, input, prevObject: r.fn.init(1)]0: input1: input2: inputlength: 3prevObject: r.fn.init [document]__proto__: Object(0) $('label:has("input")') r.fn.init(6) [label, label, label, label, label, label, prevObject: r.fn.init(1)]
标签操作
标签操作的范围包括：标签CSS样式、类属性的增删改查、窗口位置、标签尺寸相关、标签本文内容的增删改查、input数据值、属性相关、标签节点的增删改查等。
类的操作
addClass(name)
removeClass(name)
hasClass(name) // 判断是否有class，返回不布尔值
toggleClass(name)
CSS操作
jQuery具有非常强大的链式操作，即每次调用jquery对象的方法后，依然会返回当前jQuery对象，可以继续调用对象的方法。
$('p#d1').css('color', 'red')
位置操作
位置操作的内容主要是获取浏览器窗口页面的滚动位置、标签相对位置等。
offset() // 相对浏览器窗口，x,y方向偏移量
position() // 相对父级标签，x,y方向偏移量
$(window).scrollTop() // 获取当前浏览器窗口顶部位置
$(window).scrollTop(300) // 设置当前浏览器窗口顶部位置
scrollLeft() // 浏览器窗口左右位置
尺寸操作
尺寸操作，主要包括标签的三个尺寸参数：文本的宽高、文本+内填充的宽高、文本+内填充+边框的宽高。
$('p').height() // 文本宽高
$('p').weight()
$('p').innerHeight() // 文本+padding
$('p').innerWidth()
$('p').outerHeight() // 文本+padding+border
$('p').outerWidth()
文本操作
文本操作，获取标签内的文本内容，设置修改标签内文本内容。括号内传参是设置，不传参是获取文本。
$('p').text() // 类似js的innerText
$('p').html() // 类似js的innerHTML
input值
$(':text').val() // 获取input输入框内用户输入的value值,当存在多个输入框时获取第一个的value值
$(':file')[0].files[0] // 获取第一个文件输入框内的第一个文件对象
属性操作
js中 jQuery
setAttribute() attr(name,value)
getAttribute() attr(name)
removeAttribute() removeAttr(name)
标签属性的增删改查操作
attr(name) // 获取jquery对象的标签属性值
attr(name, value) // 修改，增加对象属性及属性值
removeAttr(name) // 移除对象的某个属性
// 为对象设置属性
$pEle.attr('class','c1');
/
使用prop()查看是否被选中，针对用户选择的标签，checkbox、radio、option，返回布尔值。
$('#d2').prop('checked') // 查看
false
$('#d3').prop('checked', true) // 设置
w.fn.init [input#d3]
标签节点操作
在标签节点中，手动增加新节点、或删除老节点。
标签$('<p>') // 创建p
$('#d1').append($pEle) // $('#d1')尾部追加节点pEle
$pEle.appendTo($('#d1')) // pEle追加到节点$('#d1')的尾部
prepend() // 头部添加
prependTo()
after() // 标签后面插入
insertAfter()
before() // 标签前面插入
insertBefore()
$('#d1').remove() // 将标签从DOM树中删除
$('#d1').empty() // 清空标签内部所有的内容
事件
jQuery绑定事件的两种方式：
// 第一种
$('#d1').click(function () {
alert('别说话 吻我')
});
// 第二种(功能更加强大 还支持事件委托)
$('#d2').on('click',function () {
alert('借我钱买草莓 后面还你')
})
this对象
jquery中的this对象：当前被操作的标签对象，通过$(this)转成jquery对象。
clone事件（克隆事件）
clone()方法默认情况下只克隆html和css不克隆事件，括号内使用true可以克隆事件。
<button id="d1">屠龙宝刀，点击就送</button> <script> $('#d1').on('click',function () { // console.log(this) // this指代是当前被操作的标签对象 // $(this).clone().insertAfter($('body')) // clone默认情况下只克隆html和css 不克隆事件 $(this).clone(true).insertAfter($('body')) // 括号内加true即可克隆事件 }) </script>
左侧菜单
<script> $('.title').click(function () { // 先给所有的items加hide $('.items').addClass('hide') // 然后将被点击标签内部的hide移除 $(this).children().removeClass('hide') }) </script> <!--尝试用一行代码搞定上面的操作-->
回到顶部：scroll
<script> $(window).scroll(function () { if($(window).scrollTop() > 300){ $('#d1').removeClass('hide') }else{ $('#d1').addClass('hide') } }) </script>
自定义登录校验focus事件
# 在获取用户的用户名和密码的时候 用户如果没有填写 应该给用户展示提示信息 <p>username: <input type="text" id="username"> <span style="color: red"></span> </p> <p>password: <input type="text" id="password"> <span style="color: red"></span> </p> <button id="d1">提交</button> <script> let $userName = $('#username') let $passWord = $('#password') $('#d1').click(function () { // 获取用户输入的用户名和密码 做校验 let userName = $userName.val() let passWord = $passWord.val() if (!userName){ $userName.next().text("用户名不能为空") } if (!passWord){ $passWord.next().text('密码不能为空') } }) $('input').focus(function () { $(this).next().text('') }) </script>
input事件：实时监控
<input type="text" id="d1"> <script> $('#d1').on('input',function () { console.log(this.value) }) </script>
<!DOCTYPE html> <html lang="en"> <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>实时监听input输入值变化</title> </head> <body> <input type="text" id="i1"> <script src="jquery-3.2.1.min.js"></script> <script> /* * oninput是HTML5的标准事件 * 能够检测textarea,input:text,input:password和input:search这几个元素的内容变化， * 在内容修改后立即被触发，不像onchange事件需要失去焦点才触发 * oninput事件在IE9以下版本不支持，需要使用IE特有的onpropertychange事件替代 * 使用jQuery库的话直接使用on同时绑定这两个事件即可。 * */ $("#i1").on("input propertychange", function () { alert($(this).val()); }) </script> </body> </html> input值变化事件
hover事件：鼠标悬浮
hover包含两个事件：进入悬浮和离开；当hover内只有只有一个函数时，两次事件都执行该函数，有两个函数时分别执行。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>苍茫的天涯是我的哎，绵绵的青山脚下一片海！</p> <script src="jQuery-3.3.1.js"> </script> <script> $('p').hover( function () { alert('来啦，老弟') }, function () { alert('慢走哦～') } ) </script> </body> </html>
键盘按键按下事件
keydown和keyup事件组合示例：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <table border="1"> <thead> <tr> <th>#</th> <th>姓名</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td>Egon</td> <td> <select> <option value="1">上线</option> <option value="2">下线</option> <option value="3">停职</option> </select> </td> </tr> <tr> <td><input type="checkbox"></td> <td>Alex</td> <td> <select> <option value="1">上线</option> <option value="2">下线</option> <option value="3">停职</option> </select> </td> </tr> <tr> <td><input type="checkbox"></td> <td>Yuan</td> <td> <select> <option value="1">上线</option> <option value="2">下线</option> <option value="3">停职</option> </select> </td> </tr> <tr> <td><input type="checkbox"></td> <td>EvaJ</td> <td> <select> <option value="1">上线</option> <option value="2">下线</option> <option value="3">停职</option> </select> </td> </tr> <tr> <td><input type="checkbox"></td> <td>Gold</td> <td> <select> <option value="1">上线</option> <option value="2">下线</option> <option value="3">停职</option> </select> </td> </tr> </tbody> </table> <input type="button" id="b1" value="全选"> <input type="button" id="b2" value="取消"> <input type="button" id="b3" value="反选"> <script src="jquery-3.3.1.js"></script> <script> var flag = false; // shift按键被按下的时候 $(window).keydown(function (event) { console.log(event.keyCode); if (event.keyCode === 16){ flag = true; } }); // shift按键被抬起的时候 $(window).keyup(function (event) { console.log(event.keyCode); if (event.keyCode === 16){ flag = false; } }); // select标签的值发生变化的时候 $("select").change(function (event) { // 如果shift按键被按下，就进入批量编辑模式 // shift按键对应的code是16 // 判断当前select这一行是否被选中 console.log($(this).parent().siblings().first().find(":checkbox")); var isChecked = $(this).parent().siblings().first().find(":checkbox").prop("checked"); console.log(isChecked); if (flag && isChecked) { // 进入批量编辑模式 // 1. 取到当前select选中的值 var value = $(this).val(); // 2. 给其他被选中行的select设置成和我一样的值 // 2.1 找到那些被选中行的select var $select = $("input:checked").parent().parent().find("select") // 2.2 给选中的select赋值 $select.val(value); } }); </script> </body> </html>
阻止后续事件
一个事件源绑定多个事件时，可以通过手动终止的方式，阻止后续默认的其他事件触发。
<script> $('#d2').click(function (e) { $('#d1').text('宝贝 你能看到我吗?') // return false; // 阻止标签后续事件的执行 方式1 e.preventDefault() // 阻止标签后续事件的执行 方式2 }) </script>
阻止事件冒泡（冒泡事件）
子标签和父标签绑定了一个相同的事件，子标签的事件触发后会进而触发父标签的事件，有两种方式阻止这种事件冒泡行为。
<script> $('#d1').click(function () { alert('div') }) $('#d2').click(function () { alert('p') }) $('#d3').click(function (e) { alert('span') // 阻止事件冒泡的方式1 （常用方式） // return false // 阻止事件冒泡的方式2 // e.stopPropagation() }) </script>
事件委托
需求：普通情况下，给页面上已经存在的标签绑定的事件无法作用在，后来新增的同类标签。也就是说，给页面上所有的button标签绑定一个click事件，只有当前页面上已经存在的button标签才有click事件，后来再通过js动态添加的button标签无法获得这个click事件。
解决办法：事件委托。可以这样理解：将事件交给一个角色来处理，而不是具体的人。换句话说，将指定的任务交给这个岗位上的员工处理，而不是具体的员工A或者员工B。
<button>是兄弟，就来砍我!!!</button> <script> // 给页面上所有的button标签绑定点击事件 // $('button').click(function () { // 无法影响到动态创建的标签 // alert(123) // }) // 事件委托 $('body').on('click','button',function () { alert(123) // 在指定的范围内 将事件委托给某个标签 无论该标签是事先写好的还是后面动态创建的 }) </script>
页面加载
# 等待页面加载完毕再执行代码
window.onload = function(){
// js代码
}
"""jQuery中等待页面加载完毕"""
# 第一种
$(document).ready(function(){
// js代码
})
# 第二种
$(function(){
// js代码
})
# 第三种
"""直接写在body内部最下方"""
动画效果
$('#d1').hide(5000) // 5s内隐藏
$('#d1').show(5000) // 显示
$('#d1').slideUp(5000) // 上翻
$('#d1').slideDown(5000) // 下翻
$('#d1').fadeOut(5000) // 淡出
$('#d1').fadeIn(5000) // 淡入
$('#d1').fadeTo(5000,0.4) // 淡出到...
补充：
each（）
each(),封装了for循环的功能
# each()， 循环处理每个子元素
// 方式1，类似对象调用自己的绑定方法，可以接收两个参数，
$('div').each(function(index, obj){console.log(index,obj)})
# 方式2， 类似类调用对象的绑定方法，需要传一个对象
$.each([111,222,333], function(index, obj){console.log(index,obj)})
# 第一种方式 $('div') w.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)] $('div').each(function(index){console.log(index)}) VM181:1 0 VM181:1 1 VM181:1 2 VM181:1 3 VM181:1 4 VM181:1 5 VM181:1 6 VM181:1 7 VM181:1 8 VM181:1 9 $('div').each(function(index,obj){console.log(index,obj)}) VM243:1 0 <div>1</div> VM243:1 1 <div>2</div> VM243:1 2 <div>3</div> VM243:1 3 <div>4</div> VM243:1 4 <div>5</div> VM243:1 5 <div>6</div> VM243:1 6 <div>7</div> VM243:1 7 <div>8</div> VM243:1 8 <div>9</div> VM243:1 9 <div>10</div> # 第二种方式 $.each([111,222,333],function(index,obj){console.log(index,obj)}) VM484:1 0 111 VM484:1 1 222 VM484:1 2 333 (3) [111, 222, 333] """ 有了each之后 就无需自己写for循环了 用它更加的方便 """
data（）
data(),能够让标签帮我们存储数据，并且用户肉眼看不见（不会加到html上）
# data， 给每个子元素添加属性（对用户隐藏的）
$('div').data(attr_name, attr_value) // 添加
$('div').first().removeData(attr_name) // 移除
"""
能够让标签帮我们存储数据 并且用户肉眼看不见
"""
$('div').data('info','回来吧，我原谅你了!')
w.fn.init(10) [div#d1, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]
$('div').first().data('info')
"回来吧，我原谅你了!"
$('div').last().data('info')
"回来吧，我原谅你了!"
$('div').first().data('xxx')
undefined
$('div').first().removeData('info')
w.fn.init [div#d1, prevObject: w.fn.init(10)]
$('div').first().data('info')
undefined
$('div').last().data('info')
"回来吧，我原谅你了!"
jQuery选择器转换JavaScript对象（补充）
获取jQuery选择器对象，并绑定点击事件
$('#btn').click(function () {
console.log(this.value);
});
用jQuery方式获取JavaScript对象，并绑定点击事件（两种方式）
$('#btn') 对象转换为js对象：
1. $('#btn')[0]
2.$('#btn').get(0)
如：
// 方式一
$('#btn')[0].onclick=function () {
console.log(this.value);
};
// 方式二
$('#btn').get(0).onclick=function () {
console.log(this.value);
}
jQuery对象转成DOM对象：
两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index);
(1)jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。
如：
var $v =$("#v") ; //jQuery对象
var v=$v[0]; //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
(2)jQuery本身提供，通过.get(index)方法，得到相应的DOM对象
如：
var $v=$("#v"); //jQuery对象
var v=$v.get(0); //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
DOM对象转成jQuery对象:
对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象)
如：
var v=document.getElementById("v"); //DOM对象
var $v=$(v); //jQuery对象