July 4, 2019 Frame learning, Front end, javascript, jquery, Selector

Links:JQuery selector

Basic selector Basics

*Select all elements
.classchooseclassFor example:$('.mybox')
elementchooseelementFor example:$('p')
#idchooseidFor example:$('#box')
selector1,selectorNYou can select multiple elements at the same time, such as:$('div, p.box, #phone')

Hierarchy selector

parent > childSelect the specified child element under the specified element, such as:$('ul.tonav > li')
ancestor descendantSelect all descendant elements in an element, such as:$('form input')
prev + nextSelect the elements immediately following all specified elements, such as:$('label + input')
prev ~ siblingsSelect a sibling selector that has the same parent as the specified element, such as:$('#prev ~ div')

:animatedSelect all elements of the animation in progress. For example:$('div:animated)
:eq(n)Select the firstnElements, such as:$('ul.tonav li:eq(n)')
:evenSelect an even number of elements, such as:$('li:even')
:oddSelect an odd number of elements, such as:$('li.odd')
:firstSelect an odd number of elements, such as:$('li:first')
:gt(n)Index in selected result set is greater thannThe elements of the,nCan be negative, such as:$(':gt(3)')
:lt(n)Index in selected result set is less thannThe elements of the,nCan be negative, such as:$(':lt(3)')
:headerSelect all title elements, for exampleh1、h2、h3This is the first time that I’ve ever been able to do this.$(':header')
:lang()Select all elements of the specified language, such as:$('div:lang(zh-cn)')
:lastSelect the last matching element, such as:$('li:last')
:notSelect all elements that do not match, such as:$('input:not(:checked) + span')
:rootSelect the element as the document root directory
:targetSelecting target elements indicated by pictures, videos and audio of documents

:contains()Select all elements that contain the specified text, such as:$("div:containers('home')")
:emptySelect elements that do not have child elements or content text, such as:$("td:empty"))
:has()Select an element that contains at least one element that matches the specified selector, such as:$("div:has(p)"))
:parentSelect all elements that have at least one child node (element or text)

:hiddenSelect all hidden elements, such as:$("div:hidden").show(3000));
:visibleSelect all hidden elements, such as:
$("div:visible").click(function() {$(this).css("background", "yellow"); });

[name]Select the element with the specified attribute (use any value). For example:$("div[id]")
[name|="value"]Select the element with the specified attribute whose value is equal to the given string, or start with the string followed by a hyphen (-）。
```
$('a[href="about.html"]');  //the href attribute of the selected a link contains elements of' about.html'
```
[name*="value"]Select the element with the specified attribute that contains the value of the given substring.
```
$('input[name*="man"]');  //select all input elements whose name attribute contains' man'
```

[name~="value"]Select the element with the specified attribute, which contains the values of the given word separated by spaces.

<input name="man-news">
<input name="milk man">
<input name="letter">

$('input[name~="man"]');  //will select the first two input elements

[name$="value"]Select the element with the specified attribute whose value exactly matches the given string, and be case sensitive. For example:$("input[name$='letter']")
[name="value"]Select an element with the specified attribute whose value is exactly equal to a specific value, such as:$("input[value='Hot Fuzz']")Will choosevalueequal toHot FuzzTheinput
[name! ="value"]Select an element that does not have the specified attribute, or an element that has the specified wakeup but does not have a specific value. For example:$("input[name! ='newsletter']"),nameAttribute value isnewsletterI don’t think so.

[name^="value"]Select the element with the specified attribute whose value exactly matches the given string.

<input name="newsletter">
<input name="milkman">
<input name="news">

$('input[name^="news"]');  //will select the third input

[name="value"][name2="value2"]Elements that match all specified attribute filters. For example:$("input[id][name$='man']")

:first-childSelect the first child element of the half-father.
:first-of-typeSelect the first element of brothers with the same element name.
:last-childSelect the last child element of the half-father.
:last-of-typeSelect the last element of brothers with the same element name.
:nth-child()Choose the first of your father’s generationnChild element.
:nth-last-child()Choose the penultimate son of your fathernChild element.
:nth-last-of-type()Choose the penultimate son of your fathernChild element.
:nth-of-type()Choose the first of your father’s generationnChild element.
:only-childSelect an element with only one child.
:only-of-type()Select all sibling elements that do not have the same name. For example:$("div.button:only-child")There is only one choicebuttonThediv