Comprehensive summary of jQuery selectors

jQuery’s selector is extremely powerful. Here is a brief summary of commonly used element search methods

jQuery selectors make obtaining page elements easier and more flexible, greatly reducing developer stress. Just like building a building, without bricks and tiles, you cannot build a building. How can we talk about other operations if we can't get elements? It can be seen that the importance of jQuery selector. Of course, it is very difficult to master all selectors at once. This requires practice and accumulation.

Now we officially enter the study of jQuery selector. We classify and learn jQuery selectors and divide jQuery selectors into the following types:

1. Basic selector

◦id Select
based on element ID ◦elementname Select
based on element name ◦classname Select

based on the element css class name

Example:

Copy code The code is as follows:

Select based on element name

Copy code The code is as follows:

jQuery("#ID").val();

jQuery("a").text();

jQuery(".classname").val();

You can get the value of the elements respectively. The above three are the most common selectors, among which the ID selector is the most efficient and should be used whenever possible.

2. Level selector

◦ancestor descendant Ancestor and descendant selector
◦parent > child Parent-child node selector
◦prev next Same level selector
◦prev ~ siblings Filter selector

Example:

Copy code The code is as follows:

1
2

Copy code The code is as follows:

//Get the content of the a tag in the div. The result is 12

jQuery("#divTest a").text();

//Output the direct child node of the div and the result is investment

jQuery("#divTest>input").val();

//Output the next element of the same level with the id next and the result is responsible 

jQuery("#next input").val();

//Same as above, and it is an element with a title. The result is learning

jQuery("#next~[title]").val();

3. Basic filter selector

◦:first Find the first element
◦:last Find the last element
◦:not(selector) Remove elements matching the given selector
◦:even Matches elements with even index values, counting from 0
◦:odd Matches elements with odd index values Counting from 0
◦:eq(index) Matches an element with a given index starting from 0
◦:gt(index) Matches elements
greater than the given index value ◦:lt(index) Matches elements
that are less than the given index value ◦:header Select tags such as h1, h2, h3 (not used yet)
◦:animated Matches elements that are performing animation effects (not used yet)

Example:

Copy code The code is as follows:

Copy code

The code is as follows: //The first li content results in investment jQuery("li:first").text();

//The last li content results in responsibility

jQuery("li:last").text();

//Input the unselected value and the result is not learning

jQuery("li input:not(:checked)").val();

//The result of li with an even number is investment mature

jQuery("li:even").text();

//The result of li whose index is an odd number is the financial management responsibility

jQuery("li:odd").text();

//The content of li with index greater than 2 results in responsibility

jQuery("li:gt(2)").text();

//The content of li with index less than 1 results in investment

jQuery("li:lt(1)").text();

4. Content filter

◦:contains(text) Matches elements that contain the given text ◦:empty Matches all empty elements that do not contain child elements or text ◦:has(selector) Matches the elements matched by the selector

Example:

Copy code

The code is as follows:

Copy code The code is as follows:

//The content of li containing hyip results in hyip investment hyip

jQuery("li:contains('hyip')").text();

//The content of the next li of the empty li results in financial management 

jQuery("li:empty li").text();

//The content of li containing the a tag results in investment 

jQuery("li:has(a)").text();

5. Visibility filter

◦:hidden Matches invisible elements
◦:visible Matches visible elements

Example:

Copy code The code is as follows:

Visible

Invisible

Copy code The code is as follows:

//The content of invisible li results in invisible 

jQuery("li:hidden").text();

//The content of visible li is visible

jQuery("li:visible").text();

6. Attribute filter

◦[attribute=value] Matches elements whose attribute is the given value
◦[attribute^=value] The matching attribute is an element starting with the given value
◦[attribute$=value] The matching attribute is an element that ends with the given value
◦[attribute*=value] Matches elements whose attribute contains the given value

Example:

Copy code The code is as follows:

//name is the value of hyipinvest and the result is hyipinvest
alert(jQuery("input[name='hyipinvest']").val());
//The value whose name starts with hyip results in hyip investment
alert(jQuery("input[name^='hyip']").val());
//The value whose name ends with hyip results in investment hyip
alert(jQuery("input[name$='hyip']").val());
//name contains the value of oo. The result is HYIP
alert(jQuery("input[name*='oo']").val());

JQuery selector is summarized here. These are basically encountered in the learning process, and there are still a few parts that have not been summarized. After a period of practice, I believe everyone will be able to use the jQuery selector skillfully.

$("#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
$("div") Select all div tag elements and return an array of div elements
$(".myClass") Select all elements using css of myClass class
$("*") Select all elements in the document. You can use a variety of selection methods for joint selection: For example, $("#myELement,div,.myclass")

Cascading selector:
$("form input") Select all input elements in form elements
$("#main > *") Select all sub-elements whose id value is main
$("label input") Selects the next input element node of all label elements. After testing, the selector returns all input label elements directly followed by an input label
$("#prev ~ div") Sibling selector, this selector returns all div tags belonging to the same parent element of the tag element with id prev

Basic filter selector:
$("tr:first") Select the first of all tr elements
$("tr:last") Select the last of all tr elements
$("input:not(:checked) span")

Filter out: all input elements of the checked selector

$ ("TR: EVEN") Select the 0, 2, 4 ... ... Personal element of all TR elements (Note: Because the multiple elements selected are the array when they choose, so the serial number starts from 0)
$("tr:odd") Select the 1st, 3rd, 5th... elements of all tr elements
$("td:eq(2)") Select the td element with serial number 2 among all td elements
$("td:gt(4)") Select all td elements with sequence numbers greater than 4 in td elements
$("td:ll(4)") Select all td elements with sequence numbers less than 4 in the td elements
$(":header")
$("div:animated")

Content filter selector:

$("div:contains('John')") selects all elements containing John text in divs
$("td:empty") Selects an array of all td elements that are empty (not including text nodes)
$("div:has(p)") Select all div elements containing p tags
$("td:parent") Select all element arrays with td as the parent node

Visual filter selector:

$("div:hidden") Select all hidden div elements
$("div:visible") Select all visible div elements

Attribute filter selector:

$("div[id]") Select all div elements containing the id attribute
$("input[name='newsletter']") Select all input elements whose name attribute is equal to 'newsletter'

$("input[name!='newsletter']") selects all input elements whose name attribute is not equal to 'newsletter'

$("input[name^='news']") Select all input elements whose name attribute starts with 'news'
$("input[name$='news']") Select all input elements whose name attribute ends with 'news'
$("input[name*='man']") Select all input elements whose name attribute contains 'news'

$("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

Child element filter selector:

$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n 1)")

$("div span:first-child") Returns an array of the first child nodes of all div elements
$("div span:last-child") Returns an array of the last node of all div elements
$("div button:only-child") Returns an array of all child nodes that have only one child node in all divs

Form element selector:

$(":input") Select all form input elements, including input, textarea, select and button

$(":text") Select all text input elements
$(":password") Select all password input elements
$(":radio") Select all radio input elements
$(":checkbox") Select all checkbox input elements
$(":submit") Select all submit input elements
$(":image") Select all image input elements
$(":reset") Select all reset input elements
$(":button") Select all button input elements
$(":file") Select all file input elements
$(":hidden") Select all input elements or hidden fields of the form that are of type hidden

Form element filter selector:

$(":enabled") Select all operable form elements
$(":disabled") Select all inoperable form elements
$(":checked") Select all checked form elements
$("select option:selected") selects all selected elements among the child elements of select

Select the text value of the previous td of the input text box named "S_03_22"
$("input[@ name =S_03_22]").parent().prev().text()

Name starts with "S_" and does not end with "_R"
$("input[@ name ^='S_']").not("[@ name $='_R']")

The value selected by a radio named radio_01
$("input[@ name =radio_01][@checked]").val();

$("A B") finds all child nodes under the A element, including indirect child nodes
$("A>B") finds the direct child nodes under the A element
$("A B") finds the sibling nodes behind the A element, including indirect child nodes
$("A~B") finds the sibling nodes behind the A element, excluding indirect child nodes

1. $("A B") finds all child nodes under the A element, including indirect child nodes

Example: Find all input elements in the form

HTML code: