jQuery遍历节点方法汇总(推荐)


Posted in jQuery onMay 13, 2017

1.children()方法:$('div').children()---遍历查找div元素的所有子元素节点

<p>Hello</p>
<div>
  <span>Hello Again</span>
  <p class="box">您好!</p>
</div>
<p>And Again</p>
<script type="text/javascript">
  $('div').children();   //<span>Hello Again</span><p class="box">您好!</p>
  $('div').children('.box')  //<p class="box">您好!</p>
</script>

2.next()方法:$('div').next() --- 查找div元素后相邻的同级元素但非所有同级元素

[相关方法]

(1)nextAll()方法:$('div').nextAll() ---- 查找div之后的所有同级元素

(2)nextUntil()方法:$('div').nextUntil('p')----查找div之后直到p元素的所有同级元素

<p>Hello</p>
<p class="box">Hello Again</p>
<div>
  <span>And Again</span>
</div>
<script type="text/javascript">
  $('p').next();   //<p>Hello Again</p><div><span>And Again</span></div>
  $('p').next('.box');  //<p class="box">Hello Again</p>
</script>

3.prev()方法:$('div').prev() ---- 查找div之前相邻的同级元素

[相关方法有]

(1)prevAll()方法:$('div').prevAll() ---- 查找div之前的所有同级元素

(2)prevUntil()方法:$('div').prevUntil('p') --- 查找div之前直到p元素的所有元素

<p>Hello</p>
<div>
  <span>Hello Again</span>
</div>
<p>And Again</p>
<script type="text/javascript">
  $('p').prev();  //<div><span>Hello Again</span></div>
</script>

4.siblings()方法:$('div').siblings()---- 查找div前后所有的同级元素

5.find()方法:$('div').find('span') ---- 查找div元素内子元素并且是span元素

6.eq()方法:$('div').eq(1) --- 查找第二个div元素(索引下标从0开始)

7.first()方法:$('li').first() --- 获取第一个li元素

8.last()方法:$('li').last() --- 获取最后一个li元素

9.filter()方法:$('div').filter('.box') --- 获取类名为box的div元素

10.is()方法:$('.box').is('div')  ---- 判断.box是否是div元素

11.map()方法:$('div').map(callback) --- 将每个div执行callback函数

例:遍历input元素获取其value值以“,”分隔添加到p元素内后面

<p><b>Values: </b></p>
<form>
 <input type="text" name="name" value="John"/>
 <input type="text" name="password" value="password"/>
 <input type="text" name="url" value="http://ejohn.org/"/>
</form>
<script type="text/javascript">
  $("p").append( $("input").map(function(){
     return $(this).val();
    }).get().join(", ") );  //<p>John, password, http://ejohn.org/</p> 
</script>

12.hasClass()方法:$('div').hasClass(‘box') ---- 查找含有类名为box的div

13.has()方法:$('div').has('span') ---- 查找含包有span元素的div元素

14.not()方法:$('div').not('span') ---- 查找不包含有span元素的div元素

15.slice()方法:$('p').slice(0,2) ---- 查找第1个p元素到第3个p元素

16.offsetParent()方法:$('p').offsetParent() --- 查找p元素的第一个被定位的祖先元素

17.parent()方法:$('p').parent() ---- 返回包含p元素的唯一父节点的元素集合

18.parents()方法:$('p').parent() ---- 返回包含p元素的所有祖先节点(不包括根节点)

19.parentUntil()方法:$('p').parentUntil('#box') ---- 查找p元素的祖先级元素直到#box为止

20.contents()方法:$('div').contents() --- 返回div元素内的所有子节点(包括文本节点)

21.end()方法:$('div').find('span').end() ---- 将语句的主体变回前一次状态即:查找到span元素之后焦点返回到div元素

<div>
  <span>Hello</span>,
  how are you?
</div>
<script type="text/javascript">
  $('div').find('span').addClass('test').end().attr('title','title1');
  //span添加class=test;div添加title=title1
</script>

以上所述是小编给大家介绍的jQuery遍历节点方法汇总(推荐),希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

jQuery 相关文章推荐
Jquery-data的三种用法
Apr 18 jQuery
jquery图片放大镜效果
Jun 23 jQuery
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
jquery插件开发模式实例详解
Jul 20 jQuery
jQuery手风琴的简单制作
May 12 #jQuery
jQuery.ajax向后台传递数组问题的解决方法
May 12 #jQuery
jQuery遮罩层实例讲解
May 11 #jQuery
jQuery zTree树插件动态加载实例代码
May 11 #jQuery
jQuery实现的简单在线计算器功能
May 11 #jQuery
jQuery+PHP+Mysql实现抽奖程序
Apr 12 #jQuery
JQuery实现定时刷新功能代码
May 09 #jQuery
You might like
php adodb介绍
2009/03/19 PHP
php文章内容分页并生成相应的htm静态页面代码
2010/06/07 PHP
探讨PHP JSON中文乱码的解决方法详解
2013/06/06 PHP
php计算指定目录下文件占用空间的方法
2015/03/13 PHP
PHP简单实现HTTP和HTTPS跨域共享session解决办法
2015/05/27 PHP
javascript 闭包疑问
2010/12/30 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
2011/01/27 Javascript
清除div下面的所有标签的方法
2014/02/17 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
2014/06/12 Javascript
javascript 中__proto__和prototype详解
2014/11/25 Javascript
JQuery简单实现锚点链接的平滑滚动
2015/05/03 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
2015/09/06 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
2016/11/16 Javascript
javascript实现的图片预览功能
2017/03/25 Javascript
JQuery元素快速查找与操作
2018/04/22 jQuery
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
微信小程序云开发之使用云存储
2019/05/17 Javascript
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
[04:47]DOTA2-潍坊风行电子俱乐部探秘
2014/08/08 DOTA
[01:38]2018DOTA2亚洲邀请赛主赛事第二日现场采访 神秘商人痛陈生计不易
2018/04/05 DOTA
python psutil库安装教程
2018/03/19 Python
python3+PyQt5实现支持多线程的页面索引器应用程序
2018/04/20 Python
Python 从一个文件中调用另一个文件的类方法
2019/01/10 Python
Python:type、object、class与内置类型实例
2019/12/25 Python
python统计字符的个数代码实例
2020/02/07 Python
芬兰攀岩、山地运动和户外活动用品购物网站:Bergfreunde
2016/10/06 全球购物
职高毕业生自我鉴定
2013/10/21 职场文书
咖啡蛋糕店创业计划书
2014/01/28 职场文书
药品采购员岗位职责
2014/02/08 职场文书
春节联欢晚会主持词
2014/03/24 职场文书
《分一分》教学反思
2014/04/13 职场文书
525心理活动总结
2014/07/04 职场文书
医生辞职信范文
2015/03/02 职场文书
离婚案件答辩状
2015/05/22 职场文书
Python实现科学占卜 让视频自动打码
2022/04/09 Python
SQL中的连接查询详解
2022/06/21 SQL Server