Home > Developer > JavaScript
JQuery filter selector Usage Analysis, jquery filter Selector
This document describes how to use the jQuery filter selector. Share it with you 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, you can use the index value, content, attribute, sub-element position, and form of the element.
Domain attributes and visibility are used as filtering conditions.
1.: first Selector
Format:Copy codeThe Code is as follows: $ ("selector: first") is used to filter the current jQuery set and select the first Matching Element.
Instance:Copy codeThe Code is as follows: $ ("td: first" ).css ("border", "2px solid blue ");
2.: last Selector
Format:Copy codeThe Code is as follows: $ ("selector: last") is used to filter the current jQuery set and select the last matching element.
Instance:Copy codeThe Code is as follows: $ ("td: last" ).css ("border", "2px solid blue ");
3.: odd Selector
Format:Copy codeThe Code is as follows: $ ("selector: odd") is used to select all elements whose indexes are odd (counting from 0 ).
Instance:Copy codeThe Code is as follows: $ ("td: odd" ).css ("background", "red ");
4.: even Selector
Format:Copy codeThe Code is as follows: $ ("selector: even") is used to select all elements whose index is an even number (counted from 0 ).
Instance:Copy codeThe Code is as follows: $ ("td: even" ).css ("background", "red ");
5.: eq Selector
Format:Copy codeThe Code is as follows: $ ("selector: eq (index)") is used to select the element whose index is equal to the given value from the matching set.
Instance:Copy codeThe Code is as follows: $ ("li: eq (1)" ).css ("color", "blue ");
6.: gt Selector
Format:Copy codeThe Code is as follows: $ ("selector: gt (index)") is used to select all elements whose index is greater than the given value from the matching set.
Instance:Copy codeThe Code is as follows: $ ("li: gt (0)" ).css ("color", "green ");
7.: lt Selector
Format:Copy codeThe Code is as follows: $ ("selector: lt (index)") is used to select all elements whose index is greater than the given value from the matching set.
Instance:Copy codeThe Code is as follows: $ ("li: lt (5)" ).css ("color", "green ");
To search for all the elements whose index is greater than n1 and less than n2, you can use the array selector,
Copy codeThe Code is as follows: $ ("selector: gt (n1), selector: lt (n2 )");
8.: not Selector
Format:Copy codeThe Code is as follows: $ ("selector1: not (selector2)") removes all elements that match the given selector from the matched set
Instance:Copy codeThe Code is as follows: $ ("td: not (: first,: last)" ).css ("background", "red"); // except for the first and last cells, the background color of other cells is red.
9.: header Selector
Format:Copy codeThe Code is as follows: $ (": header") is used to select all title elements such as h1, h2, h3
10.: animated Selector
Format:Copy codeThe Code is as follows: $ ("selector: animated") is used to select all elements that are executing the animation effect.
Simple Example:
Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<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)" bar .css ("border", "1px solid red ");
$ ("Td: gt (6)" bar .css ("border", "1px solid blue ");
$ ("Td: lt (6)" ).css ("color", "blue ");
$ ("Td: not (: first,: last" ).css ("color", "red ");
});
</Script>
</Head>
<Body>
<H3 align = "center"> simple filter selector application example <Table width = "480" 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>
</Html>
As follows:
I hope this article will help you with jQuery programming.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
