<!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. 5，Hadoop中的文件

    1,文件结构 · bin:脚本和命令目录. · etc:配置文件目录. · sbin:命令目录,主要包含HDFS和YARN中各类服务的启动和关闭,依赖于bin中的脚本. · share:各个模块编译后 ...

  2. electron+vue制作桌面应用--自定义标题栏

    electron会默认显示边框和标题栏,如下图 我们来看一下如何自定义一个更加有(gao)意(da)思(shang)的标题栏,例如网易云音乐这种 首先我们要把默认的标题栏删掉,找到主进程中创建窗体部分 ...

  3. 微信h5页面调用第三方位置导航

    微信h5页面拉起第三方导航应用 需要准备的: 通过微信认证的公众号有备案过的域名 背景:微信公众号点击菜单栏跳到h5页面,需要用到导航功能 需求:当用户点击导航按钮时,跳转到第三方app进行导航 参考 ...

  4. 必备技能echarts

    echart 设置图例图标形状 https://blog.csdn.net/qq_15390381/article/details/81736796legend: { data: ["总数& ...

  5. idea创建简单web项目分析Servlet的请求转发与重定向的区别

     注:如需转载,请附上原文链接,如有建议或意见,欢迎批评指正! 需求说明: // index.jsp页面 1 <% 2 String basePath = request.getScheme() ...

  6. git涨姿势（一）

    今天遇到了一个git冲突问题,解决冲突方案我是当然知道的,就是本地不知道何时自己傻不拉几的新建了一个relese分支,而remote是没有release分支的,需要拉取的是release/V1.4.2 ...

  7. ubunto 免输入密码 登录 putty ssh-keygen

    交互式密码不安全,现在改用 ssh 证书方式,不用输入密码使用公钥证书登录. 方法1, 此方法,仅试用于,仅使用win putty 来连接方式使用,如果双方都是 linux 如 rsync 同步等时, ...

  8. DevOps - 持续集成

    最近在担任公司部门的DevOps Champion的角色,一直觉得这个只是一个协调者的角色(而不是一个SME的角色),我的工作大概就是将每个项目的devops工具收集一下,然后用图表的形式去体现大家用 ...

  9. 取url地址参数

    let url = 'https://i-beta.cnblogs.com/posts/edit?param1=123&param2=second'let arr = url.split('& ...

  10. 源码分析 Sentinel 之 Dubbo 适配原理

    目录 1.源码分析 SentinelDubboConsumerFilter 2.源码分析 SentienlDubboProviderFilters 3.Sentienl Dubbo FallBack ...