zoukankan      html  css  js  c++  java
  • 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("☆"); });

  • 相关阅读:
    BZOJ4383 : [POI2015]Pustynia
    BZOJ4382 : [POI2015]Podział naszyjnika
    BZOJ4381 : [POI2015]Odwiedziny
    BZOJ4380 : [POI2015]Myjnie
    BZOJ4378 : [POI2015]Logistyka
    BZOJ3424 : Poi2013 Multidrink
    BZOJ4367 : [IOI2014]holiday假期
    BZOJ4369 : [IOI2015]teams分组
    BZOJ4421 : [Cerc2015] Digit Division
    BZOJ1315 : Ural1557Network Attack
  • 原文地址:https://www.cnblogs.com/xyangs/p/2506777.html
Copyright © 2011-2022 走看看