<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(function () {
//简介："."的时候是针对上一步的返回值的节点集合的操作。链式编程就是对象一棒棒向下传，能不能正确传下来要看返回值
//===============================1=================================================
//之后紧邻的第一个兄弟节点(紧挨着的)
$("#d4").next().css("background-color", "pink");
//这个参数意义不大 因为紧挨着的是啥就是啥 你没有选择
$("#d4").next("div").css("background-color", "pink");
//找之后的所有兄弟节点 不包含自己
$("#d4").nextAll().css("background-color", "pink");
//找之后的所有兄弟节点中的div
$("#d4").nextAll("div").css("background-color", "pink");
//找除自己之外的兄弟姐妹节点
$("#d4").siblings().css("background-color", "pink");
//可选参数
$("#d4").siblings("p").css("background-color", "pink");
//end返回上一次Jquery对象被破坏之前的状态 类似撤销
$("#d4").nextAll().css("background-color", "yellow").end().css("background-color", "yellow");
//andSelf 是Jquery对象破坏之前
$("#d4").nextAll().css("background-color", "pink").andSelf().css("background-color", "yellow");
//d4->d4后面的->d4 遇到end撤销 所以结果是d4后面的
$("#d4").nextAll().andSelf().end().css("background-color", "yellow");
//d4后面的加上d4 果然是加上自己
$("#d4").nextAll().andSelf().css("background-color", "yellow");
//======================================2光棒=======================================
//光棒效果
$("#menu li").click(function () {
$(this).css("background-color", "red").siblings().css("background-color", "white");
});
//光棒效果的第二种写法（效率高于第一种写法不用隐士迭代）
$("#menu li").mousemove(function () {
$(this).css("background-color", "red");
}).mouseout(function () {
$(this).css("background-color", "white");
});
//==========================================3评分============================================
$("#pf li").mouseover(function () {
$(this).prevAll().andSelf().text("★").end().end().nextAll().text("☆");
});
});
</script>
</head>
<body>
<%--1--%>
<div>11111111111111111111111111111</div>
<div>2222222222222222222222222222</div>
<div>3333333333333333333333333333</div>
<div id="d4">4444444444444444444444444444</div>
<p>ppppppppppppppppppppppppppppppppppppp</p>
<div>5555555555555555555555555555555555555</div>
<div>66666666666666666666666666666666666666</div>
<%--2--%>
<ul id="menu">
<li>首页</li>
<li>博客</li>
<li>相册</li>
<li>其他</li>
</ul>
<%--3 --%>
<ul id="pf">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
</body>
</html>