This example describes the jquery filter selector usage. Share to everyone for your reference. The specific analysis is as follows:
In practice, you can add a filter selector based on the basic selector to complete the query task, in the filter selector can use the element's index value, content, attributes, child element position, form
Domain properties and visibility as filter criteria
1.: The I Selector
Format:
Copy Code code as follows:
Used to filter the current jquery collection and select the first matching element
Instance:
Copy Code code as follows:
$ ("Td:first"). CSS ("Border", "2px solid Blue");
2.: Last Selector
Format:
Copy Code code as follows:
Used to filter the current jquery collection and select the Last matching element
Instance:
Copy Code code as follows:
$ ("Td:last"). CSS ("Border", "2px solid Blue");
3.: Odd Selector
Format:
Copy Code code as follows:
Used to select all elements with an odd index (counting from 0)
Instance:
Copy Code code as follows:
$ ("td:odd"). CSS ("Background", "Red");
4.: Even Selector
Format:
Copy Code code as follows:
Used to select all elements that have an even (starting from 0 count) index
Instance:
Copy Code code as follows:
$ ("Td:even"). CSS ("Background", "Red");
5.: EQ Selector
Format:
Copy Code code as follows:
$ ("Selector:eq (Index)")
Used to select an element in the matching collection that is equal to the given value
Instance:
Copy Code code as follows:
$ ("Li:eq (1)"). CSS ("Color", "blue");
6.: GT Selector
Format:
Copy Code code as follows:
$ ("SELECTOR:GT (Index)")
Used to select all elements from a matching collection that are greater than the given value
Instance:
Copy Code code as follows:
$ ("li:gt (0)"). CSS ("Color", "green");
7.: LT Selector
Format:
Copy Code code as follows:
$ ("Selector:lt (Index)")
Used to select all elements from a matching collection that are greater than the given value
Instance:
Copy Code code as follows:
$ ("Li:lt (5)"). CSS ("Color", "green");
To find all elements that have an index greater than N1 than N2, you can use the array selector,
Copy Code code as follows:
$ ("SELECTOR:GT (N1), Selector:lt (N2)");
8.: not Selector
Format:
Copy Code code as follows:
$ ("Selector1:not (Selector2)")
Used to remove all elements that match a given selector from a matching collection
Instance:
Copy Code code as follows:
$ ("Td:not (: A.: last)"). CSS ("Background", "Red"); In addition to the first and last cells, the background color of the other cells is red
9.: Header Selector
Format:
Copy Code code as follows:
Used to select all header elements such as H1, H2, H3, and so on
Ten.: Animated Selector
Format:
Copy Code code as follows:
Used to select all elements that are performing an animation effect
Simple example:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Filter Selector </title>
<script type= "Text/javascript" src= "Jquery-1.7.min.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ (": Header"). CSS ("Color", "#999");
$ ("Tr:first"). CSS ("Background", "#FCF");
$ ("Td:last"). CSS ("Background", "#FCF");
$ ("td:odd"). CSS ("Background", "yellow");
$ ("Td:even"). HTML ("even");
$ ("Td:eq (1)"). CSS ("Border", "1px solid Red");
$ ("TD:GT (6)"). CSS ("Border", "1px solid Blue");
$ ("Td:lt (6)"). CSS ("Color", "blue");
$ ("Td:not (: A: Last"). CSS ("Color", "red");
});
</script>
<body>
<table width= "height=" 160 "border=" 1 ">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</body>
The effect diagram looks like this:
I hope this article will help you with your jquery programming.
