b.js
function setEven() {
$("li,span").css("font-weight","");
var $evenItems=$("li:even");
$evenItems.css("font-weight","bold");
$("span:contains(Even)").css("font-weight","bold");
$(".label").html("Even");
}
function setOdd() {
$("li,span").css("font-weight","");
var $oddItems=$("li:odd");
$oddItems.css("font-weight","bold");
$("span:contains(Odd)").css("font-weight","bold");
$(".label").html("Odd");
}
function setFirst4() {
$("li,span").css("font-weight","");
var $first4=$("li:lt(4)");
$first4.css("font-weight","bold");
$("span:contains('First 4')").css("font-weight","bold");
$(".label").html("First 4");
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用jQuery訪問DOM對象</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/b.js"></script>
<link rel="stylesheet" type="text/css" href="css/b.css">
</head>
<body>
<span onclick="setEven()">Even</span>
<span onclick="setOdd()">Odd</span>
<span onclick="setFirst4()">First 4</span>
<p class="label">Planets</p>
<ul>
<li>Mercury</li>
<li>Venus</li>
<li>Earth</li>
<li>Mars</li>
<li>Jupiter</li>
<li>Saturn</li>
<li>Uranus</li>
<li>Neptune</li>
</ul>
</body>
</html>b.css
span{
padding:2px;
border:3px ridge blue;
color:white;
background: blue;
cursor:pointer;
}
.label{
font-size: 25px;
margin: 10px;
}