jQuery 基本過濾選擇器
阿新 • • 發佈：2019-01-02
HTML程式碼：
<body> <h3>基本過濾選擇器.</h3> <button id="reset">手動重置頁面元素</button> <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">點選下列按鈕時先自動重置頁面</label><br /><br /> <input type="button" value="選擇第一個div元素." id="btn1"/> <input type="button" value="選擇最後一個div元素." id="btn2"/> <input type="button" value="選擇class不為one的 所有div元素." id="btn3"/> <input type="button" value="選擇索引值為偶數 的div元素." id="btn4"/> <input type="button" value="選擇索引值為奇數 的div元素." id="btn5"/> <input type="button" value="選擇索引值等於3的元素." id="btn6"/> <input type="button" value="選擇索引值大於3的元素." id="btn7"/> <input type="button" value="選擇索引值小於3的元素." id="btn8"/> <input type="button" value="選擇所有的標題元素." id="btn9"/> <input type="button" value="選擇當前正在執行動畫的所有元素." id="btn10"/> <br /><br /> <!-- 測試的元素 --> <!-- 測試的元素 --> <div class="one" id="one"> id為one,class為one的div（女警） <div class="mini">class為mini的div（曙光）</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> <div class="mini" title="test">class為mini,title為test的div（璐璐）</div> </div> <div class="one"> class為one的div（EZ） <div class="mini">class為mini的div（琴女）</div> <div class="mini">class為mini的div（眾星之子）</div> <div class="mini">class為mini的div（喚潮鮫姬）</div> <div class="mini">class為mini的div（牛頭）</div> </div> <div class="one"> class為one的div（奧巴馬） <div class="mini">class為mini的div（鳳女）</div> <div class="mini">class為mini的div（機器人）</div> <div class="mini">class為mini的div（狗熊）</div> <div class="mini" title="tesst">class為mini,title為tesst的div（雪人）</div> </div> <div style="display:none;" class="none"> style的display為"none"的div（VN） </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>
CSS樣式：
div,span,p { width:200px; height:230px; margin:5px; background:#aaa; border:#000 1px solid; float:left; font-size:17px; font-family:Arial; font-family:Verdana; } div.mini { width:80px; height:80px; background-color: #aaa; font-size:12px; font-family:Arial; } div.hide { display:none; }
jQuery程式碼：
<script type="text/javascript"> $(function () { //選擇第一個div元素. $("#btn1").click(function(){ $("div:first").css("background", "red"); }); //選擇最後一個div元素. $("#btn2").click(function () { $("div:last").css("background", "red"); }); //選擇class不為one的 所有div元素. $("#btn3").click(function () { $("div:not(.one)").css("background", "red"); }); //選擇 索引值為偶數 的div元素。 $("#btn4").click(function () { $("div:even").css("background", "red"); }); //選擇 索引值為奇數 的div元素。 $("#btn5").click(function () { $("div:odd").css("background", "red"); }); //選擇 索引等於 3 的元素 $("#btn6").click(function () { $("div:eq(3)").css("background", "red"); }); //選擇 索引大於 3 的元素 $("#btn7").click(function () { $("div:gt(3)").css("background", "red"); }); //選擇 索引小於 3 的元素 $("#btn8").click(function () { $("div:lt(3)").css("background", "red"); }); //選擇 所有的標題元素.比如h1, h2, h3等等... $("#btn9").click(function () { $(":header").css("background", "red"); }); //選擇 當前正在執行動畫的所有元素. $("#btn10").click(function () { $(":animated").css("background", "red"); }); }); </script>