JQuery动态查找元素
一、常见方法介绍
| 函数 | 作用 |
| parent() | 寻找父节点 |
| parents() | 找到所有祖先节点 |
| children() | 查找所有子节点 |
| contents() | 查找下面的所有内容，包括节点和文本 |
| prev() | 查找上一个兄弟节点 |
| prevAll() | 查找之前的所有兄弟节点 |
| next() | 查找下一个兄弟节点 |
| nextAll() | 查找之后的所有兄弟节点 |
| siblings() | 查找所有兄弟节点 |
| find(expr) | 查找该节点的expr节点 |
| each() | 对该节点进行迭代 |
二、实例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JQ动态查询节点增加节点</title> 6 </head> 7 <body> 8 <div class="container"> 9 <hr> 10 <div id="wrap"> 11 <hr> 12 <p class="first">我是第一个子元素</p> 13 <hr> 14 <p class="second">我是第二个子元素</p> 15 <hr> 16 </div> 17 <div class="btn-group"> 18 <button class="append">append</button> 19 <button class="appendTo">appendTo</button> 20 <button class="prepend">prepend</button> 21 <button class="prependTo">prependTo</button> 22 <button class="after">after</button> 23 <button class="before">before</button> 24 <button class="appendChild" onclick="appChild()">appendChild</button> 25 <button class="insertAfter">insertAfter</button> 26 <button class="insertBefore">insertBefore</button> 27 </div> 28 29 </div> 30 31 32 <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> 33 <script> 34 $(function() { 35 $(".first").parent().prepend("<p class='zero'>我是zero元素prepend</p>") 36 //append(),在父级最后追加一个子元素 37 $(".append").hover(function() { 38 $(this).css('color', '#999'); 39 }, function() { 40 $(this).css('color', '#123456'); 41 }); 42 $(".append").click(function() { 43 $(".btn-group").on("click", function() { 44 $("button").css("width", "+=1") 45 }); 46 $(".append").css("background", "blue"); 47 $("#wrap").append("<p class='three'>我是子元素append</p>"); 48 //$("#wrap").lastChild.setAttribute("backgroundColor","blue"); 49 50 }); 51 52 //appendTo(),将子元素追加到父级的最后 53 $(".appendTo").click(function() { 54 $("<p class='three'>我是子元素appendTo</p>").appendTo($("#wrap")); 55 }); 56 57 //prepend(),在父级最前面追加一个子元素 58 $(".prepend").click(function() { 59 $("#wrap").prepend("<p class='three'>我是子元素prepend</p>"); 60 }); 61 62 //prependTo(),将子元素追加到父级的最前面 63 $(".prependTo").click(function() { 64 $("<p class='three'>我是子元素prependTo</p>").prependTo($("#wrap")); 65 }); 66 67 //after(),在当前元素之后追加（是同级关系） 68 $(".after").click(function() { 69 $("#wrap").after("<p class='siblings'>我是同级元素after</p>"); 70 }); 71 72 //before(),在当前元素之前追加（是同级关系） 73 $(".before").click(function() { 74 $("#wrap").before("<p class='siblings'>我是同级元素before</p>"); 75 }); 76 77 //insertAfter(),将元素追加到指定对象的后面（是同级关系） 78 $(".insertAfter").click( 79 function() { 80 $("<p class='three'>我是同级元素insertAfter</p>") 81 .insertAfter($("#wrap")); 82 }); 83 //insertBefore(),将元素追加到指定对象的前面（是同级关系） 84 $(".insertBefore").click( 85 function() { 86 $("<p class='three'>我是同级元素insertBefore</p>") 87 .insertBefore($("#wrap")); 88 }); 89 }); 90 91 //appendChild(),在节点的最后追加子元素 92 function appChild() { 93 // 创建p节点 94 var para = document.createElement("p"); 95 // 创建文本节点 96 var node = document.createTextNode("我是子集appendChild新段落。"); 97 // 把文本节点添加到p节点里 98 para.appendChild(node); 99 100 // 查找div1 101 var element = document.getElementById("wrap"); 102 // 把p节点添加到div1里 103 element.appendChild(para); 104 } 105 </script> 106 <ul id="u1"> 107 <li id="a">javascript</li> 108 <li id="b">jquery</li> 109 <li id="c">html</li> 110 </ul> 111 <ul id="u2"> 112 <li id="d">css3</li> 113 <li id="e">php</li> 114 <li id="f">java</li> 115 </ul> 116 <script type="text/javascript"> 117 $(function() { 118 $("ul").find("li").each(function() { 119 $("li").css("backgroundColor", function(dap) { 120 return dap % 2 == 0 ? "red" : "blue";//索引值从0开始（三目运算） 121 }); 122 $(this).css("color", "white"); 123 }) 124 $("#wrap").css("background", "blue"); 125 }) 126 </script> 127 </body> 128 </html>