Introduction to the full series of JQuery filters_jquery

1. Select the object

1).Basic

·#id Matches an element based on the given ID. For example: $("#id")
·element matches all elements based on the given element name. For example: $("div")
·.class Matches elements based on the given class. For example: $(".style1");
·* matches all elements. For example: $("*")
·selector1,selector2,selectorN will combine the elements matched by each selector and return them together. For example: $("#id,div,.style1")

2).Form

·:button matches all buttons. For example: $(":button")
·:checkbox matches all checkboxes. For example: $(":checkbox")
·:file matches all file fields. For example: $(":File")
·:hidden matches all invisible elements, or elements with type hidden. For example: $("input:hidden")
·:image matches all image fields. For example: $(":image")
·:input matches all input, textarea, select and button elements. For example: $(":input")
·:password matches all password boxes. For example: $(":password")
·:radio matches all radio buttons. For example: $(":radio")
·:reset matches all reset buttons. For example: $(":reset")
·:submit matches all submit buttons. For example: $(":submit")
·:text matches all single-line text boxes. For example: $(":text")
·:header matches header elements such as h1, h2, h3. For example: $(":header").css("background", "#EEE");

2. Filter conditions

1).Attribute filtering

·[attribute*=value] Match the given attribute to elements that contain certain values. For example: $("input[name*='man'")
·[attribute!=value] matches all elements that contain the specified attribute, but the attribute is not equal to the specific value. For example: $(input[name!='man');
·[attribute$=value] matches elements where the given attribute ends with some value. For example: $("input[name$='man']")
·[attribute=value] matches elements whose given attribute is a specific value. For example: $("input[name='man']");
·[attribute] matches elements containing the given attribute. For example: $("div[id]")
·[attribute^=value] matches elements where the given attribute starts with some value. For example: $("input[name^='man']")
·[selector1][selector2][selectorN] satisfies multiple conditions at the same time. For example: $("input[id][name$='man']")
·:hidden matches all invisible elements. For example: $("tr:hidden")
·:visible matches all visible elements. For example: $("tr:visible")
·:checked matches all selected selected elements (check boxes, radio buttons, etc., excluding options in select). For example: $("input:checked")
·:disabled matches all disabled elements. For example: $("input:disabled")
·:enabled matches all available elements. For example: $("input:enabled")
·:selected matches all selected option elements. For example: $("select option:selected")

2). Content filtering

·:contains(text) Matches elements that contain the given text. For example: $("div:contains('John')")
·:empty matches all empty elements that do not contain child elements or text. For example: $("td:empty")
·:has(selector) matches elements containing the element matched by the selector. For example: $("div:has(p)");
·:parent matches elements containing child elements or text. For example: $("td:parent")

3). Level filtering

·ancestor descendant matches all descendant elements under the given ancestor element. For example: $("form input")
·parent > child matches all child elements under the given parent element. For example: $("form > input")
·prev next matches all next elements immediately following the prev element. For example: $("label input")
·prev ~ siblings matches all siblings elements after the prev element. For example: $("form ~ input")
·:first-child matches the first child element. For example: $("ul li:first-child")
·:last-child matches the last child element. For example: $("ul li:last-child")
·:nth-child(index/even/odd/equation) matches the Nth child or odd-even element under its parent element. For example: $("ul li:nth-child(2)")
·:only-child If an element is the only child element of the parent element, it will be matched. For example: $("ul li:only-child")

4).Method screening

·:animated matches all elements that are performing animated effects. For example: $("div:animated");
·:eq(index) matches an element with a given index value. For example: $("tr:eq(1)")
·:even matches all elements with even index values, counting from 0. For example: $("tr:even")
·:first matches the first element found. For example: $("tr:first")
·:gt(index) matches all elements greater than the given index value, counting from 0. For example: $("tr:gt(0)")
·:last matches the last element found. For example: $("tr:last")
·:lt(index) matches all elements less than the given index value. For example: $("tr:lt(2)")
·:not(selector) Removes all elements matching the given selector. For example: $("input:not(:checked)")
·:odd matches all elements with odd index values, counting from 0. For example: $("tr:odd")