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')

Basic Filters

  • :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 exampleh1h2h3This 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

Content Filters

  • :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)

Visual selector Visibility Filters

  • :hiddenSelect all hidden elements, such as:$("div:hidden").show(3000));
  • :visibleSelect 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 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']")

Child Filters

  • :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

Form selector

  • :buttonSelect all button elements and button type elements.
  • :checkboxSelect all elements that need to be picked up.
  • :checkedSelect all selected elements.
  • :disabledSelect all disabled elements.
  • :enabledSelect all enabled elements.
  • :focusChoose the present quiltfocusThe element of.
  • :filechoosefileElement of type.
  • :imageSelect all elements of the image type.
  • :inputSelect allinputtextareaselectAndbuttonElement.
  • :passwordSelect elements of all password types.
  • :radioSelect the elements of all option buttons.
  • :resetSelect all elements of the clear button (reset button).
  • :selectedSelect all selected elements.
  • :submitSelect elements of all submission types.
  • :textSelect all elements of the text input box.