How to use jQuery to achieve interlaced color effect-Front-end Q&A-php.cn

How to use jQuery to achieve interlaced color effect

WBOY

Release： 2022-06-09 11:00:59

Original

2672 people have browsed it

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 ")".

How to use jQuery to achieve interlaced color effect

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")

Copy after login

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")

Copy after login

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>

Copy after login

Output result:

How to use jQuery to achieve interlaced color effect

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!