Home > Web Front-end > Front-end Q&A > How to use jQuery to achieve interlaced color effect

How to use jQuery to achieve interlaced color effect

WBOY
Release: 2022-06-09 11:00:59
Original
2690 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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template