Summary of jquery filter instance usage

In web applications, most client-side operations are based on object operations. To operate an object, you must first obtain the object. jQuery provides a powerful selector that allows us to obtain the object. The jQuery selector is divided into two parts: selection objects and filter conditions. Selecting an object indicates what object is to be obtained, and the filtering condition is to filter the obtained objects and finally leave objects that meet certain characteristics.

1.Select 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: $("p")
·.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,p,.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). AttributeFilter

·[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 where the given attribute is a specific value. For example: $("input[name='man']");
·[attribute] matches elements containing the given attribute. For example: $("p[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: $("p:contains('John')")
·:empty matches all empty elements that do not contain child elements or text. For example: $("td:empty")
·:has(selector) matches elements that contain the element matched by the selector. For example: $("p:has(p)");
·:parent matches elements that contain child elements or text. For example: $("td:parent")

3). Hierarchical 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 filter

·:animated matches all elements that are performing animation effects. For example: $("p: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")

Summary of methods for filtering in jQuery

1.add()

Used to link result sets of elements that match two expressions respectively.

[JavaScript] view plaincopy

1. $("p").add("div");

Match p and div, That is, find all p and div and put them into matching elements.

[javascript] view plaincopy

1. $("p div");

Achieve the same function.

2.andself()

For filtered or searched elements, add previously selected elements.

[javascript] view plaincopy

1. $("div").find("span").andself().addClass("test");

3.end()

Go back to before the latest "destructive" operation, that is, change the matching element list to the previous matching state.

The so-called "destructive" operation refers to further matching of the obtained jQuery elements, such as find, add, children, not, prev, etc.

4.filter()

When the parameter is one or more expressions, it is used for filtering.

When the parameter is a function, the element returned as false is deleted, otherwise it is retained.

[javascript] view plaincopy

1. $("p").filter(function(){

2. return $("ol",this). length==0;

3. });

Get the elements that do not contain ol in

.

5.map()

Convert a set of elements into other arrays.

1. $("p").append($("input").map(function(){

2. return $(this).value();

3. }).get().join(","));

Form the values ​​of all input tags into a connected by "," String and appended to the

element.

6.children()

Get an element set containing all the child elements of each element in the matching element set, regardless of the child elements of the child element.

7.closest() and parents()

                                                                                                                                                                        

Start matching element The current element starts matching The parent element starts matching

Match the end element Until a matching element is found To the root element

Return Result                                                                                                                                         (), nextAll() and nextUntil()The first one obtains an element set containing the immediately following sibling elements of each element in the matched element set. Second, get all sibling elements behind the current matching element. The third one is to search for all sibling elements after the current element until it encounters the parameter passed in. 9.parent()

Get an element set containing the unique parent element of all matching elements.

10.prev(), prevAll() and prevUntil()

Same as next, just get the previous element.

11.siblings()

Get the set of all sibling elements of the selected element, excluding itself.

But by adding the andself() method, you can get yourself and your peers.

The above is the detailed content of Summary of jquery filter instance usage. For more information, please follow other related articles on the PHP Chinese website!