[basic] novice task, five minutes to fully master jQuery selector

Time:2021-10-27

1. Basic selector

1.1 ID selector:

//Select the element with ID mydiv, which is the fastest
$("#myDiv")

Type 1.2 selector:

//Select all elements whose class attribute is red
$(".red")

1.3 element selector:

//Select all div elements
$("div")

1.4 wildcard selector:

//Select all elements
$("*")

1.5 compound selector:

//Check all span elements and all elements with ID mydiv
$("span,#myDiv")

2. Hierarchy selector

2.1 selector 1 selector 2:

//Select all div elements in the body
$("body div")

2.2 selector 1 > selector 2:

//Select all direct div elements in the body without looking for indirect elements
$("body > div")

2.3 selector 1 + selector 2:

//Select all the next div elements with class red
$(".red + div")

2.4 selector 1 ~ selector 2:

//Select all div sibling elements with ID mydiv
$("#myDiv ~ div")

3. Basic filter selector

3.1 first element selector

//Select the first div element
$("div:first")

3.2 last element selector

//Select the last div element
$("div:last")

3.3 exclusion selector

//Select all div elements whose class is not red
$("div:not(.red)")

3.4 even selector

//Select the div element with an even index value
$("div:even")

3.5 odd selector

//Select div elements with odd index values
$("div:odd")

3.6 index value selector

//Select the div element with index value 2
$("div:eq(2)")
//Select a div element with an index value greater than 2
$("div:gt(2)")
//Select the div element whose index value is less than 2
$("div:lt(2)")

4. Content filter selector

//Check all div elements that contain the text OK
$("div:contains(ok)")
//Check all empty div elements
$("div:empty")
//Select all div elements with class red
$("div:has(.red)")
//Check all div elements that are not empty
$("div:parent")

5. Visibility filter selector

//Check all invisible div elements
$("div:hidden")
//Select all visible div elements
$("div:visible")

6. Attribute filter selector

//Check all div elements that contain the attribute title
$("div[title]")
//Check all div elements whose attribute title is equal to OK
$("div[title=ok]")
//Check all div elements whose attribute title is not equal to OK
$("div[title!=ok]")
//Check all div elements with attribute Title values starting with OK
$("div[title^=ok]")
//Check all div elements whose attribute Title Value contains OK
$("div[title*=ok]")
//Check all div elements that contain the attribute ID and whose attribute Title Value starts with OK
$("div[id][title^=ok]")

7. Sub element filter selector

//Select all div elements that are the second child node
$("div:nth-child(2)")
//Select all div elements that are the first child node
$("div:first-child")
//Select all div elements that are the last child node
$("div:last-child")
//Select all div elements that are unique child nodes
$("div:only-child")

8. Form attribute filter selector

//Select the input available in the form
$("#form1 input:enabled")
//Input not available in the selected form
$("#form1 input:disabled")
//Select all selected elements in the form
$("#form1 input:checked")
//Select the selected element in the drop-down list
$("select > option:selected")