(5)Jquery1.8.3快速入門
阿新 • • 發佈：2018-06-02
code nextall first 當前 tex title cli AR UNC
一、Jquery的選擇器：
層級選擇器；
1、空格 div span div中的包含的所有span後代元素
2、 > div > span 緊密相連的直接子後代元素
3、+ div + span 下一個緊密相鄰的元素如果緊跟著後面不是span則取不到，
可以用 nextAll("span:first") 取元素後面第一個出現的span,
當前位置開始，後面所有的同輩元素nextAll("div")。
4、~ div ~ span 選取 div 後面的同輩元素 同 nextAll("span");
jquery的 siblings()方法與位置無關 只要是同一層級的元素就可以選取。
5、 prevAll 元素前面的所有同輩元素
效果：
源碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery 學習1</title> <!-- 導入jquery庫 --> <script type="text/javascript" src="jquery/jquery.js"></script> <script type="text/javascript"> $(function(){ $("#btn1").click(function(){//body元素下所有層級的div $("body div").css("background","#FFBBAA"); }); $("#btn2").click(function(){//body元素取第一層級的div $("body > div").css("background","#FFBBAA"); }); $("#btn3").click(function(){//id為d1的元素相鄰的下一個span元素 //如果不相鄰此方法不管用。 //$("#d1 + span").css("background","#FFBBAA"); $("#d1").nextAll("div:first").css("background","#FFBBAA"); }); $("#btn4").click(function(){//id為d3的元素下所有同輩元素 $("#d3 ~ div").css("background","#FFBBAA"); }); $("#btn5").click(function(){//id為d3的元素下所有同輩元素 $("#d3").siblings("div").css("background","#FFBBAA"); }); $("#btn6").click(function(){//id為d3的元素下所有同輩元素 $("#d3").prevAll("div").css("background","#FFBBAA"); }); }) </script> </head> <body> Jquery的選擇器： 層級選擇器； <br> 1、空格 div span div下的所有後代元素 <br> 2、 > div > span 後代元素 <br> 3、+ div + span 下一個相鄰的元素 nextAll("span:first") 當前位置開始，後面所有的同輩元素nextAll("div") <br/> 4、~ div ~ span 選取 div <strong>後面</strong>的同輩元素 jquery的 siblings()方法與位置無關 只要是同一層級的元素就可以選取。 <br/> 5、 prevAll 元素前面的所有同輩元素 <hr> <button id="btn1">獲取body中所有的div元素</button> <button id="btn2">獲取body中直接子元素是div的{取所有的子集，孫子輩及後代不取}</button> <button id="btn3">選擇id為d1的下一個相鄰元素</button> <button id="btn4">獲取id為d3的後面的所有兄弟元素</button> <button id="btn5">獲取id為d3的所有兄弟元素</button> <button id="btn6">獲取id為d3的前面的所有的元素</button> <p> 子層 <div id="d1"> 孫子層d1 </div> <span> 這是一個行信息</span> <div> div 孫子層 </div> </p> <hr> <div id="d3"> 子層2 <div style="background:#FFFFFF"> 孫子層2 </div> <br/> <span> 這是一個行信息2</span> <div id="d2"> div 孫子層2 </div> </div> <br/> <div> 這是第三個div層 </div> <br/> <span>這是第四個span</span> <p> <div> 這是第5個層</div> </p> </body> </html>
(5)Jquery1.8.3快速入門