Home > Article > Web Front-end > How to use jQuery to achieve interlaced color effect
How to use jQuery to achieve interlaced color effect
- WBOYOriginal
- 2022-06-09 11:00:592581browse
Method: 1. Use the ":odd" selector and the css() method to set the color of the odd-numbered row elements. The syntax is "$(":odd").css("color attribute"," Color value ")"; 2. Use the ":even" selector with the css() method to set the color of the even-numbered row element. The syntax is "$(":even").css("color attribute","color value ")".
The operating environment of this tutorial: windows10 system, jquery3.4.1 version, Dell G3 computer.
How to use jQuery to achieve interlaced color changing effect
1. Set the color of row elements with odd index numbers
:odd selector selects items with odd index numbers Each element of the number (for example: 1, 3, 5, etc.).
Index values start from 0, the first element is even (0), the second element is odd (1), and so on.
The most common usage: used with other selectors to select every odd-numbered element in the specified combination.
The syntax is:
$(":odd")css() method sets or returns one or more style attributes of the selected element.
2. Set the color of row elements with even index numbers.
: The even selector selects each element with an even index number (for example: 0, 2, 4 etc).
Index values start from 0, the first element is even (0), the second element is odd (1), and so on.
The most common usage: used with other selectors to select every even-numbered element in the specified combination
The syntax is;
$(":even")The example is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("tr:odd").css("background-color","yellow");
$("tr:even").css("background-color","pink");
});
</script>
</head>
<body>
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>123131</td>
</tr>
<tr>
<td>李四</td>
<td>456464</td>
</tr>
<tr>
<td>王五</td>
<td>78979879</td>
</tr>
<tr>
<td>赵钱</td>
<td>147741</td>
</tr>
<tr>
<td>周吴</td>
<td>852258</td>
</tr>
</table>
</body>
</html>Output result:
Video tutorial recommendation: jQuery video tutorial
The above is the detailed content of How to use jQuery to achieve interlaced color effect. For more information, please follow other related articles on the PHP Chinese website!