歸納總結Jquery的選擇器

<p>Jquery的選擇器有很多種，大概可分為9種，如下：</p> <p class="best-text mb-10">(1)基本<br>#id <br>element <br>.class <br>* <br>selector1,selector2,selectorN <br><br>(2)層次選擇器：<br>ancestor descendant <br><br>(2)層級選擇器：<br>ancestor descendant <br><br>(2)層次選擇器：<br>ancestor descendant <br><br>(2)層次選擇器基本過濾器選擇器<br>:first <br>:last <br>:not <br>:even <br>:odd <br>:eq <br>:gt <br>:lt <br>:header <br>:animated <br>:lt <br>:header <br>:animated 🜎 empty <br>:has <br>:parent <br><br>(5)可見性過濾器選擇器<br>:hidden <br>:visible <br><br>(6)屬性過濾器選擇器<br>[attribute] <br><br>(6)屬性過濾器選擇器<br>[attribute] <br> ] <br>[attribute^=value] <br>[attribute$=value] <br>[attribute*=value] <br>[attrSel1][attrSel2][attrSelN] <br><br>(7)子元素過濾器選擇first-child <br>:last-child <br>:only-child <br><br>(8)表單選擇器<br>:input <br>:text <br>:password <br>:radio <br>:checkbox <br>:submit <br>: file <br>:hidden <br><br>(9)表單過濾器選擇器<br>:enabled <br>:disabled <br>:checked <br>:selected<br> </p>jQuery 的選擇器可謂之強大無比，這裡簡單地總結一下常用的元素查找方法<p> </p>$("#myELement")    選擇id值等於myElement的元素，id值不能重複在文件中只能有一個id值是myElement所以得到的是唯一的元素 <p> </p>$("div")           選取所有的div標籤元素，並回傳div元素陣列 <p> </p>$(".myClass")      選擇所有使用myClass類別的css的元素 <p> </p>$("*")             選擇文件中的所有的元素，並可運用多種的選擇方式進行共同選擇：例如$("#myELement,div,.myclass")<p> </p>層疊選擇器： <p> </p>$("form input")         選取所有的form元素中的input元素 <p> </p>$("#main > *")          選擇id值為main的所有的子元素 <p> </p>$("label + input")     選擇所有的label元素的下一個input元素節點，測試選擇器返回的是label標籤後面直接跟一個input標籤的所有input標籤元素 <p> </p>$("#prev ~ div")       同胞選擇器，該選擇器返回的為id為prev的標籤元素的所有的屬於同一個父元素的div標籤<p> </p>基本過濾選擇器： <p> </p>$("tr:first")               選取所有tr元素的第一個 <p> </p>$("tr:last")                選取所有tr元素的最後一個 <p> </p>$("input:not(:checked) + span")  <p> </p>過濾掉：checked的選擇器的所有的input元素<p> </p>$("tr:even")               選擇所有的tr元素的第0，2，4... ...個元素（注意：因為所選的多個元素時為數組，所以序號是從0開始） <p> </p>$("tr:odd")                選擇所有的tr元素的第1，3，5... ...個元素 <p> </p>$("td:eq(2)")             選擇所有的td元素中序號為2的那個td元素 <p> </p>$("td:gt(4)")             所有選取td元素中序號大於4的td元素 <p> </p>$("td:lt(4)")              選擇td元素中所有序號小於4的的td元素 <p> </p>$(":header")            選擇h1、h2、h3之類的<p> </p>$("div:animated")     選擇正在執行動畫效果的元素<p> </p>內容過濾選擇器：<p> </p>$("div:contains('John')") 選取所有div中含有John文本的元素 <p> </p>$("td:empty")           選取所有的為空（也不包括文字節點）的td元素的陣列 <p> </p>$("div:has(p)")        選擇所有含有p標籤的div元素 <p> </p>$("td:parent")          選出所有的以td為父節點的元素數組 <p> </p>可視化過濾選擇器：<p> </p>$("div:hidden")        選出所有的被hidden的div元素 <p> </p>$("div:visible")        選擇所有的視覺化的div元素 <p> </p>屬性過濾選擇器：<p> </p>$("div[id]")              選擇所有含有id屬性的div元素 <p> </p>$("input[name='newsletter']")    選擇所有的name屬性等於'newsletter'的input元素<p> </p>$("input[name!='newsletter']") 選擇所有的name屬性不等於'newsletter'的input元素<p> </p>$("input[name^='news']")         選擇所有的name屬性以'news'開頭的input元素 <p></p> <p>$("input[name$='news']")         選擇所有的name屬性以'news'結尾的input元素 </p> <p>$("input[name*='man']")          選擇所有的name屬性包含'news'的input元素</p> <p>$("input[id][name$='man']")    可以使用多個屬性進行聯合選擇，該選擇器是得到所有的含有id屬性並且那麼屬性以man結尾的元素</p> <p>子元素過濾選擇器：</p> <p>$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")</p> <p>$("div span:first-child")          傳回所有的div元素的第一個子節點的陣列 </p> <p>$("div span:last-child")           傳回所有的div元素的最後一個節點的陣列 </p> <p>$("div button:only-child")       回傳所有的div中只有唯一一個子節點的所有子節點的陣列</p> <p>表單元素選擇器：</p> <p>$(":input")                  選擇所有的表單輸入元素，包含input, textarea, select 與 button</p> <p>$(":text")                     選取所有的text input元素 </p> <p>$(":password")           選取所有的password input元素 </p> <p>$(":radio")                   選取所有的radio input元素 </p> <p>$(":checkbox")            選擇所有的checkbox input元素 </p> <p>$(":submit")               選取所有的submit input元素 </p> <p>$(":image")                 選取所有的image input元素 </p> <p>$(":reset")                   選取所有的reset input元素 </p> <p>$(":button")                選出所有的button input元素 </p> <p>$(":file")                     選取所有的file input元素 </p> <p>$(":hidden")               選取所有類型為hidden的input元素或表單的隱藏域</p> <p>表單元素過濾選擇器：</p> <p>$(":enabled")             選擇所有的可操作的表單元素 </p> <p>$(":disabled")            選擇所有的無法運作的表單元素 </p> <p>$(":checked")            選擇所有的被checked的表單元素 </p> <p>$("select option:selected") 選取所有的select 的子元素中被selected的元素</p> <p> </p> <p>選取一個 name 為」S_03_22″的input text框的上一個td的text值</p> <p>$(”input[@ name =S_03_22]“).parent().prev().text()</p> <p>名字以”S_”開始，並且不是以”_R”結尾的</p> <p>$(”input[@ name ^='S_']“).not(”[@ name $='_R']“)</p> <p>一個名為 radio_01的radio所選的值</p> <p>$(”input[@ name =radio_01][@checked]“).val();</p> <p> </p> <p> </p> <p>$("A B") 找出A元素下面的所有子節點，包括非直接子節點</p> <p>$("A>B") 找出A元素下面的直接子節點</p> <p>$("A+B") 找出A元素後面的兄弟節點，包含非直接子節點</p> <p>$("A~B") 找出A元素後面的兄弟節點，不包含非直接子節點</p> <p>1. $("A B") 找出A元素下面的所有子節點，包括非直接子節點</p> <p>範例：找出表單中所有的 input 元素</p> <p>HTML 代碼:</p> <div class="cnblogs_Highlighter"> <div> <div id="highlighter_163283" class="syntaxhighlighter html"> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> <div class="line number2 index1 alt1">2</div> <div class="line number3 index2 alt2">3</div> <div class="line number4 index3 alt1">4</div> <div class="line number5 index4 alt2">5</div> <div class="line number6 index5 alt1">6</div> <div class="line number7 index6 alt2">7</div> <div class="line number8 index7 alt1">8</div> <div class="line number9 index8 alt2">9</div> <div class="line number10 index9 alt1">10</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"><code class="html plain"><code class="html keyword">form</code><code class="html plain">></code></code></div> <div class="line number2 index1 alt1"><code class="html plain"><code class="html keyword">label</code><code class="html plain">>Name:</code><code class="html keyword">label</code><code class="html plain">></code></code></div> <div class="line number3 index2 alt2"><code class="html plain"><code class="html keyword">input</code> <code class="html plain">name="name" /></code></code></div> <div class="line number4 index3 alt1"><code class="html plain"><code class="html keyword">fieldset</code><code class="html plain">></code></code></div> <div class="line number5 index4 alt2"> <code class="html spaces">      </code><code class="html plain"><code class="html keyword">label</code><code class="html plain">>電子報：</code><code class="html keyword">label</code><code class="html plain">></code></code> </div> <div class="line number6 index5 alt1"> <code class="html spaces">      </code><code class="html plain"><code class="html keyword">輸入</code> <code class="html plain">name="新聞通訊"/></code></code> </div> <div class="line number7 index6 alt2"> <code class="html plain"></code><code class="html keyword">fieldset</code><code class="html plain">></code> </div> <div class="line number8 index7 alt1"> <code class="html plain"></code><code class="html keyword">形式</code><code class="html plain">></code> </div> <div class="line number9 index8 alt2"><code class="html plain"><code class="html keyword">input</code> <code class="html plain">name="none" /><code class="html keyword">span</code> <code class="html plain">style="font-family: verdana, '快遞新'; font-sizeface: Medium;" sizeface ="facesize): Medium; verdana，'快遞新'”><code class="html keyword">span</code> <code class="html plain">style =「font-size：14px;line-height：21px;white-space：正常;」></code></code></code></code></div> <div class="line number10 index9 alt1"> <code class="html plain"></code><code class="html keyword">跨度</code><code class="html plain">></code><code class="html keyword">跨度</code><code class="html plain">></code> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p>jQuery 代码:</p> <p>$("form input") </p> <p>结果:</p> <p>[ <input name="name" />, <input name="newsletter" /> ]</p> <p>2. $("A>B") 查找A元素下面的直接子节点 </p> <p>例子：匹配表单中所有的子级input元素。</p> <p>HTML 代码:</p> <div class="cnblogs_Highlighter"> <div> <div id="highlighter_935288" class="syntaxhighlighter html"> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> <div class="line number2 index1 alt1">2</div> <div class="line number3 index2 alt2">3</div> <div class="line number4 index3 alt1">4</div> <div class="line number5 index4 alt2">5</div> <div class="line number6 index5 alt1">6</div> <div class="line number7 index6 alt2">7</div> <div class="line number8 index7 alt1">8</div> <div class="line number9 index8 alt2">9</div> <div class="line number10 index9 alt1">10</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"><code class="html plain"><</code><code class="html keyword">form</code><code class="html plain">></code></div> <div class="line number2 index1 alt1"><code class="html plain"><</code><code class="html keyword">label</code><code class="html plain">>Name:</</code><code class="html keyword">label</code><code class="html plain">></code></div> <div class="line number3 index2 alt2"><code class="html plain"><</code><code class="html keyword">input</code> <code class="html plain">name="name" /></code></div> <div class="line number4 index3 alt1"><code class="html plain"><code class="html keyword">fieldset</code><code class="html plain">></code></code></div> <div class="line number5 index4 alt2"> <code class="html spaces">      </code><code class="html plain"><code class="html keyword">label</code><code class="html plain">>電子報：</code><code class="html keyword">label</code><code class="html plain">></code></code> </div> <div class="line number6 index5 alt1"> <code class="html spaces">      </code><code class="html plain"><code class="html keyword">輸入</code> <code class="html plain">name="新聞通訊"/></code></code> </div> <div class="line number7 index6 alt2"> <code class="html plain"></code><code class="html keyword">fieldset</code><code class="html plain">></code> </div> <div class="line number8 index7 alt1"> <code class="html plain"></code><code class="html keyword">形式</code><code class="html plain">></code> </div> <div class="line number9 index8 alt2"><code class="html plain"><code class="html keyword">input</code> <code class="html plain">name="none" /><code class="html keyword">span</code> <code class="html plain">style="font-family: verdana, '快遞新'; font-sizeface: Medium;" sizeface ="facesize): Medium; verdana，'快遞新'”><code class="html keyword">span</code> <code class="html plain">style =「font-size：14px;line-height：21px;white-space：正常;」></code></code></code></code></div> <div class="line number10 index9 alt1"> <code class="html plain"></code><code class="html keyword">跨度</code><code class="html plain">></code><code class="html keyword">跨度</code><code class="html plain">></code> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p>jQuery 程式碼:</p> <p>$("form > input") </p> <p>結果:</p> <p>[ <input name="name"> ]</p> <p>3. $("A+B") 找出A元素後面的兄弟節點，包括非直接子節點 </p> <p>範例：符合所有跟在 label 後面的 input 元素</p> <p>HTML 代碼:</p> <div class="cnblogs_Highlighter"> <div> <div id="highlighter_593836" class="syntaxhighlighter html"> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> <div class="line number2 index1 alt1">2</div> <div class="line number3 index2 alt2">3</div> <div class="line number4 index3 alt1">4</div> <div class="line number5 index4 alt2">5</div> <div class="line number6 index5 alt1">6</div> <div class="line number7 index6 alt2">7</div> <div class="line number8 index7 alt1">8</div> <div class="line number9 index8 alt2">9</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"><code class="html plain"><code class="html keyword">form</code><code class="html plain">></code></code></div> <div class="line number2 index1 alt1"><code class="html plain"><code class="html keyword">label</code><code class="html plain">>Name:</code><code class="html keyword">label</code><code class="html plain">></code></code></div> <div class="line number3 index2 alt2"><code class="html plain"><code class="html keyword">input</code> <code class="html plain">name="name" /></code></code></div> <div class="line number4 index3 alt1"><code class="html plain"><code class="html keyword">fieldset</code><code class="html plain">></code></code></div> <div class="line number5 index4 alt2"> <code class="html spaces">      </code><code class="html plain"><code class="html keyword">label</code><code class="html plain">>Newsletter:</code><code class="html keyword">label</code><code class="html plain">></code></code> </div> <div class="line number6 index5 alt1"> <code class="html spaces">      </code><code class="html plain"><code class="html keyword">input</code> <code class="html plain">name="newsletter" /></code></code> </div> <div class="line number7 index6 alt2"> <code class="html plain"></code><code class="html keyword">fieldset</code><code class="html plain">></code> </div> <div class="line number8 index7 alt1"> <code class="html plain"></code><code class="html keyword">form</code><code class="html plain">></code> </div> <div class="line number9 index8 alt2"><code class="html plain"><code class="html keyword">input</code> <code class="html plain">name="none" /> </code></code></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p class="best-text mb-10"> jQuery 代碼:</p> <p> </p> <p>$("label + input") </p> <p>結果:</p> <p>[ <input name="name">, <input name="newsletter"> ]</p> <p> </p> <p>4. $("A~B") 找出A元素後面的兄弟節點，不包括非直接子節點 </p> <p>範例：找出所有與表單同輩的 input 元素</p> <p>HTML 代碼:</p> <div class="cnblogs_Highlighter"> <div> <div id="highlighter_463800" class="syntaxhighlighter html"> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> <div class="line number2 index1 alt1">2</div> <div class="line number3 index2 alt2">3</div> <div class="line number4 index3 alt1">4</div> <div class="line number5 index4 alt2">5</div> <div class="line number6 index5 alt1">6</div> <div class="line number7 index6 alt2">7</div> <div class="line number8 index7 alt1">8</div> <div class="line number9 index8 alt2">9</div> <div class="line number10 index9 alt1">10</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"><code class="html plain"><code class="html keyword">form</code><code class="html plain">></code></code></div> <div class="line number2 index1 alt1"><code class="html plain"><code class="html keyword">label</code><code class="html plain">>Name:</code><code class="html keyword">label</code><code class="html plain">></code></code></div> <div class="line number3 index2 alt2"><code class="html plain"><code class="html keyword">input</code> <code class="html plain">name="name" /></code></code></div> <div class="line number4 index3 alt1"><code class="html plain"><code class="html keyword">fieldset</code><code class="html plain">></code></code></div> <div class="line number5 index4 alt2"> <code class="html spaces">      </code><code class="html plain"><code class="html keyword">label</code><code class="html plain">>Newsletter:</code><code class="html keyword">label</code><code class="html plain">></code></code> </div> <div class="line number6 index5 alt1"> <code class="html spaces">      </code><code class="html plain"><code class="html keyword">input</code> <code class="html plain">name="newsletter" /></code></code> </div> <div class="line number7 index6 alt2"> <code class="html plain"></code><code class="html keyword">fieldset</code><code class="html plain">></code> </div> <div class="line number8 index7 alt1"> <code class="html plain"></code><code class="html keyword">form</code><code class="html plain">></code> </div> <div class="line number9 index8 alt2"><code class="html plain"><code class="html keyword">input</code> <code class="html plain">name="none" /> <code class="html keyword">span</code> <code class="html plain">style="font-family: verdana, 'courier new'; font-size: medium"facey: verdana, 'courier new'; font-size: medium"face s=" verdana, 'courier new'"><code class="html keyword">span</code> <code class="html plain">style="font-size: 14px; line-height: 21px; white-space: normal;"></code></code></code></code></div> <div class="line number10 index9 alt1"> <code class="html plain"></code><code class="html keyword">span</code><code class="html plain">></code><code class="html keyword">span</code><code class="html plain">></code> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p>jQuery 程式碼:</p> <p>$("form ~ input") </p> <p>結果:</p> <p>[ <input name="none"> ]</p> <div id="MySignature"></div> <div class="clear"></div>