Summary of common jQuery selectors_jquery

Basic element selector

Copy code The code is as follows:

$("p")
$("p.ii") selects all p elements with class=ii
$("p#demo") selects the first p element with id=demo

Hierarchical Selector

Copy code The code is as follows:

$("div input")All inputs under div
$("div>input")

Basic condition selector

Copy code The code is as follows:

$("p:first")
$("p:last")
$("tr:even") selects even rows
$("tr:odd")Odd
$("input:not(:checked)") selects all selected elements
$("tr:eq(1)")Table with index value 1
$("tr:gt(0)") is greater than 0
$("tr:lt(0)") is less than 0
$(":header") selects all header elements
$(":animated")The animation being executed

Content condition selector

Copy code The code is as follows:

$("div:constains('ddd')") selects the layer element containing ddd text
$("td:empty") selects table cells that do not contain text or sub-elements
$("div:has(p)") selects the layer element containing the paragraph element
$("td:parent") selects table cells containing child elements or text

Visibility condition selector

Copy code The code is as follows:

$("tr:hidden") //Select all hidden tables
$("tr:visible") selects all visible tables

Attribute selector

Copy code The code is as follows:

$("div[id]")Layer with id attribute
$("input[name='']") input attribute name=''
$("input[name!='']")
$("input[name^='']") selects the form input element that has the name attribute and the value is '' as the starting content
$("input[name$='']") selects the form input element that has the name attribute and the value is '' as the end content
$("input[name*='']") selects the form input element with name attribute and value ''
$("input[id][name$='']") selects the input form element with the value of id and name attributes ending with ''

Child element selector

Copy code The code is as follows:

$("ul li:nth-child(2)") selects the second list item
$("ul li:nth-child(even)")
$("ul li:nth-child(odd)")
$("ul li:nth-child(3n)")
$("ul li:first-child")
$("ul li:last-child")
$("ul li:only-child") The selection list appears and only one list item appears

Form element selector

Copy code The code is as follows:

$("input") selects all input textarea select button and other elements
$(":text")Text line
$(":password")
$(":radio")
$(":checkbox")
$(":submit")
$(":image")
$(":reset")
$(":button")
$(":file")
$(":hidden")

Form attribute selector

Copy code The code is as follows:

$("input:enabled") //Select all available
$("input:disabled")
$("input:checked")
$("select:option:selected")