jquery selector encyclopedia comprehensive and detailed explanation of jquery selector_jquery

Selectors do not have a fixed definition. To a certain extent, jQuery's selectors are very similar to selectors in style sheets. The selector has the following characteristics:
1. Simplify code writing
2. Implicit iteration
3. There is no need to judge whether the object exists
where "$" is an indispensable part of the selector. In the jQuery library, $ is an abbreviation of jQuery, such as $("#foo") and jQuery("#foo") Equivalently, $.ajax and jQuery.ajax are equivalent. If there is no special instructions, you can understand the $ symbol in the program as the abbreviation of jQuery.
Now we officially enter the study of jQuery selector. Selectors are classified according to their functional habits. Different types of classifiers are classified below and explained respectively to enable readers to master them.
1. Basic selector
Basic selector includes 5 types of selectors: #id, element, .class, * and selectorl, selector2.selectorN. Each type will be introduced below with examples. The role of selectors and how to use them.
1． #id selector
#The id selector matches an element based on the given ID. If the selector contains special characters, they can be escaped with two slashes, and the return value is Array.
2． element selector
The element selector is an element used for search. The tag name pointing to the DOM node. Its return value is Array.
3． The class selector
. The class selector matches elements based on a given class and is a class to search for. An element can have multiple classes. As long as there is one match, it can be matched. The return value is Array.

Example:

Copy code The code is as follows:

< ;input type="text" id="ID" value="Select based on ID" />
Select based on element name

jQuery("#ID").val();
jQuery("a").text();
jQuery (".classname").val();

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

4. *Selector
* Selector is mostly used to search in context and match all elements. Its return value is Array.
5． selector1, selector2, selectorN selector
This type of selector combines the elements matched by each selector and returns them together. You can specify any number of selectors and merge the matched elements into one result. The return value is: Array. In the following example, readers can clearly understand the functions of selector1, selector2, and selectorN by performing CSS operations on the selected items.
2. Level selector
Level selector includes 5 forms: ancestor, descendant, parent > child, prev next and prev ~ siblings. The following uses examples to introduce the role and use of each selector in detail.
1． The ancestor descendant selector
refers to matching all descendant elements under a given ancestor element. The ancestor as a parameter represents any valid selector, while descendant is a selector used to match elements, and it is Descendants of the first selector. The return value is: Array.
2． parent>child selector
parent>child selector means to match all child elements under a given parent element. The meanings of the two parameters are as follows: parent represents any valid selector; child is the selector used to match the element, and it is a child element of the first selector. Its return value is Array.
3． prev next selector
This type of selector is used to match all next elements immediately following the prev element. The meanings of the two parameters are as follows: prev represents any valid selector; next represents a valid selector immediately following the first selector. Its return value is Array.
4. prev ~ siblings selector
prev ~ siblings selector represents all siblings elements after matching the prev element. The meanings of the two parameters are as follows: prev represents any valid selector; siblings represents a selector and it serves as the sibling of the first selector. Its return value is Array.

Example:

Copy code The code is as follows:

" />
                                                                                    < 1
                                                                                                                                                                                                           2

//The result of getting the a tag content in the div is 12
jQuery(" #divTest a").text();
//The output div direct child node result is investment
jQuery("#divTest>input").val();
//The output id is next The result of the latter element of the same level is Responsibility
jQuery("#next input").val();
//Same as above, and the result of the element with title is Study
jQuery("#next~[ title]").val();


3. Filter selector

Filter selector mainly filters out the required DOM elements through specific filtering rules. Filtering rules and CSS The syntax of pseudo-class selectors in is the same, that is, the selectors all start with a colon. Filter selectors involve a lot of content, with a total of 6 types, but they can be classified. Below we will explain various types of selectors in detail.
1． Basic filter selector

Basic filter selector is the most commonly used type of filter selector. It mainly includes the following forms, which are explained in detail here: (1): first/: last selector.
(2):not selector. (3):even and :odd selectors.
(4):eq:gt, :lt, selector.
(5): header selector.
(6):animated selector.
Example:

Copy code The code is as follows:

& lt; ul & gt;

& lt; li & gt; investment & lt;/li & gt;

& lt; li & gt; wealth management & lt;/li>
& li gt; mature & lt;/lt;/lt;/lt;/lt;/lt; I & gt; < " Not learning" />
 

//The first li content result is investment
jQuery("li:first").text() ;
//The result of the last li content is responsible
jQuery("li:last").text();
//The result of input unselected value is not learning
jQuery(" li input:not(:checked)").val();
//The result of li with an even number is investment maturity
jQuery("li:even").text();
// The result of the li with an odd number is the financial manager
jQuery("li:odd").text();
//The content of the li with the index greater than 2 is the result of the financial manager
jQuery("li:gt( 2)").text();
//The content of li with an index less than 1 results in investment
jQuery("li:lt(1)").text();


2. Content filtering selector

The content filtering selector mainly includes 4 types of filters: contains, :empty, :has, and :parent. This part of the filter is a complement to the basic filtering selectors introduced above. In addition, it plays an important role in page selection, setting element display, etc. Each selector will be introduced in detail below.
(1):contains selector.
(2):empty selector.

(3):has selector.
(4): parent selector.
Example:



Copy code

The code is as follows:

                                                                                                                             " >                                                                       🎜>//The result of the content of the li containing hyip is hyip investment hyipjQuery("li:contains('hyip')").text();//The content is the next li of the empty li The content result is financial managementjQuery("li:empty li").text();

//The content result of li containing the a tag is investment

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

3． Visibility filter selector
The visibility filter selector is relatively simple. It contains two selectors, mainly used to match all visible elements and invisible elements. These two selectors will be introduced in detail below.
(1):hidden selector.
(2):visible selector.

Example:

Copy code The code is as follows:

• Visible


• Invisible

//Invisible li The content result is invisible
jQuery("li:hidden").text();
//The content result of visible li is visible
jQuery("li:visible").text() ;

4. Attribute filter selector
Attribute filter selector is used to match elements that contain a given attribute. Of course, it can also match elements that do not contain this attribute. The attribute filter selector contains the following 7 selectors.
(1) [attribute] selector.
(2) [attribute=value], [attribute!=value] selector (two types are included here).
(3) [attribute^=value], [attribute$=value], [attribute*=value] selectors (three types are included here).
(4)[selector][selector2] selector.
Example:

Copy code The code is as follows:

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

5. The sub-element filter selector
html consists of tags nested layer by layer. Since some tags need to be processed separately, how to select one or some specific nested tags becomes a problem in the program. jQuery provides child element filter selectors to solve this problem. It includes 4 selectors, the specific content will be explained in detail below.
(1):nth-child selector.
(2):first-child, :last-child selectors (two types).
(3): only-child selector.
6． Form object attribute filter selector
This part is quite simple and contains only four types of selectors. These selectors are used to match available elements or unavailable elements, selected elements, etc. This part of the content will be explained below in the form of examples.
(1):enabled, :disabled selector.
(2):checked selector.
(3):selected selector.
The form filter selector is a selector used to process forms in HTML. It not only includes frequently used buttons, text fields, radio buttons, check boxes, etc., but also involves rarely used images, Hide domain, file upload, etc. tags. These selectors will be introduced in detail below.
(1): input selector.
(2):text, :password selector.
(3):radio, :checkbox selector.
(4):submit, :image, :reset, :button, :file selector.
(5):hidden selector.

Query 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.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn