一、jQuery简介
1.什么是jQuery
是一个轻量级的，基于js封装的库
jq库包含的功能：
html元素的获取【getElementByXxxx】
html元素的操作【增删改查】
css操作
html事件函数
js特效和动画
操作DOM
ajax
使用jq的好处：
a.将之前的js代码简化
b.不需要关心兼容性问题
c.提供了大量的方法
jq的设计思想：
a.模拟css选择元素
b.特有的语法表达方式
c.多种筛选方式
2.jQuery的选择器
选择器是jq的核心
比css中的选择器简单
优势：
a.代码更简单
b.支持css1到css3的全部语法
c.完善的检测机制
举例：document.getElementById(“box”) -------->$("#box")
分类：基本选择器，层次选择器 ，过滤选择器，属性选择器，表单选择器
二、jQuery基本语法
1.第一个jQuery程序
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!--引入js文件--> <script src="js/jquery-3.3.1.js" type="text/javascript"></script> </head> <body> <script> //$(document).ready(function(){})相当于js中的window.onload事件，但是，二者有区别 /* * 区别： * 1.在同一个html页面中，$(document).ready(function(){})可以出现多次，从上往下依次记载 * 但是，window.onload只能出现一次，而且只能加载最后一个 * 2.window.onload会等待页面中的所有内容【包括标签，图片，音视频等】加载完毕之后，才触发 * 但是，$(document).ready(function(){})只加载标签，会被立马触发 * 3.$(document).ready(function(){})效率高，但是相对不安全 * */ $(document).ready(function(){ alert("hello"); }); $(document).ready(function(){ alert("hello~~~~"); }); //简写 $().ready(function(){ alert("hello~~~~2222"); }); $(function(){ alert("hello~~~~333"); }) /*window.onload = function(){ alert("hello"); } window.onload = function(){ alert("hello~~~~~~~"); }*/ </script> </body> </html>
2.基本语法
jq语法是通过获取html元素，并对获取的元素做某些操作
通过美元符定义的
语法：$(selector).methodName()
说明：selector是一个字符串表达式，用于识别DOM元素
methodName：筛选完标签对象之后，就可以调用相应的函数
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #box{ width: 100px; height: 100px; background-color: red; } </style> <!--引入js文件--> <script src="js/jquery-3.3.1.js" type="text/javascript"></script> </head> <body> <div id="box">js</div> <script> $(function(){ //获取div标签对象 //js var jsDiv = document.getElementById("box"); jsDiv.innerHTML = "html"; //jq var $jqDiv = $("#box"); $jqDiv.html("hello"); //js对象和jq对象之间可以进行相互转换 //jq---->js【DOM】 var jsDiv1 = $jqDiv[0]; var jsDiv2 = $jqDiv.get(0); //js【DOM】------>jq var $jqdiv1 = $(jsDiv); //注意：两者之间的函数不能混用 }) </script> </body> </html>
三、jQuery选择器
1.基本选择器
1.1id选择器
语法：$("#id的值")
说明：相当于docuemnt.getElementById(“id的值”)
1.2类选择器
语法：$(".class的值")
说明：相当于docuemnt.getElementByClassName(“class的值”)[0]
1.3标签名称选择器【元素选择器】
语法：$(“标签的名称”)
说明：相当于docuemnt.getElementByTagName(“标签的名称”)[0]
1.4复合选择器【组合选择器】
1.5通配符选择器
语法：$("*")
说明：相当于*{}
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #box1{ width: 100px; height: 100px; background-color: red; } </style> <!--引入js文件--> <script src="js/jquery-3.3.1.js" type="text/javascript"></script> </head> <body> <div id="box1">js</div> <div id="box2" class="div2">js</div> <p></p> <script> $(function(){ var $jqDiv1 = $("#box1"); console.log($jqDiv1); var $jqDiv2 = $(".div2"); console.log($jqDiv2); var $jqDiv3 = $("div"); console.log($jqDiv3); var $jqDiv4 = $(".div2,p").html("hello"); //console.log($jqDiv3); var $jqDiv5 = $("*").html("aaaaa"); }) </script> </body> </html>
2.层次选择器
2.1ancestor descendent先辈后辈选择器
2.2parent>child选择器
2.3prev+next选择器
2.4prev~next选择器
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!--引入js文件--> <script src="js/jquery-3.3.1.js" type="text/javascript"></script> </head> <body> <div id="box"> <p>hello</p> <div> <p>world</p> </div> </div> <ul> <li>财务部</li> <li>运营部</li> <li>人事部</li> <li>行政部</li> </ul> <div id="box1">box1</div> <div class="cls">1111</div> <div class="cls">2222</div> <div class="cls">3333</div> <div class="cls">4444</div> <script> $(function(){ //子标签或者后辈标签 /*var $jqObj = $("#box p").html("aaaa"); console.log($jqObj);*/ //子标签 var $jqObj = $("#box>p").html("aaaa"); console.log($jqObj); var $jqObj = $("ul li"); console.log($jqObj); //指定标签后面的第一个兄弟标签 //注意：prev+next，选择器的种类没有限制 var $jqObj = $("#box1+.cls").html("new"); console.log($jqObj); //指定标签后面的所有的兄弟标签 var $jqObj = $("#box1~div").html("new~~~"); console.log($jqObj); }) </script> </body> </html>
3.过滤选择器
3.1简单过滤器
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!--引入js文件--> <script src="js/jquery-3.3.1.js" type="text/javascript"></script> </head> <body> <p class="p1">aaaa</p> <p class="p1">bbbb</p> <p class="p1">cccc</p> <p class="p1">dddd</p> <h3>标题</h3> <p class="page">11111</p> <p class="page">22222</p> <script> $(function(){ //伪类选择器、结构选择器 //：first:只匹配第一个元素的内容 $(".p1:first").html("AAAA"); //：last $(".p1:last").html("DDDD"); //:even,偶数,index从0开始的 $(".p1:even").html("even"); //:odd，奇数 $(".p1:odd").html("odd"); //:eq(index),过滤第几个符合条件的标签 $(".p1:eq(2)").html("AAAA~~~~"); //:gt(index),大于index的元素，不包含index $(".p1:gt(2)").html("gt~~~~"); //:lt(index) $(".p1:lt(2)").html("lt~~~~"); //:header:匹配当前页面中的标题标签 $(":header").html("哈哈哈哈哈~~~~"); //:not(selector): 否定 $("p:not(.p1)").html("hgajeghjahgj"); }) </script> </body> </html>
3.2内容过滤器
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!--引入js文件--> <script src="js/jquery-3.3.1.js" type="text/javascript"></script> </head> <body> <p class="p1">aaaaaaaa</p> <p class="p1">abbbb</p> <p class="p1">cccc</p> <p class="p1">dddd</p> <p class="page">11111</p> <p class="page">22222</p> <p> <font></font> </p> <table> <tr> <td> <p></p> </td> </tr> <tr> <td> <span></span> </td> </tr> </table> <script> $(function(){ //:contains(文本内容):匹配包含指定文本的元素 //需求：查找文本内容包含a的p标签 $("p:contains('a')").html("AAAAAAAA"); //:has(selector): //一个标签的内容：纯文本内容和html内容 $("td:has(p)").html("AAAAAAAA"); //:empty:匹配文本为空的元素 $("p:empty").html("AAAAAAAA"); //:parent 匹配含有子元素的元素 $("p:parent").html("AAAAAAAA"); }) </script> </body> </html>
3.3可见性过滤器
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!--引入js文件--> <script src="js/jquery-3.3.1.js" type="text/javascript"></script> </head> <body> <input type="text" value="值1" /> <input type="text" value="值11" /> <!--设置input隐藏--> <!--方式一--> <input type="hidden" value="值2" /> <!--方式二--> <input type="text" value="值3" style="display: none;" /> <script> $(function(){ //:visible 匹配可见的元素 //:hidden 匹配不可见的元素 //val():如果要给匹配到的元素设置值，则会全部设置.但是，获取值，则获取匹配到的第一个元素的值 console.log($("input:visible").val()); $("input:visible").val("hello"); //如果要获取具体的某个元素对象，则可以在筛选的基础上再接着筛选 $("input:hidden:first"); }) </script> </body> </html>
3.4表单对象的属性过滤器
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!--引入js文件--> <script src="js/jquery-3.3.1.js" type="text/javascript"></script> </head> <body> <form> <input type="checkbox" value="多选框1" checked="checked"/> <input type="checkbox" value="多选框2" checked="checked"/> <input type="checkbox" value="多选框" /> <!--不可用按钮--> <input type="button" value="按钮" disabled /> <select> <option>1111</option> <option>2222</option> <option selected="selected">3333</option> </select> </form> <script> $(function(){ //:checked:checked="checked"设置给checkbox和radio console.log($("input:checked:eq(0)").val()); console.log($("input:checked:eq(1)").val()); //:enabled //:disabled console.log($("input:disabled").val()); //：selected：selected="selected"设置给select下面的option标签 $("select option:selected"); }) </script> </body> </html>
3.5表单子元素的过滤器
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!--引入js文件--> <script src="js/jquery-3.3.1.js" type="text/javascript"></script> </head> <body> <ul> <li>选项1</li> <li>选项2</li> <li>选项3</li> <li>选项4</li> </ul> <ul> <li>选项~~~~</li> <li>选项3~~~</li> <li>选项4~~~~</li> <li>选项5~~~~</li> </ul> <script> $(function(){ //：first-child var $jqObj = $("ul li:first"); var $jqObj = $("ul li:first-child"); //:last-child //:only-child,匹配你只有一个子标签的标签，测重点是子标签 //console.log( $("ul li:only-child").html()) //：nth-child(index)；匹配每个父标签下的第index个子标签 var $jqObj = $("ul li:nth-child(3)"); console.log($jqObj); }) </script> </body> </html>
4.属性选择器
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!--引入js文件--> <script src="js/jquery-3.3.1.js" type="text/javascript"></script> </head> <body> <div name="div1">标题</div> <div name="div2">标题</div> <div name="div3">标题</div> <div name="div4hello">标题</div> <div name="div4fsgrrf">标题</div> <div name="div5f" id="box">标题</div> <script> //[attr] 匹配包含给定属性的所有元素 //$("div[name]").css("background-color","red"); //[attr=value] 匹配给定属性值固定的元素 //$("div[name='div4']").css("background-color","blue"); //[attr!=value] //$("div[name!='div4']").css("background-color","blue"); //[attr*=value] 包含value的属性 //$("div[name*='div4']").css("background-color","blue"); //[attr^=value] 属性值以value开头的 $("div[name^='div4']").css("background-color","green"); //[attr$=value] 属性值以value结尾的 $("div[name$='f']").css("background-color","red"); //[selector1][selector2][selector3],复合属性选择器，需要同时满足多个条件的时候 $("div[name][id='box']"); </script> </body> </html>
5.表单选择器
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!--引入js文件--> <script src="js/jquery-3.3.1.js" type="text/javascript"></script> </head> <body> <div id="#box"></div> <form> <input type="text" /> <input type="password" /> <input type="checkbox" /> <input type="radio" /> <input type="color" /> <input type="date" /> <input type="email" /> <input type="file" /> <input type="button" /> <input type="submit" /> <input type="reset" /> <input type="image" /> <input type="hidden" /> </form> <script> $(function(){ //$("input[type='']") $("input:checkbox"); /* * :file * :image * :radio * :hidden * */ }) </script> </body> </html>
6.注意问题
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!--引入js文件--> <script src="js/jquery-3.3.1.js" type="text/javascript"></script> </head> <body> <!--<div id="box#text">ghjeskrhkref</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">小张~~~</div> <div style="display: none;" class="name">小李~~~~</div> <script> $(function(){ //1.特殊符号的使用 //如果选择器中包含#和.等特殊符号的时候，需要使用\\将其转义 //$("#box\\#text").css("background-color","cyan"); //2，空格 //层次选择器 ,匹配的是小王 小张 小李 老王 var $jqObj1 = $(".name :hidden"); //过滤选择器，匹配的是老王 小张~~~ 小李~~~~ var $jqObj2 = $(".name:hidden"); console.log($jqObj1.length); console.log($jqObj2.length); }) </script> </body> </html>
四、jQuery操作元素
元素的内容：定义在元素的开始标签和结束标签之间的内容，分为文本内容和html内容
<div> <p>文本</p> </div>
1.操作文本内容
text()
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!--引入js文件--> <script src="js/jquery-3.3.1.js" type="text/javascript"></script> </head> <body> <div> <p>文本内容</p> </div> <div> <p>文本内容~~~~~~~</p> </div> <script> $(function(){ /* text():用于获取匹配到的所有元素的文本内容 text(val):用于给匹配到的元素设置内容 */ //获取 //console.log($("div").text()); //设置 $("div").text("hello"); }) </script> </body> </html>
2.操作html内容
html()
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!--引入js文件--> <script src="js/jquery-3.3.1.js" type="text/javascript"></script> </head> <body> <div> <p>文本内容</p> </div> <div> <p>文本内容~~~~~~~</p> </div> <script> $(function(){ /* html():用于获取，但是只获取匹配到的第一个元素的html内容，区别于text() html（val）,用于设置，设置所有匹配到的元素的html内容，和text()相同的 */ //获取 //console.log($("div").html()); //设置 //$("div").html("hello"); //注意：如果设置的内容中包含html标签，也会解析 $("div").html("<ul><li>22222</li><li>33333</li></ul>"); }) </script> </body> </html>
3.操作元素值
val()
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!--引入js文件--> <script src="js/jquery-3.3.1.js" type="text/javascript"></script> </head> <body> <input type="text" value="aaaa" /> <input type="text" value="bbbbb" /> <script> $(function(){ /* * val(),获取第一个匹配到的元素的value值 * * * val(xx)用于给所有匹配到的元素设置value值 */ //console.log($("input").val()); $("input").val("xxxxxxx"); }) </script> </body> </html>
4.操作元素的css样式
4.1修改css类
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .box{ width: 100px; height: 100px; background-color: red; } </style> <!--引入js文件--> <script src="js/jquery-3.3.1.js" type="text/javascript"></script> </head> <body> <div class="box">gerthet</div> <script> $(function(){ /* * addClass(class),为所有匹配到的元素添加指定的类选择器 * * removeClass(class),为所有匹配到的元素删除指定的类选择器 * * toggleClass(class):如果class存在则删除，如果不存在则添加【在使用之前会做一个判断】 */ //注意：可以给指定的标签动态的添加选择器 //$("div").addClass("box"); //$("div").removeClass("box"); $("div").toggleClass("box"); }) </script> </body> </html>
4.2修改css属性
css()：结合css的属性使用
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!--引入js文件--> <script src="js/jquery-3.3.1.js" type="text/javascript"></script> </head> <body> <div>gerthet</div> <script> $(function(){ /* * * css(name):获取，获取第一个匹配到的元素的指定样式值 * * css(name,value):设置，给匹配到的元素设置指定的样式 * * css({"属性":"值"，"属性"："值"。。。。。}),可以给匹配到的元素设置多个css属性 */ //$("div").css("font-size","30px"); $("div").css({"width":"100px","height":"100px","background-color":"cyan"}); console.log($("div").css("background-color")); //js 对象.style.属性 }) </script> </body> </html>
五、jQuery操作DOM
1.创建节点
js:
createElement()
createTextNode()
jq：
$()
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!--引入js文件--> <script src="js/jquery-3.3.1.js" type="text/javascript"></script> </head> <body> <div></div> <script> $(function(){ /* * $("") * 1.创建元素节点 * 2.创建文本节点 * 3.创建属性节点 * * * 添加子节点：append() */ //1. //1.1创建子节点的对象 var $jqobj = $("<p></p>"); //createElement() //1.2将创建好的节点添加给指定的节点 $("div").append($jqobj); //2. var $jqobj = $("<p>hello</p>"); $("div").append($jqobj); //3. var $jqobj = $("<p name='p1'>hello</p>"); $("div").append($jqobj); }) </script> </body> </html>
2.添加节点
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!--引入js文件--> <script src="js/jquery-3.3.1.js" type="text/javascript"></script> </head> <body> <div></div> <!--<p>hello~~~</p>--> <p id="p1"></p> <script> $(function(){ //1.在元素的内部插入：添加子节点 /* * * 对象1.append(对象2):给对象1.添加子节点对象2 【追加，尾部】 * 对象1.appendTo(对象2)：将对象1添加给对象2 * * * prepend():为所有匹配到的元素的内部添加前置内容【插入：头部】 * prependTo() */ var $p1 = $("<p>hello</p>"); var $p2 = $("<p>hello~~~~</p>"); var $div = $("div"); //父节点调用 $div.append($p1); //子节点调用 $p2.appendTo($div); //2.在元素外部添加：添加兄弟节点 /* * after():在每个匹配的元素之后插入内容 * insertAfter()：将所有匹配到的元素插入到一个指定元素的后面 * * before() * insertBefore() * * */ var $p = $("#p1"); var $p1 = $("<p>hello</p>"); var $p2 = $("<p>hello~~~~</p>"); //已知的节点对象调用 $p.after($p1); //append //新的节点对象调用 $p2.insertAfter($p); //appendTo }) </script> </body> </html>
3.删除节点
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!--引入js文件--> <script src="js/jquery-3.3.1.js" type="text/javascript"></script> </head> <body> <div> <p id="p1">hello</p> </div> <script> $(function(){ /* * remove(),可以删除所有匹配到的元素【删除某个节点之后，该节点包含的所有的后辈节点都会被删除， * 但是，该方法返回一个指向被删除的节点的引用，以后可以继续使用这些元素】 * * detach(),可以删除所有匹配到的元素片【不会将匹配到的元素从jq对象中删除，与remove不同的是，与该节点绑定的事件不会被删除】 * * empty():并不是删除节点，而是清空节点，可以清空指定节点所有的后代节点 * */ //给一个对象绑定事件 $("div p").click(function(){ //获取当前对象的文本值 alert($(this).text()); }) //remove() var $p = $("div p").remove(); $("div").append($p); //detach() var $p = $("div p").detach(); $("div").append($p); //empty() $("div p").empty(); }) </script> </body> </html>
4.复制节点
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!--引入js文件--> <script src="js/jquery-3.3.1.js" type="text/javascript"></script> </head> <body> <div> <p id="p1">hello</p> </div> <script> $(function(){ /* * clone(boolean)，当为true时，不但复制元素本身，还会复制其绑定的事件 * * */ //需求：当点击p标签的时候，将其复制一份，添加为它的兄弟标签 $("div p").bind("click",function(){ $(this).clone().insertAfter($(this)); }) }) </script> </body> </html>
5.替换节点
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!--引入js文件--> <script src="js/jquery-3.3.1.js" type="text/javascript"></script> </head> <body> <div id="div1"> </div> <div id="div2"> </div> <script> $(function(){ /* * 对象.replaceAll(selector):用指定的标签对象去替换全部匹配到的标签 * * selector.replaceWith(content):用content去替换指定的对象【selector】 */ $("#div1").replaceWith("<div>hello</div>"); $("<div>hello</div>").replaceAll($("#div2")) }) </script> </body> </html>
6.遍历节点
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!--引入js文件--> <script src="js/jquery-3.3.1.js" type="text/javascript"></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"/> <img src="img/1.jpg" width="80px" height="80px"/> <img src="img/1.jpg" width="80px" height="80px"/> <script> $(function(){ /* * each(callback) * callback:回调，是一个函数，该函数可以接收一个形参index，index表示元素的序号,序号从0开始 */ //需求：当鼠标移动到指定的图片上的时候，显示标题，第 几 张 $("img").each(function(index){ //img:title悬浮标题 //attr() $(this).attr("title","第" + (index + 1) + "张图"); }) }) </script> </body> </html>
7.包裹节点
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!--引入js文件--> <script src="js/jquery-3.3.1.js" type="text/javascript"></script> </head> <body> <span>11111</span> <script> $(function(){ /* *selector.wrap(xx) ： * */ //将匹配到的span标签用p、标签包裹起来 //$("span").wrap("<p>aaaa</p>") append //unwrap() //$("span").unwrap(); //wrapAll()，用法跟wrap类似，但是，事件也会包裹在内 //wrapInner()， $("span").wrapInner("<p>aaaa</p>") }) </script> </body> </html>
3048
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
