JQuery遍历后代元素

最新推荐文章于 2024-04-24 10:26:01 发布
最新推荐文章于 2024-04-24 10:26:01 发布
阅读量850 收藏
点赞数
分类专栏： jQuery 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CodeTerminator/article/details/79523276
版权

JQuery遍历后代元素

向下遍历dom树

1.children()

2.find()

实例：

<script>
		$(function(){
			$(function(){
				$(".btn1").click(function(){
					$("div").children("p.p1").css({"color":"red","border":"2px solid red"});
				});
			});
			$(".btn2").click(function(){
				/*$("p").css({"color":"red","border":"2px solid red"});*/
				$("div").children("p").css({"color":"red","border":"2px solid red"});
			});
			$(".btn3").click(function(){
				$("div").find("span").css({"color":"red","border":"2px solid red"});
			});
			$(".btn4").click(function(){
				$("div").find("*").css({"color":"red","border":"2px solid red"});
			});
		});
	</script>
<style type="text/css">
	.descendants *{
		display: block;
		border: 1px solid green;
		color: green;
		margin:5px;
		padding:10px;
	}
</style>
<body>
	<div class="descendants" style="width: 500px;">div (当前元素)
		<p class="p1">p (儿子元素)
			<span>span (孙子元素)</span>
		</p>
		<p class="p2">p (儿子元素)
			<span>span (孙子元素)</span>
		</p>
		<button class="btn1">改变第一个儿子P的样式</button><br>
		<button class="btn2">改变所有儿子P的样式</button><br>
		<button class="btn3">使用find改变span的样式</button>
		<button class="btn4">使用find改变所有后代元素的样式</button>
	</div>
</body>

CodeTerminator
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery遍历dom祖先和儿孙
weixin_43973940的博客
05-10 301
前言：材料来自菜鸟教程，侵权立即删除。 1、jQuery 中非常重要的部分，就是操作 DOM 的能力。 三个简单实用的用于 DOM 操作的 jQuery 方法： text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容（包括 HTML 标记） val() - 设置或返回表单字段的值 $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").cli
jQuery 遍历 – 后代
12-13
jQuery 遍历 – 后代 后代是子、孙、曾孙等等。 通过 jQuery，您能够向下遍历 DOM 树，以查找元素的后代。 向下遍历 DOM 树 下面是两个用于向下遍历 DOM 树的 jQuery 方法： children() find() jQuery children() 方法 children() 方法返回被选元素的所有直接子元素。 该方法只会向下一级对 DOM 树进行遍历。 下面的例子返回每个 元素的所有直接子元素： 实例 $(document).ready(function(){ $("div").children(); }); 您也可以使用可选参数来过滤对子
jQuery 下部分--头歌（educoder)实训作业题目及答案
最新发布
qq_69173578的博客
04-24 2153
jQuery动画
jQuery——遍历DOM元素的后代元素
Andone_hsx的博客
12-12 4044
任务描述 本关任务：用 jQuery 向下遍历 DOM 节点。效果如下： 相关知识 为了完成本关任务，你需要掌握：1.children()，2. find()。 向下遍历DOM节点 基本的html结构如下（CSS已省略）： &lt;div&gt;div (当前元素) &lt;p&gt;p (儿子元素) &lt;span&gt;span(孙子元素)&lt;/span&gt; ...
jQuery 遍历 - 后代
unber的博客
05-24 400
后代是子、孙、曾孙等等。通过 jQuery，您能够向下遍历 DOM 树，以查找元素的后代。
jQuery--遍历节点之后代遍历（children()、find()、contents()）详解
吴声子夜歌的博客
10-02 1953
后代遍历 后代遍历又称向下遍历，常用的方法有children()、find()和contents()方法，通过向下遍历DOM树的方式来查找元素的后台元素。 1. children()方法： children()方法用于返回所匹配元素的直接子元素，并允许使用选择器进行筛选，其语法格式如下： $(selector).children([childSelector]) $(selector)：表示所...
jQuery后代
Qianyingqwer的博客
07-28 118
jQuery后代 后代是子、孙、曾孙等等。 通过 jQuery，您能够向下遍历 DOM 树，以查找元素的后代。向下遍历 DOM 树下面是两个用于向下遍历 DOM 树的 jQuery 方法：children()find() jQuery children() 方法 children() 方法返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。下面的例子返回每个 元素的所有直接子元素：实例 $(document).ready(function(){ $(“div”).children();
JQuery遍历元素的后代和同胞实现方法
10-21
下面小编就为大家带来一篇JQuery遍历元素的后代和同胞实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jQuery遍历DOM元素与节点方法详解
10-22
以下是对jQuery遍历DOM元素与节点方法的详细解释： **一、向上遍历（祖先元素）** 1. `$(selector).parent([filter])`：返回匹配的元素的直接父元素。如果提供了过滤器`filter`，则只返回符合该过滤条件的父元素。...
JQuery遍历元素的父辈和祖先的方法
01-19
JQuery遍历 首先我们要知道 什么是 父亲，儿子，后代，同胞，祖先 •<div> 元素是 <ul> 的父元素，同时是其中所有内容的祖先。 •<ul> 元素是 <li> 元素的父元素，同时是 <div> 的子元素 •左边的 <li> 元素是 ...
jquery 遍历 学习
12-26
- `find()`用于查找当前元素的后代元素，而`siblings()`, `next()`, `prev()`分别用于获取元素的同级元素、下一个元素和前一个元素。 CSS标签与jQuery遍历关系不大，但jQuery可以方便地操作CSS样式。例如，`...
Educoder jQuery遍历
Matcha_ice_cream的博客
06-17 2828
Educoder jQuery遍历 第1关：jQuery——遍历DOM元素的祖先元素 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script&gt
jQuery遍历并获得后代的值
qq_30461115的博客
08-24 2133
今天遇到一个坑爹的问题，获取到孙代的元素，但是获取不到值，搞了一上午，现在分享给大家。 原因是因为当获得到孙代时，返回的对象是TableCell  那么进这个网址就OK啦（http://www.w3school.com.cn/jsref/dom_obj_tabledata.asp） OK贴代码 HTML ssssssssssssssss es
jQuery -> 获取后代元素的三种方法
热门推荐
老梁的专栏
05-19 1万+
如果我们有内容如下的html文件，那么如何选取包含在元素内的元素呢？ 邪馬台国の謎と弥生時代 紀元前１０００年ごろ、水稲工作の技術をもつ集団が大挙して日本に移住してきた。これによって弥生時代が始まった。 縄文人も南方から伝わった稲を栽培していたが、彼らは原野を開いて大掛かりな水田をつくる発想を持たなかった。しかし、北九州に新たな文化を持って集団が来たのを知った彼らは次第に、水稲工作を受け
jQuery|选择器选取指定元素的后代的所有元素。
weixin_33913332的博客
12-31 3382
("parent descendant") 选择器选取指定元素的后代的所有元素。 元素的后代可以是元素的第一代、第二代、第三代等等。 实例 选取 <div> 元素的后代的所有 <span> 元素： $("div span") 语法 ("parent descendant") pa...
jQuery 遍历后代元素
weixin_44432032的博客
12-30 199
//children() 方法返回被选元素的所有直接子元素。 $(document).ready(function(){ $("div").children().css({"color":"red","border":"2px solid red"}); }); $(document).ready(function(){ $("div").children("p.1").css({"color":"red","border":"2px solid red"}); }); //find() 方法
jquery匹配某个祖辈元素或后代元素
探索未知
05-28 4569
从上级元素开始匹配后代的某些子元素：find() &lt;div class='father'&gt; &lt;div class="son-1"&gt;&lt;/div&gt; &lt;div class="son-2"&gt;&lt;/div&gt; &lt;div class="son-3"&gt;&lt;/div
jQuery遍历一个元素的全部子元素
05-05
如果你想遍历一个元素的全部子元素，可以使用jQuery的each()方法来进行循环遍历。具体代码如下： ``` $('#parentElement').find('*').each(function(){ // 对子元素进行处理 }); ``` 其中，parentElement是需要...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值