JQuery 基础：5.节点遍历

1.next()方法获取节点之后的第一个同辈元素

$((function(){$("div").click(function() {alert($(this).next().text());})}));

选择过滤器

$(".men").next("div")

nextAll()方法用于获取节点后的所有同辈元素，同样可以加过滤器

示例：被点击的div   下面所有的div   的背景变红

            $("div").click(
                function () {
                $.each($(this).nextAll("div"),function () {$(this).css("background","red")});
                 });

 

2.siblings()方法用于获取所有同辈元素

$(".men").siblings("li")

示例：当点击div 他自己css样式背景变红 ，他的兄弟div的样式背景变白（高亮显示的原理）

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

中间部分可简写为$(this).css("background","red").siblings("div").css("background", "white");

 3.应用：星级评分

取得元素初始状态都是“空”  当鼠标移动某个指定元素下触发以下事件  1.所有元素”满“  2.鼠标移上去的 元素的下面符合要求的元素都变成”空“

 $("#re td").html("☆").mouseover(function () { $("#re td").html("★"); $(this).nextAll().html("☆"); });