People who are familiar with web development must have a good understanding of the selection function of css. Through the selection function of css, we can easily apply styles to selected page elements in the css style file. jQuery also adopts this mechanism, making the element selection ability of jQuery very powerful.
a-Select all <a> elements
#specialID—Select an element with matching id as specialID
.specialClass - Select the element that matches the css class sepcialClass
a#——Select the <a> element with the matching id as specialID and useful css class specialClass
p ——Match the <a> element that has the css class specialClass and is inside the <p> element
In addition to supporting traditional css selectors, Jquery also supports CSS3 selection function.
Child node selector
$("p > a") Select the <a> element of the direct child node of the element <p>, and the <a> element of the non-direct child node will not be selected to
Feature Selector
The property selector filters elements that satisfy a certain characteristic (attribute) on the matching selection element.
If we need to make the following choice: match all links to addresses outside this website, we can choose this way
$("a[href^=http://") This selector selects a link element with the href attribute and the href attribute value starts with http://
The syntax for feature selection is:
Select an element with a certain attribute (attribute)
form[method]
Select an element with a certain property and the attribute value is the specified value
input[type=text]
Select an element whose matching attribute starts with a specific character
div[title^=my] ——Select all div elements that match title attribute value that starts with my
Select an element whose matching attribute ends with a specific character
a[href$=.pdf] ——Select all link elements that reference the pdf file
other
a[href*=]Select all link elements that reference jQuery website
Filter
The filter selector can filter out the required elements from the selected elements. The feature selector above also belongs to the filter character, and there is also the ":" character
like:
li:has(a)——Select to match all <li> elements that contain <a> elements
1. Basic filter:
:first: Match the first object of multiple objects
:last: Match the last object of multiple objects
:not(selector): matches the items that remove the contents of the selector after not. The selector in not can only be a filter selector, not a search selector
:even: Match the even number of all objects
:odd: matches the odd number of all objects
:eq(index): Match a separate element of a certain table
:gt(index): Match all elements larger than a certain target
:lt(index): Match all elements smaller than a certain target
:header: Match all header elements, such as h1, h2, h3, h4, h5, h6
:animated: Match all elements with animation effects
2. Content filter:
:contains(text): Matches the object that has the text element inside, including indirect useful situations
:empty: Match all objects without child elements
:has(selector): Match all objects that contain at least one child selector
:parent: Match elements, which contain child elements (including text elements)
3. Visibility filter:
:hidden: Match all hidden objects, or hidden type in input
:visible: Match all visible objects
4. Sub-filtering character:
:nth-child(index/even/odd/equation): Match an object of a certain sub-critical/even/odd/equation in a child element. :eq(index) can only match the child element characteristics of a single object, and this method can match the common characteristics of a child element of multiple objects. nth-child filter, counting starting from 1, which is mainly compatible with the css standard.
:first-child: Match the first child element
:last-child: Match the last child element
These two matches can also match all child elements of multiple parent objects
:only-child: If a parent element has only one child element, it matches this child element
5. Form filter
:input : Match the input element in the form
:text : Match the element in the form whose input type is text
:password : Match elements in the form whose input type is password
:radio : Match the element in the form whose input type is radio
:checkbox: Match the element whose input type is checkbox in the form
:submit : Match the element whose input type is submit in the form
:image : Match the element of the image in the form
:reset : Match the element whose input type is reset in the form
:button : Match the element in the form whose input type is button
:file : Matches elements in the form whose input type is file.
:hidden : Match the element or hidden area in the form whose input type is hidden
:enabled : Match all enabled elements
:disabled : Match all non-enabled elements
:checked : Match all selected elements
:selected : Match all drop-down list selected elements
The conceptual difference between finding selector and filter selector
In order to be able to use jQuery flexibly, it is very important to recognize the differences between search selectors and filter selectors. Filter selectors, by applying higher selection criteria to elements (such as filtering characteristics or other related values), narrowing the set of elements being matched; looking for selectors, such as descendant selectors (spaces), child node selectors (>), and sibling node selectors (+), find other elements that have some relationship with the selected element, rather than limiting the matching range by applying the criteria to the matched element.