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插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
使用jQuery实现购物车结算功能
Aug 15 jQuery
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
jquery实现搜索框功能实例详解
Jul 23 jQuery
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
jquery插件实现图片悬浮
Apr 16 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 URL编码解码函数代码
2009/03/10 PHP
PHP register_shutdown_function函数的深入解析
2013/06/03 PHP
php弹出对话框实现重定向代码
2014/01/23 PHP
PHP工程师VIM配置分享
2015/12/15 PHP
PHP单例模式是什么 php实现单例模式的方法
2016/05/14 PHP
php+jquery+html实现点击不刷新加载更多的实例代码
2016/08/12 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
Laravel5.7 数据库操作迁移的实现方法
2019/04/12 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
thinkphp5.1 框架钩子和行为用法实例分析
2020/05/25 PHP
JavaScript 判断浏览器是否支持SVG的代码
2013/03/21 Javascript
JavaScript匿名函数与委托使用示例
2014/07/22 Javascript
js创建对象的区别示例介绍
2014/07/24 Javascript
jQuery中用dom操作替代正则表达式
2014/12/29 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
2015/08/25 Javascript
Bootstrap和Java分页实例第一篇
2016/12/23 Javascript
Bootstrap超大屏幕的实现代码
2017/03/22 Javascript
js案例之鼠标跟随jquery版(实例讲解)
2017/07/21 jQuery
JavaScript继承定义与用法实践分析
2018/05/28 Javascript
利用React Router4实现的服务端直出渲染(SSR)
2019/01/07 Javascript
vue+element实现表单校验功能
2019/05/20 Javascript
vue实现按需加载组件及异步组件功能
2019/05/27 Javascript
Vue中错误图片的处理的实现代码
2019/11/07 Javascript
Vue如何实现验证码输入交互
2020/12/07 Vue.js
[01:25]DOTA2自定义游戏灵园鬼域等你踏足
2015/10/30 DOTA
Python中使用tarfile压缩、解压tar归档文件示例
2015/04/05 Python
python生成随机图形验证码详解
2017/11/08 Python
Python3实现发送QQ邮件功能(附件)
2020/12/23 Python
深入理解python中sort()与sorted()的区别
2018/08/29 Python
Python中IP地址处理IPy模块的方法
2019/08/16 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
NUK奶瓶美国官网:NUK美国
2016/09/26 全球购物
北京某公司的.net笔试题
2014/03/20 面试题
公司总经理任命书
2014/06/05 职场文书
党员批评与自我批评
2014/10/15 职场文书
2017公司年会主持人开幕词
2016/03/04 职场文书