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 ui sortable拖拽后保存位置
Apr 27 jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 jQuery
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
jQuery解析json格式数据示例
Sep 01 jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
JQuery获得内容和属性方法解析
May 30 jQuery
jquery插件实现代码雨特效
Apr 24 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执行速度全攻略(下)
2006/10/09 PHP
PHP 采集程序 常用函数
2008/12/18 PHP
浅析PHP递归函数返回值使用方法
2013/02/18 PHP
PHP清除数组中所有字符串两端空格的方法
2014/10/20 PHP
PHP编程中尝试程序并发的几种方式总结
2016/03/21 PHP
PHP小偷程序的设计与实现方法详解
2016/10/15 PHP
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
Zend Framework入门应用实例详解
2016/12/11 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
基于jquery的checkbox下拉框插件代码
2010/06/25 Javascript
javascript返回顶部效果(自写代码)
2013/01/06 Javascript
js中数组排序sort方法的原理分析
2014/11/20 Javascript
jquery通过closest选择器修改上级元素的方法
2015/03/17 Javascript
jQuery实现首页顶部可伸缩广告特效代码
2015/04/15 Javascript
深入浅出理解javaScript原型链
2015/05/09 Javascript
coffeescript使用的方式汇总
2015/08/05 Javascript
js获取url传值的方法
2015/12/18 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
2016/02/17 Javascript
基于javascript html5实现多文件上传
2016/03/03 Javascript
JavaScript接口的实现三种方式(推荐)
2016/06/14 Javascript
Bootstrap轮播插件简单使用方法介绍
2016/06/21 Javascript
深究AngularJS之ui-router详解
2017/06/13 Javascript
JS获取数组中出现次数最多及第二多元素的方法
2017/10/27 Javascript
Python中使用glob和rmtree删除目录子目录及所有文件的例子
2014/11/21 Python
python直接访问私有属性的简单方法
2016/07/25 Python
python实现简单登陆流程的方法
2018/04/22 Python
详解python 注释、变量、类型
2018/08/10 Python
Pytorch Tensor的统计属性实例讲解
2019/12/30 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
Python实现Canny及Hough算法代码实例解析
2020/08/06 Python
暑假实习求职信范文
2013/09/22 职场文书
武当山导游词
2015/02/03 职场文书
红色电影观后感
2015/06/18 职场文书
golang fmt格式“占位符”的实例用法详解
2021/07/04 Golang
Python Django获取URL中的数据详解
2021/11/01 Python
python区块链实现简版工作量证明
2022/05/25 Python