Web 前端学习 之jQuery层级选择器

最新推荐文章于 2024-01-14 11:54:30 发布
最新推荐文章于 2024-01-14 11:54:30 发布
阅读量293 收藏
点赞数
分类专栏： # web开发学习 文章标签： js jquery html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Weary_PJ/article/details/107629852
版权

Web 前端学习 之jQuery层级选择器

简洁

jQuery层级选择器有下面这几种

  • 后代选择器
  • 子元素选择器
  • 相邻元素选择器
  • 兄弟元素选择器

在这里插入图片描述

层级选择器

后代选择器

在这里插入图片描述

子元素选择器

在这里插入图片描述

相邻元素选择器

在这里插入图片描述

兄弟元素选择器

在这里插入图片描述

综合案例

需求: 实现下面功能
在这里插入图片描述

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</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;
			}			
		</style>
		<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				//1.选择 body 内的所有 div 元素
				$("#btn1").click(function(){
					$("body div").css("background", "#bbffaa");
				});

				//2.在 body 内, 选择div子元素  
				$("#btn2").click(function(){
					$("body > div").css("background", "#bbffaa");
				});

				//3.选择 id 为 one 的下一个 div 元素 
				$("#btn3").click(function(){
					$("#one+div").css("background", "#bbffaa");
				});

				//4.选择 id 为 two 的元素后面的所有 div 兄弟元素
				$("#btn4").click(function(){
					$("#two~div").css("background", "#bbffaa");
				});
			});
		</script>
	</head>
	<body>	
	
<!-- 	<div>
		<h1>层级选择器:根据元素的层级关系选择元素</h1>
		ancestor descendant  ：
		parent > child 		   ：
		prev + next 		   ：
		prev ~ siblings 	   ：
	</div>	 -->
		<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>
Joker-Tong
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
jQuery多级联动选择器
06-01
一款多级联动选择器，可自定义层级
jQuery选择器之层级选择器
weixin_42305895的博客
03-28 377
前言：层级选择器主要分为四种，分别是祖先后代选择器、父子选择器、前后选择器、前兄弟选择器，下面，我将会分别从他们的表示、用途、例子来分别说明这四种选择器。 写在前面，我下面举例子时js代码和css代码都是另起一个页面的，所以大家要运行代码的时候注意一下。 1. 祖先 后代选择器 （1） 说明 表示：$(“ancestor descendant”) 用途：选取ancestor元素后所有的descen...
Web前端-css1--引入方式与选择器 层级覆盖
yanghainan0318的博客
12-01 339
css css 中的样式格式语法： 选择器{ 样式名：样式值； 样式名：样式值； 。。。。。。 } css 的引入方式： 3种： 1外部样式： （开发时...
javaweb各层次理解
959
09-18 1323
许多设计良好的web应用，可以被按职责分为四层。这些层次是表现层、持久层、业务层、和域模型层。每一个层次都有其独特的职责，不能把各自的功能与其它层次相混合。每一个应用层都应该和其它层隔离开来，但允许使用接口在层间进行通信。我们开始来看看每个层，并讨论一下它们各自都应该提供什么和不应该提供什么： 1. 持久层（Persistence layer–DAO–hibernate） 所谓持久，就是把数据保存到可以永久保持的存储设备当中。一般来说，持久更为直接的理解就是对数据库的各种操作，如增加，删除，修改，查询，更.
web前端开发（四）—jQuery基础
mdxiaohu的博客
07-31 2963
目录 一、使用jQuery 二、jQuery基础选择器 按ID查找 按标签查找 按class查找 按属性查找 组合查找 多项选择器 练习 层级选择器（Descendant Selector） 子选择器（Child Selector） 过滤器（Filter） 表单相关 练习 查找 DOM操作 过滤 练习 添加DOM 删除节点 练习 鼠标事件 键盘事件 ...
HTML层次选择器--Javaweb
chenzitian6058的博客
05-03 127
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> &l
jQuery基本选择器
weixin_57762662的博客
05-19 790
我们都知道，在CSS中，选择器是选择页面中的某些HTML元素，jQuery中的选择器我们使用“$”，因为这种方式比较全面，而且也不会存在浏览器的兼容问题。jQuery的选择器有很多，我们把它分为基本选择器、层次选择器、过滤选择器和属性选择器。不过我今天只讲基本选择器，而基本选择器也分为四种：元素选择器、ID选择器、类选择器和并列选择器。 元素选择器： 元素选择器是可以选中HTML文档中所有的某个元素。如$(“li”)可以表示选中本网页中所有的li元素，又如$("input")可以表示选中本网页中所有的i
Jquery的总结一（Jquery的多种选择器）
qq_56248592的博客
12-19 1461
jquery的三大重点（选择器,事件，效果）
jQuery中的层次选择器
weixin_43350001的博客
02-26 2482
jQuery中的层次选择器 常见的层次关系包括：父子、后代、兄弟、相邻。 $(“M N”) 等价于 $(M).find(N)；表示选择后代。 $(“M>N”) 等价于 $(M).children(N)；表示选择子代。 $(“M~N”) 等价于 $(M).nextAll(N)；表示在兄弟之中选择后面所有兄弟。 $(“M+N”) 等价于 $(M).next(N)；表示在兄弟之中只选择后面那个兄弟。 HTML文件代码： <!DOCTYPE html> <html lang="en"
jQuery选择器（一）基本选择器、层次选择器及属性选择器的详细使用
最新发布
Jin_Xiang123的博客
01-14 1728
本篇文章主要介绍在jQuery中基本选择器、层次选择器及属性选择器的详细使用以及部分理论知识 在jQuery中，基本选择器是一组简单而直接的选择器，用于选择DOM元素。它们是最常用和最基础的选择器，可以根据元素的标签名、类名、id等属性来选择元素。基本选择器包括标签选择器、类选择器、ID选择器、并集选择器和全局选择器。名称语法构成描述示例标的id匹配元素。
前端web select 多层级选择。利用 ztree.js 实现下拉框的多选和单选demo.有兴趣的可以了解一下。
03-02
1.ztree.js 的实用案例 2.解决了 下拉框下多层级选择的问题 3.jquery + bootstrap+ztree.js
jQuery层级选择器用法分析
10-24
主要介绍了jQuery层级选择器用法,实例分析了常见的四种层级选择器的使用技巧,并给出了实例总结,需要的朋友可以参考下
jQuery层级选择器实例代码
10-20
主要为大家详细介绍了jQuery层级选择器实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Web前端开发技术-Jquery选择器.pptx
07-07
层级选择器;jQuery选择器;;; 筛选选择器;jQuery选择器;jQuery选择器;jQuery选择器;jQuery选择器;jQuery选择器;jQuery选择器; 排他思想;jQuery选择器;jQuery选择器;jQuery选择器;jQuery选择器;jQuery选择器;jQuery...
jquery选择器之层级过滤选择器详解
12-11
代码如下:$(“ancestor descendant”)：选取parent元素后所有的child元素$(...注:siblings是过滤器后两个用的比较少，一般会有其他选择器替代 代码如下:$(“prev + next”)等价于next()$(“prev ~ siblings”)等价
Web 前端学习 之img标签详解
Weary_PJ的博客
07-14 5481
Web 前端学习 img标签详解 img标签是用来显示图片的,下面我将根据一个小案例来介绍他 需求: 使用img标签显示一张美女的图片,并修改宽高,以及边框属性 路径问题 src 很显然 单凭一个img我们不可能显示出想要的图片,必须要结合相应的属性,其中最终要的就是路径了,它代表着我们想要显示的图片所在的位置 相应的,大家应该都知道,路径分为相对路径和绝对路径 而在html的语法中,这两种路径的用法与编程中有着一点点的区别 相对路径 . 代表文件所在的目录 .. 代表上级目录 直接输入文件名就代表当
Javascript 案例:验证登录用户名
Weary_PJ的博客
07-23 3654
Javascript 案例:验证登录用户名 为了详细的介绍一下JS中的DOM模型,于是决定举个例子来说明一下,方便理解 下图是JS中DOM模型,我们可以把它当成一个类 ,并通过.来获取类中的属性 在登录界面,我们通常碰到过这样的问题,比如用户名不合法,没有首字母开头等等 下面我就简单的实现一下 需求 我们的需求如下 当用户点击了较验按钮，要获取输出框中的内容。然后验证其是否合法。 验证的规则是：必须由字母，数字。下划线组成。并且长度是5到12位。 这是一个非常简单的登录界面,为了演示方便,就不加什么c
Web 前端学习 之iframe详解
Weary_PJ的博客
07-15 1843
Web 前端学习 之iframe详解 介绍 iframe相当于一个页内的页面,可以结合超链接实现页内跳转等等操作, 看个图就知道了 使用流程如下 在iframe标签中使用name属性定义一个名称 在a标签的target属性上设置iframe的name的属性值 之前我们说过a标签的target可以选择是否在当前页面打开新窗口,这里只要把target改成iframe的name就可以实现业内的页面变换了 实现 直接放代码吧 <!DOCTYPE html> <html> <head
Web 前端学习 之XML
Weary_PJ的博客
08-13 1040
Web 前端学习 之XML 什么是XML xml是可扩展的标记性语言 xml的作用 xml 的主要作用有： 1、用来保存数据，而且这些数据具有自我描述性 2、它还可以做为项目或者模块的配置文件 3、还可以做为网络传输数据的格式（现在JSON 为主）。 xml 语法 1.文档声明 xml文件开头部分如下图所示 图书有id属性表示唯一标识,书名,作者,价格的信息 如下 <?xml version="1.0" encoding="utf-8" ?> <books> <b
jqueryname选择器
05-20
"jqueryname选择器" 不是 jQuery 标准的选择器，可能是你自己定义的选择器名称。 jQuery 选择器是一种用于选择 HTML 元素的语法，类似于 CSS 选择器，可以通过元素名称、ID、class、属性等多种方式进行选择。 以下...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Joker-Tong

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值