jQuery获取父节点、子节点、兄弟节点

于 2023-04-10 10:31:46 发布
阅读量550 收藏
点赞数
分类专栏： 前端 文章标签： javascript jquery 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QQ727338622/article/details/130054316
版权
jQuery是一个简洁的JavaScript框架，专注于简化HTML文档操作、事件处理、动画和Ajax交互。尽管在MVVM框架流行下使用减少，但其低学习曲线和丰富的功能仍值得前端开发者学习。jQuery提供了如链式语法、灵活的CSS选择器以及一系列的DOM操作方法，包括查找、操作和动画功能。
摘要由CSDN通过智能技术生成

介绍

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库(框架)于2006年1月由John Resig发布。

jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展。

现状

jQuery目前已经趋于下滑，随着各大浏览器趋于标准化，浏览器兼容问题已经越来越不是问题了。随着MVVM(Vue、React…)框架的普及，项目不再会大量直接操作DOM(虚拟DOM)。

不过，它的学习门槛低，学习成本也比较低，前端还是建议学一下。

功能

  • HTML 元素选取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函数
  • JavaScript 特效和动画
  • HTML DOM 遍历和修改
  • AJAX
  • Utilities
    提示： 除此之外，jQuery 还提供了大量的插件。

节点查找

jQuery的父节点查找方法

$(selector).parent(selector)：获取父节点 
$(selector).parentNode：以node[]的形式存放父节点，如果没有父节点，则返回空数组 
$(selector).parents(selector)：获取祖先元素

jQuery的兄弟节点查找方法

$(selector).prev()：返回被选元素的前一个同级元素 
$(selector).previousSibling()：获取上一个兄弟节点 
$(selector).prevAll()：获取之前所用的兄弟节点 
$(selector).next() :获取被选元素的后一个同级元素 
$(selector).nextSibling()：获取下一个兄弟节点 
$(selector).nextAll()：获取之后所有的兄弟节点 
$(selector).siblings()：获取所有的兄弟节点

jQuery的子节点查找方法

$(selector).children()：获取所有直接子节点 
$(selector).childNodes()：以node[]的形式存放子节点，如果没有子节点，则返回空数组 
$(selector).firstChild()：获取第一个子节点 
$(selector).lastChild()：获取最后一个子节点 
$(selector).contents()：获取包含的所有内容，包括空文本 
$(selector).removeChild(selector)：删除并返回指定的子节点 
$(selector).replaceChild(selector)：替换并返回指定的子节点
码农桃子
关注
专栏目录
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
10-22
在进行DOM元素操作时，经常需要获取元素的父节点、子节点和兄弟节点。本文将详细介绍如何使用jQuery获取这些节点，并通过实例来分析相关技巧。 父元素节点的获取：在jQuery中，可以使用多种方法来获取父节点，包括...
(jquery操作session方法)(jQuery设置标签内容和属性)
m0_46652188的博客
07-22 2801
一、jQuery操作session方法 语法： 添加数据 $.session.set(‘key’, ‘value’) 删除数据 $.session.remove(‘key’); 获取数据 $.session.get(‘key’); 清除数据 $.session.clear(); 二、jQuery设置标签内容和属性 设置内容 - text()、html() 以及 val() $("#btn1").click(function(){ $("#test1").text("Hello world!"); });
js|jq获取兄弟节点,父节点,子节点
aiyulove201314的博客
08-19 3600
08.19自我总结 js|jq获取兄弟节点,父节点,子节点 一.js var parent = test.parentNode; // 父节点 var chils = test.childNodes; // 全部子节点 var first = test.firstChild; // 第一个子节点 var last = test.lastChile; // 最后一个子节点　 var pre...
jquery 常用元素操作 --- 遍历元素，获取元素父节点,子节点,兄弟节点，查找元素，插入元素
qq_29327729的博客
06-15 440
$("#test1").parent(); // 父节点 $("#test1").parents(); // 全部父节点（包含多个层级） $("#test1").parents(".mui-content");//返回class为mui-content的父节点 $("#test1").children(); // 全部子节点 $("#test1").children("#test1"); //返回id为test1的子节点 $("#test1").contents(); // 返回id为test里面的所有内容
Jquery 获取元素（父节点、子节点、兄弟节点）方法
炉火纯青
11-11 2819
$(this).parent(); // 父节点 $(this).parents(); // 全部父节点 $(this).children(); // 全部子节点 $(this).find(); // 返回父元素中的子元素 $(this).contents(); // 返回元素里面的所有内容，包括节点和文本 $(this).prev(); // 上一个兄弟节点 $(this).prevAll(); // 之前所有兄弟节点 $(this).next(); // 下一个兄弟节点 $(this).next..
jquery的父、子、兄弟节点查找,节点的子节点循环方法
01-19
jQuery.parent(expr) //找父元素 jQuery.parents(expr) //找到所有祖先元素，不限于父元素 ...jQuery.prev() //查找上一个兄弟节点，不是所有的兄弟节点 jQuery.prevAll() //查找所有之前的兄弟节点 jQuery.next
JS获取父节点方法
10-29
通过临近节点获取元素，可以使用`neighbourNode.previousSibling`和`neighbourNode.nextSibling`，分别获取当前元素的前一个和后一个兄弟节点，同样支持递归。 最后，还有`parentObj.getElementsByTagName(tagName)...
使用jQuery获取父级节点、兄弟节点、子级节点的方法
matengzz的专栏
10-15 2万+
一、jQuery的父节点查找方法
Jquery 父节点、子节点处理
weixin_35795555的博客
04-12 641
要处理的是简单的两个单选按钮的状态切换 知识点 把html传进来的this，转换为Jquery对象 // 在JSP 页面 <div style="float: right;margin-right: 20px;"> <button class="" onclick="onClickSiteType(this)"> 城区网点 </button> <button class="selected" onclick="onClickSiteTy
使用jquery获取父元素或父节点的方法
03-20 2583
jquery获取父元素方法比较多，比如parent()，parents()，closest()这些都能帮你实现查找父元素或节点，下面我们来一一讲解： 先举个例子， 1.<ul class="parent1"> 　　2.<li><a href="#" id="item1">jquery获取父节点</a></li> ...
jquery 获取元素(父节点,子节点,兄弟节点)
millet_handsomes的博客
05-10 2万+
费话不多说,直接上代码 jquery 获取元素 $("#test1").parent(); // 父节点 $("#test1").parents(); // 全部父节点 $("#test1").parents(".mui-content");//返回class为mui-content的父节点 $("#test").children(); // 全部子节点 $("#test").children(...
Jquery结点遍历
叫我安森
08-02 870
jQuery.parent(expr) 找父亲节点，可以传入expr进行过滤，比如$("span").parent()或者$("span").parent(".class") jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素 jQuery.children(expr).返回所有子节点，这个方法只会返回直接的孩子节点，
jquery 获取父节点
Dastan2k的博客
11-12 294
jquery 获取父节点 $('.class').parents(); //获取所有父节点 $('.class').parents('.tree'); // 获取所有父节点中的其中一个 $('.class').parents().last(); //获取所有父节点中的最后一个
6-2、选择器
鸵鸟
09-06 952
选择器
jQuery获取父元素及父节点的方法小结
thlzjfefe的博客
02-25 7850
这篇文章主要介绍了jQuery获取父元素及父节点的方法,结合实例形式总结分析了jQuery针对父元素及父节点操作的常用技巧,需要的朋友可以参考下 本文实例总结了jQuery获取父元素及父节点的方法。分享给大家供大家参考，具体如下： jquery获取父元素方法比较多，比如parent()，parents()，closest()这些都能帮你实现查找父元素或节点，下面我们来一一讲解： 先举个例子， 1 2 3 4 <ul class="paren
Jquery获取当前元素父元素
热门推荐
cs3235301的博客
09-21 6万+
&lt;html&gt; &lt;body&gt; &lt;div id="p1"&gt;     &lt;div id="p2"&gt;         &lt;table&gt;             &lt;tr&gt;                 &lt;td&gt;&lt;/td&gt;                 &am
js jquery 获取元素(父节点,子节点,兄弟节点),元素筛选
Mr_Yanghao的博客
05-29 3655
$("#test1").parent(); // 父节点 $("#test1").parents(); // 全部父节点 $("#test1").parents(".mui-content"); $("#test").children(); // 全部子节点 $("#test").children("#test1"); $("#test").contents...
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
骆小胖~
09-12 933
&lt;div&gt;&lt;/div&gt; &lt;br&gt; &lt;div&gt;&lt;/div&gt; &lt;br&gt; &lt;div&gt;&lt;/div&gt; &lt;br&gt; &lt;/div&gt; function dom(){ var a = document
jQuery 获取父节点的所有兄弟节点的子节点
最新发布
06-09
可以使用 `parent()` 和 `siblings()` 这两个 jQuery 的函数来实现获取父节点所有兄弟节点的子节点的操作。 具体实现可以参考以下代码： ```javascript $(document).ready(function() { $('.parent').siblings()....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值