一、jQuery选择器
1.基本选择器
1.1ID选择器
语法：$("#id")
说明：相当于js中的docuemnt.getElementById("id")
举例：$("#box"); //获取id值为box的元素对象
1.2元素选择器【标签名称选择器】
语法：$("标签名称")
说明：相当于js中的docuement.getElementsByTagName("标签名称")
举例：$("p");//获取当前html页面中所有的p标签对象
1.3类名选择器
语法：$(".class")
说明：相当于js中的document.getElementsByClassName("class")
举例：$(".cls");//获取当前页面中class属性的值为cls的所有的标签对象
1.4复合选择器【组合选择器】
语法：$("selector1,selector2,.......")
举例：$("div,#btn");//获取当前html页面中所有的div标签和id值为btn的标签
1.5通配符选择器
语法：$("*")
举例：$("*");//获取当前html页面中所有的标签对象
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <div id="box"></div> <div class="cls"></div> <script> //页面加载函数 /*$(document).ready(function(){ }) //可以简写为： $().ready(function(){ }) */ //还可以 简写 $(function(){ //ID选择器 //注意：在jQuery的变量的前面，一般会加上$，为了区分js和jQuery【在js中，标识符的组成是允许使用$】 var $jqDiv = $("#box"); $jqDiv.html("hfajhgjahgjae"); //元素选择器 var $jqDiv1 = $("div"); //类选择器 var $jqDiv2 = $(".cls") $jqDiv2.html("hello"); }) </script> </body> </html>
2.层次选择器【包含选择器】
2.1ancestor descendant选择器
父子选择器或者先辈后辈选择器
语法：$("ancestor descendant")
说明：ancestor 和descendant表示任何有效的基本选择器
举例：$("ul li");//获取ul标签里面的所有的li标签
2.2parent>child选择器
父子选择器
语法：$("parent>child")
举例：$("form>input");//获取表单标签下所有的input标签
2.3prev+next选择器
previous：之前的
next：后来的
兄弟标签选择器
语法:$("prev+next")
说明：prev和next是相同级别的元素，用于匹配紧跟在prev元素后面的next元素
注意：每次只能匹配一个紧跟的兄弟标签
2.4prev~siblings选择器
语法：$("prev~siblings")
说明：prev和sibilings是相同级别的元素，用于匹配prev之后所有的siblings元素
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <div id="box"> <p>hello</p> <div> <p>world</p> </div> </div> <ul id="l"> <li>111</li> <li>2222</li> </ul> <div id="d">aaaa</div> <div>bbbb</div> <div>dddd</div> <div>eeee</div> <div class="dd">cccc</div> <script> $(function(){ //父子选择器或者先辈后辈选择器 //注意：如果同时有子标签和后辈标签，首先匹配子标签， var $jqObj = $("#box p"); console.log($jqObj.html()); //父子选择器 var $jqObj1 = $("ul>li"); var $jqObj2 = $("#l>li"); //兄弟选择器 //只匹配一个 var $jqObj3 = $("#d+div"); console.log($jqObj3.html()); //兄弟选择器 //匹配所有 var $jqObj4 = $("#d~div"); $jqObj4.html("~~~~~~~"); }) </script> </body> </html>
3.过滤选择器
根据指定的条件进行元素的筛选【过滤】
3.1简单过滤器
指的是以冒号开头，用来实现简单过滤效果的选择器
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <p class="p1">aaaaaa</p> <p class="p1">bbbbb</p> <p class="p1">cccccc</p> <p class="p1">dddddd</p> <p class="p1">eeeeeee</p> <p class="p2">ffffffff</p> <h2>标题</h2> <script> $(function(){ //类似于伪类选择器 //:first 只匹配第一个元素 $(".p1:first").html("first"); //:last 只匹配最后一个元素 //:even 匹配所有索引值为偶数的元素 $(".p1:even").html("even"); //:odd 匹配所有索引值为奇数的元素 $(".p1:odd").html("odd"); //:eq(index) 匹配指定索引的元素 $(".p1:eq(2)").html("eq~~~~"); //:gt(index) 匹配所有大于指定index的元素 //注意：不包含指定索引 $(".p1:gt(2)").html("gt~~~~"); //:lt(index) 匹配所有小于指定index的元素 //注意：不包含指定索引 $(".p1:lt(2)").html("lt~~~~"); //：header 匹配标题元素【h1~h6】 $(":header").html("啦啦啦啦阿里"); //：not(selector) 否定【去除所有指定选择器对应标签】 $("p:not(.p1)").html("hello"); //：animated 匹配所有正在执行动画的标签 }) </script> </body> </html>
3.2内容过滤器
通过标签的文本内容筛选标签
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <p class="p1">aaaaaa</p> <p class="p1">bbbbb</p> <p class="p1">htmlPython</p> <p class="p1"> <font></font> </p> <table> <tr> <td> <p>this is a text</p> </td> <td> <p> today is a good day</p> <span></span> </td> </tr> </table> <script> $(function(){ //：contains(xx) 匹配包含指定文本的元素 $(".p1:contains('html')").html("包含html"); //：empty 匹配文本为空的元素 $(".p1:empty").html("空的元素"); //：has(xx) 匹配含有选择器所匹配到的元素 console.log($("td:has(span)"));//匹配含有span标签的td //：parent 匹配有父标签的元素 $(".p1:parent").html("hgshgja"); }) </script> </body> </html>
3.3可见性过滤器
元素的可见性分为两种：可见或者不可见【显示或者隐藏】
作用：通过元素的可见状态匹配元素
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <input type="text" value="aaa" /> <!--设置隐藏--> <!--方式一--> <input type="hidden" value="bbbbb" /> <!--方式二--> <input type="text" style="display: none;" /> <script> $(function(){ //:visible 匹配可见的元素 console.log($("input:visible").val()); //:hidden 匹配不可见的元素 //注意:在已经筛选的结果之上还可以继续筛选 $("input:hidden:last"); }) </script> </body> </html>
3.4表单对象的属性过滤器
表示通过表单元素的状态属性匹配元素，比如：选中，不可用等状态
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <form> <input type="checkbox" checked="checked" value="复选框1" /> <input type="checkbox" checked="checked" value="复选框2" /> <input type="checkbox" value="复选框3" /> <input type="button" value="不可用按钮" disabled/> <select onchange="selectVal()"> <option selected="selected">aaaa</option> <option>bbbbb</option> </select> </form> <script> $(function(){ //:checked 匹配所有被选中的input标签 console.log($("input:checked:eq(0)").val());//匹配到了复选框1 //：disabled $("input:disabled"); //:enabled }) //:seleted function selectVal(){ //匹配所有被选中的option $("select option:selected").val(); } </script> </body> </html>
3.5子元素过滤器
筛选某个指定元素的子元素，具体的过滤条件由选择器决定
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> </ul> <ul> <li>hello</li> </ul> <script> $(function(){ //类似于css中的结构选择器 //：first-child 匹配所有给定元素的第一个元素 $("ul li:first-child").html(); //:last-child $("ul li:last-child").html(); //:only-child 如果某个元素是它父元素的唯一的子元素，则才会被匹配 //注意：侧重匹配的是子元素 console.log($("ul li:only-child").html()); //:nth-child(index) 匹配第index个元素 $("ul li:nth-child(2)").html(); }) </script> </body> </html>
4.属性选择器
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> div{ width: 100px; height: 50px; margin: 10px; } </style> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <div name="div1"></div> <div name="div2"></div> <div name="div3"></div> <div name="div4"></div> <div name="div1"></div> <div name="div1hello"></div> <div name="div1abc"></div> <div></div> <script> $(function(){ //[attr] 匹配包含指定属性的元素 //$("div[name]").css("background-color","red"); //[attr=val] //$("div[name='div2']").css("background-color","blue"); //[attr！=val] //$("div[name!='div1']").css("background-color","green"); //[attr*=val] 有几个匹配几个【贪婪匹配】 //$("div[name*='div1']").css("background-color","green"); //[attr^=val] name属性的值以div1开头的标签 //$("div[name^='div1']").css("background-color","green"); //[attr$=val] $("div[name$='div1']").css("background-color","green"); }) </script> </body> </html>
5.表单选择器
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <form> <input type="checkbox" /> <input type="radio" /> <input type="file" /> <input type="image" /> <input type="password" /> <input type="text" /> <input type="reset" /> <input type="submit" /> <input type="button" /> </form> <script> $(function(){ //:type的取值 可以匹配根据type进行分类的不同input标签对象 var $jqObj1 = $(":checkbox"); var $jqObj1 = $(":password"); }) </script> </body> </html>
6.注意问题
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <div id="box#test"></div> <div class="name"> <div style="display: none;">小王</div> <div style="display: none;">小丽</div> <div style="display: none;">小李</div> <div style="display: none;" class="name">小刘</div> </div> <div style="display: none;" class="name">小yang</div> <div style="display: none;" class="name">小wang</div> <script> $(function(){ //1.选择器中包含# . () :等特殊符号 //注意：当某个属性的值出现类似的特殊符号时，解决办法是通过\\进行转义 $("#box\\#test").html(); //2.空格 //层次选择器【父子、先辈后辈】 var $jqObj1 = $(".name :hidden"); //过滤选择器 var $jqObj2 = $(".name:hidden"); }) </script> </body> </html>
二、jQuery操作元素
1.操作文本内容
text()
代码演示:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <div> <p>hjerhgjahg</p> </div> <div> <p>hjerhgjahg~~~~~</p> </div> <!-- 文本内容：div的文本内容是hjerhgjahg，文本内容不包含元素的子元素，只包含纯文本 html内容：diiv的html内容是<p>hjerhgjahg</p>，html内容不仅包含纯文本，还包含子标签 --> <script> $(function(){ /* * text() 用获取匹配到的所有元素的文本内容 * * * text(xx) 用于设置全部匹配到的 元素的文本 * 注意：元素原来的内容将会被新设置的内容替换掉，包括html内容 */ //获取文本内容 //console.log($("div").text()); //alert($("div").text()); //设置文本内容 //注意：不能识别html标签，只能识别纯文本 $("div").text("<span>abc</span>"); }) </script> </body> </html>
2.操作html内容
html()
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <div> <p>hjerhgjahg</p> </div> <div> <p>hjerhgjahg~~~~~</p> </div> <script> $(function(){ /* html() 用于获取第一个匹配到的元素的内容 html(xx) 用于设置全部匹配到的元素的内容 */ //获取 //注意：子标签+纯文本，只能获取第一个 //alert($("div").html()); //设置 //注意：区别于text(),可以识别html标签 $("div").html("<span>hello</span>"); }) </script> </body> </html>
3.操作元素值
val()
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <input type="text" value="123"/> <input type="text" value="456"/> <script> $(function(){ /* * value * * val() 用于获取第一个匹配到的元素的值 * * val(xx) 用于设置所有匹配到的元素的值 * * 类似于html() */ //alert($("input").val()); $("input").val("kkkgkrghh"); }) </script> </body> </html>
4.操作元素的css样式
4.1修改css的类
addClass()
removeClass()
toggleClass()
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .box{ } .change1{ width: 100px; height: 100px; background-color: red; } .change2{ width: 100px; height: 100px; background-color: blue; } </style> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <div class="box"></div> <script> $(function(){ /* * addClass() 用于给所有匹配到的元素添加指定的css类名 * * * removeClass() 从所有匹配的元素中删除全部或者指定的class类 * * * toggleClass() 如果指定的类存在则删除，如果不存在则添加 */ //将change1中设置的样式可以作用于div元素【多个类选择器可以同时作用于同一个元素】 $("div").addClass("change1"); //$("div").removeClass("change1"); //$("div").toggleClass("change2"); $("div").toggleClass("change1"); //修改css的类：动态给元素添加类或者删除类，为了在代码执行过程中，可以随时添加样式和删除样式 }) </script> </body> </html>
4.2修改css属性
css()
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> div{ width: 100px; height: 100px; } </style> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <div class="box"></div> <div></div> <script> $(function(){ /* css(name) 获取第一个匹配到的元素的属性值 css(name,value) 为所有匹配的元素设置样式 */ //设置单个属性 //$("div").css("background-color","blue"); //设置多个属性 //类似于字典的使用，通过key：value的方式进行设置样式 $("div").css({"background-color":"red","border":"1px solid black"}); //获取属性值 alert($("div").css("width")); }) </script> </body> </html>
三、jQuery操作DOM
1.创建节点
createElement()
createTextNode()
createAttribute()
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <div> </div> <script> $(function(){ /* * 步骤： * 1.创建元素节点 * $(html),根据传入的html标签，创建一个DOM对象，并且将这个DOM对象转换为jQuery * 对象 * * 2.创建文本节点 * 在创建元素节点的时候将文本内容直接写出来，然后使用append等方法将其添加到文档中 * * 3.创建属性节点 * 创建文本节点类似，在创建元素节点的时候一起创建 */ //创建元素节点 var $jqObj1 = $("<p></p>"); $("div").append($jqObj1); //创建文本节点 var $jqObj2 = $("<p>hello</p>"); $("div").append($jqObj2); //创建属性节点 var $jqObj3 = $("<p name='abc'>hello</p>"); $("div").append($jqObj3); }) </script> </body> </html>
2.插入节点
2.1在元素内部插入
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <div></div> <script> $(function(){ /* * append(xx) 向所有匹配到的元素追加内容 * * appendTo(xx) 将所有匹配到的元素追加到指定元素 * */ //创建节点 var $p_1 = $("<p>hello</p>"); var $p_2 = $("<p>hello~~~~~</p>"); var $div = $("div"); //注意区分二者的调用对象 $div.append($p_1); $p_2.appendTo($div); }) </script> </body> </html>
2.2在元素外部插入
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <p></p> <!--<p>hyello</p>--> <script> $(function(){ /* 在元素外部插入元素：给已知的元素添加兄弟元素 after(xx) 在每个匹配到的元素之后插入内容 insertAfter(xx) 将所有匹配到的元素插入到另一个指定元素的后面 before(xx) 在每个匹配到的元素之前插入内容 insertBefore(xx) 将所有匹配到的元素插入到另一个指定元素的前面 */ var $p = $("p"); //创建带有文本节点的元素节点 var $p_1 = $("<p>hello</p>"); var $p_2 = $("<p>hello~~~~~</p>"); //类似于append和appendTo() $p.after($p_1); $p_2.insertAfter($p); //总结：在内部插入表示添加子标签，在外部插入表示添加兄弟标签 }) </script> </body> </html>
3.删除节点
4.复制节点
5.替换节点
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <p></p> <!--<p>hyello</p>--> <div id="div1"></div> <div id="div2"></div> <script> $(function(){ /* 删除节点 * remove() 从DOM中删除匹配到的元素 * * * detach() 从DOM中删除匹配到的元素 * * 区别：remove删除某个节点，则该节点包含的所有的子节点都会被删除，remove方法返回一个 * 指向被删除节点的引用，以后可以继续使用这些元素 * detach绑定的事件或者附加的数据都会保留下来 * * * empty() 并不是删除节点，将节点清空，可以清空元素中的所有的后代节点 */ /* * 复制节点 * * clone() 将匹配到的元素克隆一个副本 * clone(boolean) * true:将匹配到的元素和元素的事件都克隆出来 * false:只克隆匹配到的元素 * * * 和js中的复制cloneNode的用法相同 */ /* * 替换节点 * * replaceAll() * * replaceWith() */ //类似于append和appendTo $("#div1").replaceWith("<div>hello</div>"); $("<div>hello</div>").replaceAll("#div2"); }) </script> </body> </html>
6.遍历节点
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <img width="300px" height="300px" src="img/事件流.png" /> <img width="300px" height="300px" src="img/事件流.png" /> <img width="300px" height="300px" src="img/事件流.png" /> <img width="300px" height="300px" src="img/事件流.png" /> <img width="300px" height="300px" src="img/事件流.png" /> <img width="300px" height="300px" src="img/事件流.png" /> <script> $(function(){ //each(callback) //callback 回调函数，该函数可以接收一个形参index，index表示遍历元素的序号 $("img").each(function(index){ //需求：给没张图片添加标题【title】 $(this).attr("title","第" + index + "张"); }) }) </script> </body> </html>
7.包裹节点
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <span>this is a good day</span> <span>this is a bad day</span> <span>this is a nice day</span> <span>this is a wind day</span> <button>包裹节点</button> <button>去除包裹</button> <button>整体包裹</button> <button>包裹内部</button> <script> $(function(){ //包裹节点：wrap() $("button:eq(0)").click(function(){ //把匹配到的每一个span标签用p标签包裹起来 $("span").wrap("<p></p>"); }) //去除包裹：unwrap() $("button:eq(1)").click(function(){ //把匹配到的每一个元素的父节点去除 $("span").unwrap(); }) //整体包裹 ：wrapAll() $("button:eq(2)").click(function(){ //用一个指定元素包裹所有匹配到的元素 $("span").wrapAll("<p></p>"); }) //包裹内部：wrapInner() $("button:eq(3)").click(function(){ //在匹配到的每一个span标签中添加一个p标签 $("span").wrapInner("<p></p>"); }) }) </script> </body> </html>
四、动画
1.隐藏/显示
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #div1{ width: 100px; height: 100px; background-color: red; } </style> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <div id="div1"></div> <button id="btn1">隐藏</button> <button id="btn2">显示</button> <button id="btn3">切换状态</button> <script> $(function(){ /* * * hide(speed,callback) * show(speed,callback) * * speed:速度，一般用时间表示，单位为毫秒 * 参照值：slow【600ms】 normal【400ms】 fast【200ms】 * callback:回调函数，动画指定完成之后需要指定的操作，一般使用匿名函数 * * */ $("#btn1").click(function(){ $("#div1").hide(1000,function(){ alert("动画执行完成"); }) }) $("#btn2").click(function(){ $("#div1").show(1000,function(){ alert("动画执行完成"); }) }) //切换可见状态 //toggle() 如果元素存在则隐藏，如果不存在则显示 $("#btn3").click(function(){ $("#div1").toggle(1000,function(){ alert("动画执行完成"); }) }) }) </script> </body> </html>
2.切换可见状态
代码演示：
//切换可见状态 //toggle() 如果元素存在则隐藏，如果不存在则显示 $("#btn3").click(function(){ $("#div1").toggle(1000,function(){ alert("动画执行完成"); }) })
3.淡入/淡出
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #div1{ width: 100px; height: 100px; background-color: red; } </style> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <div id="div1"></div> <button id="btn1">淡出</button> <button id="btn2">淡入</button> <script> $(function(){ /* * * 透明度的变化 fadeIn() 淡入 ，相当于show，只不过动画不一样 fadeOut() 淡出，相当于hide * * */ $("#btn1").click(function(){ $("#div1").fadeOut(1000,function(){ alert("动画执行完成"); }) }) $("#btn2").click(function(){ $("#div1").fadeIn(1000,function(){ alert("动画执行完成"); }) }) }) </script> </body> </html>
4.滑动
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #div1{ width: 100px; height: 100px; background-color: red; } </style> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <div id="div1"></div> <button id="btn1">滑出</button> <button id="btn2">滑入</button> <button id="btn3">切换</button> <script> $(function(){ /* * * 透明度的变化 slideDown() 滑入 ，相当于show，只不过动画不一样 slideUp() 滑出，相当于hide slideToggle() * * */ $("#btn1").click(function(){ $("#div1").slideUp(1000,function(){ alert("动画执行完成"); }) }) $("#btn2").click(function(){ $("#div1").slideDown(1000,function(){ alert("动画执行完成"); }) }) $("#btn3").click(function(){ $("#div1").slideToggle(1000,function(){ alert("动画执行完成"); }) }) }) </script> </body> </html>
209
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
