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

Home

Web Front-end

Front-end Q&A

How to use jQuery to achieve interlaced color effect

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 09, 2022 am 11:00 AM

jquery

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

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:

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!

Statement

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