jQuery的DOM操作
html操作
1 // html() 2 // 获取 -- 北京节点的HTML代码 3 console.log($("#bj").html()); 4 // 设置(重置内容，不是追加或累加) -- 天津节点设置区的内容 5 $("#tj").html("天津<ul><li>塘沽区</li></ul>");
文本操作 -- text()
1 //text() 2 //获取 3 console.log($("#nj").text()); 4 // 设置 5 $("#nj").text("isChanged");
值操作 -- val()
1 // val() 2 // 获取 3 console.log($("#user").val()); 4 // 设置 5 $("#user").val("isChanged again");
属性操作 -- attr()
1 // attr() 2 // 获取 3 console.log($("#bj").attr("name")); 4 // 设置 5 $("#bj").attr("name", "北京") 6 console.log($("#bj").attr("name")); 7 8 // 删除 9 $("#bj").removeAttr("name"); 10 console.log($("#bj").attr("name")); //undefined
以上例子的html页面代码如下
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>01_DOM</title> 6 <script src="js库/jquery-1.11.3.js"></script> 7 </head> 8 <body> 9 <input type="text" id="user" value="请输入用户名"> 10 <ul> 11 <li id="bj" name="beijing">北京 12 <ul> 13 <li>海淀区</li> 14 <li>朝阳区</li> 15 <li>东城区</li> 16 </ul> 17 </li> 18 <li id="tj">天津</li> 19 <li id="nj">南京</li> 20 </ul> 21 </body> 22 </html>
样式操作
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>04_jQuery操作样式</title> 6 <script src="js库/jquery-1.11.3.js"></script> 7 <style> 8 div{ 9 width: 300px; 10 height: 300px; 11 border: 1px solid #fff; 12 background-color: #bfb; 13 } 14 .mini{ 15 width: 100px; 16 height: 100px; 17 border: 1px solid #fff; 18 background-color: #fbb; 19 } 20 .one{ 21 width: 400px; 22 height: 400px; 23 border: 1px solid #fff; 24 background-color: #bbf; 25 } 26 </style> 27 </head> 28 <body> 29 <input type="button" id="btn1" value="attr方法"> 30 <input type="button" id="btn2" value="addClass方法"> 31 <input type="button" id="btn3" value="removeClass方法"> 32 <input type="button" id="btn4" value="toggleClass方法"> 33 <input type="button" id="btn5" value="hasClass方法"> 34 <input type="button" id="btn6" value="css方法1"> 35 <input type="button" id="btn7" value="css方法2"> 36 <div></div> 37 <div></div> 38 39 <script> 40 $("#btn1").click(function(){ 41 // 设置 -- attr() - 覆盖之前所有的样式 42 $("div:first").attr("class", "mini"); 43 }); 44 $("#btn2").click(function(){ 45 // 追加 -- addClass() - 在之前的样式基础上累加样式 46 $("div:first").addClass("one"); 47 }); 48 $("#btn3").click(function(){ 49 // 删除 -- removeClass() 50 /* 51 removeClass()方法 52 * 不传参 -- 删除所有样式 53 * 传参 -- 删除指定样式 54 */ 55 $("div:first").removeClass(); 56 }); 57 $("#btn4").click(function(){ 58 // 切换 -- toggleClass() - 在没有样式与指定样式之间切换 59 $("div:first").toggleClass("mini"); 60 }); 61 $("#btn5").click(function(){ 62 // 判断 -- hasClass() 63 alert($("div:first").hasClass("mini")); 64 }); 65 $("#btn6").click(function(){ 66 // CSS 67 $("div:first").css({ 68 150, 69 height: 150, 70 background: "#ffb" 71 }); 72 }); 73 $("#btn7").click(function(){ 74 // CSS 75 $("div:first").css("width", "150").css("height", "150").css("background", "#ffb") 76 }); 77 </script> 78 79 </body> 80 </html>
遍历节点
获取父元素
parent( )方法可以获取指定元素的父元素。
- parent()方法，不传递任何参数，是获取指定元素的父元素。
- parent(selector)方法，是获取指定元素的符合selector选择器的父元素。
var $parent = $("li:first").parent(); //第一个<li>元素的父元素
获取子元素
children( )方法可以获取指定元素的子元素。
- children()方法，不传递任何参数，可以获取指定元素的所有子元素。
- children(selector)方法，是获取指定元素的符合selector选择器的子元素。
获取兄弟元素
- next( )方法是获取指定元素的下一个兄弟元素。
- next()方法，不传递任何参数，是获取指定元素的下一个兄弟元素。
- next(selector)方法，是获取指定元素符合selector选择器的下一个兄弟元素。
- prev( )方法是获取指定元素的上一个兄弟元素。
- prev( )方法，不传递任何参数，是获取指定元素的上一个兄弟元素。
- prev(selector)方法，是获取指定元素符合selector选择器的上一个兄弟元素。
- siblings( )方法是获取指定元素的所有兄弟元素。
- siblings( )方法，不传递任何参数，是获取指定元素的所有兄弟元素。
- siblings(selector)方法，是获取指定元素符合selector选择器的所有兄弟元素。
查找指定后代元素
find(selector)方法，可以查找指定元素的符合selector选择器的后代元素。
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>05_jQuery遍历节点</title> 6 <script src="js库/jquery-1.11.3.js"></script> 7 </head> 8 <body> 9 <ul id="city"> 10 <li id="bj" name="beijing">北京 11 <ul> 12 <li>海淀区</li> 13 <li>朝阳区</li> 14 <li>东城区</li> 15 </ul> 16 </li> 17 <li id="tj">天津</li> 18 <li id="nj">南京</li> 19 </ul> 20 21 <script> 22 // 1. 获取北京节点的父元素 23 console.log($("#bj").parent().attr("id")); 24 25 // 2. 获取北京节点的祖先元素 26 console.log($("#bj").parents()); 27 28 // 3. 获取id为city的所有子元素 29 console.log($("#city").children()); 30 31 // 4. 兄弟元素 32 console.log($("#tj").prev().attr("id")); 33 console.log($("#bj").next().attr("id")); 34 console.log($("#bj").siblings()); 35 36 // 5. 查找id为city元素内所有li元素的个数 37 console.log($("#city").find("li").length); 38 39 </script> 40 </body> 41 </html>
其他操作
创建操作
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jQuery创建元素</title> 6 <script src="js库/jquery-1.11.3.js"></script> 7 </head> 8 <body> 9 <ul id="game"> 10 <li>反恐精英</li> 11 <li>实况足球</li> 12 <li>魔兽世界</li> 13 </ul> 14 <script> 15 $("#game").append($("<li id='hj'>红色警戒</li>")); 16 $("#game").append($("<p>hello</p>")); 17 </script> 18 </body> 19 </html>
插入操作
- 内部插入
- append( )方法，将append( )后面的元素插入在append( )前面指定元素的后面。
- prepend( )方法，将prepend( )后面的元素插入在prepend( )前面指定元素的前面。
- appendTo( )方法，将appendTo( )前面的元素插入在appendTo( )后面的元素的后面。
- prependTo( )方法，将prependTo( )前面的元素插入在prependTo( )后面的元素的前面。
- 外部插入
- before( )方法，将before( )后面的元素插入在before( )前面的指定元素的前面。
- after( )方法，将after( )后面的元素插入在after( )前面的指定元素的后面。
- insertBefore( )方法，将insertBefore( )前面的元素插入在insertBefore( )后面的指定元素的前面。
- insertAfter( )方法，将insertAfter( )前面的元素插入在insertAfter( )后面的指定元素的后面。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jQuery插入</title> 6 <script src="js库/jquery-1.11.3.js"></script> 7 </head> 8 <body> 9 10 <ul id="city"> 11 <li>北京</li> 12 <li id="tj">天津</li> 13 <li>南京</li> 14 </ul> 15 16 <ul id="game"> 17 <li>反恐精英</li> 18 <li id="sk">实况足球</li> 19 <li>魔兽世界</li> 20 </ul> 21 22 <script> 23 // 操作天津和实况足球 24 // 内部插入 25 // $("#tj").append($("#sk")); 26 // $("#tj").appendTo($("#sk")); 27 // $("#tj").prepend($("#sk")); 28 // $("#tj").prependTo($("#sk")); 29 // 外部插入 30 // $("#tj").after($("#sk")); 31 // $("#tj").before($("#sk")); 32 // $("#tj").insertAfter($("#sk")); 33 $("#tj").insertBefore($("#sk")); 34 35 </script> 36 37 </body> 38 </html>
删除操作
jQuery中的删除操作分别为remove( )方法和empty( )方法。
- remove( )方法，删除自身元素及所有后代元素。
- empty( )方法，删除所有后代元素，但保留自身元素。该方法适合完成清空操作。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jQuery删除</title> 6 <script src="js库/jquery-1.11.3.js"></script> 7 </head> 8 <body> 9 10 <ul id="game"> 11 <li id="cs">反恐精英 12 <ul> 13 <li>警</li> 14 <li>匪</li> 15 </ul> 16 </li> 17 <li id="sk">实况足球 18 <ul> 19 <li>中国</li> 20 <li>日本</li> 21 </ul> 22 </li> 23 <li>魔兽世界</li> 24 </ul> 25 26 <script> 27 // $("#cs").remove(); //删除了id为cs的元素及其所有后代元素 28 $("#sk").empty(); //删除id为sk的所有后代子元素，保留了自身节点（清空） 29 </script> 30 31 </body> 32 </html>
替换操作
jQuery中的替换操作分别为replaceWith( )方法和replaceAll( )方法。
- replaceWith( )方法，该方法前面的元素是被替换元素。
- replaceAll( )方法，就是颠倒了的repalceWith( )方法。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jQuery替换</title> 6 <script src="js库/jquery-1.11.3.js"></script> 7 </head> 8 <body> 9 10 <button>按钮</button> 11 12 <p>段落一</p> 13 <p>段落二</p> 14 <p>段落三</p> 15 <p>段落四</p> 16 17 <script> 18 // 被替换元素.replaceWith("替换元素") 19 // $("button").replaceWith($("<p>这又是一个段落</p>")); 20 // 替换元素.replaceAll("被替换元素") 21 $("<input value='hello'>").replaceAll($("p")); 22 </script> 23 24 </body> 25 </html>