节点遍历 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type ="text/css">
        p {
         display:inline;
         border :1px solid #0094ff;
         padding :2px 5px;
         background-color :#fff;
         margin:5px;
        }
    </style>
    <script src="Scripts/jquery-1.8.2.js"></script>
    <script type="text/javascript" >
        $(function () {
            $("p").click(function () {
               // $(this).css("backgroundColor", "red").siblings().css("backgroundColor", "#fff");
                //end()方法：回到最近一次“破坏性”操作之前，将匹配的元素列表变为前一次的状态
                //所谓 破坏性 的操作 是指调用一系列jq方法过程中，某个方法返回的jq对象内部的dom数组和前面方法返回的jq对象里的dom数组不一样的时候，那么这个方法，就叫做破坏性方法
                $(this).css("backgroundColor", "red").prevAll().css("backgroundColor", "#red").end().nextAll().css("backgroundColor", "#fff");
                $(this).siblings();//获取所有的兄弟节点
                $(this).prevAll();//获取前面的兄弟节点
                $(this).nextAll();//获取后面的兄弟节点
            });
           
        });

    </script>
</head>
<body>
    <p ></p>
    <p ></p>
    <p ></p>
    <p ></p>
    <p ></p>
    <p ></p>
</body>
</html>

　　

posted @ 2014-06-13 23:25  编程猴子  阅读(219)  评论(0)    收藏  举报