一、基本選取器
1）ID選取器
2）標籤選取器
3 ) 類別選取器
4 ) 萬用字元選取器
二、層級選取器
1 ) 包含選擇器
2 ) 子選取器
3 ) 相鄰選取器
4 ) 兄弟選取器
三、簡單的偽類別選取器
1 ) 特定位置選取器
2 ) 指定範圍選取器
3 ) 排除選取器
四、與內容相關的偽類別選取器
1 ) 匹配包含文本選取器
2) 匹配包含元素選取器
3 ) 匹配包含判斷選取器
4 ) 解析內容過濾實現原理
五、與元素顯示狀態相關的偽類別選取器
六、匹配子項目的偽類別選取器
七、與表單對象相關的偽類別選取器
-------------------------------------------------------------------------------------------
一、基本選取器1、ID選取器，文法：jQuery("#id")<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script><script type="text/javascript"> $(function(){ $("#div1").css("background","red"); })</script><title>上機練習</title></head><body><div id="div1">測試盒子</div></body></html>
<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script><script type="text/javascript"> $(function(){ $("div").css("color","red"); })</script><title>無標題文檔</title></head><body> <div>div1</div><div>div2</div><div>div3</div></body></html>
<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script><script type="text/javascript"> $(function(){ $(".red").css("color","red"); })</script><title>無標題文檔</title></head><body><div class="red">div1</div><div>div2</div><div class="red">div3</div></body></html>4、萬用字元選取器，文法：jQuery("*") 參數“*”為字串，表示將匹配指定範圍內所有的標籤元素。<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script><script type="text/javascript"> $(function(){ $("body *").css("color","red"); })</script><title>無標題文檔</title></head><body><div>DIV</div><span>SPAN</span><p>P</p></body></html>
二、層級選取器1、包含選取器，文法：jQuery("ancestor descendant") 其中,ancestor表示包含選取器，descendant表示被包含選取器。 jQuery能夠在ancestor選取器所匹配的元素中，過濾出匹配ancestor選取器的所有包含元素。eg：<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script><script type="text/javascript"> $(function(){ $("form input").css({"border":"solid 1px red","background":"blue"}); })</script><title>無標題文檔</title></head><body>〈form> <fieldset> <label>包含的子文字框 〈input/> </label> <fieldset> <label>包含的孫子文字框 〈input /> </label> </fieldset></fieldset></form><label>非包含的文字框 〈input /> </label></body></html>
2、子選取器，文法：jQuery("parent>child") 其中，parent表示父選取器，child表示被包含的子選取器，“>”為子選取器的標識符。jQuery能夠在parent選取器所匹配的元素中，過濾出所有匹配child選取器的子項目。eg:<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script><script type="text/javascript"> $(function(){ $("div > img").css("border","solid 5px red"); })</script><title>無標題文檔</title></head><body><div> <span><img src="images/bg.jpg" /></span> <img src="images/bg.jpg" /></div><img src="images/bg.jpg" /></body></html>
3、相鄰選取器，文法：jQuery("prev+next")其中，prev表示相鄰的前一個選取器，next表示相鄰的後一個選取器，"+"為相鄰選取器的標識符。jQuery能夠在prev選取器所匹配的元素後，過濾出所有匹配next選取器的緊鄰同級元素。eg：<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script><script type="text/javascript"> $(function(){ $("div + img").css("border","solid 5px red"); })</script><title>無標題文檔</title></head><body><div> <span><img src="images/bg.jpg" /></span> <img src="images/bg.jpg" /></div><img src="images/bg.jpg" /><img src="images/bg.jpg" /></body></html>
4、兄弟選取器,文法： jQuery("pre ~ siblings") 其中，prev表示相鄰的前一個選取器，siblings表示相鄰的同級選取器，“~”為兄弟選取器的標識符。jQuery能夠在prev選取器所匹配的元素後，過濾出所有匹配siblings選取器的同級元素/eg：<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script><script type="text/javascript"> $(function(){ $("div ~ img").css("border","solid 5px red"); })</script><title>無標題文檔</title></head><body><div> <span><img src="images/bg.jpg" /></span> <img src="images/bg.jpg" /></div><img src="images/bg.jpg" /><img src="images/bg.jpg" /></body></html>
5、層級選取器綜合應用
三、簡單的偽類別選取器簡單的偽類別選取器也稱為定位過濾器，因為他們主要根據編號和排位篩選特定位置上的元素，或者過濾掉特定元素1、特定位置選取器主要包括 :first 、 :last和:qe(index)3 種。:first能夠在匹配的集合中選擇第1個元素，相反:last能夠在匹配的集合中選擇最後一個元素，而:eq(index)能夠根據index索引值確定指定位置的元素。具體使用者如下：jQuery("selector:first") jQuery("selector:last") jQuery("selector:eq(index)") ,index從0開始計數eg:<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script><script type="text/javascript"> $(function(){ $("tr:first").css({"background":"blue","color":"white"}); $("tr:qe(1)").css("background","#F1F5FB"); $("tr:last").css("background","#ff9"); })</script><title>無標題文檔</title></head><body><table> <tr><th>選取器</th><th>說明</th></tr> <tr><td>:first</td><td>匹配找到的第1個元素。</td></tr> <tr><td>:last</td><td>匹配找到的最後一個元素。</td></tr></table></body></html>
2、指定範圍選取器 主要包括 :even 、:odd 、 :gt(index)和:lt(index) 四種:even 匹配集合中選擇所有偶數行元素:odd 匹配集合中選擇所有級奇數行元素:gt(index) 匹配集合中選擇大於給定索引值的元素:lt(index) 匹配集合中選擇小於給定索引值的元素eg:<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script><script type="text/javascript"> $(function(){ $("tr:even").css("background","#F1F5FB"); $("tr:odd").css("background","#ff9"); $("tr:first").css({"background":"blue","color":"white"}); })</script><title>無標題文檔</title></head><body><table> <tr><th>選取器</th><th>說明</th></tr> <tr><td>:first</td><td>匹配找到的第1個元素。</td></tr> <tr><td>:last</td><td>匹配找到的最後一個元素。</td></tr> <tr><td>:first</td><td>匹配找到的第1個元素。</td></tr> <tr><td>:last</td><td>匹配找到的最後一個元素。</td></tr> <tr><td>:first</td><td>匹配找到的第1個元素。</td></tr> <tr><td>:last</td><td>匹配找到的最後一個元素。</td></tr></table></body></html>
3、排除選取器文法：jQuery("selector1:not(selector2)");參數selector1、selector2和not為字串，其中，selector1和selector2表示任意形式的選取器，“：”為偽類別選取器的標識符，not表示排除函數標識符。eg:<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script><script type="text/javascript"> $(function(){ $("tr:even").css("background","#F1F5FB"); $("tr:odd").css("background","#ff9"); $("tr:first").css({"background":"blue","color":"white"}); $("tr:not(tr:lt(3))").css({"background":"white","color":"black"}); })</script><title>無標題文檔</title></head><body><table> <tr><th>選取器</th><th>說明</th></tr> <tr><td>:first</td><td>匹配找到的第1個元素。</td></tr> <tr><td>:last</td><td>匹配找到的最後一個元素。</td></tr> <tr><td>:first</td><td>匹配找到的第1個元素。</td></tr> <tr><td>:last</td><td>匹配找到的最後一個元素。</td></tr> <tr><td>:first</td><td>匹配找到的第1個元素。</td></tr> <tr><td>:last</td><td>匹配找到的最後一個元素。</td></tr></table></body></html>
四、與內容相關的偽類別選取器：contains -〉匹配包含給定文本的元素。例如，$("div:contains('圖片')")匹配所有包含“圖片”的div元素：empty -〉匹配所有不包含子項目或者文本的空元素。：has -〉匹配含有選取器所匹配的元素的元素。例如。$("div:has(p)") 匹配所有包含p元素的div元素1、匹配包含文本選取器 文法：jQuery("selector:contains(text)")<script src="jQuery/jquery-1.6.4.js" type="text/javascript" ></script><script type="text/javascript"> $( function(){ $("dd:contains('喬布斯')").css("text-decoration","underline"); } )</script><title>無標題文檔</title></head><body><h2>紀念喬布斯的評論</h2><dl> <dt>李德0202：</dt> <dd>司法官神風怪盜法國分公司公司發的，國防生大哥，國防生的故事法國，國防生大哥</dd> <dt>啊大法師反對法：</dt> <dd>喬布斯走了，反對反對，放大發射點法，啊大法師法的放大三發，史蒂夫.喬布斯！1955-2011 永遠銘記在我們心裡！喬布斯，一路走好！</dd> <dt>啊大法發射點發生的發</dt> <dd>歌功頌德豐功碩德發個三的發個</dd></dl></body></html>
2、匹配包含元素選取器文法: jQuery("selector1:has(selector2)");3、匹配包含判斷選取器文法：jQuery("selector:empty"); jQuery("selector:parent");:empty匹配元素中包含空內容的元素:parent匹配元素中包含非空內容的元素4、解析內容過濾實現原理
五、與元素顯示狀態相關的偽類別選取器:hidden 匹配所有隱藏元素，或者type為hidden的元素:visible 匹配所有的可見元素
六、匹配子項目的偽類別選取器:nth-child 匹配其父元素下的第N個子或奇偶元素 :first-child 匹配第一個子項目。:first只匹配一個元素，而:first-child選取器將為每個父元素匹配一個子項目:last-child 匹配最後一個子項目。:last只匹配一個元素，而:last-child選取器將為每個父元素匹配一個子項目:only-child 如果某個元素是父元素中唯一的子項目，那將會被匹配；如果父元素中含有其他元素，那將不會被匹配
七、與表單對象相關的偽類別選取器:input 匹配所有input , textarea,select和button元素:text 匹配所以的單行文字框:password 匹配所有密碼框:radio 匹配所有單選框:checkbox 匹配所有複選框:submit 匹配所有提交按鈕:image 匹配所有映像域:reset 匹配所有重設按鈕:button 匹配所有按鈕:file 匹配所有檔案:hidden 匹配所有隱藏元素
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
