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 Masonry瀑布流布局神器使用详解
May 25 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
jQuery plugin animsition使用小结
Sep 14 jQuery
jQuery中extend函数简单用法示例
Oct 11 jQuery
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
浅谈JS和jQuery的区别
Mar 27 jQuery
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
Jquery让form表单异步提交代码实现
Nov 14 jQuery
jQuery实现弹出层效果
Dec 10 jQuery
jquery实现直播视频弹幕效果
Feb 25 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 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
2011/03/28 PHP
PHP fgetcsv 定义和用法(附windows与linux下兼容问题)
2012/05/29 PHP
PHP中fwrite与file_put_contents性能测试代码
2013/08/02 PHP
PHP超牛逼无限极分类生成树方法
2015/05/11 PHP
php解决安全问题的方法实例
2019/09/19 PHP
一段利用WSH修改和查看IP配置的代码
2008/05/11 Javascript
自己的js工具 Event封装
2009/08/21 Javascript
javascript new一个对象的实质
2010/01/07 Javascript
用JQuery调用Session的实现代码
2010/10/29 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
2014/11/08 Javascript
封装了jQuery的Ajax请求全局配置
2015/02/05 Javascript
JS动态修改iframe高度和宽度的方法
2015/04/01 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
JQuery 动态生成Table表格实例代码
2016/12/02 Javascript
JS加密插件CryptoJS实现AES加密操作示例
2018/08/16 Javascript
vue弹窗插件实战代码
2018/09/08 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
详解JavaScript修改注册表的方法
2020/01/05 Javascript
Js跳出两级循环方法代码实例
2020/09/22 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
2021/01/30 Vue.js
[01:38]DOTA2 2015国际邀请赛中国区预选赛 Showopen
2015/06/01 DOTA
[02:17]快乐加倍!DOTA2食人魔魔法师至宝+迎霜节活动上线
2019/12/22 DOTA
Python最基本的数据类型以及对元组的介绍
2015/04/14 Python
对python程序内存泄漏调试的记录
2018/06/11 Python
python用fsolve、leastsq对非线性方程组求解
2018/12/15 Python
Python WEB应用部署的实现方法
2019/01/02 Python
Python面向对象程序设计示例小结
2019/01/30 Python
详解Python 定时框架 Apscheduler原理及安装过程
2019/06/14 Python
浅谈django2.0 ForeignKey参数的变化
2019/08/06 Python
python GUI库图形界面开发之PyQt5选项卡控件QTabWidget详细使用方法与实例
2020/03/01 Python
人事档案接收函
2014/01/12 职场文书
如何写好优秀的创业计划书
2014/01/30 职场文书
夜不归宿检讨书
2014/02/25 职场文书
领导接待方案
2014/03/13 职场文书
小学教师年度个人总结
2015/02/05 职场文书
祝福语集锦:送给闺蜜的生日祝福语
2019/10/08 职场文书