jquery DOM操作

最新推荐文章于 2024-07-05 14:21:58 发布

赫子子

最新推荐文章于 2024-07-05 14:21:58 发布

阅读量390

点赞数 1

分类专栏：其他

本文链接：https://blog.csdn.net/yucihent/article/details/62568637

版权

其他专栏收录该内容

3 篇文章 0 订阅

订阅专栏

jquery里面的DOM操作之访问节点

1.父级访问：parent()，parents()，parentUntil()，closest()

1.parent()：获得当前匹配元素集合中每个元素的父元素

<p>Hello</p>

</div>
<div class="selected">

</div>
<script>
$("p").parent(".selected").css("background", "red");
</script>
</body>

2.parents()：获得当前匹配元素所有父元素（从父元素开始）。另外parents(“想要执行的父级”)

$(".lajilou").on("click",function(){

$(this).parents(".choice-price-ul-position").hide();
});

当前点击对象所有父元素中类名为choice-price-ul-position的父元素进行隐藏

3.parentsUntil(".a")：获得当前匹配元素集合中每个元素的祖先元素，直到（但不包括）被选择器、DOM 节点或 jQuery 对象匹配的元素

字面意思就可以理解，找当前匹配元素父级直到类a结束，之间所有类样式相同

4.closest()：获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上，与parent()相似。

与parents()比较：

closest()：沿 DOM 树向上遍历，直到找到已应用选择器的一个匹配为止；

parents()：直到文档的根元素为止

 
 2.子集元素访问：find(".a")，children() 

 
 1.find()：获得当前元素集合中每个元素的后代，里面要带参数； 

 
 2.children()：参数可要可无，会沿着 DOM 树向下遍历单一层级； 

 
  
 3.同级访问： 
 siblings 
 ,next 
 , nextAll 
 ,nextUntil, 
 prev ,prevAll, prevUntil 

 
 附上简单代码：

 
 HTML： 

 
 <div class="box">
<h1 class="h">hhhhhh</h1>
<ul class="list">
<li class="li">111111</li>
<li>111111</li>
<li>111111</li>
<li>111111</li>
</ul>
<ul class="list">
<li>111111</li>
<li>111111</li>
<li>111111</li>
<li>111111</li>
</ul>
<p>hhhhhh</p>
</div> 

js:

 
 <script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function(){
$(".h").on("click",function(){
//parent()直接父节点
$(this).parent().css({"background":"red","border":"5px solid yellow"})

// parents()获取所有的祖先元素
$(this).parents().css({"background":"red","border":"5px solid yellow"})

// siblings与点击对象同级的所有ul颜色为白色
$(this).siblings("ul").css({"color":"#fff"});

// 与点击对象同级的所有ul里面所有的子元素li
$(this).siblings("ul").children("li").css({"color":"#fff","font-size":"50px"});
//find(*)
$(this).siblings("ul").find("li").css({"color":"#fff","font-size":"50px"});

//与点击对象同级的，所有在点击对象后面的元素都显示aaaa
$(this).nextAll().html("<h1>aaaa</h1>");
$(this).next().children().first().html("2222"); 

 
 
//点击对象后紧挨着对象的第一个对象  除了类名为li以外的节点全都变成3333
$(this).next().children().not(".li").html(3333);

$(this).closest("body").css({"background":"blue"});
});
})
</script>
 

 
 4. 
 过滤访问 
 ： 
 first 
 ,last 
 ,eq,not 
 (去除不符合的) 
 ,filter（与not相反 返回的是被删除的元素） 

赫子子

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录