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

jQuery-层级选择器

news 2026/4/11 15:22:06

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

BackgroundRemover：基于U-2-Net的智能背景移除工具完全指南

BackgroundRemover&#xff1a;基于U-2-Net的智能背景移除工具完全指南 【免费下载链接】backgroundremover Background Remover lets you Remove Background from images and video using AI with a simple command line interface that is free and open source. 项目地址:…...

编程新知 2026/4/11 15:02:34

大模型之Linux服务器部署大模型扒

一、各自优势和对比 这是检索出来的数据&#xff0c;据说是根据第三方评测与企业数据&#xff0c;三款产品在代码生成质量上各有侧重&#xff1a; 产品 语言优势 场景亮点 核心差异 百度 Comate C核心代码质量第一&#xff1b;Python首生成率达92.3% SQL生成准确率提升35%&…...

编程新知 2026/4/11 14:44:03

SetDPI完全指南：掌握Windows多显示器DPI缩放控制的高效方案

SetDPI完全指南&#xff1a;掌握Windows多显示器DPI缩放控制的高效方案 【免费下载链接】SetDPI 项目地址: https://gitcode.com/gh_mirrors/se/SetDPI Windows多显示器DPI缩放控制一直是专业用户面临的痛点&#xff0c;SetDPI作为一款开源命令行工具&#xff0c;提供了…...

编程新知 2026/4/11 14:23:54

告别DataX默认配置：手把手教你编译适配MySQL 8.0的专属版本（解决Record引用报错）

深度定制DataX&#xff1a;从源码编译到MySQL 8.0全适配实战指南 当企业级数据迁移遇上MySQL 8.0的新特性&#xff0c;官方DataX发行版往往显得力不从心。最近在金融行业的数据仓库迁移项目中&#xff0c;我们团队就遭遇了连接参数失效、类型映射异常等一系列"水土不服&qu…...

编程新知 2026/4/11 14:11:51

ZYNQ纯PL端设计：从Bit到Boot.bin的固化实战解析

1. ZYNQ纯PL端固化的核心挑战 第一次接触ZYNQ的开发者经常会遇到一个困惑&#xff1a;为什么Vivado生成的bit文件不能像传统FPGA那样直接烧录&#xff1f;这其实涉及到ZYNQ芯片的架构特点。ZYNQ本质上是ARM处理器&#xff08;PS&#xff09;和FPGA&#xff08;PL&#xff09;的…...

编程新知 2026/4/11 12:34:07

深度学习基于YOLOv11+pyqt5的农作物识别检测系统 智慧农业CWC数据集 包含蓝草、藜、刺菜、玉米、莎草、棉花、茄属植物、番茄、天鹅绒、生菜、萝卜，11类农作物

智慧农业基于YOLOv11pyqt5的农作物识别检测系统内含CWC数据集 包含蓝草、藜、刺菜、玉米、莎草、棉花、茄属植物、番茄、天鹅绒、生菜、萝卜&#xff0c;11类农作物 也可自行替换模型&#xff0c;使用该界面做其他&#xff0c;实现检测目标自定义完整源码源文件已标注的数据集训…...

编程新知 2026/4/11 12:28:05

SEAL: Enhancing Multimodal LLMs with Dynamic Visual Search for High-Resolution Image Understanding

1. 为什么高分辨率图像理解对多模态大模型如此重要&#xff1f; 想象一下你正在用手机查看一张4000万像素的旅游照片&#xff0c;试图找出远处山脚下的小木屋。人类可以自然地通过视觉搜索机制——先扫描整体景观&#xff0c;再逐步聚焦到特定区域——快速定位目标。但现有的多…...

编程新知 2026/4/11 12:11:55

华大北斗GNSS测评工具Satrack实战指南-V1.2

1. 华大北斗GNSS测评工具Satrack初探 第一次接触华大北斗的Satrack工具时&#xff0c;我完全被它的专业性和易用性所折服。作为一款专门用于GNSS&#xff08;全球导航卫星系统&#xff09;性能测评的工具&#xff0c;Satrack在业内有着相当不错的口碑。简单来说&#xff0c;它就…...

编程新知 2026/4/11 11:20:52

Translumo：高效免费的屏幕实时翻译工具，打破语言障碍的实用指南

Translumo&#xff1a;高效免费的屏幕实时翻译工具&#xff0c;打破语言障碍的实用指南 【免费下载链接】Translumo Advanced real-time screen translator for games, hardcoded subtitles in videos, static text and etc. 项目地址: https://gitcode.com/gh_mirrors/tr/Tr…...

编程新知 2026/4/11 11:02:00

ESXI系统安装全流程解析：从U盘启动到网络配置

1. 制作ESXI启动U盘&#xff1a;从镜像下载到写入完成 准备一个容量至少8GB的U盘&#xff0c;建议使用USB3.0接口的高速U盘。我实测过多个品牌&#xff0c;闪迪CZ73和金士顿DTSE9在兼容性和速度上表现最好。制作启动盘前记得备份U盘数据&#xff0c;整个过程会清空所有内容。 首…...

编程新知 2026/4/11 10:05:05