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

jQuery-层级选择器

news 2026/5/27 17:01:14

<!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

Godot中型项目工程化实践：目录规范、资源引用与状态管理

1. 这不是续集&#xff0c;而是项目落地的分水岭“Godot 游戏引擎项目&#xff08;二&#xff09;”——看到这个标题&#xff0c;很多人第一反应是&#xff1a;“哦&#xff0c;上一篇讲了环境搭建和Hello World&#xff0c;这篇该讲节点树和信号了&#xff1f;”但我在带三个…...

编程新知 2026/5/26 3:13:58

终极指南：5步快速掌握免费的3D点云标注工具labelCloud

终极指南&#xff1a;5步快速掌握免费的3D点云标注工具labelCloud 【免费下载链接】labelCloud A lightweight tool for labeling 3D bounding boxes in point clouds. 项目地址: https://gitcode.com/gh_mirrors/la/labelCloud 想要为自动驾驶、机器人视觉或3D目标检测…...

编程新知 2026/5/25 22:18:21

告别DLL缺失烦恼！Visual C++运行库合集一键搞定Windows应用依赖问题

告别DLL缺失烦恼&#xff01;Visual C运行库合集一键搞定Windows应用依赖问题 【免费下载链接】vcredist AIO Repack for latest Microsoft Visual C Redistributable Runtimes 项目地址: https://gitcode.com/gh_mirrors/vc/vcredist 你是否曾经在打开某个软件或游戏时…...

编程新知 2026/5/25 21:11:33

别再只用鼠标了！用Leap Motion手势控制Unity游戏，保姆级配置避坑指南（2024版）

2024年Unity手势交互开发实战&#xff1a;Leap Motion从配置到游戏逻辑全解析在游戏开发领域&#xff0c;交互方式的创新往往能带来全新的体验。想象一下&#xff0c;玩家不再需要键盘鼠标&#xff0c;仅凭自然的手部动作就能操控游戏角色——这正是Leap Motion手势识别技术为U…...

编程新知 2026/5/25 20:49:10

学习日志（三）【php语法学习，iscc校赛wp】

1. 任务 1.1.1.1.1.1. 知识部分 rce看【之前的笔记&#xff1f;】php的知识点学习继续jwt token好像是比赛的题目考察内容&#xff0c;我看看php伪协议 1.1.1.1.1.2. 题目 参加iscc比赛【五一】rce题目 1.1.1.1.1.3. 环境配置 把vscode搞好&#xff0c;上学期没有把Php配…...

编程新知 2026/5/25 19:55:28

超低功耗电池电压监控电路设计：从LM324到LPV324的硬件方案优化

1. 项目概述与核心需求解析在捣鼓各种电池供电的电子设备时&#xff0c;无论是自己做的无线传感器节点、便携式小工具&#xff0c;还是给孩子改装的玩具&#xff0c;有一个问题总是绕不开&#xff1a;你怎么知道电池快没电了&#xff1f;总不能每次都等到设备彻底罢工&#xff…...

编程新知 2026/5/25 19:29:59

AhMyth位置跟踪：GPS定位与地理围栏技术深度解析

AhMyth位置跟踪&#xff1a;GPS定位与地理围栏技术深度解析 【免费下载链接】AhMyth Cross-Platform Android Remote Administration Tool | The only maintained version of AhMyth on github | A revival of the original repository at https://GitHub.com/AhMyth/AhMyth-An…...

编程新知 2026/5/25 18:32:47

Frida无Root Hook PC微信小程序源码（Electron+Chromium）

1. 这不是“破解”&#xff0c;而是一次对微信小程序运行机制的逆向观察 你有没有试过&#xff0c;在PC版微信里点开一个小程序&#xff0c;想看看它背后是怎么写的&#xff1f;比如某个电商小程序的优惠券逻辑、某个工具类小程序的数据渲染方式&#xff0c;甚至只是单纯好奇—…...

编程新知 2026/5/25 17:55:38

Unity中MMD初音资源导入与动画落地全流程指南

1. 这不是普通模型包&#xff1a;初音跳舞资源在Unity中的真实价值定位“Unity初音跳舞精品模型动画资源分享”——看到这个标题&#xff0c;很多刚接触Unity的美术向开发者第一反应是&#xff1a;“哇&#xff0c;能直接放进项目里做Demo了&#xff01;”但我在带三个独立游戏…...

编程新知 2026/5/26 23:36:59

Midjourney V6锐化失控？3步诊断+5组--sref/--stylize协同参数公式，立竿见影修复模糊与锯齿

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Midjourney V6锐化失控的本质归因 Midjourney V6 引入的全新扩散架构与隐式细节增强机制&#xff0c;导致图像生成过程中高频纹理被过度强化&#xff0c;其根本原因并非参数误配&#xff0c;而是模型在…...

编程新知 2026/5/25 15:43:43