Summary of Jquery selectors

<p>There are many types of Jquery selectors, which can be roughly divided into 9 types, as follows: </p> <p class="best-text mb-10">(1) Basic <br>#id <br>element <br>.class <br>* <br>selector1,selector2,selectorN <br><br>(2) Hierarchical selector: <br>ancestor descendant <br>parent > child <br>prev + next <br>prev ~ siblings <br><br>(3 ) Basic filter selector <br>:first <br>:last <br>:not <br>:even <br>:odd <br>:eq <br>:gt <br>:lt <br>:header <br>:animated <br><br>(4) Content filter selector <br>:contains <br> :empty <br>:has <br>:parent <br><br>(5)Visibility filter selector<br>:hidden <br>:visible <br><br>(6)Attribute filter selector<br>[attribute] <br>[attribute=value] <br>[attribute!= value] <br>[attribute^=value] <br>[attribute$=value] <br>[attribute*=value] <br>[attrSel1][attrSel2][attrSelN] <br><br>(7) Child element filter selector <br>:nth-child <br> :first-child <br>:last-child <br>:only-child <br><br>(8)Form selector <br>:input <br>:text <br>:password <br>:radio <br>:checkbox <br>:submit <br>:image <br>:reset <br>:button <br> :file <br>:hidden <br><br>(9) form filter selector <br>:enabled <br>:disabled <br>:checked <br>:selected</p> <p>jQuery’s selector is extremely powerful. Here is a brief summary of commonly used element search methods</p> <p>$("#myELement") Select the element whose id value is equal to myElement. The id value cannot be repeated. There can only be one id value myElement in the document, so what you get is the only element </p> <p>$("div") Select all div tag elements and return an array of div elements </p> <p>$(".myClass") Select all elements using css of myClass class </p> "$ ("*") Select all the elements in the document, and you can use a variety of choices for joint selection: for example, $ ("#MyElement, DIV, .myClass ") <p> </p>Cascading Selector: <p> </p>$("form input") Select all input elements in form elements <p> </p>$("#main > *") Select all child elements whose id value is main <p> </p>$("label + input") Selects the next input element node of all label elements. After testing, the selector returns all input label elements that are directly followed by an input label after the label label <p> </p>$("#prev ~ div") Sibling selector, this selector returns all div tags belonging to the same parent element of the tag element with id prev<p> </p>Basic filter selector: <p> </p>$("tr:first") Select the first <p> of all tr ​​elements </p>$("tr:last") Select the last tr element of all tr ​​elements <p> </p>$("input:not(:checked) + span") <p> </p>Filter out: all input elements of checked selector<p> </p>$("tr:even") Select the 0th, 2nd, 4th... elements of all tr ​​elements (Note: Because the selected multiple elements are arrays, the sequence number starts from 0) <p> </p>$("tr:odd") Select the 1st, 3rd, 5th... elements of all tr ​​elements <p> </p>$("td:eq(2)") Select the td element with serial number 2 among all td elements <p> : $ ("TD: GT (4)") Select all TD elements with a serial number in the TD element greater than 4 : $ ("TD: LT (4)") Select all TD elements with less than 4 in TD elements </p> <p>$(":header")                                                                                                              Select h1, h2, h3, etc. </p> <p>$("div:animated") Select the element that is performing animation effect</p> <p>Content filter selector: </p> <p>$("div:contains('John')") selects all elements containing John text in divs </p> <p>$("td:empty") Selects an array of all td elements that are empty (not including text nodes) </p> <p>$("div:has(p)") Select all div elements containing p tags </p> <p>$("td:parent") Select all element arrays with td as the parent node </p> <p>Visual filter selector: </p> <p>$("div:hidden") Select all hidden div elements </p> <p>$("div:visible") Select all visible div elements </p> <p>Attribute filter selector: </p> <p>$("div[id]") Select all div elements containing the id attribute </p> <p>$("input[name='newsletter']") Select all input elements whose name attribute is equal to 'newsletter'</p> <p>$("input[name!='newsletter']") Selects all input elements whose name attribute is not equal to 'newsletter'</p> <p>$("input[name^='news']") Select all input elements whose name attribute starts with 'news' </p> <p>$("input[name$='news']") Select all input elements whose name attribute ends with 'news' </p> <p>$("input[name*='man']") Select all input elements whose name attribute contains 'news'</p> <p>$("input[id][name$='man']") You can use multiple attributes for joint selection. This selector gets all the elements that contain the id attribute and the attribute ends with man</p> <p>Child element filter selector: </p> <p>$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")</p> <p>$("div span:first-child") Returns an array of the first child nodes of all div elements </p> <p>$("div span:last-child") Returns the array of the last node of all div elements </p> <p>$("div button:only-child") Returns an array of all child nodes that have only one child node in all divs</p> <p>Form element selector: </p> <p>$(":input") Select all form input elements, including input, textarea, select and button</p> <p>$(":text") Select all text input elements </p> <p>$(":password") Select all password input elements </p> <p>$(":radio") Select all radio input elements </p> <p>$(":checkbox") Select all checkbox input elements </p> <p>$(":submit") Select all submit input elements </p> <p>$(":image") Select all image input elements </p> <p>$(":reset") Select all reset input elements </p> <p>$(":button") Select all button input elements </p> <p>$(":file") Select all file input elements </p> <p>$(":hidden") Select all input elements or hidden fields of the form that are of type hidden </p> <p>Form element filter selector: </p> <p>$(":enabled") Select all operable form elements </p> <p>$(":disabled") Select all inoperable form elements </p> <p>$(":checked") Select all checked form elements </p> <p>$("select option:selected") selects all selected elements among the child elements of select</p> <p> </p> <p>Select the text value of the previous td of the input text box named "S_03_22"</p> <p>$("input[@ name =S_03_22]").parent().prev().text()</p> <p>The name starts with "S_" and does not end with "_R"</p> <p>$("input[@ name ^='S_']").not("[@ name $='_R']")</p> <p>The value selected by a radio named radio_01</p> <p>$("input[@ name =radio_01][@checked]").val();</p> <p> </p> <p> </p> <p>$("A B") finds all child nodes under the A element, including indirect child nodes</p> <p>$("A>B") Find the direct child nodes under the A element</p> <p>$("A+B") Find the sibling nodes behind the A element, including indirect child nodes</p> <p>$("A~B") finds the sibling nodes behind the A element, excluding indirect child nodes</p> <p>1. $("A B") finds all child nodes under the A element, including indirect child nodes</p> <p>Example: Find all input elements in the form</p> <p>HTML code:</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><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><code class="html keyword">fieldset</code><code class="html plain">></code></div> <div class="line number5 index4 alt2"> <code class="html spaces">      </code><code class="html plain"><</code><code class="html keyword">label</code><code class="html plain">>Newsletter:</</code><code class="html keyword">label</code><code class="html plain">></code> </div> <div class="line number6 index5 alt1"> <code class="html spaces">      </code><code class="html plain"><</code><code class="html keyword">input</code> <code class="html plain">name="newsletter" /></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><code class="html keyword">input</code> <code class="html plain">name="none" /><</code><code class="html keyword">span</code> <code class="html plain">style="font-family: verdana, 'courier new'; font-size: medium;" size="4" face="verdana, 'courier new'"><</code><code class="html keyword">span</code> <code class="html plain">style="font-size: 14px; line-height: 21px; white-space: normal;"></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="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><code class="html keyword">fieldset</code><code class="html plain">></code></div> <div class="line number5 index4 alt2"> <code class="html spaces">      </code><code class="html plain"><</code><code class="html keyword">label</code><code class="html plain">>Newsletter:</</code><code class="html keyword">label</code><code class="html plain">></code> </div> <div class="line number6 index5 alt1"> <code class="html spaces">      </code><code class="html plain"><</code><code class="html keyword">input</code> <code class="html plain">name="newsletter" /></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><code class="html keyword">input</code> <code class="html plain">name="none" /><</code><code class="html keyword">span</code> <code class="html plain">style="font-family: verdana, 'courier new'; font-size: medium;" size="4" face="verdana, 'courier new'"><</code><code class="html keyword">span</code> <code class="html plain">style="font-size: 14px; line-height: 21px; white-space: normal;"></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 code:</p> <p>$("form > input") </p> <p>Result:</p> <p>[ <input name="name" /> ]</p> <p>3. $("A+B") finds the sibling nodes behind the A element, including indirect child nodes </p> <p>Example: Match all input elements following label</p> <p>HTML code:</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><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><code class="html keyword">fieldset</code><code class="html plain">></code></div> <div class="line number5 index4 alt2"> <code class="html spaces">  </code><code class="html plain"><</code><code class="html keyword">label</code><code class="html plain">>Newsletter:</</code><code class="html keyword">label</code><code class="html plain">></code> </div> <div class="line number6 index5 alt1"> <code class="html spaces">               </code><code class="html plain"><</code><code class="html keyword">input</code> <code class="html plain">name="newsletter" /></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><code class="html keyword">input</code> <code class="html plain">name="none" /> </code></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p class="best-text mb-10"> jQuery code:</p> <p> </p> <p>$("label + input") </p> <p>Result:</p> <p>[ <input name="name" />, <input name="newsletter" /> ]</p> <p> </p> <p>4. $("A~B") finds the sibling nodes behind the A element, excluding indirect child nodes </p> <p>Example: Find all input elements that are siblings of the form</p> <p>HTML code:</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><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><code class="html keyword">fieldset</code><code class="html plain">></code></div> <div class="line number5 index4 alt2"> <code class="html spaces">  </code><code class="html plain"><</code><code class="html keyword">label</code><code class="html plain">>Newsletter:</</code><code class="html keyword">label</code><code class="html plain">></code> </div> <div class="line number6 index5 alt1"> <code class="html spaces">               </code><code class="html plain"><</code><code class="html keyword">input</code> <code class="html plain">name="newsletter" /></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><code class="html keyword">input</code> <code class="html plain">name="none" /> <</code><code class="html keyword">span</code> <code class="html plain">style="font-family: verdana, 'courier new'; font-size: medium;" size="4" face="verdana, 'courier new'"><</code><code class="html keyword">span</code> <code class="html plain">style="font-size: 14px; line-height: 21px; white-space: normal;"></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 code:</p> <p>$("form ~ input") </p> <p>Result:</p> <p>[ <input name="none" /> ]</p> <div id="MySignature"></div> <div class="clear"></div>