A full explanation of the jquery selector

  • 2020-03-30 02:14:33
  • OfStack

There is no fixed definition for selectors, and in some ways jQuery's selectors are very similar to selectors in style sheets. The selection device has the following characteristics:
1. Simplify coding
2. Implicit iteration
3. There is no need to determine whether an object exists
Where "$" is an indispensable part of the selector, in the jQuery library, $is a shorthand form of jQuery, such as $("#foo") and jQuery("#foo") are equivalent, $. Ajax and jquery.ajax are equivalent. If not specified, the $sign in the program can be understood as a shorthand form of jQuery.
Now let's get started with the jQuery selector. The selector will be classified according to the function and habit of the selector, the following categories of different types of classifier, and respectively explain, so that the reader to reach a degree of mastery.
One, the basic selector
Basic selector includes five selector: # id, element,. Class, * and selectorl selector2. SelectorN, will cooperate with examples respectively introduce below each selector function and using method.
1. # id selector
The #id selector matches an element against the given id. If the selector contains special characters, it can be escaped with two slashes and returns Array< Element> .
2. Element selector
An element selector is an element used for searching. The tag name that points to the DOM node. The return value is Array< Element (s) > .
3. Class selector
The.class selector, which matches elements against a given class, is a class to search for. An element can have more than one class, as long as one match can be matched to the return value of Array< Element (s) > .

For example:


<input type="text" id="ID" value=" According to the ID choose " />
<a> Select by element name </a>
<input type="text" class="classname" value=" According to the element css The name of the class to choose " />
jQuery("#ID").val();
jQuery("a").text();
jQuery(".classname").val();

You can get the values of the elements separately. 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
* selectors are used to search for selectors that match all elements in context. The return value is Array< Element (s) > .
5. Selector1 selector2, selectorN selector
This type of selector selector combines the elements to which each selector matches and returns them together. You can specify as many selectors as you like and combine the matched elements into a single result with the return value: Array< Element (s) > . In case of selection for CSS operation to make readers clearly understand selector1, selector2, selectorN selector.
Level selector
There are five forms of hierarchical selectors: analysis, descendant, parent > Child, prev + next and prev ~ siblings. The functions and usage of each selector are described in detail below.
1. Analysis descendant selector
Where an ancestor element matches all its descendants under a given ancestor element, the analysis as a parameter represents any valid selector, and descendant matches the selector for the element and is a descendant of the first selector. The return value is: Array< Element (s) > .
2. Parent> The child selector
Parent> The child selector represents matching all child elements under a given parent element. The two arguments represent the following: parent represents any valid selector; The child matches the selector of the element and is a child of the first selector. The return value is Array< Element (s) > .
3. Prev +next selector
This selector matches all next elements immediately after the prev element. The two parameters represent the following: prev represents any valid selector; Next represents a valid selector and follows the first selector. The return value is Array< Element (s) > .
4. Prev ~ siblings selector
The prev ~ siblings selector represents all siblings after the prev element is matched. The two parameters represent the following: prev represents any valid selector; The siblings represent a selector and it is the sibling of the first selector. The return value is Array< Element (s) > .

For example:


<div id="divTest">
        <input type="text" value=" investment " />
        <input id="next" type="text" />
        <input type="text"  value=" bear " />
        <input type="text" title=" learning " value=" learning " />
        <a>1</a>
        <a>2</a>
</div>
//You get the content of the a tag in div and you get 12
jQuery("#divTest a").text();
//The output div direct child node results in an investment
jQuery("#divTest>input").val();
//The output id of the next element of the same level is assumed
jQuery("#next+input").val();
//Ditto, and the element with the title turns out to be learning
jQuery("#next~[title]").val();

Filter selector
The filter selector mainly filters the DOM elements through specific filtering rules, which are the same as the pseudo-class selector syntax in CSS, that is, the selectors all start with a colon.
There are six types of filter selectors, but they can be categorized. The various types of selectors are described in more detail below.
1. Basic filter selector
The basic filter selector is one of the most commonly used filter selectors, which mainly includes the following forms, which are described in detail here:
(1) :first/:last selector.
(2) :not selector.
(3) :even and :odd selector.
(4) eq:gt, lt and selector.
(5) :header selector.
(6) :animated selector.
For example:

<div id="divTest">
    <ul>
        <li> investment </li>
        <li> financial </li>
        <li> mature </li>
        <li> bear </li>
        <input type="radio" value=" learning " checked="checked" />
        <input type="radio" value=" Don't work " />
    </ul>
</div>
//The first li content results in investment
jQuery("li:first").text();
//The last li content is responsible for the result
jQuery("li:last").text();
//An unselected value of input results in no learning
jQuery("li input:not(:checked)").val();
//An index of even li results in investment maturity
jQuery("li:even").text();
//The index is odd for the li results for financial responsibility
jQuery("li:odd").text();
//The content result of li with index greater than 2 is assumed
jQuery("li:gt(2)").text();
//The content of li whose index is less than 1 results in an investment
jQuery("li:lt(1)").text();

2. Content filter selector
Content filter selectors mainly include :contains, :empty, :has, :parent 4 filters. This part of the filter is a supplement to the basic filter selectors introduced above and plays an important role in page selection, setting the display of elements, and so on. Each selector is described in detail below.
(1) :contains selector.
(2) :empty selector.
(3) :has selector.
(4) :parent selector.

For example:


<div id="Test">
    <ul>
        <li>hyip investment </li>
        <li>hyip</li>
        <li></li>
        <li> financial </li>
        <li><a> investment </a></li>
    </ul>
</div>   
//The content of the li containing hyip results in hyip investment hyip
jQuery("li:contains('hyip')").text();
//The last li of the empty li results in financial management
jQuery("li:empty+li").text();
//The content of li containing the a tag results in an investment
jQuery("li:has(a)").text();

3. Visibility filter selector
The visibility filter selector is simple and consists of two selectors that match all visible and invisible elements. Both selectors are described in detail below.
(1) :hidden selector.
(2) :visible selector.

For example:


<ul>
    <li> visible </li>
    <li style="display:none;"> invisible </li>
</ul>
//The content of invisible li results in invisible
jQuery("li:hidden").text();
//The content of visible li results in visible
jQuery("li:visible").text();

4. Property filter selector
An attribute filter selector is used to match elements that contain a given attribute, or elements that do not. The property filter selector contains the following seven selectors.
(1) [attribute] selector.
(2) [attribute=value], [attribute!=value] selector (two are included here).
(3) [attribute^=value], [attribute$=value], and [attribute*=value] selectors (three are included here).
(4) [selector][selector2] selector.
For example:

<input type="text" name="hyipinvest" value="hyip investment " />
<input type="text" name="investhyip" value=" investment hyip" />
<input type="text" name="google" value="HYIP" />
//The name is the value of hyipinvest and the result is hyip investment
alert(jQuery("input[name='hyipinvest']").val());
//Name starts with the value hyip and ends up investing for hyip
alert(jQuery("input[name^='hyip']").val());
//Name the result of the value ending in hyip is the investment hyip
alert(jQuery("input[name$='hyip']").val());
//The name containing the oo value turns out to be HYIP
alert(jQuery("input[name*='oo']").val());

5. Child element filter selector
HTML consists of layers of nested tags, and because some tags need to be processed separately, selecting one or more specific nested tags becomes a problem in the program. JQuery solves this problem by providing a sub-element filter selector. It includes four selectors, which are explained in more detail below.
(1) : NTH -child selector.
(2) :first-child, :last-child selector (two).
(3) :only child selector.
6. Form object property filter selector
This section is fairly simple and contains only four types of selectors that match available or unavailable elements, selected elements, and so on. This section is explained in the form of an example below.
(1) :enabled :disabled selectors.
(2) :checked selector.
(3) :selected.
A form filter selector is a selector for working with forms in HTML. It includes not only frequently used buttons, text fields, checkboxes, and checkboxes, but also rarely used tags such as images, hidden fields, and file uploads. These selectors are described in detail below.
(1) :input selector.
(2) :text, :password selector.
(3) :radio, :checkbox selector.
(4) :submit, :image, :reset, :button, :file selector.
(5) :hidden selector.

So much for the Query selector, which is basically a learning experience, and there are a few things that haven't been summarized yet. After a period of practice, I believe you will be able to skillfully use jQuery selector.


Related articles: