search

Home  >  Article  >  Web Front-end  >  jQuery study notes: Use of jQuery selector_jquery

jQuery study notes: Use of jQuery selector_jquery

WBOY
WBOYOriginal
2016-05-16 18:13:371187browse

1. Basic selector:

  • #id : Select the element with the given ID name. For example: $("#id1") selects the element with the ID id1.
  • .class : Select elements with a given class name
  • element : Select all primary colors of the given element name
  • * : Matches all elements
  • selector1,selector2,... : Select elements with these names, separated by commas, which can be class or id names

2. Level selector:

  • $("ancestor descendant"): Select all descendant elements under the ancestor element
  • $("parent>child"): Select all child elements under parent
  • $('prev next'): Select the first next element immediately following prev
  • $('prev~siblings') : Select all siblings elements after prev

$('prev next') has the same effect as $(.prev).next("next")

$('prev~siblings') has the same effect as $(.prev).nextAll("siblings")

3. Filter selection:

  • ：first Select the first element For example: $("div:first") selects the first div element
  • ：last Select the last element
  • ：not(selector) Select elements that are not selectors
  • : even selects elements with even indexes
  • : odd selects all elements with odd indexes
  • ：eq(index) Select the element whose index is equal to index
  • : gt(index) selects elements with index greater than index
  • ：lt(index) Select elements with index less than index
  • ：header selects all elements
  • ：animanted Select all animated elements

Four. Content filtering:

  • ：contains(text) selects elements containing text text. For example: $("div:contains('hello')") selects div elements containing hello characters.
  • : empty selects all elements that do not contain characters
  • ：has(selector) Select elements containing selector elements
  • : parent selects elements containing child elements

Five. Visibility filtering:

  • : hidden selects all visible elements
  • : visible selects all invisible elements

Six. Attribute filtering:

  • [attribute] Select the element with this attribute. For example, $("div[id]") selects the div element containing the id attribute.
  • [attribute=value] Select elements whose attribute attribute is equal to value
  • [attribute!=value] Select elements whose attribute attribute is not equal to value
  • [attribute^=value] Select elements whose attribute attribute is equal to value
  • [attribute$=value] Select the element whose attribute attribute value starts with value
  • [attribute*=value] Select elements whose attribute attribute value contains value
  • [selector1][selector2]....Elements (combinations) that meet these conditions

Seven. Child element filter selector

  • : nth-child(index/even/odd/eqation) selects the child element of [index/even/odd] under the parent element
  • : first-child selects the first child element of the parent element
  • : last-child selects the last child element of the parent element
  • : only-child selects the only child element under the parent element

Eight. Form attribute filtering

  • : enabled selects all visible elements. For example: $("#form1:enabled") selects all available elements whose form id is form1.
  • : disable selects all invisible elements
  • : checked selects all selected elements
  • : selected selects all selected option elements

9. Form object filtering

  • : input selects all