节点遍历

来源：互联网发布：淘宝旺旺客服代码编辑：程序博客网时间：2024/05/21 22:52

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="js/jquery-1.5.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        //next()方法用于获取节点之后挨这的第一个同辈元素。
        //$(".menuitem").next("div");
        //nextAll()方法用于获取节点之后的所有同辈元素。
        //$("menuitem").nextAll("div");
        //siblings()方法用于获取所有同辈元素
        //$(".menuitem").siblings("li");
        $(function () {

            //next()方法
            //选择p元素下的下一个p元素中的值
            //$("p").click(function () {
            //alert($(this).next().text());
            //});
            //next()方法加过滤器
            //选择p元素下的下一个div元素的值
            //next()可加过滤器
            //$("p").click(function () {
            //alert($(this).next("div").text());
            //});

            //nextAll()方法
            //选择p元素下的所有标签的值
            //选中p元素下的所有标签的值是相加在一起的
            //$("p").click(function () {
            //alert($(this).nextAll().text());
            //});

            //nextAll()方法加过滤器
            //选择p元素下的所有标签的值
            //选中p元素下的所有标签的值是相加在一起的
            //$("p").click(function () {
            //alert($(this).nextAll("div").text());
            //});

            //选择一个元素使之变色
            //$("p").click(function () {
            //    $(this).css("background", "red");
            //});
            //选择一个标签使之以后的元素变色
            //$("p").click(function () {
            //    $.each($(this).nextAll(), function () {
            //        $(this).css("background", "black");
            //    });
            //不用这么麻烦，不用each()函数直接饮食迭代就可以
            //$("p").click(function () {
            //    $(this).nextAll().css("background", "red");
            //});

//siblings()方法
//选择一个标签让它变色，其他不变

            $("p").click(function () {
                $(this).css("background", "red");
                $(this).siblings("p").css("background", "blue");
            });
        });

    </script>
    <style type="text/css">
    .pp
    {
        background:green;
    }
    .ppp
    {
         background:blue;
     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <p class="pp">a</p>
        <p class="ppp">b</p>
        <p class="pp">c</p>
            <div>hh</div>
            <div>jjj</div>
        <p class="ppp">d</p>
        <p class="pp">e</p>
        <p class="ppp">f</p>
        <p class="pp">g</p>
    </div>
    </form>
</body>
</html>