使用Jquery层次选择器

最新推荐文章于 2022-02-10 19:02:00 发布
最新推荐文章于 2022-02-10 19:02:00 发布
阅读量225 收藏
点赞数
分类专栏： JQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yecats/article/details/51520036
版权 
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>使用Jquery层次选择器</title>
  <script src="jquery-1.8.0.js"></script>
 </head>
 <style type="text/css">
	body{
		font-size:12px;
		text-align:center;

	}
	div,span{
		float:left;
		border:solid 1px #ccc;
		margin:8px;
		display:none;
	}
	.clsFra{
		width:65px;
		height:65px;
	}
	.clsFrp{
		width:45px;
		height:45px;
		background-color:#eee;
	}
	.clsFrc{
		width:25px;
		height:25px;
		background-color:#ddd;
	}
 </style>
 
 <script type="text/javascript">
	/*
	$(function(){
		$("#divMid").css("display","block");
		$("div span").css("display","block");
	});
	
	$(function(){
		$("#divMid").css("display","block");
		$("div>span").css("display","block");
	});
	
	$(function(){
		$("#divMid + div").css("display","block");
		//$("#divMid").next().css("display","block");
	});
	*/
	/*
	$(function(){
		//$("#divMid ~ div").css("display","block");
		$("#divMid").nextAll().css("display","block");
	});
	*/
	/*
	$(function(){
		$("#divMid").siblings("div ").css("display","block");
		//$("#divMid").next().css("display","block");
	});
	*/
 </script>
 <body>
	<div class="clsFra">left</div>
	<div class="clsFra" id="divMid">
		<span class="clsFrp" id="Span1">
			<span class="clsFrc" id="Span2"></span>
		</span>
	</div>
	<div class="clsFra">right1</div>
	<div class="clsFra">RIGHT2</div>
 </body>
</html>

yecats
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery层级选择器用法分析
12-08
在HTML文档中，每个元素总是处于DOM节点树上的某个位置，文档层次结构中元素之间总是存在于某种层级关系，如父级和子级的关系等。 1. 子元素选择器 用于查找在给定的父元素下查找 这个父元素下的所有子元素，语法格式： 代码如下:$(“parent->chilid”); 2. 后代元素选择器 用于在给定的祖先元素下匹配所有的后代元素，语法格式: 代码如下:$(“ancestor descendant”); 3. 紧邻同辈元素选择器 用于匹配所有紧邻在prev元素后的next元素，语法格式: 代码如下:$(“prev + next”) 4. 相邻同辈元素选择器 用于选择某元素后面的所有同辈元素，语
jQuery层次选择器用法
weixin_45747278的博客
10-20 287
2：jQuery层次选择器 2.1： ancestor descendant选择器 概念： ancesdor descendant选择器中ancestor代表祖先，descendant代表子孙，用于在给定的祖先元素下匹配所有的后代元素 HTML代码： <form> <label>Name:</label> <input name="name"...
JQuery-层次选择器的使用
时间识人的博客
06-02 465
常见的层次关系包括：父子、后代、兄弟、相邻。 在jQuery中，层次选择器共有4种，如下表所示。 jQuery层次选择器 M N 后代选择器，选择M元素内部后代N元素（所有N元素） M > N 子代选择器，选择M元素内部子代N元素（所有第1级N元素） M ~ N 兄弟选择器，选择M元素后面所有的同级N元素 M + N 相邻选择器，选择M元素相邻的下一个元素（M、N是同级元素） 此外，我们还需要注意以下4点。 （1）("M N")可以使用(M).find(N)代替 （2）("
JQuery层次选择器
零怀念的博客
08-18 414
以上四个分别是： 子元素选择器（直接父子关系） 后代元素选择器（后代所有，包括孙子关系） 相邻元素选择器（紧邻元素的下一个元素） 兄弟元素选择器（所有与元素同级的） 示例：运用这四个选择器 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &l
JQuery 06 层次选择器的应用
Beyond_Nothing
05-17 292
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>左移右移 —— 层次选择器的应用</title> <style> select { width: 100px; height: 150px } input[type=
jQuery层次选择器选择元素使用介绍
12-09
其主要的层次关系包括后代、父子、相邻、兄弟关系，通过其中基类关系可以方便快捷地定位元素 jQuery选择器详解 根据所获取页面中元素的不同，可以将jQuery选择器分为：基本选择器、层次选择器、过滤选择器、表单选择...
jquery层次选择器的介绍
01-21
jquery层次选择器 jquery层次选择器，包括空格、>、next、+、nextAll、~、siblings、prev()、prevAll()等函数或表达式。 1、空格表示获取所有子孙后代元素 2、 >表示获取一级子元素 3、next函数获取紧接在之后的同辈...
jQuery层次选择器用法示例
10-21
主要介绍了jQuery层次选择器用法,结合实例形式分析了jQuery针对页面元素层级操作的层次选择器使用技巧,需要的朋友可以参考下
选择器——层次选择器
A458545418的博客
04-23 137
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-...
层次选择器的用法html,jQuery层次选择器选择元素使用介绍
weixin_30744613的博客
06-05 276
body{font-size:12px;text-align:center;}div,span{float:left;border:solid 1 px #ccc;margin:8px;display:none}.clsFraA{width:65px;height:65px}.clsFraP{width:45px;height:45px;background-color:#eee}.clsFraC...
jQuery多级分类菜单联动选择代码
06-05
jQuery多级分类菜单联动选择代码，点击弹出下拉菜单，二级、三级联动菜单选择器。
JQuery 05 层次选择器的使用
Beyond_Nothing
05-17 433
css()方法 该方法可以返回第一个匹配元素的CSS属性值。 其基本语法结构如下所示： $(selector).css(name) 其中，参数name表示CSS属性的名称，该参数可包含任何CSS属性。 css()方法还可以为所有匹配元素设置指定的CSS属性 其基本语法结构如下所示： $(selector).css(name,value) 案例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U.
jquery基本选择器和层次选择器的使用
zhaoxinglei0309的专栏
03-20 1020
1、什么是选择器 选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器 2、jQuery选择器分类     1）基本选择器       2）层次选择器     3）过滤选择器       4）表单选择器     5）简单选择器       6）内容选择器     7）可见性选择器    8）属性选择器
层次选择器（父子、后代、兄弟、相邻）
weixin_47124862的博客
11-30 7454
选择器 说明 M N 后代选择器，选择M元素内部后代的N元素（所有N元素） M>N 子代选择器，选择M元素内部子代的N元素（所有第1级N元素） M~N 兄弟选择器，选择M元素后所有的统计N元素 M+N 相邻选择器，选择M元素相邻的下一个N元素（M、N是同级元素） 一、后代选择器 语法：M N{} 说明：在后代选择器中，M元素与N元素用空格隔开，表示选中M元素内部后代的N元素。 举例： <!DOCTYPE html> <html lang="en"&gt...
jQuery----选择器（重点是层次选择器）
01-15 112
基本选择器 1.id选择器 ---------------------------->根据id来获取，只有一个。--------------------------------------------$( " #id的值 " ) 2.标签选择器-------------------------->根据标签的名字获取，可以有多个。---------------------...
使用jQuery层次选择器选择元素
liu_111111的专栏
04-18 980
1.层次选择器： 通过DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻、兄弟关系，通过其中基类关系可以方便快捷地定位元素 jQuery选择器详解 根据所获取页面中元素的不同，可以将jQuery选择器分为：基本选择器、层次选择器、过滤选择器、表单选择器四大类。其中，在过滤选择器中有可以分为：简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器
jQuery层次选择器
宇智波带土
01-14 411
HTML代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;图书简介&lt;/title&gt; &lt;link rel="stylesheet" href=&q
层次选择器中的注意事项
荒的博客
04-27 370
Insert title here $(function(){ //jQuery查询table的子元素时，访问的是theader,tbody,tfootor,而并不是直接访问tr元素 //在使用层次选择器(选择儿子tr)时要写明tbody,否则找不到,或者使用层次选择器(选择子孙可避免此问题) //var a = $("#table1>tr:gt(0)");//空数组,长度为0,
CSS学习04之层次选择器
ZXS1002的博客
02-10 452
回顾 什么是选择器 在 CSS 中，选择器是选取需设置样式的元素的模式。 选择器的作用 CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。 方便我们对元素添加样式。 层次选择器 基本选择器又分为三种方式： 后代选择器 子选择器 相邻选择器 通用选择器 示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>层次选择器&l
jQuery层次选择器详解与实战
"jQuery层次选择器的使用及jQuery基本概念" 在jQuery中，层次选择器是一种强大的工具，它允许开发者根据DOM元素之间的层次结构来精确地选取需要操作的元素。以下是一些主要的层次选择器及其用法： 1. 后代选择器...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值