jquery li练习2-恢复链条
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="jquery-1.7.1.min.js"></script>
<script>
$(function () {
$('li').hover(function () {
//$(this).css('color','red').prevAll().css('color','yellow');//破坏了链
$(this).css('color','red').prevAll().css('color','yellow').end().nextAll().css('color', 'lightBlue');//end()恢复最近断的链条
}, function () {
$('li').css('color', 'black');
}).click(function () {
$(this).appendTo('#ul2');
});
});
</script>
</head>
<body>
<ul id="ul1">
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
</ul>
<ul id="ul2">
</ul>
</body>
</html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="jquery-1.7.1.min.js"></script>
<script>
$(function () {
$('li').hover(function () {
//$(this).css('color','red').prevAll().css('color','yellow');//破坏了链
$(this).css('color','red').prevAll().css('color','yellow').end().nextAll().css('color', 'lightBlue');//end()恢复最近断的链条
}, function () {
$('li').css('color', 'black');
}).click(function () {
$(this).appendTo('#ul2');
});
});
</script>
</head>
<body>
<ul id="ul1">
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
</ul>
<ul id="ul2">
</ul>
</body>
</html>
