jquery遍历节点的方法有哪些

JQ遍历节点的方法:1、children();2、next();3、prev();4、siblings();5、find();6、eq();7、first();8、last();9、filter();10、is();11、map()等等。

jquery遍历节点的方法有哪些

本教程操作环境:windows7系统、jquery1.10.2版本、Dell G3电脑。

jquery遍历节点的方法

1、children()方法:$(‘p’).children()—遍历查找p元素的所有子元素节点

Hello

    Hello Again    

您好!

And Again

$('div').children(); //Hello Again

您好! $('div').children('.box') //

您好!

登录后复制

2、next()方法:$(‘p’).next() — 查找p元素后相邻的同级元素但非所有同级元素

  [相关方法]

  (1)nextAll()方法:$(‘p’).nextAll() —- 查找p之后的所有同级元素

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

Hello

Hello Again

    And Again
$('p').next(); //

Hello Again

And Again $('p').next('.box'); //

Hello Again

登录后复制

3、prev()方法:$(‘p’).prev() —- 查找p之前相邻的同级元素

  [相关方法有]

  (1)prevAll()方法:$(‘p’).prevAll() —- 查找p之前的所有同级元素

  (2)prevUntil()方法:$(‘p’).prevUntil(‘p’) — 查找p之前直到p元素的所有元素

Hello

    Hello Again

And Again

$('p').prev(); //
Hello Again

登录后复制

4、siblings()方法:$(‘p’).siblings()—- 查找p前后所有的同级元素

5、find()方法:$(‘p’).find(‘span’) —- 查找p元素内子元素并且是span元素

6、eq()方法:$(‘p’).eq(1) — 查找第二个p元素(索引下标从0开始)

7、first()方法:$(‘li’).first() — 获取第一个li元素

8、last()方法:$(‘li’).last() — 获取最后一个li元素

9、filter()方法:$(‘p’).filter(‘.box’) — 获取类名为box的p元素

10、is()方法:$(‘.box’).is(‘p’)  —- 判断.box是否是p元素

11、map()方法:$(‘p’).map(callback) — 将每个p执行callback函数

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

Values: 

登录后复制 $(“p”).append( $(“input”).map(function(){ return $(this).val(); }).get().join(“, “) ); //

John, password, http://ejohn.org/

12、hasClass()方法:$(‘p’).hasClass(‘box’) —- 查找含有类名为box的p

13、has()方法:$(‘p’).has(‘span’) —- 查找含包有span元素的p元素

14、not()方法:$(‘p’).not(‘span’) —- 查找不包含有span元素的p元素

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()方法:$(‘p’).contents() — 返回p元素内的所有子节点(包括文本节点)

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

    Hello,    how are you?
  $('div').find('span').addClass('test').end().attr('title','title1'); //span添加class=test;div添加title=title1

登录后复制

相关视频教程推荐:jQuery教程(视频)

以上就是jquery遍历节点的方法有哪些的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2944640.html

(0)
上一篇 2025年3月11日 22:26:21
下一篇 2025年3月6日 14:52:56

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • jquery中基本选择器有哪些

    jquery中基本选择器有:1、ID选择器,根据给定的ID匹配一个元素;2、元素选择器,根据给定的元素名匹配所有元素;3、类选择器,根据给定的类匹配元素;4、通配符“*”选择器,可匹配所有元素;5、并集选择器。 本教程操作环境:window…

    2025年3月11日
    200
  • jquery提供常用的ajax方法有哪些

    jquery提供常用的ajax方法有:1、“$.ajax()”方法,用于执行异步HTTP(Ajax)请求;2、“$.get()”方法;3、“$.post()”方法;4、“$.getJSON()”方法;5、“serialize()”方法等。 …

    2025年3月11日 编程技术
    200
  • jquery的gt是什么

    jquery中的gt是一个过滤选择器,用于获取所有大于给定索引(index)值的元素,语法“$(“:gt(index)”)”;该选择器常用会与其他选择器一起使用,选取指定组合中特定序号之后的元素。 本教程操作环境:w…

    2025年3月11日
    200
  • jquery中data()和attr()的区别是什么

    区别:“$.attr()”每次都从DOM元素中取属性的值,即和视图中标签内的属性值保持一致;而“$.data()”是从Jquery对象中取值,由于对象属性值保存在内存中,和视图中的属性值不一定一致。 本教程操作环境:windows7系统、j…

    2025年3月11日
    200
  • Jquery中PI是什么意思

    在Jquery中,PI指的就是“π”,即圆的周长和它的直径之比(圆周率),它的值近似为“3.141592653589793”,语法“Math.PI”。 本教程操作环境:windows7系统、jquery1.10.2版本、Dell G3电脑。…

    2025年3月11日
    200
  • jquery的开发工具有哪些

    jquery的开发工具有:1、TestSwarm;2、Minimee;3、Doctor JS;4、remy sharp;5、JavaScript Library Boilerplate;6、JsDoc Toolkit;7、Jasmine等。…

    2025年3月11日
    200
  • jquery读取节点的方法有哪些

    读取节点的方法有:1、“jQuery.parent(expr)”;2、“jQuery.children(expr)”;3、“jQuery.contents()”;4、“jQuery.prev()”;5、“jQuery.next()”等等。 …

    2025年3月11日
    200
  • jquery trim方法可以去除什么符号

    在jquery中,trim()方法可以去除字符串两端的空白符号,包括换行符、空格符和制表符,语法“$.trim(string)”;参数“string”指定需要去除两端空白字符的字符串。 本教程操作环境:windows7系统、jquery1.…

    2025年3月11日
    200
  • jquery怎么查询第一个子节点

    jquery查询第一个子节点的方法:1、通过“$(“#test”).children();”获取全部子节点;2、通过“$.children(‘:first’)”获取子节点的第一个即可。 本文操…

    2025年3月11日
    200
  • jquery ajax有什么好处

    jquery ajax的好处:1、不需要插件支持;2、用户体验好,能在不刷新整个页面的前提下局部更新页面信息,迅速的返回用户操作结果;3、提高Web程序性能;4、减轻服务器和带宽的负担。 本教程操作环境:windows7系统、jquery1…

    2025年3月11日
    200

发表回复

登录后才能评论