html dom取父节点jq,jquery怎么获取父亲节点?

本文详细介绍了在jQuery中如何使用parent()和parents()方法获取元素的父节点。parent()返回直接父元素,而parents()返回所有祖先元素,包括祖父、曾祖父等。通过示例代码展示了这两个方法在实际操作中的应用。
摘要由CSDN通过智能技术生成

jquery怎么获取父亲节点?下面本篇文章给大家介绍一下使用jquery获取父亲节点的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

eee95ac51a2710850b4674f2893758b2.png

在jquery中,可以使用parent()方法或parents()方法来获取父亲节点。parent() 方法返回被选元素的直接父节点;parents() 方法返回被选元素的所有父节点。

parent()方法

parent() 方法返回被选元素的直接父元素。

DOM 树:该方法只沿着 DOM 树向上遍历单一层级。

示例:

.ancestors *{

display: block;

border: 2px solid lightgrey;

color: lightgrey;

padding: 5px;

margin: 15px;

}

$(document).ready(function(){

$("span").parent().css({"color":"red","border":"2px solid red"});

});

div (曾祖父节点)
  • ul (祖父节点)
  • li (直接父节点)

    span

效果图:

b74df2530fc2532809df674455e7203a.png

parents()方法

parents() 方法返回被选元素的所有祖先元素。

祖先是父、祖父、曾祖父,依此类推。

DOM 树:该方法从父元素向上遍历 DOM 元素的祖先,直至文档根元素的所有路径()。

示例:

.ancestors *{

display: block;

border: 2px solid lightgrey;

color: lightgrey;

padding: 5px;

margin: 15px;

}

$(document).ready(function(){

$("span").parents().css({"color":"red","border":"2px solid red"});

});

div (曾祖父节点)
  • ul (祖父节点)
  • li (直接父节点)

    span

效果图:

920d2c24d4b6744cb3e1a5b94b402282.png

更多web前端知识,请查阅 HTML中文网 !!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值