jQuery
简介
jQuery是一个可以简单方便实现DOM操作的工具，是一个类库，类似于Python中的模块
功能：通过jQuery方法对HTML文档进行一系列的操作。
jQuery版本
1、1.xx的版兼容IE678，官方只做BUG维护，功能不再新增。最终版本：1.12.4 (2016年5月20日)
2、2.xx版本不兼容IE678，官方只做BUG维护，功能不再新增。
3、3.xx版本不兼容IE678，只支持最新的浏览器。并且很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。
4、压缩版（mini,js）与未压缩版本的功能一致，区别只在于文件大小
jQuery基础语法
jQuery变量的声明通常需要在变量名之前加$，让人知道该变量是jQuery对象。
jQuery对象
jQuery对象是通过jQuery包装DOM对象后产生的对象，它具有自己独有的方法。
jQuery对象与DOM对象可以相互转换，转换之后可以使用对方的对象方法对HTML进行操作。
查找标签方法
$().()等同于jQuery().()
标签选择器
#id选择器 $("#ID值"); #标签选择器 $('tagName'); #class类选择器 $('.className') #交集选择器,选择两个条件同时成立的标签 $('div.c1')#选择class=c1的div标签 #并集选择器，选择满足以下条件中任意一个的所有标签 $('#d,.c1,p')#选择id=d的标签，具有class=c1的标签，标签是p的标签。 #所有元素选择器 $('*')#选择所有的标签
层级选择器
#后代选择器 $('a b');#处于a标签级别下的所有b标签，用空格分开。 #子类选择器 $('a>b');#处于a标签级别下一级别的所有b标签。 #毗邻单一弟弟选择器 $('a+b');#与a标签同一级别的紧挨着a标签的b标签。 #毗邻多个弟弟选择器 $('a~b');#与a标签同一级别的位于a标签之后的所有b标签。
基本筛选器
<div class="c1"> <a href=""></a> <p class="c2"></p> <p class="c3"></p> <div class="c4"></div> <p class="c5"></p> </div> <div class="c6"> <a href=""></a> <a href=""></a> </div> #查找满足条件的第一个 $('div>p:first'); #找出div标签子集中的第一个p标签, #jQuery.fn.init [p.c2, prevObject: jQuery.fn.init(1)] #查找满足条件的最后一个 $('div>p:last'); #找出div标签子集中最后一个p标签 #jQuery.fn.init [p.c5, prevObject: jQuery.fn.init(1)] #查找索引号为指定数字的元素 $('div>p:eq(2)'); #找出div标签子集中的第三个p标签 #jQuery.fn.init [p.c5, prevObject: jQuery.fn.init(1)] #匹配所有索引值为偶数的元素，从 0 开始计数 $('div>p:even'); #找出div标签子集中的索引为偶数的p标签，取出class=c2,class=c5的p标签。 #jQuery.fn.init(2) [p.c2, p.c5, prevObject: jQuery.fn.init(1)] #匹配所有索引值为奇数的元素，从 0 开始计数 $('div>p:odd'); #找出div标签子集中的索引为奇数的p标签，取出class=c3的p标签。 #jQuery.fn.init [p.c3, prevObject: jQuery.fn.init(1)] #匹配所有大于给定索引值的元素 $('div>p:gt(1)'); #jQuery.fn.init [p.c5, prevObject: jQuery.fn.init(1)] #匹配所有小于给定索引值的元素 $('div>p:lt(1)'); #jQuery.fn.init [p.c2, prevObject: jQuery.fn.init(1)] #选取后代中包含一个或多个指定标签的标签 $('div:has(a)'); #jQuery.fn.init(2) [div.c1, div.c6, prevObject: jQuery.fn.init(1)]
#找出所有满足not条件的标签 <label>篮球 <input type="checkbox" checked name="hobby" id="i1"> </label> <label >足球 <input type="checkbox" name="hobby" id="i2"> </label> $('label>input:not(:checked)'); #选出没有checked属性的input标签 #w.fn.init [input#i2, prevObject: w.fn.init(1)] #示例代码 <p class="c1"></p> <p class="c1"></p> <p id="d1"></p> <ul> <li id="d2"></li> <li id="d3"> <a href=""></a> </li> </ul> #找到所有后代中不含a标签的li标签 $("li:not(:has(a))") #Query.fn.init [li#d2, prevObject: jQuery.fn.init(1)] #找到不含class=c1的p标签 $('p:not(.c1)'); #jQuery.fn.init [p#d1, prevObject: jQuery.fn.init(1)]
属性选择器
#示例代码 <p class="c1"></p> <p class="c1"></p> <p id="d1"></p> #选取带有该属性的指定标签 $('p[class]'); #jQuery.fn.init(2) [p.c1, p.c1, prevObject: jQuery.fn.init(1)] #选取该属性值等于指定值的标签 $('p[id="d1"]'); #Query.fn.init [p#d1, prevObject: jQuery.fn.init(1)] ##选取该属性值不等于指定值的标签 $('p[class!="c1"]'); #jQuery.fn.init(2) [p#d1, p.c2, prevObject: jQuery.fn.init(1)]
表单常用筛选方法
| 方法 | 说明 |
| $(":text"); | 找出type="text"(文本)的input标签 |
| $(":password"); | 找出type="password"（密码）的input标签 |
| $(":file"); | 找出type="file"（文件）的input标签 |
| $(":radio"); | 找出type="radio"（单选框）的input标签 |
| $(":checkbox"); | 找出type="checkbox"（多选框）的input标签 |
| $(":submit"); | 找出type="submit"的input标签 |
| $(":reset"); | 找出type="reset"的input标签 |
| $(":button"); | 找出type="button"的input标签 |
注意：$(":text")与$("input:text");结果相同
表单对象属性
| 方法 | 说明 |
| $("input:enabled"); | 找出属性为enabled（可用）的input标签 |
| $("input:disabled"); | 找出属性为disabled（不可用）的input标签 |
| $("input:checked"); | 找出属性为checked（显示默认选择）的input标签 |
| $(":selected"); | 找出属性为selected（显示默认选择）的option标签 |
#示例代码 <p>爱好</p> <label>篮球 <input type="checkbox" checked name="hobby" id="i1"> </label> <label >足球 <input type="checkbox" name="hobby" id="i2"> </label> <label>双色球 <input type="checkbox" name="hobby" id="i3"> </label> <p> <label >出生地 <select name="from"> <option >黄浦区</option> <option >静安区</option> <option selected>浦东新区</option> </select> </label> </p> #找到属性含有checked的input标签 $("input:checked"); #w.fn.init [input#i1, prevObject: w.fn.init(1)] #找到含有属性checked的标签 $(":checked"); #w.fn.init(2) [input#i1, option, prevObject: w.fn.init(1)] #找到input标签和option标签 #找到含有属性select的标签 $(":selected"); #w.fn.init [option, prevObject: w.fn.init(1)] #只找到option标签 注意：checked查找会包含option中的含有selected属性的option标签，
而selected中查找select标签下的option标签。
筛选方法
同级别筛选
#选出某标签同级别的后面的一个标签 $("#d1").next() #选出id=id的标签同级别后面的一个标签 #选出某标签同级别的后面的所有标签 $("#d1").nextAll() #选出id=id的标签同级别后面的所有标签 #选出某标签同级别的后面的所有标签直至指定的标签为止 $("#d1").nextUntil("#i2") #选出id=d1的标签的同级别的后面的标签直至id=i2的标签为止（不包含id=i2的标签） #选出某标签同级别的前面的一个标签 $("#d1").prev() #选出id=id的标签同级别前面的一个标签 #选出某标签同级别的前面的所有标签 $("#d1").prevtAll() #选出id=id的标签同级别前面的所有标签 #选出某标签同级别的前面的所有标签直至指定的标签为止 $("#d1").prevtUntil("#i2") #选出id=d1的标签的同级别的前面的标签直至id=i2的标签为止（不包含id=i2的标签）
层级筛选
#找出某元素的父级标签 $("#id").parent() #找出当前元素的所有的父辈元素 $("#id").parents() #找出当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。 $("#id").parentsUntil() #找到当前元素的所有的子集元素 $("#id").children(); #找到当前元素的所有的同级元素 $("#id").siblings();
其他筛选方法
以下相邻2行代码的功能相同
查找 #找出div标签中所有的后代p标签 $("div").find('p') $('div p') 筛选 #从结果中过滤出有class='c1'的标签 $("div").filter(".c1") $("div.c1") #获取匹配的第一个元素 $('div>p').first(); $('div>p:first'); #获取匹配的最后一个元素 $('div>p').last(); $('div>p:last'); #获取索引值匹配的元素 $('div>p').eq(); $('div>p:eq(2)'); #获取具有指定条件的元素 $('div').has(); $('div:has(a)'); #获取不含指定条件的元素 $('p').not(c1); $('p:not(.c1)');
操作标签
样式操作
对于类class的相关操作
#为当前标签添加指定的样式类 $('div').addClass('c1') #移除当前标签的指定的css类 $('div').removeClass('c1') #判断当前标签是否含有指定的类 $('div').hasClass('c1') #切换当前标签的css类，有则移除，没有则添加 $('div').toggleClass('c1')
对于css属性的修改
方法:在要修改的标签后添加方法
#设置单个属性 css('属性','值')
#设置多个属性
css（{'属性':'值','属性':'值','属性':'值'}） 示例 $("p").css("color", "red"); #将所有p标签的字体设置为红色 #等同于DOM操作：tag.style.color='red'
#设置p标签的字体颜色和边框属性
$("p").css({"color"："red"，"border":"1px solid black"});
标签位置相关
示例代码 <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin-top: 50px; margin-left: 50px; } .d1{ height:50px; 50px; background-color: cornflowerblue; position: relative; } .d2{ height: 50px; 50px; background-color: mediumpurple; position: absolute; top:100px; left:100px; } </style> </head> <body> <div class="d1"> <div class="d2"></div> </div> <div class="d3">div3</div> <script src="jquery-3.3.1.js"></script> </body> #获取指定元素相对于窗口左上角的偏移位置 $(".d1").offset(); #返回{top: 50, left: 50} $(".d2").offset(); #返回{top: 150, left: 150} #设置指定元素相对于窗口左上角的偏移位置 $(".d3").offset({top:200,left:200}); #获取指定元素相对于父级元素的位置偏移量 $(".d2").position(); #返回{top: 100, left: 100} #获取当前位置的滚动条距离页面顶端的距离 $(window).scrollTop(); #设置滚动条距离页面顶端的距离 $(window).scrollTop(1000);
标签尺寸相关
示例代码 <head> <meta charset="UTF-8"> <title>尺寸相关</title> <style> .c1 { height: 100px; 100px; padding: 15px; border: 5px solid red; margin: 20px; } </style> </head> <body> <div class="c1"></div> <script src="jquery-3.3.1.min.js"></script> </body> #获取指定标签的高c $(".c1").height(); #返回100 #获取指定标签的宽 $(".c1").width(); #返回100 $(".c1").innerHeight(); #返回130 #得到内容+内填充（padding）的高 $(".c1").innerWidth(); #返回130 #得到内容+内填充（padding）的宽 $(".c1").outerWidth(); #返回140 #得到内容+内填充（padding）+边框（border）的宽 $(".c1").outerHeight(); #返回140 #得到内容+内填充（padding）+边框（border）的高
文本操作
HTML代码
#获取符合指定条件的第一个元素的标签内的所有内容 $('.c1').html(); #返回"段落1" $('.c2').html(); #返回"<p class="c3">段落2</p>，<p class="c1"><a href="">a</a></p>" #设置或修改匹配到的所有的标签中的内容 $('.c1').html("<h1>111</h1>"); #含有class='c1'的标签内的内容都被修改。
文本内容 #获取符合指定条件的所有元素的标签内的内容 $('.c1').text(); #返回"段落1，div，a" ##设置或修改匹配到的所有的标签的内容 $('.c1').text("111"); #含有class='c1'的标签内的内容都被修改 #text()与html()的区别 $('#d1').text(); #返回"段落1" $('#d1').html(); #返回"<p class="c1">段落1</p>"
标签中值的相关操作
示例代码 用户名<input type="text" name="username" value="Chris" > 用户名<input type="text" name="username" value="Kris" > #获取匹配条件的第一个标签的值 $('input[name="username"]').val(); #结果"Chris" #设置或修改匹配条件的所有的标签的值 $('input[name="username"]').val('A'); <input type="checkbox" name="hobby" value="basketball">篮球 <input type="checkbox" name="hobby" value="football">足球 <input type="checkbox" name="hobby" value="doublecolorball">双色球 #获取选中的第一个标签的值 $('input[name="hobby"]:checked').val(); #若同时选中football，doublecolorball，则结果为"football" $('input[name="hobby"]:checked')[1].value; #结果为"doublecolorball"，想获得选中的第二标签的值，则用上述方法。 #给多选框（checkbox，select）设置默认选项val([val1, val2])
$('input[name="hobby"]').val(["basketball","doublecolorball"]);
#给上述checkbox的选项框设置了"basketball"和"doublecolorball"这2个默认选项。
属性相关操作
示例代码 <div id="d1" class="c1">div1</div> <div id="d2" class="c1">div2</div> <div class="c1">div3</div> #返回符合条件的第一个标签的指定的属性值attr(attrName) $(".c1").attr("id"); #返回"d1" #给符合条件的所有标签的设置一个属性值attr(attrName, attrValue) $(".c1").attr("x","1"); #上述3个div都添加上x=1的属性 #给符合条件的所有标签的设置多个属性值attr({k1: v1, k2:v2}) $(".c1").attr({"y":"1"，"z":"1"}); #移除当前标签的指定属性 $("#d1").removeAttr("class");
checkbox和radio的属性操作
文档相关处理
示例代码 <div id="d1"> <div class="d2">div</div> </div> <div id="d2" class="c1">divdiv</div> var pEle = document.createElement("p"); pEle.innerText='段落'; #添加到指定标签内容的后面 $('#d1').append(pEle); $(pEle).appendTo($('#d1')); #结果如下 <div id="d1"> <div class="d2">div</div> <p>段落</p> </div> #添加到指定标签内容的前面 $('#d1').prepend(pEle); $(pEle).prependTo($('#d1')); #添加到指定标签的后面 $('#d2').after(pEle); $(pEle).insertAfter($('#d2')); #结果如下 <div id="d2" class="c1">divdiv</div> <p>段落</p> #添加到指定标签的前面 $('#d2').before(pEle); $(pEle).insertBefore($('#d2'));
移除和清空元素
示例代码 <div id="d1" class="d"> div1 <p class="c1">段落1</p> </div> <div class="c1">div</div> <div class="d"> <p class="c3">段落2</p> <p class="c1"> <a href="">a</a> </p> </div> #清除所有满足条件的标签 $('.c1').remove(); #带有class="c1"的标签全被移除 #清空符合条件的所有标签的子节点(标签中的内容) $('.d').empty(); #含有class="d"的标签中的内容都被清空
替换
#示例代码 <div id="d1" class="d"> div1 <p class="c1">段落1</p> </div> <div class="c1">div</div> <div class="d"> <p class="c3">段落2</p> <p class="c1"> <a href="">a</a> </p> </div> var pEle=document.createElement('p') pEle.innerText='段落' #将符合条件的所有标签替换成指定的标签 $('.c1').replaceWith(pEle); $(pEle).replaceAll($('.c1'));
#含有class="c3"的标签全部替换成新建的p标签
克隆
var pEle=document.createElement('p') pEle.innerText='段落' 复制得到相同的标签 $('p').clone()
事件
# 目标标签被点击时触发 click(function(){...}) # 鼠标放在目标标签上时触发 hover(function(){...}) # input框失去焦点时触发 blur(function(){...}) # input框获取焦点时触发 focus(function(){...}) # input数据更改时触发 change(function(){...}) # 按键抬起时触发 keyup(function(){...})
hover事件示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } .top{ height:40px; 100%; background-color: slategrey; } ul{ margin: 0; margin-left: 20px; padding:0; list-style-type: none; } a{ text-decoration: none; line-height: 40px; } a:hover{ color: white; } ul li{ float: left; margin-right: 15px; padding: 0 10px; } ul li:hover{ background-color: #111111; } .shop{ position: relative; } .box{ height: 80px; 200px; background-color: bisque; position: absolute; top:40px; left:0; text-align: center; display: none; } .show{ display: block; } </style> </head> <body> <div class="top"> <ul> <li><a href="">注册</a></li> <li><a href="">登录</a></li> <li class="shop"> <a href="">购物车</a> <div class="box">空空如也</div> </li> </ul> </div> <script src="jquery-3.3.1.js"></script> <script> $('.shop').hover( function () { $(this).find('.box').addClass('show'); }, function () { $(this).find('.box').removeClass('show') } ) </script> # this是指触发该事件的元素 # 鼠标移动到该元素上时发生的事和移开时发生的事 </body> </html>
事件绑定
1、给$('选择器')选择出来的对象绑定event事件 方法:1： $("选择器").on("envent",function(){触发后执行的代码}) 方法2： $("选择器").envent(function(){触发后执行的代码}) $('选择器')：被绑定的对象 envent：要绑定的事件 function(){}：触发事件后要执行的匿名事件函数 2、委托事件绑定方法 $("选择器").on("envent","selector",function(){触发后执行的代码}) $('选择器')：被委托的对象 "selector"：选择器，选择出要被绑定事件的对象 envent：要绑定的事件 function(){}：触发事件后要执行的匿名事件函数
移除事件
1、给$('选择器')选择出来的对象绑定event事件 $("选择器").off("envent",function(){触发后执行的代码}) 2、委托事件解绑方法 $("选择器").off("envent","selector",function(){触发后执行的代码}) $('选择器')：被委托的对象 "selector"：选择器，选择出要被绑定事件的对象 envent：要绑定的事件 function(){}：触发事件后要执行的匿名事件函数
事件绑定注意事项
DOM中定义的事件如：click，keydown等，一般使用on方法绑定事件，而jQuery中定义的事件如：hover等，一般不用on来绑定。
阻止后续事件执行
$("selector").event(function(){ 触发事件后执行的代码 return false }) 在执行匿名函数的执行代码后添加return false，阻止后续事件的发生
页面载入
当浏览器读取HTML文档是会按照层级关系生成DOM树，从上到下读取文档时若遇到JQuery操作对象的命名在jQuery执行操作之后，则浏览器会报错。
报错文档
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面加载完执行</title> </head> <script> $(function () { var d1Ele = document.getElementById("d1"); console.log(d1Ele); console.log(d1Ele.innerText); }) </script> <body> <div id="d1">div</div> <script src="jquery-3.3.1.min.js"></script> </body> </html> #该文档的jQuery操作中对象（d1Ele）的定义处于该操作之后，浏览器加载完文档后报错。
解决方法
#方法1：把jQuery相关操作放在body标签中内容的后面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面加载完执行</title> </head> <body> <div id="d1">div</div> <script src="jquery-3.3.1.min.js"></script> <script> $(function () { var d1Ele = document.getElementById("d1"); console.log(d1Ele); console.log(d1Ele.innerText); }) </script> </body> </html>
#方法2； $(document).ready(function(){ //js代码 }) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面加载完执行</title> </head> <body> <script> $(document).ready(function () { var d1Ele = document.getElementById("d1"); console.log(d1Ele); console.log(d1Ele.innerText); }); </script> <div id="d1">div</div> <script src="jquery-3.3.1.min.js"></script> </body> </html>
事件委托
事件委托原理：利用事件冒泡原理，通过父标签将事件绑定到子标签身上。
事件冒泡：事件从最深的节点开始，会逐层向上传播。例如div>ul>li>a，给a绑定一个点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div。因此给最外面的div加点击事件，其后代标签ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以后代标签都会触发绑定的事件，这就是事件委托，委托它们父级代为执行事件。
动画效果
$("selector")：根据选择器selector选择出的对象 #盒子效果 $("selector").show(s) # 逐渐显示 $("selector").hide(s) # 逐渐消失 $("selector").toggle(s) # 显示时隐藏，隐藏时显示 # 参数是变化时间，单位毫秒，不设置参数时，默认为0，即执行该命令立刻消失或显示 #竖向压缩效果，改变对象的高来实现 $("selector").slideDown(s) # 从上向下显示 $("selector").slideUp(s) # 从下向上压缩，逐渐消失 $("selector").slideToggle(s) #淡入淡出效果，通过改变透明度来实现 $("selector").fadeIn(s) # 逐渐变深 $("selector").fadeOut(s) # 逐渐变淡 $("selector").fadeTo([[s],o]) # 参数o设置透明度变为多少 $("selector").fadeToggle(s)
each函数
each是一个迭代函数，可以用来依次取出数组或jQuery对象集中的每一个元素。
var list=[1,2,3]; $.each(list,function(i,v){console.log(i,v)}); #结果如下 0 1 1 2 2 3 $.each(list,function(i){console.log(i)}); #结果如下 0 1 2
示例代码 <div>div1</div> <div>div2</div> var $divEles=$("div"); $.each(divEles,function(i){ console.log($divEles[i]); }) #结果 <div>div1</div> <div>div2</div> $('div').each(function(){ console.log(this) }) #结果 <div>div1</div> <div>div2</div>
each方法迭代出jQuery对象中的每一个DOM元素，每次回调函数执行时，会传递当前循环次数（从0开始）作为索引取出对象中的DOM元素
this指向当前循环取出的元素。
var list=[1,2,3]; $.each(list,function(i){ if (list[i]===2){ return } console.log(list[i]) }); #结果1,3 #跳出本次循环 var list=[1,2,3]; $.each(list,function(i){ if (list[i]===2){ return false } console.log(list[i]) }); #结果1 #跳出each循环
data方法
示例代码 <div>div1</div> <div>div2</div> #给匹配的所有元素存储任意相关的数据 .data(key,value) $("div").data('x',1); #给上述2个div标签都保存数据x=1 #通过存储时的key可以拿到对应的值 .data(key) $("div").data('x'); #返回1 #返回匹配的元素集合中的第一个元素的指定key所对应的值 #返回第一个div保存的1 #移除存放于元素上的数据 $("div").removeData('x'); #移除上述2个div标签上存储的x=1 #不假参数，移除存放于匹配元素上的所有数据 $('selector').removeData();