一、jQuery选择器
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 id="box1"> <p>hello</p> <div> <p>hello~~~</p> </div> <p>js</p> </div> <div> <ul> <li>111</li> <li>222</li> <li>333</li> <li>444</li> </ul> </div> <div id="box2" class="cls"></div> <div class="cls2"></div> <div class="cls3"></div> <div class="cls4"></div> <script type="text/javascript"> $(document).ready(function(){ //1.选择器1 选择器2 :匹配是所有的子标签或者后辈标签 /*var $jqObj = $("#box1 p"); console.log($jqObj);*/ //2.选择器1 > 选择器2；匹配的是所有的子标签 /*var $jqObj = $("#box1 > p"); console.log($jqObj);*/ //3.prev + next；匹配的是兄弟标签,只能匹配紧跟在指定标签后面的兄弟标签 /*var $jqObj = $("#box2 + div"); console.log($jqObj);*/ //4.prev ~ siblings；匹配的是兄弟标签，匹配的所有跟在指定标签后面的标签 var $jqObj = $("#box2 ~ div"); console.log($jqObj); }); </script> </body> </html>
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">aaaaa</p> <p class="p2">bbbpython</p> <p class="p3">bfb</p> <p class="p4">ergr</p> <table> <tr> <td> <p>hello</p> </td> <td> <p>hello~~~</p> </td> <td></td> </tr> </table> <!--设置input隐藏--> <input type="hidden" /> <input type="text" style="display: none;" /> <form> <input type="checkbox" checked="checked" /> <input type="radio" checked="checked" /> 不可用按钮：<input type="button" value="按钮" disabled/> <select onchange="#"> <option></option> <option></option> </select> </form> <ul> <li>111</li> <li>222</li> <li>333</li> <li>444</li> </ul> <ul> <li>111</li> </ul> <script type="text/javascript"> $(document).ready(function(){ //1.简单过滤器 //:first/last var $jqObj = $("p:first"); console.log($jqObj); //:even/odd 偶数/奇数 var $jqObj = $("p:even"); console.log($jqObj); //:eq(index) var $jqObj = $("p:eq(1)"); console.log($jqObj); //:gt(index) //:lt(index) //:header:匹配标题元素 //：not():否定 var $jqObj = $("p:not(.p3)"); console.log($jqObj); //2.内容过滤器 //：contains:包含 var $jqObj = $("p:contains('python')"); console.log($jqObj); //:empty:匹配文本内容为空的标签 //：has :匹配含有指定选择器元素 var $jqObj = $("td:has(p)"); console.log($jqObj); //3.可见性过滤器 //可见 隐藏 //:visible var $jqObj = $("input:visible"); //:hidden var $jqObj = $("input:hidden:last"); //4.表单对象的属性过滤器 //:checked :匹配所有被选中的表单元素 var $jqObj = $("input:checked:eq(0)"); //:disbaled:匹配不可用元素 //:enabled 匹配可用元素 //5.列表过滤器 //：first-child/last-child var $jqObj = $("ul li:first-child"); //:only-child:如果某个元素是它父元素唯一的子元素，则将其匹配出来 var $jqObj = $("ul li:only-child"); //:nth-child(inedx):第几个子元素 //index从0开始的 var $jqObj = $("ul li:nth-child(1)"); }); </script> </body> </html>
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" name="input1" id="box1" /> <input type="text" name="input2" /> <input type="text" name="xxinput3" /> <input type="text" /> <input type="text" /> <script type="text/javascript"> $(document).ready(function(){ //[name] var $jqObj = $("input[name]"); //[name="xxx"] var $jqObj = $("input[name='input2']"); //[name!="xxx"] var $jqObj = $("input[name!='input2']"); //[name*="xxx"] 匹配属性的值含有xxx的元素 var $jqObj = $("input[name*='input']"); //[name^="xxx"] var $jqObj = $("input[name^='input']"); //[name$="xxx"] var $jqObj = $("input[name$='2']"); //需要同时满足多个条件 var $jqObj = $("input[name][id='box']"); }); </script> </body> </html>
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" /> <input type="radio" /> <input type="file" /> <input type="image" /> <input type="date" /> <input type="text"/> <input type="button" /> <input type="submit" /> <input type="reset" /> </form> <script type="text/javascript"> $(document).ready(function(){ var $jqObj = $(":checkbox"); var $jqObj = $(":image"); var $jqObj = $(":text"); }); </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> <div id="box#test"></div> <div class="name"> <div style="display: none;">小王1</div> <div style="display: none;">小王2</div> <div style="display: none;">小王3</div> <div style="display: none;" class="name">小王4</div> </div> <div style="display: none;" class="name">小王5</div> <div style="display: none;" class="name">小王6</div> <script type="text/javascript"> $(document).ready(function(){ //1.如果选择器中包含".","#",() , []特殊符号的时候，为了区别，则需要转义,转义的方式:\\xxxx var $jqObj = $("#box\\#test"); //2.空格 //层次选择器 parent child, 侧重点在于子标签或者后辈标签 //1,2,3,4 var $jqObj = $(".name :hidden"); //同时成立 //4,5,6 var $jqObj = $(".name:hidden"); }); </script> </body> </html>
二、jQuery操作元素
1.操作元素内容
内容：纯文本和html内容
text():纯文本
html()：html内容,可以识别html标签，作用类似于innerHTML
<!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>aaaaaaaa</p> </div> <div> <p>bbbbbb</p> </div> <script type="text/javascript"> $(document).ready(function(){ /* * text() 获取 * text(xxx) 设置 * * html() 获取 * * html(xx) 设置 */ //1. //1/1获取 //console.log($("div").text()); //1.2设置 // $("div").text("hello"); //$("div").text("<h1>hello</h1>"); //不能识别html标签 //2. //2.1获取html内容【html标签和纯文本】，只能获取第一个匹配到的元素的内容 console.log($("div").html()); //2.2将所有匹配到的元素全部去设置为指定的内容 $("div").html("<h1>hello</h1>"); }); </script> </body> </html>
2.操作元素值
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 type="text/javascript"> $(document).ready(function(){ /* * val() 获取 * val(xxx) 设置 */ //跟html()类似，获取只能获取第一个，设置的时候全部设置 console.log($("input").val()); $("input").val("gello"); }); </script> </body> </html>
3.操作元素的css
css():修改css的属性值
修改css的类
addClass()
removeClass()
toggleClass()
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .change1{ background-color: blue; } .change2{ font-size: 30px; } </style> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <div>hello</div> <div id="box" class="change2">哈哈哈哈哈</div> <script type="text/javascript"> $(document).ready(function(){ /* * css(name) 获取 * css(name,value) 设置 */ //设置单个属性 //$("div").css("background-color","red"); //设置多个属性 // $("div").css({"width":"100px","height":"100px","color":"red","background-color":"cyan"}); //获取 //console.log($("div").css("background-color")); /* * addClass() 添加类 * removeClass() 删除类 * toggleClass() 如果类存在，则删除；如果类不存在，则添加 */ //$("#box").addClass("change1"); //$("#box").removeClass("change1"); $("#box").toggleClass("change2"); }); </script> </body> </html>
三、jQuery操作DOM
1.添加元素
外部添加:添加父标签
内部添加：添加子标签
<p></p> <div> </div>append/appendTo:在指定标签内容的尾部添加【内部添加】
父标签.append(子标签)
子标签.appendTo(父标签)
prepend/prependTo:在指定标签内额欧诺个的头部添加【内部添加】
父标签.prepend(子标签)
子标签.prependTo(父标签)
after/insertAfter:添加同辈标签
前面标签.after(后面标签)
后面标签.insertAfter(前面标签)
before/insertBefore
after和insertBefore作用类似
before和insertAfter作用类似
2.包裹
wrap（）：添加父标签
子标签.wrap(父标签)
unwrap（）：取消父标签
wrapAll():包裹全部
wrapInner():和wrap区别，wrap添加父标签，wrapInner添加子标签，
注意：wrapInner,原来父标签的文本会成为添加的子标签的文本
3.替换
旧的标签.replaceWith(新的标签)
新的标签.replaceAll(旧的标签)
4.删除
【面试题】remove()和deatch()之间的区别
相同点：remove和detach都会将元素从DOM中删除，但是都会保留jQuery对象
不同点：remove会将被删除元素绑定的事件和数据会被删除，但是detach不会
5.复制
clone():拷贝出来一个副本，然后使用副本的对象执行操作，类似于cloneNode()
<!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>aaaaaa</p> <p>bbbbbbb</p> </div> <script type="text/javascript"> $(document).ready(function(){ //给一个标签绑定事件 $("div p:eq(1)").bind("click",function(){ $(this).clone().insertAfter($(this)); }); }); </script> </body> </html>
6.遍历
each(callback),callback是一个函数，该函数可以接收一个形参index，index表示元素的序号
<!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 src="img/1.jpg" width="80px" height="80px"/> <img src="img/1.jpg" width="80px" height="80px"/> <img src="img/1.jpg" width="80px" height="80px"/> <img src="img/1.jpg" width="80px" height="80px"/> <img src="img/1.jpg" width="80px" height="80px"/> <script type="text/javascript"> $(document).ready(function(){ //index默认参数，值是自动赋值的，index表示匹配到的多个元素的下标 $("img").each(function(index){ //需求：给每一张图片设置title //console.log(index); $(this).attr("title","第" + (index + 1) + "张图片" ); }); }); </script> </body> </html>
四、jQuery动画
1.系统动画
css:animation：名称 时间 次数
jq:只需要子指定的时间内修改标签的css样式
隐藏/显示：hide() show()
切换可见状态：toggle()
淡入/淡出：fadeIn() fadeOut()
滑入/滑出：slideDown() slideUp()
自定义动画：animate()
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> <style> #box{ width: 200px; height: 200px; background-color: orange; } </style> </head> <body> <div id="box"></div> <button id="btn1">隐藏</button> <button id="btn2">显示</button> <br /> <button id="btn3">切换可见状态</button> <br /> <button id="btn4">滑入</button> <button id="btn5">滑出</button> <script type="text/javascript"> $(document).ready(function(){ /* * hide/show/fadeIn/fadeOut/slideDown/slideUp(speed[,callback]) * speed:执行动画的时长，使用英文单词【slow:600ms,normal：400ms,fast:200ms】或者数字表示,单位为毫秒 * callback:可写可不写，用于当动画执行完成之后需要执行的操作 */ $("#btn1").bind("click",function(){ $("#box").hide(1000,function(){ alert("动画执行完毕"); }); }); $("#btn2").bind("click",function(){ $("#box").show(1000,function(){ alert("动画执行完毕"); }); }); $("#btn3").bind("click",function(){ $("#box").toggle(1000,function(){ alert("动画执行完毕"); }); }); $("#btn4").bind("click",function(){ $("#box").slideDown(1000,function(){ alert("动画执行完毕"); }); }); $("#btn5").bind("click",function(){ $("#box").slideUp(1000,function(){ alert("动画执行完毕"); }); }); }); </script> </body> </html>
2.自定义动画
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> div{ width: 200px; height: 200px; background-color: cyan; position: absolute; } </style> <!--引入js文件--> <script src="js/jquery-3.3.1.js" type="text/javascript"></script> </head> <body> <button>开始动画</button> <div></div> <script> $(function(){ //animate({})，其中的属性设置使用的键值对，属性：“值” /*$("button").bind("click",function(){ $("div").animate({left:"100px"}); })*/ $("button").bind("click",function(){ $("div").animate({ left:"100px", width:"400px", height:"400px", opacity:"0.2" //设置透明度 },2000,function(){ //alert("over"); $(this).animate({ left:"0px", width:"200px", height:"200px", opacity:"1" //设置透明度 }); }); }) }) </script> </body> </html>萤火虫案例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*百分比：参照是父标签*/ #container{ width: 100%; height: 100%; background-image: url(img/bg.jpg); } body,html{ height: 100%; margin: 0px; padding: 0px; } img{ width: 30px; height: 30px; /*设置定位属性，结合left或者top决定img出现的位置*/ position: absolute; } </style> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <div id="container"> </div> <script type="text/javascript"> $(function(){ //每隔2秒在背景上出现一个萤火虫 setInterval(function(){ //创建img标签对象 var $fireworm = $("<img src='img/萤火虫.jpg' />"); //将img标签对象添加给div $("#container").append($fireworm); //获取屏幕的宽高 var width = $("#container").width(); var height = $("#container").height(); //获取随机数，定位img的绝对位置 var wLeft = Math.ceil(Math.random() * width) + "px"; var wTop = Math.ceil(Math.random() * height) + "px"; //img设置css属性 $fireworm.css({ left:wLeft, top:wTop }); //img在限定的范围内任意移动 function firewormfly(){ var wLeft = Math.ceil(Math.random() * width) + "px"; var wTop = Math.ceil(Math.random() * height) + "px"; $fireworm.animate({ left:wLeft, top:wTop },3000,function(){ //为了保证能够重复执行动画 firewormfly(); }); } //调用函数 firewormfly(); },2000); }) </script> </body> </html>
五、事件【掌握】
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> <!--注意：在内联模式下，在script标签中尽量不要使用window.onload,否则报错【函数未被定义】--> <button onclick="func1();"></button> <script type="text/javascript"> //1.window.onload在同一个html页面中只能出现 一次，如果出现多次，则加载的是最后一个 /*window.onload = function(){ alert("hello"); } window.onload = function(){ alert("hello~~~1111!"); } window.onload = function(){ alert("hello~~~~222"); }*/ //2.$(document).ready在同一个html页面中可以出现多次，执行的顺序是从上往下依次执行 /*$(document).ready(function(){ alert("hello~~~~111"); }) $().ready(function(){ alert("hello~~~~222"); }); $(function(){ alert("hello~~~~333"); })*/ //弊端：只要DOM元素就绪就会自动执行该函数，所以可能出现和元素关联的文件【图片，音视频等】未加载完毕， //在该函数中获取资源则获取失败 //相比较之下，window.onload则会在页面中的所有内容【DOM元素，和元素相关的资源】 加载完毕之后才会执行 //如果在有网络资源的情况下 //js:window.onload事件 jQuery:$(window).load(）函数 $(window).load(function(){ }) </script> </body> </html>
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> <!--需求：点击按钮，在div下面添加一个新的p标签--> <button id="btn">添加</button> <div> <p>11111</p> <p>22222</p> <p>33333</p> </div> <script type="text/javascript"> //事件绑定：bind() click/dblclick() delegate() on() $(document).ready(function(){ //1.bind(type,fn) /* type:事件类型，例如：click,dblclick等 * fn；事件触发之后需要执行的函数 */ /*$("#btn").bind("click",function(){ $("div").append($("<p>44444</p>")); });*/ //需求：点击p标签的时候，在div下面添加一个新的p标签 /*$("div p").bind("click",function(){ $("div").append($("<p>44444</p>")); });*/ /* * bind 函数的弊端： * 1.使用隐式迭代的方式绑定事件，如果匹配到的元素比较多的情况下， * 需要给每一个标签挨个绑定事件，则是一个耗时的过程，会影响性能 * 2.新添加的标签并没有事件的绑定 */ //解除绑定：unbind(type,fn),解除指定类型的事件，当基础绑定之后需要做的操作在fn中执行 //2.delegate()代理 /* * 事件代理，也称为事件委托，利用事件冒泡给父元素添加响应事件，让父标签代理子标签进行事件响应 * * 父标签div:代理 * 子标签p：委托 * * 代理对象.delegate(委托对象，事件名称，触发的函数) */ //注意：this代表是委托对象，并不是代理对象 /*$("div").delegate("p","click",function(){ $("div").append($("<p>44444</p>")); });*/ /* * delegate的弊端： * 如果DOM树比较深的时候，假设需要给最里层的标签添加一个事件，需要将事件添加给父标签或者先辈标签， * 则需要进行遍历DOM树,则也会影响性能 */ //解除绑定：代理对象.undelegate(委托对象，事件名称) //3.on(),解决3个弊端 /* * 代理对象，on(事件名称，委托对象，触发的函数) */ /*$("div").on("click","p",funtion(){ $("div").append($("<p>44444</p>")); });*/ //解除绑定：代理对象.off(事件名称，委托对象) //4.click() $("#btn").click(function(){ alert("hello"); }); /* * 总结： * 1.选择器匹配到的元素较多的情况下，尽量不要使用bind * 2.需要动态添加元素的时候，建议delegate或者on * 3.使用delegate，dom树不能太深 * 4.常用bind，click */ }); </script> </body> </html>
3.一次性事件
one(),指定的事件只能被触发一次，当第二次点击则无效
one(type,fn)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </style> </head> <body> <button id="btn">点击</button> <script type="text/javascript"> //one和bind的用法完全相同，one是一次性的，bind可以无限次调用 $(document).ready(function(){ $("#btn").bind("click",function(){ console.log("hello"); }); }); </script> </body> </html>
4.鼠标悬停事件
img：title
css选择器，hover
函数：
hover(over,out)
over:当鼠标移动到指定元素上方的时候需要触发的操作
out:当鼠标移出指定元素上方的时候需要触发的操作
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> <style> #box{ width: 200px; height: 200px; background-color: cyan; } </style> </style> </head> <body> <div id="box"></div> <script type="text/javascript"> //one和bind的用法完全相同，one是一次性的，bind可以无限次调用 $(document).ready(function(){ //类似于css中的伪类选择器：hover $("#box").hover(function(){ // console.log("移入"); $(this).css("background-color","orange"); },function(){ //console.log("移出"); $(this).css("background-color","cyan"); }); }); </script> </body> </html>
5.事件对象
event对象
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> <style> #box{ width: 200px; height: 200px; background-color: cyan; } </style> </style> </head> <body> <div id="box"></div> <script type="text/javascript"> $(document).ready(function(){ $("#box").bind("click",function(event){ //js；var e = event || window.event ,兼容不同的浏览器 //jQuery:不需要考虑浏览器的兼容问题 //事件对象 console.log(event); //事件的类型 console.log(event.type); //获取触发指定事件的元素【事件的传递】 console.log(event.target); //获取和响应事件的元素相关联的元素 console.log(event.relatedTarget); //获取光标相对于页面的x坐标和y坐标， //注意:如果html页面中滚动条，则需要加上滚动条的宽度和高度 console.log(event.pageX,event.pageY); }); }); </script> </body> </html>