您好,登錄后才能下訂單哦!
這篇文章主要介紹了jQuery中基本篩選選擇器怎么用,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
具體內(nèi)容如下
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href="imooc.css" type="text/css"> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <h3>基本篩選器</h3> <h4>:first/:last/:even/:odd</h4> <div class="left"> <div class="div"> <p>div:first</p> <p>:even</p> </div> <div class="div"> <p>:odd</p> </div> <div class="div"> <p>:even</p> </div> <div class="div"> <p>:odd</p> </div> <div class="div"> <p>:even</p> </div> <div class="div"> <p>div:last</p> <p>:odd</p> </div> </div> <script type="text/javascript"> //找到第一個div $(".div:first").css("color", "#CD00CD"); </script> <script type="text/javascript"> //找到最后一個div $(".div:last").css("color", "#CD00CD"); </script> <script type="text/javascript"> //:even 選擇所引值為偶數(shù)的元素,從 0 開始計數(shù) $(".div:even").css("border", "3px groove red"); </script> <script type="text/javascript"> //:odd 選擇所引值為奇數(shù)的元素,從 0 開始計數(shù) $(".div:odd").css("border", "3px groove blue"); </script> <h4>:eq/:gt/:lt</h4> <div class="left"> <div class="aaron"> <p>:lt(3)</p> </div> <div class="aaron"> <p>:lt(3)</p> </div> <div class="aaron"> <p>:eq(2)</p> </div> <div class="aaron"> </div> <div class="aaron"> <p>:gt(3)</p> </div> <div class="aaron"> <p>:gt(3)</p> </div> </div> <script type="text/javascript"> //:eq //選擇單個 $(".aaron:eq(2)").css("border", "3px groove blue"); </script> <script type="text/javascript"> //:gt 選擇匹配集合中所有索引值大于給定index參數(shù)的元素 $(".aaron:gt(3)").css("border", "3px groove blue"); </script> <script type="text/javascript"> //:lt 選擇匹配集合中所有索引值小于給定index參數(shù)的元素 //與:gt相反 $(".aaron:lt(2)").css("color", "#CD00CD"); </script> <h4>:not</h4> <div class="left"> <div> <input type="checkbox" name="a" /> <p>Aaron</p> </div> <div> <input type="checkbox" name="b" /> <p>慕課</p> </div> <div> <input type="checkbox" name="c" checked="checked" /> <p>其他</p> </div> </div> <script type="text/javascript"> //:not 選擇所有元素去除不匹配給定的選擇器的元素 //選中所有緊接著沒有checked屬性的input元素后的p元素,賦予顏色 $("input:not(:checked) + p").css("background-color", "#CD00CD"); </script> </body> </html>
感謝你能夠認真閱讀完這篇文章,希望小編分享的“jQuery中基本篩選選擇器怎么用”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識等著你來學習!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。