练习一
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
td {
font-size:50px;
color:green;
cursor:pointer;
font-family:SimHei;
}
</style>
<script src="js/jquery-3.5.0.js"></script>
<script type="text/javascript">
$(function () {
$('td').mouseover(function () {
$(this).text('★').css('color', 'red').prevAll('td').text('★').css('color', 'red').end().nextAll('td').text('☆').css('color', '');
}).mouseout(function () {
$('td').text('☆').css('color', '');
$('td[isclicked]').text('★').css('color', 'red').prevAll('td').text('★').css('color', 'red')
}).click(function () {
$(this).attr('isclicked', 'isclicked').siblings('td').removeAttr('isclicked');
alert($(this).attr('score'));
//$('td').unbind();//锁定,注销所有事件
}).attr('score', function (index) {//隐式迭代
return (index + 1) * 10;
});
});
</script>
</head>
<body>
<table>
<tr>
<td>☆</td>
<td>☆</td>
<td>☆</td>
<td>☆</td>
<td>☆</td>
</tr>
</table>
</body>
</html>
练习二
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.5.0.js"></script>
<script type="text/javascript">
$(function () {
$('li').mouseover(function () {
$(this).css('background-color', 'red').siblings('li').css('background-color', '');
}).click(function () {
$(this).nextAll('li').css('background-color', 'blue').end().prevAll('li').css('background-color', 'yellow');//end()方法用于修复nextAll和prevAll破坏的链式编程
$('li').unbind();//注销li标签的所有事件
});
});
</script>
</head>
<body>
<ul>
<li>阿森纳</li>
<li>巴塞罗那</li>
<li>利物浦</li>
<li>皇家马德里</li>
<li>尤文图斯</li>
</ul>
</body>
</html>