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 相关文章推荐
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
jquery图片放大镜效果
Jun 23 jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
jquery ztree实现右键收藏功能
Nov 20 jQuery
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 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
ftp类(example.php)
2006/10/09 PHP
php根据日期显示所在星座的方法
2015/07/13 PHP
PHP环境搭建的详细步骤
2016/06/30 PHP
PHP实现的文件上传类与用法详解
2017/07/05 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
php命名空间设计思想、用法与缺点分析
2019/07/17 PHP
javascript 动态生成私有变量访问器
2009/12/06 Javascript
Jquery知识点三 jquery表单对象操作
2011/01/17 Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
2012/05/24 Javascript
jquery 插件开发 extjs中的extend用法小结
2013/01/04 Javascript
将form表单中的元素转换成对象的方法适用表单提交
2014/05/02 Javascript
DOM节点深度克隆函数cloneNode()用法实例
2015/01/12 Javascript
iframe中子父类窗口调用JS的方法及注意事项
2015/08/25 Javascript
jQuery实现美观的多级动画效果菜单代码
2015/09/06 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
2016/12/04 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
2017/12/26 Javascript
bing Map 在vue项目中的使用详解
2018/04/09 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
2018/06/28 Javascript
在vue中解决提示警告 for循环报错的方法
2018/09/28 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
2018/11/11 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
2019/08/15 Javascript
[02:36]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma 选手采访
2021/03/11 DOTA
Python常用模块介绍
2014/11/21 Python
python中PIL安装简单教程
2016/04/21 Python
pytorch中交叉熵损失(nn.CrossEntropyLoss())的计算过程详解
2020/01/02 Python
Python运行提示缺少模块问题解决方案
2020/04/02 Python
python如何变换环境
2020/07/21 Python
美国最受欢迎的童装品牌之一:The Children’s Place
2016/07/23 全球购物
ROSEFIELD手表荷兰官方网上商店:北欧极简设计女士腕表品牌
2018/01/24 全球购物
客服部工作职责范本
2014/02/14 职场文书
门店业绩提升方案
2014/06/08 职场文书
2015新员工试用期工作总结
2014/12/12 职场文书
留学推荐信(中英文版)
2015/03/26 职场文书
Pandas-DataFrame知识点汇总
2022/03/16 Python
「月刊Comic Alive」2022年5月号封面公开
2022/03/21 日漫