Links:JQuery selector
Basic selector Basics
-
*
Select all elements -
.class
chooseclass
For example:$('.mybox')
-
element
chooseelement
For example:$('p')
-
#id
chooseid
For example:$('#box')
-
selector1,selectorN
You can select multiple elements at the same time, such as:$('div, p.box, #phone')
Hierarchy selector
-
parent > child
Select the specified child element under the specified element, such as:$('ul.tonav > li')
-
ancestor descendant
Select all descendant elements in an element, such as:$('form input')
-
prev + next
Select the elements immediately following all specified elements, such as:$('label + input')
-
prev ~ siblings
Select a sibling selector that has the same parent as the specified element, such as:$('#prev ~ div')
Basic Filters
-
:animated
Select all elements of the animation in progress. For example:$('div:animated)
-
:eq(n)
Select the firstn
Elements, such as:$('ul.tonav li:eq(n)')
-
:even
Select an even number of elements, such as:$('li:even')
-
:odd
Select an odd number of elements, such as:$('li.odd')
-
:first
Select an odd number of elements, such as:$('li:first')
-
:gt(n)
Index in selected result set is greater thann
The elements of the,n
Can be negative, such as:$(':gt(3)')
-
:lt(n)
Index in selected result set is less thann
The elements of the,n
Can be negative, such as:$(':lt(3)')
-
:header
Select all title elements, for exampleh1
、h2
、h3
This 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)')
-
:last
Select the last matching element, such as:$('li:last')
-
:not
Select all elements that do not match, such as:$('input:not(:checked) + span')
-
:root
Select the element as the document root directory -
:target
Selecting target elements indicated by pictures, videos and audio of documents
Content Filters
-
:contains()
Select all elements that contain the specified text, such as:$("div:containers('home')")
-
:empty
Select 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)"))
-
:parent
Select all elements that have at least one child node (element or text)
Visual selector Visibility Filters
-
:hidden
Select all hidden elements, such as:$("div:hidden").show(3000));
-
:visible
Select all hidden elements, such as:$("div:visible").click(function() {$(this).css("background", "yellow"); });
Attribute selector attribute
-
[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 choosevalue
equal toHot Fuzz
Theinput
-
[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']")
,name
Attribute value isnewsletter
I 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']")
Child Filters
-
:first-child
Select the first child element of the half-father. -
:first-of-type
Select the first element of brothers with the same element name. -
:last-child
Select the last child element of the half-father. -
:last-of-type
Select the last element of brothers with the same element name. -
:nth-child()
Choose the first of your father’s generationn
Child element. -
:nth-last-child()
Choose the penultimate son of your fathern
Child element. -
:nth-last-of-type()
Choose the penultimate son of your fathern
Child element. -
:nth-of-type()
Choose the first of your father’s generationn
Child element. -
:only-child
Select 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 choicebutton
Thediv
Form selector
-
:button
Select all button elements and button type elements. -
:checkbox
Select all elements that need to be picked up. -
:checked
Select all selected elements. -
:disabled
Select all disabled elements. -
:enabled
Select all enabled elements. -
:focus
Choose the present quiltfocus
The element of. -
:file
choosefile
Element of type. -
:image
Select all elements of the image type. -
:input
Select allinput
、textarea
、select
Andbutton
Element. -
:password
Select elements of all password types. -
:radio
Select the elements of all option buttons. -
:reset
Select all elements of the clear button (reset button). -
:selected
Select all selected elements. -
:submit
Select elements of all submission types. -
:text
Select all elements of the text input box.