py
一、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})//:seletedfunction 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() 滑出，相当于hideslideToggle() * * */$("#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>
发布评论