<!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. sql 服务器统计信息简介

    sql服务器统计是包含数据分布信息的系统对象.有时,在正则列值中.统计可以在任何支持比较操作的数据类型上创建,例如 > , < , =等. 列表2-15中,从dbo.books表中查看 I ...

  2. CMSampleBufferRef解析

    CMTime:64位的value,32位的scale, media的时间格式 CMVideoFormatDesc:video的格式,包括宽高.颜色空间.编码格式.SPS.PPS CVPixelBuff ...

  3. ZOJ 4109 Welcome Party

    题目链接:(https://zoj.pintia.cn/problem-sets/91827364500/problems/91827370504)(https://vjudge.net/proble ...

  4. 从HTML标签开始

    开始这一切吧! 没错,你没看错,我将从HTML标签开始我的整个系列文章.很基础吧?但是每个前端人都是从最简单的HTML标签开始的,都是从一个<html></html>开始整个前 ...

  5. 蚂蚁金服开源 | 可视化图形语法G2 3.3 琢磨

    G2 是蚂蚁金服数据可视化解决方案 AntV 的一个子产品,是一套数据驱动的.高交互的可视化图形语法. 经过两个多月密锣紧鼓的开发,400+次提交,G2 3.3版本今天终于和大家见面了.自上次3.2版 ...

  6. 后端工程师必知必会的前端 css 知识

    后端工程师虽然大部分工作都是跟服务器缓存数据库打交道,但有时也需要写一些前端代码. 有些公司的OAM后台基本是由后端工程师承包的,所以前端基础知识是必须要掌握的:就算开发中不直接写前段代码,了解前端知 ...

  7. 在浏览器中使用ES6的模块功能 import 及 export

    感谢英文原作者 Jake Archibald 的技术分享 各个浏览器对于ES6模块 import . export的支持情况 Safari 10.1. Chrome 61. Firefox 54 – ...

  8. JavaScript实现树结构（二）

    JavaScript实现树结构(二) 一.二叉搜索树的封装 二叉树搜索树的基本属性: 如图所示:二叉搜索树有四个最基本的属性:指向节点的根(root),节点中的键(key).左指针(right).右指 ...

  9. 备份Oracl数据库.bat

    =========================== @echo off echo ================================================ echo Win ...

  10. abp(net core)+easyui+efcore实现仓储管理系统——入库管理之四(四十)

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...