当前位置： 首页 > news >正文

jQuery-层级选择器

news 2025/12/30 14:16:42

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>层级选择器</title>
        <style type="text/css">
            div, span, p {
                width: 140px;
                height: 140px;
                margin: 5px;
                background: #aaa;
                border: #000 1px solid;
                float: left;
                font-size: 17px;
                font-family: Verdana;
            }
            
            div.mini {
                width: 55px;
                height: 55px;
                background-color: #aaa;
                font-size: 12px;
            }
            
            div.hide {
                display: none;        /*隐藏该div*/
            }            
        </style>
        <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){        //页面加载完成后
                //为id="btn1"的按钮绑定鼠标点击事件
                $("#btn1").click(function(){
                    //1.选择 body 内的所有 div 元素 ("body div")包括儿子、孙子、重孙子......
                    $("body div").css("background", "#bbffaa");
                });
                //为id="btn2"的按钮绑定鼠标点击事件
                $("#btn2").click(function(){
                    //2.在 body 内, 选择div子元素  （"body > div"）只包括儿子。
                    $("body > div").css("background", "#bbffaa");
                });
                //为id="btn3"的按钮绑定鼠标点击事件
                $("#btn3").click(function(){
                    //3.选择 id 为 one 的下一个 div 元素 ("#one + div") 同级别的挨着的下一个div
                    $("#one + div").css("background", "#bbffaa");
                });
                //为id="btn4"的按钮绑定鼠标点击事件
                $("#btn4").click(function(){
                    //4.选择 id 为 two 的元素后面的所有 div 兄弟元素（"#two ~ div"）同级别的后面所有div
                    $("#two ~ div").css("background", "#bbffaa");
                });
            });
        </script>
    </head>
    <body>
    <!--
     <div>
        <h1>层级选择器:根据元素的层级关系选择元素</h1>
        ancestor descendant    ：        包括全部子孙后代
        parent > child                ：        只包括儿子
        prev + next                    ：        相邻的下一个元素
        prev ~ siblings               ：        同级别的后面所有
    </div>
    -->
    <h2>层级选择器</h2>
        <input type="button" value="选择 body 内的所有 div 元素" id="btn1" />
        <input type="button" value="在 body 内, 选择div子元素" id="btn2" />
        <input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3" />
        <input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" />
        <br><br>
        <div class="one" id="one">
            id 为 one,class 为 one 的div
            <div class="mini">class为mini</div>
        </div>
        <div class="one" id="two" title="test">
            id为two,class为one,title为test的div
            <div class="mini" title="other">class为mini,title为other</div>
            <div class="mini" title="test">class为mini,title为test</div>
        </div>
        <div class="one">
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini"></div>
        </div>
        <div class="one">
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini" title="tesst">class为mini,title为tesst</div>
        </div>
        <div style="display:none;" class="none">style的display为"none"的div</div>
        <div class="hide">class为"hide"的div</div>
        <div>
            包含input的type为"hidden"的div<input type="hidden" size="8">
        </div>
        <span id="span">^^span元素^^</span>
    </body>
</html>

 

相关文章：

jQuery-层级选择器

<!DOCTYPE HTML> <html> <head> <meta http-equiv"Content-Type" content"text/html; charsetUTF-8"> <title>层级选择器</title> <style type"text/css"> …...

编程日记 2023/5/31 23:54:11

【Java数据结构】——第十节(下）.选择排序与堆排序

作者简介&#xff1a;大家好&#xff0c;我是未央&#xff1b; 博客首页&#xff1a;未央.303 系列专栏&#xff1a;Java初阶数据结构 每日一句&#xff1a;人的一生&#xff0c;可以有所作为的时机只有一次&#xff0c;那就是现在&#xff01;&#xff01;&#xff01; 文章目…...

编程日记 2023/5/21 9:47:01

45道SQL题目陆续更新

文章目录 学习视频配置环境第一天内连接 外连接第二天第三天 学习视频 学习视频 配置环境 四张表 配置四张表的sql语句 #创建发据库 create database frogdata charsetutf8&#xff1b;use frogdata;# 学生表 Student create table Student( SId varchar(10), Sname var…...

编程日记 2023/5/21 9:41:59

在线PS软件有哪些不错的推荐

许多新的UI设计合作伙伴非常关心在线ps工具的选择。现在市场上有各种各样的ps网页替代工具&#xff0c;数量众多&#xff0c;令人眼花缭乱。本文简要介绍了10个在线PS工具&#xff0c;我相信一定有一个适合你&#xff01; 1.即时设计 即时设计是一款在线 UI 设计工具&#xf…...

编程日记 2023/5/21 9:36:58

Java实现天气预报功能

如果要实现类似百度天气、手机App这样的天气预报功能该如何实现&#xff1f;首先想到的是百度... 背景&#xff1a; 最近公司做了一个项目&#xff0c;天气预报的功能也做上去了&#xff0c;不仅有实时天气、未来7天预报的功能、还有气象预警的功能。 天气包括基本天气、白天夜…...

编程日记 2023/5/21 9:31:57

python循环语句

while循环 Python中&#xff0c;while循环只要在条件&#xff08;表达式&#xff09;为真的情况下&#xff0c;就会一直重复执行相应的循环代码块。 while语句的语法格式如下&#xff1a; while 条件表达式&#xff1a;代码块while语句执行的具体流程为&#xff1a;首先判断…...

编程日记 2023/5/21 9:26:56

多线程基础（一）线程基础信息、synchronized 锁概念

1. 基本概念&#xff1a; 程序&#xff1a; 程序是一些保存在磁盘上的指令的有序集合&#xff0c;是静态的。程序包括&#xff1a;内存资源、IO资源、信号处理等。&#xff08;如&#xff1a;XX.exe&#xff09; 进程&#xff1a; 进程是程序执行的过程&#xff0c;包括了动态…...

编程日记 2023/5/21 9:21:55

JAVA期末考内容知识点的梳理

作者的话 前言&#xff1a;这些都是很基本的&#xff0c;还有很多没有写出来&#xff0c;重点在于考试复习&#xff0c;包括后四章的内容 前面内容请参考JAVA阶段考内容知识点的梳理 一、集合、流 课堂总结1集合 集合概念&#xff1a; 保存和盛装数据的容器&#xff0c;将许多…...

编程日记 2023/5/21 9:16:54

为什么要使用Thrift与Protocol Buffers？

编码数据的格式 程序通常&#xff08;至少&#xff09;使用两种形式的数据&#xff1a; 在内存中&#xff0c;数据保存在对象、结构体、列表、数组、散列表、树等中。 这些数据结构针对 CPU 的高效访问和操作进行了优化&#xff08;通常使用指针&#xff09;。如果要将数据写…...

编程日记 2023/5/21 9:11:53

oa是什么意思？oa系统哪个好用？

一、oa是什么意思 oa&#xff08;Office Automation办公自动化&#xff09;是一种将智能化科技应用于企业管理中的应用系统。它可以通过电脑网络、互联网等技术手段&#xff0c;将企业的各种业务流程、各种业务数据进行集成和处理&#xff0c;将各种业务流程和各种业务数据统一…...

编程日记 2023/5/21 9:06:52

Linq和C# Lambda表达式

什么是Linq 简介 Linq (Language Integrated Query) 是一种语言集成的查询技术&#xff0c;可以在C#和其他.NET语言中使用。Linq允许我们使用一种类SQL的语言来查询数据&#xff0c;这使得代码更加简洁和易于阅读。Linq提供了一种通用的查询接口&#xff0c;可以用于查询各种…...

编程日记 2023/5/21 9:01:51

蓝桥：前端开发笔面必刷题——Day2 数组（三）

文章目录 &#x1f4cb;前言&#x1f3af;两数之和 II&#x1f4da;题目内容✅解答 &#x1f3af;移除元素&#x1f4da;题目内容✅解答 &#x1f3af;有序数组的平方&#x1f4da;题目内容✅解答 &#x1f3af;三数之和&#x1f4da;题目内容✅解答 &#x1f4dd;最后 &#x…...

编程日记 2023/6/1 8:02:32

人工智能专栏第四讲——人工智能的未来展望与机遇

目录 一、人工智能的未来展望 二、人工智能在各领域的应用 三、人工智能的机遇 四、总结...

编程日记 2023/5/21 8:51:48

Unity阴影（Shadow）、Shadowmap

Unity阴影&#xff08;Shadow&#xff09; 在Unity中&#xff0c;阴影&#xff08;Shadow&#xff09;是用于模拟场景中物体之间相互遮挡和光照效果的特性。阴影可以增加场景的真实感&#xff0c;并在视觉上提供深度和空间感。 Unity提供了几种阴影投射和接收的方法和技术&am…...

编程日记 2023/5/21 8:46:46

编程语言的四种错误处理方法，你知道几种？

错误处理是编程的一个基本要素。除非你写的是“hello world”&#xff0c;否则就必须处理代码中的错误。在本文中&#xff0c;我将讨论各种编程语言在处理错误时使用的最常见的四种方法&#xff0c;并分析它们的优缺点。 关注不同设计方案的语法、代码可读性、演变过程、运行效…...

编程日记 2023/5/21 8:41:43

ContOS7单机安装Hadoop

安装Hadoop 1&#xff0c;准备环节 因为Hadoop是由java编写的&#xff0c;所以需要Java的环境支持&#xff0c;作为开发者我们需要安装jdk。 安装jdk的教程http://t.csdn.cn/6qJKg 下载Hadoop的安装包 Hadoop官网&#xff1a;http://hadoop.apache.org/ Hadoop版本下载地…...

编程日记 2023/6/1 8:53:08

抓取动态网页的数据的具体操作方法

抓取动态网页的数据的具体操作方法 动态网页是指在用户交互过程中&#xff0c;网页内容不断更新和变化的网页。抓取动态网页的数据需要了解以下具体操作方法&#xff1a; 使用浏览器开发者工具&#xff1a;在浏览器中打开目标网页后&#xff0c;按下F12键&#xff0c;打开开发…...

编程日记 2023/5/21 8:31:41

Windows 和 Linux 环境下 ProtoBuf 的安装

文章目录 一、ProtoBuf 在 Windows 环境中的安装二、ProtoBuf 在 Linux 环境中的安装 ProtoBuf在GitHub上的下载地址 一、ProtoBuf 在 Windows 环境中的安装 首先选择自己要下载的版本&#xff0c;我选择的是v21.11&#xff1a; 点进去在最下面选择Windows的版本&#xff0…...

编程日记 2023/5/21 8:26:40

商用密码应用安全性测评方案编制流程

密评方案编制的目标是完成测评准备活动中获取的信息系统相关资料整理&#xff0c;为现场测评活动提供最基本的文档和指导方案。 按照《GM-T 0116-2021 信息系统密码应用测评过程指南》标准&#xff0c;密评方案编制包括5项关键任务&#xff0c;简要汇总如下表。 编号任务输入文…...

编程日记 2023/5/31 23:55:36

Elasticsearch 集群部署插件管理及副本分片概念介绍

Elasticsearch 集群配置版本均为8以上 安装前准备 CPU 2C 内存4G或更多 操作系统: Ubuntu20.04,Ubuntu18.04,Rocky8.X,Centos 7.X 操作系统盘50G 主机名设置规则为nodeX.qingtong.org 生产环境建议准备单独的数据磁盘主机名 #各自服务器配置自己的主机名 hostnamectl set-ho…...

编程日记 2023/5/21 8:16:37

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

编程新知 2025/12/3 20:14:32

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

编程新知 2025/7/30 7:20:17

安宝特方案丨XRSOP人员作业标准化管理平台：AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

编程新知 2025/12/22 23:04:25

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

编程新知 2025/11/30 16:55:20

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码&#xff0c;专为学校招生场景量身打造&#xff0c;功能实用且操作便捷。 从技术架构来看&#xff0c;ThinkPHP提供稳定可靠的后台服务&#xff0c;FastAdmin加速开发流程&#xff0c;UniApp则保障小程序在多端有良好的兼…...

编程新知 2025/12/21 4:10:55

根据万维钢·精英日课6的内容，使用AI（2025）可以参考以下方法：

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

编程新知 2025/10/15 12:45:18

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

编程新知 2025/11/2 0:32:25

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

编程新知 2025/12/26 5:00:37

LRU 缓存机制详解与实现（Java版） + 力扣解决

&#x1f4cc; LRU 缓存机制详解与实现&#xff08;Java版&#xff09; 一、&#x1f4d6; 问题背景 在日常开发中&#xff0c;我们经常会使用 缓存&#xff08;Cache&#xff09; 来提升性能。但由于内存有限&#xff0c;缓存不可能无限增长&#xff0c;于是需要策略决定&am…...

编程新知 2025/11/28 20:47:33

Java详解LeetCode 热题 100(26):LeetCode 142. 环形链表 II（Linked List Cycle II）详解

文章目录 1. 题目描述1.1 链表节点定义 2. 理解题目2.1 问题可视化2.2 核心挑战 3. 解法一&#xff1a;HashSet 标记访问法3.1 算法思路3.2 Java代码实现3.3 详细执行过程演示3.4 执行结果示例3.5 复杂度分析3.6 优缺点分析 4. 解法二&#xff1a;Floyd 快慢指针法&#xff08;…...

编程新知 2025/8/25 19:51:15