1. The JQuery selector inherits some of the CSS and path speech syntaxes and allows you to quickly and accurately select DOM elements by Tag Name, attribute name, and content.
2. Compared with JavaScript, JQuery selector has the advantage of simple code and perfect detection mechanism.
3. Use the JQuery selector to change the color of the line. The sample code is as follows::
Copy codeThe Code is as follows: <! Doctype html public "-// W3C // dtd html 4.0 Transitional // EN">
<HTML>
<HEAD>
<TITLE> Use JQuery to change the color of the line </TITLE>
<Meta name = "Generator" CONTENT = "EditPlus">
<Meta name = "Author" CONTENT = "">
<Meta name = "Keywords" CONTENT = "">
<Meta name = "Description" CONTENT = "">
<Style type = "text/css">
Body {font-size: 12px; text-align: center}
# TbStu {width: 260px; border: solid 1px #666; background-color: # eee}
# TbStu tr {line-height: 23px}
# TbStu tr th {background-color: # ccc; color: # fff}
# TbStu. trOdd {background-color: # fff}
</Style>
<Script language = "javascript" type = "text/javascript" src = "jquery-1.8.3.min.js">
</Script>
<Script type = "text/javascript">
$ (Function (){
$ ("# TbStu tr: nth-child (even)"). addClass ("trOdd ");
})
</Script>
</HEAD>
<BODY>
<Table id = "tbStu" cellpadding = "0" cellspacing = "0">
<Tbody>
<Tr>
<Th> Student ID </th> <th> name </th> <th> gender </th> <th> total score </th>
</Tr>
<Tr>
<Td> 1001 </td> <td> Zhang Xiaoming </td> <td> male </td> <td> 320 </td>
</Tr>
<Tr>
<Td> 1002 </td> <td> Li Ming flag </td> <td> female </td> <td> 350 </td>
</Tr>
</Tbody>
</Table>
</BODY>
</HTML>
For example:
4. The following code uses JavaScript to implement line-changing.:Copy codeThe Code is as follows: <script type = "text/javascript">
Window. onload = function (){
Var oTb = document. getElementById ("tbStu ");
For (var I = 0; I <oTb. rows. length-1; I ++ ){
If (I % 2 ){
OTb. rows [I]. className = "trOdd ";
}
}
}
</Script>
Implement line-changing code using JQuery:Copy codeThe Code is as follows: </script>
<Script type = "text/javascript">
$ (Function (){
$ ("# TbStu tr: nth-child (even)"). addClass ("trOdd ");
})
</Script>
The JQuery code is much simpler than the two.
