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("☆"); });

  • 相关阅读:
    VUE中实现iview的图标效果时遇到的一个问题
    VUE中获取url中的值
    VUE的生命周期
    基于Vue的省市区三级联动插件
    父子组件通讯(2)
    vue中声明式导航和编程式导航
    java Calendar(日历)
    java Date
    java equals
    java 内部类
  • 原文地址:https://www.cnblogs.com/xyangs/p/2506777.html
Copyright © 2011-2022 走看看