jQuery選擇器 層次選擇器
阿新 • • 發佈：2019-01-03
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../jquerysource/jquery.js" type="text/javascript"></script> <!-- <link rel="stylesheet" type="text/css" href="../css/style.css"/>--> <style> div,span,p { width:140px; height:140px; margin:5px; background:#aaa; border:#000 1px solid; float:left; font-size:17px; font-family:Verdana; } div.mini { width:55px; height:55px; background-color: #aaa; font-size:12px; } div.hide { display:none; } </style> <script> /* 輔助: 1,自動重置 2,給元素新增動畫 */ $(document).ready(function(){ //手動重置頁面元素 $("#reset").click(function(){ $("*").removeAttr("style"); $("div[class=none]").css({"display":"none"}); }); //判斷是否自動重置 $("input[type=button]").click(function(){ if($("#isreset").is(":checked")){ $("#reset").click(); } }); //給id為mover的元素新增動畫. function animateIt() { $("#mover").slideToggle("slow", animateIt); } animateIt(); }) $(function(){ //層次選擇器 //1.$("ancestor descendant");選取ancestor(先祖)裡的所有descendant(後代)元素;集合;$("div span")選取<div>裡的所有<span>元素 //2.$("parent>child");選取parent元素下child(子)元素,而1中選擇的是後代元素;集合;$("div>span")選取<div>下名字為<span>的子元素 //3.$("prev + next");選取prev後的next元素,同輩元素 集合; $(".one>div")選取class為one的下一個<div>的同輩元素 //4.$("prev~sliblings");選取prev元素之後所有的sliblings(兄弟姐妹)元素,同輩元素;集合;$("#two~div")選取id為two元素後面的所有<div>同輩元素 //改變body內所有div顏色 $("#btn1").click(function(){ $("body div").css("background","#bfa"); }); //改變body內子div元素的顏色 $("#btn2").click(function(){ $("body>div").css("background","#bfa"); }); //改變class為one的下一個<div>同輩元素背景顏色 $("#btn3").click(function(){ $(".one+div").css("background","#bfa"); }); //改變id為two的元素後面的所有<div>同輩元素背景顏色 $("#btn4").click(function(){ $("#two~div").css("background","#bfa"); }); //5.1和2選擇器常用,而3,4選擇器有簡單的方法替代 //a.$(".one + div");等價於$(".one").next("div"); //改變class為one的下一個<div>同輩元素背景顏色 $("#btn5").click(function(){ $(".one").next("div").css("background","#bfa"); }); //不加引數獲取next,不是指定的next //$("#btn5").click(function(){ // $(".one").next().css("background","#bfa"); //}); //b.$("prev~div");等價於$("prev").nextAll("div"); $("#btn6").click(function(){ $("#two").nextAll("div").css("background","#bfa"); }); //不加引數獲取全部 // $("#btn6").click(function(){ // $("#two").nextAll().css("background","#bfa"); // }); //c.sliblings()與$("prev~div")與$("prev").nextAll("div")比較;sliblings()與位置無關而後兩者都是prev元素後面的元素 $("#btn7").click(function(){ $("#two").siblings("div").css("background","#bfa"); }); }); </script> </head> <body> <h3>層次選擇器.</h3> <button id="reset">手動重置頁面元素</button> <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">點選下列按鈕時先自動重置頁面</label><br /><br /> <!-- 控制按鈕 --> <input type="button" value="改變body內所有div顏色" id="btn1"/> <input type="button" value="改變body內子div元素的顏色" id="btn2"/> <input type="button" value="改變class為one的下一個<div>同輩元素背景顏色" id="btn3"/> <input type="button" value="改變id為two的元素後面的所有<div>同輩元素背景顏色" id="btn4"/> <input type="button" value="等價方法:改變class為one的下一個<div>同輩元素背景顏色" id="btn5"/> <input type="button" value="等價方法:改變id為two的元素後面的所有<div>同輩元素背景顏色" id="btn6"/> <input type="button" value="sliblings 改變id為two的元素所有<div>同輩元素背景顏色,與位置無關" id="btn7"/> <br /><br /> <!-- 測試的元素 --> <div class="one" id="one" > id為one,class為one的div <div class="mini">class為mini</div> </div> <div class="one" id="two" title="test" > id為two,class為one,title為test的div. <div class="mini" title="other">class為mini,title為other</div> <div class="mini" title="test">class為mini,title為test</div> </div> <div class="one"> <div class="mini">class為mini</div> <div class="mini">class為mini</div> <div class="mini">class為mini</div> <div class="mini"></div> </div> <div class="one"> <div class="mini">class為mini</div> <div class="mini">class為mini</div> <div class="mini">class為mini</div> <div class="mini" title="tesst">class為mini,title為tesst</div> </div> <span id="next">next下一個.</span> <div style="display:none;" class="none"> style的display為"none"的div </div> <div class="hide">class為"hide"的div</div> <div> 包含input的type為"hidden"的div<input type="hidden" size="8"/> </div> <span id="mover">正在執行動畫的span元素.</span> </body> </html>