jQuery之dom操作(遍历节点)

最新推荐文章于 2024-04-26 15:49:21 发布

龙腾四海365

最新推荐文章于 2024-04-26 15:49:21 发布

阅读量1k

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/u011637069/article/details/50187073

版权

jQuery 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

jQuery之dom操作(遍历节点)

children()/children(selector) -- 只考虑子元素，不考虑其他后代元素

next()/next(selector) -- 下一个兄弟节点

prev()/prev(selector) -- 上一个兄弟节点

siblings()/siblings(selector) -- 其他兄弟节点

find(selector) -- 从某个节点开始查找后代中满足selector的节点

parent() -- 父节点

示例代码：/jQuery01/WebRoot/dom/d7.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>遍历节点</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
    <script type="text/javascript">
    	$(function(){
        	$('#b1').click(function(){
            	//children()/children(selector) --只考虑子元素，不考虑其他后代元素
            	//var $obj = $('#d1').children();
            	//获取后代中所有的div子节点
            	var $obj = $('#d1').children('div');
            	//length属性：获得jQuery对象包含的dom对象个数
            	//alert($obj.length);

            	//next()/next(selector)  --  下一个兄弟节点
            	//$('#d4').next().css('color','red');
            	//$('#d4').next('p').css('color','red');

            	//prev()/prev(selector)  --  上一个兄弟节点
            	//$('#d4').prev().css('color','red');

            	//siblings()/siblings(selector)  --  其他兄弟节点
            	//$('#d3').siblings('div').css('font-size','60px');

            	//find(selector)--从某个节点开始查找后代中满足selector的节点
            	//$('#d1').find('span').css('font-size','60px');

            	//parent()  --  父节点
            	alert($('#d2').parent().attr('id'));
            });
        });
    </script>
  </head>
  <body style="font-size:30px;">
  	<div id="d1">
  		<div id="d2">hello 1</div>
  		<div id="d3">
  			hello 2
  			<span>1111</span>
  		</div>
  		<div id="d4">hello 3</div>
  		<p>hello 4</p>
  	</div>
  	<input id="b1" type="button" value="遍历节点"><br/>
  </body>
</html>

龙腾四海365

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery之dom操作(遍历节点)

jQuery之dom操作(遍历节点)children()/children(selector) -- 只考虑子元素，不考虑其他后代元素next()/next(selector) -- 下一个兄弟节点prev()/prev(selector) -- 上一个兄弟节点siblings()/siblings(selector) -- 其他兄弟节点find(se
复制链接

扫一扫

专栏目录