jquery：find，children，siblings，parent的简单使用

最新推荐文章于 2020-01-19 11:12:52 发布
最新推荐文章于 2020-01-19 11:12:52 发布
阅读量1.8k 收藏
点赞数
分类专栏： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HUSHILIN001/article/details/81396540
版权

介绍不多，建议w3c，

parent：返回操作元素的父辈；

children：返回元素的儿子辈；

find：返回元素的后代；

sibling：返回元素的兄弟；

至于其他的，比如next等，就不多介绍了，直接代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<div class="div_1" style="width: 400px;height: 400px;background-color: #000;">
			<div class="div_1_1" id="operation" style="width:200px;height:200px;background-color:red">
				<span style="color: yellow;">这个是div_1_1的元素的第一个子元素</span>
				<span style="color:green;">这个是div_1_1的元素的第2个子元素</span>
			</div>
			<div class="div_1_2" style="width:200px;height:200px;background-color:blue"></div>
		</div>
		<button class="parent">parent</button>
		<button class="children">children</button>
		<button class="children_first">children_first</button>
		<button class="sibling">sibling</button> <button class="find">find</button>

	</body>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script>
		//点下parent按钮,改变operation的parent的背景色
		$("body").on("click", ".parent", function() {
			$("#operation").parent().css("background-color", "#333");
		});
		//点下children按钮，改变operation的所有孩子的颜色
		$("body").on("click", ".children", function() {
			$("#operation").children().css("color", "#000");
		});
		//点下sibling按钮，改变operation的所有兄弟的颜色
		$("body").on("click", ".sibling", function() {
			$("#operation").siblings().css("background-color", "#000");
		});
		//点下children_first按钮，改变operation的第一个名字为span的子元素的颜色
		$("body").on("click", ".children_first", function() {
			$("#operation").children("span:nth-child(1)").css("color", "#000");
		});
		//点下find按钮，改变operation的后代中第一个名字为span的子元素的颜色
		$("body").on("click", ".find", function() {
			$("#operation").find("span:nth-child(1)").css("color", "#000");
		});
		//find返回的是所有的后代，而children返回的是儿子辈，即find对应的是parents，children对应的是parent
	</script>

</html>

所用的jq版本：1.11

mkmin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery 中的 parent 、parents、children、find
gztrljh
11-29 996
parent 语法 $(selector).parent(filter) 说明 只找当前的父级，参数可选。 parents 语法 $(selector).parents(filter) 说明 只找当前的所有父级，参数可选。 children 语法 $(selector).children(filter) 说明 只找当前的子级元素，参数可选 find 语法 $(selector).find(filter) 说明 参数必填，查找所有的后代元素。 ...
siblings，next，find方法的使用
TSeven37的博客
09-17 929
jQuery siblings() 方法 siblings() 方法返回被选元素的所有同胞元素。 下面的例子返回 &lt;h2&gt; 的所有同胞元素： 实例 $(document).ready(function(){ $("h2").siblings(); }); 亲自试一试 您也可以使用可选参数来过滤对同胞元素的搜索。 下面的例子返回属于 &lt;h2&gt; 的同胞元素...
[JQuery] find()、has()、filter()、siblings()
澪月
05-07 1169
&lt;ul&gt;     &lt;li&gt;list item 1&lt;/li&gt;     &lt;li&gt;list item 2&lt;/li&gt;     &lt;li class="findMe"&gt; &lt;div&gt;&lt;p&gt;pp&lt;/p&gt;&lt;/div&gt;&lt
jquery 中查找函数parent ，parents，find和children的一点研究
lixiang0425的专栏
10-02 4260
周六的时候做一个类似于微博的那个评论的效果，应该说是很简单的一个效果。 我是来测试的1 收起回复 我是来测试的2 我是来测试的3 回复: 结构大致如上，点击回复的时候class为box_output的那个div框会出来，里面是一个textarea框，可以输入信息，点击收起这个div就收起来。应该说是一个很简单的
jquery遍历之parent()与parents()的区别 及 parentsUntil() 方法
大头爸爸的博客
10-27 1万+
.parent(selector) 获得当前匹配元素集合中每个元素的父元素，由选择器筛选（可选）。 .parents(selector) 获得当前匹配元素集合中每个元素的祖先元素，由选择器筛选（可选）。 如果给定一个表示 DOM 元素集合的 jQuery 对象，.parents() 方法允许我们在 DOM 树中搜索这些元素的祖先元素，并用从最近的父元素向上的顺序排列的匹配元素构造一个新的 jQ
有关jQuery中parent()和siblings()的小问题
10-22
本文通过一个实例给大家介绍有关parent()和siblings()问题原因及解决方案，非常不错具有参考借鉴价值，感兴趣的朋友一起看看吧
jQuery使用方法
10-20
此外，jQuery还提供了在DOM树上移动的方法，如`.next('p')`选择相邻元素，`.parent()`选择父元素，`.closest('form')`选择最近的祖先元素，`.children()`选择子元素，以及`.siblings()`选择同级元素。 **三、链式...
初学者jQuery：Примерыкодадляучебника“ jQueryдляначинающих”
02-04
除此之外，jQuery还包含许多实用的功能，如遍历DOM（`.each()`, `.find()`, `.siblings()`, `.children()`, `.parent()`），插件系统，以及便利的工具函数（`.trim()`, `.is()`, `.not()`, `.append()`, `.prepend()...
JQuery_Demo:一些jquery效果
06-26
jQuery 使用 `$` 符号创建 jQuery 对象，它可以包裹一个或多个 DOM 元素。例如，选择页面上的 `id` 为 "myElement" 的元素： ```javascript var myElement = $("#myElement"); ``` jQuery 对象提供了丰富的 API，而...
jquery 使用方法
05-21
2. **DOM 树移动**：`.next()` 选择相邻的元素，`.parent()` 选择父元素，`.closest()` 选择最近的匹配指定类型的祖先元素，`.children()` 获取所有子元素，`.siblings()` 选择同级元素。 ### 三、链式操作 jQuery...
如何用Jquery实现点击之后高亮选中
PHP网站建设，PHP技术分享
06-26 3807
作为一个PHP后端开发者，我经常遇到Jquery实现点击之后高亮选中这个问题。每次都需要百度纠结一段时间，今天遇到了我特地写下来供参考和以后的使用代码演示：&lt;a href="javascript:;" class="nav-card original-wrap" data-y="5"&gt; &lt;p&gt; &lt;span class="cardAmount&a
Jquery的parent和parents(找到某一特定的祖先元素)用法
cui_angel的专栏
08-24 4万+
<!-- parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合。 parents则是取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。 parent取得很明确就是当前元素的父元素 parents则是当前元素的祖先元素 -->
jQuery父级以及同级元素查找介绍
nox
07-29 2778
jQuery.parent(expr) 找父亲节点，可以传入expr进行过滤，比如$("span").parent()或者$("span").parent(".class")  jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素  jQuery.children(expr).返回所有子节点，这个方法只会返回直接的孩
怎么使用jquery判断一个元素是否含有一个指定的类（class）
热门推荐
行天之路
10-15 17万+
在jquery中可以使用2种方法来判断一个元素是否包含一个确定的类(class)。两种方法有着相同的功能。2种方法如下： 1.           is(‘.classname’) 2.           hasClass(‘classname’) 以下是一个div元素是否包含一个redColor的例子： 1. 使用is(‘.classname’)的方法 $('div').is('
定位元素的父（parent::）、兄弟（following-sibling::、preceding-sibling::）节点
张楠的博客
12-11 2万+
    最近总是有同学问我做页面自动化时，一些元素总是很难定位，这段时间脚本运行稳定，后面脚本运行越来越不行。我看了他们相关节点的定位，发现他们定位的节点方法过于死板，节点的xpath中含有不定项，后面版本页面改变了以后，原先的xpath就不可用了，导致脚本的不稳定。我经常强调，元素定位的原则就是不变，一定要围绕着一个不变的节点进行定位，xpath写出来一定要够短，越是短的xpath其中出现可变节...
Jquery中siblings()方法
csdnlijishan的博客
05-30 1345
sibling()方法：遍历所有兄弟元素 1.一般情况不会包括自己 2.包括自己的特殊情况 例如：$(".txt").siblings(）获取的标签包括自己，因为同辈中有多个标签有class=‘txt’。 ...
Jquery 获取第一个子元素
透明大脑
06-27 5万+
John   Karl   Brandon 获取第一个元素：  $("ul li:first-child")          John     Karl     Brandon    获取第一个元素：  $("#getfirst").find("ul li:first-child") 或$("#getfirst").find("ul li")
JQ节点关系
weixin_44235447的博客
01-19 246
一、children() 描述：获取当前jq对象的子节点 语法：jq对象.children() ①当children（）不写参数的时候 获取的是所有的孩子 ②当children（‘孩子的选择器’） 获取的是指定的孩子 ③children（） 只能选择 直接孩子 不能选择 孙子元素 二、find() List item 描述：获取指定的孩子 语法：jq对象.find(‘孩子的...
JQuery 层级选择器(next(),preAll(),siblings(),parent())
houyanhua1的专栏
12-17 4912
$('#d1 div')  //取所有子元素，不管是几层。 $('#d1>div')  //取直接子元素，一层 $('#d1+div')  //之后紧邻的一个同级元素 $('#d1~div')  //之后的所有同级元素 $('#d1').next()  //后面的一个同级元素 $('#d1').nextAll()  //后面的所有同级元素 $('#d1').prev()  //前面
jQuery样式操作详解：addClass, removeClass, toggleClass与hasClass
此外，jQuery还提供了丰富的DOM操作方法，如find(), children(), parent(), siblings()等，简化了对DOM的操作。事件处理方面，jQuery提供了如click(), change(), submit()等函数，简化了事件绑定。同时，jQuery还有...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值