Home > Developer > JavaScript
Usage Analysis of jQuery subattribute filter selector, jquery Selector
This document describes the usage of the jQuery subattribute filter selector. Share it with you for your reference. The specific analysis is as follows:
1.: first-child Selector
Select all elements of the first child element of the parent level. format:Copy codeThe Code is as follows: $ ("selector: first-child ")
For example:Copy codeThe Code is as follows: $ ("ul: first-child" ).css ("text-decoration", "underline" ).css ("color", "blue ");
2.: last-child Selector
Used to select all the elements of the last child element of the parent level. format:Copy codeThe Code is as follows: $ ("selector: last-child ")
For example:Copy codeThe Code is as follows: $ ("ul: last-child" ).css ("text-decoration", "underline" ).css ("color", "red ");
3.: nth-child Selector
Select the nth child or parity element under the parent element.
Syntax format:Copy codeThe Code is as follows: $ ("selector: nth-child (index/even/odd/equation )");
For example:Copy codeThe Code is as follows: $ ("ul li: nth-child (4)" ).css ("color", "red "); // set the text color of the 5th elements under the ul element to red, that is, the index value of the li element is 4.
4.: only-chilid Selector
The unique Selector Used to select an element.
Format:Copy codeThe Code is as follows: $ ("selector: only-chilid ")
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> child element filter selector </title>
<Script type = "text/javascript" src = "jquery-1.7.min.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("Table tr: first-child" 2.16.css ("background", "# FCF ");
$ ("Table tr: last-child" 2.16.css ("background", "yellow ");
$ ("Tr td: nth-child (even)" ).css ("border", "1px solid red ");
$ ("Div h3: only-child" ).css ("color", "#999 ");
});
</Script>
</Head>
<Body>
<Div align = "center"> sub-element filter application instance </div>
<Table width = "462" height = "152" 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>
<Tr>
<Td> </td>
<Td> </td>
<Td> </td>
<Td> </td>
<Td> </td>
</Tr>
<Tr>
<Td> </td>
<Td> </td>
<Td> </td>
<Td> </td>
<Td> </td>
</Tr>
</Table>
</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
