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

  • 相关阅读:
    nohub
    swoole聊天室
    swoole httpserver学习
    swore tcp服务学习
    ps查看命令
    nginx和php-fpm调用方式
    Unix/Linux环境C编程入门教程(1) Solaris 11 64bit环境搭建
    Unix/Linux环境C编程入门教程(1) Solaris 11 64bit环境搭建
    C语言入门(4)——常量、变量与赋值
    C语言入门(3)——对Hello World程序的解释
  • 原文地址:https://www.cnblogs.com/xyangs/p/2506777.html
Copyright © 2020-2023  润新知