jQuery中的基本過濾選擇器（四、三）：:first、:last、:not() ... ...
阿新 • • 發佈：2019-01-03
<!DOCTYPE html> <html> <head> <title>基本過濾選擇器</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/jquery-1.11.3.js"></script> <style type="text/css"> body{ font-family: "Microsoft YaHei" } .divCls { width:180px; height:180px; color: white; border: solid 1px white; margin-left: 10px; float: left; background-color: #4CA902; } .subDivCls { width:60px; height:60px; color:white; border: solid 1px white; font-size: 12px; margin: 5px; float: right; background-color: #FF4500; } .spanCls{ color:white; border: solid 1px white; margin: 5px; float: left; height: 50px; background-color: #B7103B; } div span{ border: solid 1px white; font-size: 12px; margin:5; background-color: #B7103B; } .cGreen{background-color: #4CA902} .cPink{background-color: #ED4A9F} .cBlue{background-color: #0092E7} .cCyan{background-color: #01A6A2} .cYellow{background-color: #DCA112} .cRed{background-color: #B7103B} .cPurple{background-color: #792F7C} .cBlack{background-color: #110F10} .cOrange{background-color: #FF4500} .cGray{background-color: #A9A9A9} .hide{display: none;} </style> <script type="text/javascript"> $(document).ready(function() { // <input type="button" id="btn1" value=":first選取id為div4的第一個子div"> $("#btn1").click(function() { /* 注意:前後不能加空格，因為其實我們知道空格是代表後代的意思； 之所以>前後可以加空格，是因為其實>子元素的意思，而子元素也是從後代中取的， 所以這裡加空格不影響，並且後代的空格可以加任意個，只是平時我們為了好看只 加了一個空格而已。 這裡選擇id為div4的第一個子div，可以用後代選擇器，也可以用子元素選擇器； 但是我覺得子元素選擇器更準確，所以使用子元素選擇器。 但是這裡兩種都能達到同樣的效果。 */ // $("#div4 div:first").addClass("cBlack"); $("#div4 > div:first").addClass("cBlack"); }); // <input type="button" id="btn2" value=":last選取id為div4的最後一個子div"> $("#btn2").click(function() { $("#div4 > div:last").addClass("cBlack"); }); // <input type="button" id="btn3" value=":not()選取id為div2的所有非div元素"> $("#btn3").click(function() { // 注意之前說的規則！冒號左邊的空格必須有，代表後代； // 冒號右邊不能有空格！！冒號一般情況下都不能加空格， // 除非和後代選擇器，子元素選擇器配合使用才加空格！ // 千萬注意這裡的冒號右邊不能加空格，不然就涼涼。 $("#div2 :not(div)").addClass("cBlack"); }); // <input type="button" id="btn4" value=":even選取索引號(從0開始)為偶數的div元素"> $("#btn4").click(function() { // 對所有的div，不再是某一個div了 $("div:even").addClass("cBlack"); }); // <input type="button" id="btn5" value=":odd選取索引號(從0開始)為奇數的div元素"> $("#btn5").click(function() { $("div:odd").addClass("cBlack"); }); // <input type="button" id="btn6" value=":eq()選取索引號(從0開始)等於2的div元素"> $("#btn6").click(function() { // 千萬注意，這裡的索引號是從0開始的！！！ $("div:eq(2)").addClass("cBlack"); }); // <input type="button" id="btn7" value=":gt選取索引號(從0開始)大於2的div元素"> $("#btn7").click(function() { $("div:gt(2)").addClass("cBlack"); // gt：great than // 以上是大於的時候，大於等於就使用加逗號分隔開的形式。 // $("div:gt(2), div:eq(2)").addClass("cBlack"); // gt：great than }); // <input type="button" id="btn8" value=":lt選取索引號(從0開始)小於2的div元素"> $("#btn8").click(function() { $("div:lt(2)").addClass("cBlack"); // lt：little than // 以上是小於的時候，小於等於就使用逗號加分隔開的形式。 // $("div:lt(2), div:eq(2)").addClass("cBlack"); // lt：little than }); // <input type="button" id="btn9" value=":header選取標題元素"> /* 所謂header選擇器，其實就是對h1~hx我記不得了，所有的標題標籤的選擇 */ $("#btn9").click(function() { // 設定字型為白色，背景為黑色，並且彈出內容來表示選中。 /* 在jQuery中使用方法連綴很方便，因為其回撥的屬性，可以支援我們 在語句後一直連綴方法，最後都是返回執行的$("*:header")中的內容 click().change().addClass(). ... 可以一直連綴下去。 這樣的話，一個語句就可以完成我們的全部操作。 < js中都是onclick，onchange；jQuery中都是click，change之類的 發現從過程到了物件 ... > $("*:header").css("color", "white").addClass("cBlack"); alert($("*:header").text()); */ $(":header").css("color", "white").addClass("cBlack"); alert($(":header").text()); /* 以上兩種方式加*或者什麼都不寫把冒號左邊空出來。 兩種方式都可以。因為之前講過，*代表整個文件樹（所有html內容） 在具體使用中可以在冒號左邊再使用expr來定位位置： 具體的某個div中h標籤等。 */ }); // <input type="button" id="btn10" value=":animated選取正在執行動畫的div元素"> $("#btn10").click(function() { // 所有正在執行動畫的div，所以不能再冒號左邊加空格 $("div:animated").addClass("cBlack"); }); }); // --------動畫設定--------begin $(document).ready(function() { // 設定執行動畫 doAnimate($("#div5")[0]); }); function doAnimate(obj){ $(obj).animate({"opacity": "toggle"}, "slow", function(){ doAnimate(this); }); } // --------動畫設定--------end </script> </head> <body> <h3>基本過濾選擇器</h3><br><br> <div id="div1" class="divCls">id 為div1 的div<br><br> <div class="subDivCls">class為subDivCls的div</div> </div> <div id="div2" class="divCls">id 為div2 的div <br><br> <span id="span1">div2裡面的span,id為span1</span> <br><br> <div class="subDivCls" style="float:left;">class為subDivCls的div</div> <div class="subDivCls">subDivCls<br> <span id="span2">span2</span> </div> </div> <div id="div3" class="divCls" title="itcast"> id 為div3 的div，title為itcast，包含隱藏輸入框 <input type="hidden" value="hello"> </div> <span class="spanCls">div3的兄弟元素span</span> <div id="div4" class="divCls">id 為div4 的div<br> <div class="subDivCls" style="float:left;">subDivCls<br> <span id="span2">span4</span></div> <div class="subDivCls" title="itcast">title為itcast</div> <div class="subDivCls" style="float:left;">class為subDivCls的div</div> <div class="subDivCls"></div> </div> <div id="div5" class="divCls" >id為div5的正在執行動畫的div</div> <p style="clear:both;"></p> <br> <hr> <input type="button" id="btn1" value=":first選取id為div4的第一個子div"> <input type="button" id="btn2" value=":last選取id為div4的最後一個子div"> <input type="button" id="btn3" value=":not()選取id為div2的所有非div元素"> <input type="button" id="btn4" value=":even選取索引號(從0開始)為偶數的div元素"> <input type="button" id="btn5" value=":odd選取索引號(從0開始)為奇數的div元素"> <input type="button" id="btn6" value=":eq()選取索引號(從0開始)等於2的div元素"> <input type="button" id="btn7" value=":gt選取索引號(從0開始)大於2的div元素"> <input type="button" id="btn8" value=":lt選取索引號(從0開始)小於2的div元素"> <input type="button" id="btn9" value=":header選取標題元素"> <input type="button" id="btn10" value=":animated選取正在執行動畫的div元素"> </body> </html>