This example describes the jquery child attribute filter selector usage. Share to everyone for your reference. The specific analysis is as follows:
1.: First-child Selector
All elements that are used to select the first child element of its parent, in the format:
Copy Code code as follows:
$ ("Selector:first-child")
Such as:
Copy Code code as follows:
$ ("Ul:first-child"). CSS ("text-decoration", "Underline"). CSS ("Color", "blue");
2.: Last-child Selector
All elements for selecting the last child element of its parent, in the format:
Copy Code code as follows:
$ ("Selector:last-child")
Such as:
Copy Code code as follows:
$ ("Ul:last-child"). CSS ("text-decoration", "Underline"). CSS ("Color", "red");
3.: Nth-child Selector
Used to select the nth child element or parity element under the parent element.
Syntax format:
Copy Code code as follows:
$ ("Selector:nth-child (index/even/odd/equation)");
Such as:
Copy Code code as follows:
$ ("UL Li:nth-child (4)"). CSS ("Color", "red");//The text color of the 5th element under the UL element is set to red, that is, the LI element has an index value of 4
4.: Only-chilid Selector
The only selector for selecting an element
Format:
Copy Code code as follows:
$ ("Selector:only-chilid")
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> 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"). CSS ("Background", "#FCF");
$ ("Table Tr:last-child"). CSS ("Background", "yellow");
$ ("tr td:nth-child (even)"). CSS ("Border", "1px solid Red");
$ ("div h3:only-child"). CSS ("Color", "#999");
});
</script>
<body>
<div align= "center" > child 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>
The effect diagram looks like this:
I hope this article will help you with your jquery programming.
