<!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. python 生成随机数、生成 uuid

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

  2. 支持IE6、IE7、IE8等低端浏览器的简化版vue

    最近研究Vue的底层原理,写了一个简化版的Vue,可以在支持IE6.IE7.IE8等低端浏览器运行.由于低端浏览器不支持对象属性定义,所以设置属性不支持直接赋值,需要调用虚拟机实例的set方法.目前只 ...

  3. javascript入门进阶（一）

    javascript 入门进阶 这里主要讲解一下在入门阶段很难注意的一些知识点,不一定有用.但是会了总比不会强. 1.HTML为<script>标签准备的6个属性: -async:可选.表 ...

  4. js 实现弹性运动的简单应用----导航栏中弹性

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. vim不能使用小键盘

    使用终端登录Linux后使用vim编辑文本,这时在默认设置下载插入模式使用小键盘会插入一些非数字的字符. 更改的方法: 在终端设置中选择终端类型为linux

  6. mysql 多个字段重复记录查询

    select * from productstockquantity t where () ORDER BY t.CombinationI

  7. 5.创建app、创建user表、配置media、数据迁移

    目录 user模块User表 创建user模块 创建User表对应的model:user/models.py 注册user模块,配置User表:dev.py 配置media 数据库迁移 user模块U ...

  8. 会话存储sessionStorage

    会话存储的工作方式和本地存储的工作方式很接近,不同之处在于数据是各个浏览器上下文私有的,会在文档被关闭时移除(注意是被关闭时才移除,刷新是不会移除的).我们通过全局sessionStorage访问会话 ...

  9. 网络安全从入门到精通（第一章-1）Web服务器通信原理

    本文内容 IP地址 域名 端口 HTTP协议 从访客角度看网页浏览器流程 常见服务器系统 路径 Web容器 常见的Web容器 !!!多动手,多动手,只看只听是不行的!!! 1,IP地址:就是计算机在互 ...

  10. Natas31 Writeup（Perl 远程命令执行）

    Natas31: 源码如下: my $cgi = CGI->new; if ($cgi->upload('file')) { my $file = $cgi->param('file ...