<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../server/jquery-3.4.1.js"></script>
</head>
<body>
    <div id="demoID">div1</div>
    <div class="box1">div2</div>
    <div class="box1">div3</div>
    <div>div4</div>
    <span>A</span>
    <span>B</span>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
    <li>li4</li>
    <li>li5</li>
    <li>li6</li>
    <li>li7</li>
    <li>li8</li>
    <script>
        /* 基本选择器
    001-id选择器 #id
    002-class选择器 .class
    003-标签选择器  标签名
    004-并集选择器  #id，.class
    005-通配符选择器 * */
        $("div").css("background", "red");
        $("#demoID,.box1").css("background", "red");
        $("*").css("background", "red");
        // document.querySelectorAll(#id,.class)
        /* 层级选择器 */
        /* 001-获取指定标签指定的后代元素 */
        $("#demoID div").css("background", "red");
        /* 002-获取指定标签指定的直接后代元素 */
        $("#demoID>div").css("background", "red");
        /* 003-获取指定标签后面的第一个兄弟节点 */
        $(".box2 +div").css("background", "red");
        /* 获取box2到div的所有节点 */
        $(".box2 ~ div").css("background", "red")
        // 赛选选择器
        // :first
        // :last
        // :eq()
        // :not()
        // :lt()
        // :gt()
        // :even
        // :odd
        // 第一个
        $("li:first").css("background", "#195");
        // 最后一个
        $("li:last").css("background", "blue");
        // 指定某一个
        // 第一个
        $("le:eq(0").css("background", "blue");
        // 最后一个
        $("li:eq(-1)").css("background", "#220");
        // 索引为奇偶数
        $("li:odd").css("background", "#100"); //奇数
        $("li:even").css("background", "#100"); //偶数
        // 005-排除
        // 排除索引为1的那个标签
        $("li:not(:eq(1))").css("background", "#154");
        // 排除最后一个标签
        $("li:not(:eq(1))").css("background", "#445");
        /* 006-范围(大于|小于) */
        $("li:lt(3)").css("background", "#546"); //小于
        $("li:gt(3)").css("background", "#dsf"); //大于
        // 父子选择器
        // jQ.parent() 获取父节点
        // jQ.parents() 获取祖先节点
        // jQ.parentsUntil()  获取祖先节点直到某个节点为止
        $(".box2").parent().css("background", "red");
        // 先获取所有的祖先节点，然后在折现祖先节点中应用选择器 选择器id为demoID的标签
        $(".box2").parents("#demoID").css("background", "red");
        $(".box2").parentsUntil("html").css("background", "red");
        // 子节点相关方法
        $("demoID").children.css("background", "red");
        //获取兄弟节点
        $(".box").next().css("background", "red");
        $(".box").nextAll().css("background", "red");
        $(".box2").prev().css("background", "red");
        $(".box2").prevAll().css("background", "red");
        // nextAll 之后的所有兄弟元素
        //prevAll() 获得当前匹配元素集合中每个元素的前面的同胞元素，使用选择器进行筛选是可选的。
        //siblings()：所有兄弟（除了自己）
        $(".box2").siblings().css("background", "red");
    </script>
</body>
</html>

jQuery的层级选择器的更多相关文章

  1. Jquery操作层级选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. jquery div层级选择器

    div id="modelName" class="modelName"> <!-- 车系的层 --> <div name=" ...

  3. JQuery学习笔记——层级选择器

    JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...

  4. 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器

    × 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...

  5. 什么是 jQuery 和jQuery的基本选择器，层级选择器，基本筛选器

    jQuery是什么? ［1］   jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. ［2］   jQuery是继prototype ...

  6. Jquery | 基础 | 慕课网 | 层级选择器

    选择器中的层级选择器处理关系类型: 子元素 后代元素 兄弟元素 相邻元素 <!DOCTYPE html> <html> <head> <meta http-e ...

  7. js进阶 10-5 jquery中的层级选择器有哪些

    js进阶 10-5 jquery中的层级选择器有哪些 一.总结 一句话总结: 1.jquery中的层级选择器有哪些? 四种,后代,子代,兄弟,相邻兄弟 2.如何区别jquery中的层级选择器? 记住这 ...

  8. jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

    jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...

  9. jquery 层级选择器

    关于层级选择器. $("parent > child") 选择所有指定“parent”元素中指定的“child”的直接子项元素. parent :任何有效的选择器. chil ...

随机推荐

  1. Java工厂模式解耦 —— 理解Spring IOC

    Java工厂模式解耦 -- 理解Spring IOC 最近看到一个很好的思想来理解Spring IOC,故记录下来. 资源获取方式 主动式:(要什么资源都自己创建) 被动式:(资源的获取不是我们创建, ...

  2. python 生成随机数、生成 uuid

    1. 使用 uuid.uuid1 产生一个随机数 2. 在使用 random.sample() 产生一个随机字符串 3. 将两者进行拼接 import uuid import random def r ...

  3. 【前端】这可能是你看过最全的css居中解决方案了~

    1.水平居中:行内元素解决方案 适用元素:文字,链接,及其其它inline或者inline-*类型元素(inline-block,inline-table,inline-flex) html部分代码: ...

  4. vue 打包体积过大 实现懒加载 ？？？？

    import Vue from ‘vue’ import Router from 'vue-router' //把路由对应的组件定义成异步组纪检 const hello = resolve => ...

  5. DEV GridControl控件使用（CheckBox全选、操作按钮、事件处理，获取值）

    1.GridControl控件使用 (1)绑定数据源 //绑定DataTable gridControl1.DataSource = DbHelper.ExecuteDataTable("S ...

  6. 学习RF遇到的问题

    1.Windows安装pip命令安装RF报错: File "<stdin>", line 1 pip install robotframework 原因:pip命令不在 ...

  7. 覆盖io.spring.platform管理的版本号

    使用io.spring.platform时,它会管理各类经过集成测试的依赖版本号.想要覆盖其中某个依赖的版本号个: https://www.cnblogs.com/ld-mars/p/11818252 ...

  8. Kafka的面试题

    1.Kafka的设计是什么样的呢?Kafka将消息以topic为单位进行归纳将向Kafka topic发布消息的程序成为producers.将预订topics并消费消息的程序成为consumer.Ka ...

  9. [Linux][C][gcc][tips] 在头文件中定义变量引发的讨论

    概述 本人的原创文章,最先发表在github-Dramalife-note中.转载请注明出处. Define variable(s) in header file referenced by mult ...

  10. Jmeter Agent自动化

    1.打开菜单栏-附件-系统工具-任务计划程序,新建PerformanceTest目录. 2.在PerformanceTest目录下新建一个基本任务. 3.完成. 这样,当我们在使用Jmeter进行分布 ...