<!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. 基于 HTML5 Canvas 的 3D 热力云图效果

    前言 数据蕴藏价值,但数据的价值需要用 IT 技术去发现.探索,可视化可以帮助人更好的去分析数据,信息的质量很大程度上依赖于其呈现方式.在数据分析上,热力图无疑是一种很好的方式.在很多行业中都有着广泛 ...

  2. Channel Estimation for High Speed Wireless Systems using Gaussian Particle Filter and Auxiliary Particle Filter

    目录 论文来源 摘要 基本概念 1.时变信道 2.粒子滤波 3.高斯粒子滤波 4.辅助粒子滤波 比较 借鉴之处 论文来源 International Conference on Communicati ...

  3. UIView绘制原理，异步绘制

    绘制原理 首先看一幅流程图 UIView调用setNeedsDisplay方法后,实际上并没有发生当前视图的绘制工作,而是在之后的某一时机进行绘制工作,为什么会在之后的某一时机进行绘制工作呢? 当UI ...

  4. MySQL集群MGR架构for单主模式

    本文转载自: https://www.93bok.com MGR简介 MySQL Group Replication(简称MGR)是MySQL官方于2016年12月推出的一个全新的高可用与高扩展的解决 ...

  5. Ado.net01

    ------------恢复内容开始------------ 1.ExcuteReader using System; using System.Data.SqlClient; using Syste ...

  6. Javascript元编程之Annotation

    语言的自由度 自由度这个概念在不同领域有不同的定义,我们借鉴数学中构成一个空间的维数来表达其自由度的做法,在此指的是:解决同一个问题彼此不相关的设计方法学数量. 例如,解决一个比如商品打折的问题,如何 ...

  7. Java基础--方法的定义

    1.为什么要有方法? 方法(又叫函数)就是一段特定功能的代码块.方法提高程序的复用性和可读性. 比如,有了方法,我们可以把要重复使用的一段代码提炼出来,然后在每个需要执行这段代码的地方去调用即可. 2 ...

  8. Javascript中String()和new String()的区别——JS的包装对象

    最近在看Symbol不能使用new操作符,然后类比到Number,String,Boolean,因为它们同属于基本类型,但是有有所差异:Number,String,Boolean是可以使用new操作符 ...

  9. JavaScript(6)--- 原型链

    原型链 再上一篇有简单讲过原型:JavaScript(5)--- 面向对象 + 原型 讲原型链知识之前,先说几个重要的结论. 1.原型链就是 对象的__proto__所连接的链状结构 2.protot ...

  10. JS实战（京东秒杀）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...