<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
< ;title>Traverse jquery objects</title>
<script src="../jquery-3.3.1.js"></script>
<script>
$( "button").click(function () {
. More functions can be completed.
$("li").each(function (i) {
$(this).css("color","red").html(i "---" "www.php.cn");
});
})
;button type="button" name="button">Please click to change color</button>
<ul>
;PHP Chinese website 02</li>
;/li>
</ul>
</body>
</html>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
If your js code is written on <body>, you need to add the entry function
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF -8">
<title>Traverse jquery object</title>
</head>
<body>
<button type="button" name="button">Please click to change color</button>
<ul>
<li>PHP Chinese website 01</li> ;
<li>PHP Chinese website 02</li>
<li>PHP Chinese website 03</li>
<li>PHP Chinese website 04</li>
<li>PHP Chinese website 05</li>
</ul>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$("button").click(function () {
//The above line of commented code can use this function to complete more functions.
$("li") .each(function (i) {
$(this).css("color","red").html(i+"---"+"www.php.cn");
});
})
</script>
</html>