• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > jQuery遍历节点方法汇总(推荐)

jQuery遍历节点方法汇总(推荐)

作者: 字体:[增加 减小] 来源:互联网

通过本文主要向大家介绍了jquery,遍历节点方法,jquery,遍历,节点等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

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遍历节点方法汇总(推荐),希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 基于jQuery对象和DOM对象和字符串之间的转化实例
  • jquery+css实现简单的图片轮播效果
  • 使用jQuery实现鼠标点击左右按钮滑动切换
  • jQuery实现上传图片前预览效果功能
  • jQuery初级教程之网站品牌列表效果
  • 基于jquery实现多选下拉列表
  • jQuery接受后台传递的List的实例详解
  • 详解jquery选择器的原理
  • jQuery上传插件webupload使用方法
  • 关于jquery form表单序列化的注意事项详解

相关文章

  • 推荐8款jQuery轻量级树形Tree插件
  • jquery tab标签页的制作
  • jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
  • jquery插件珍藏(图片局部放大/信息提示框)
  • jquery中each遍历对象和数组示例
  • jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
  • 文件上传的几个示例分享【推荐】
  • 用Jquery.load载入页面实现局部刷新
  • jquery实现图片灯箱明暗的遮罩效果
  • jQuery中clone()函数实现表单中增加和减少输入项

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 基于jquery固定于顶部的导航响应浏览器滚动条事件
    • jQuery的学习步骤
    • jquery的父、子、兄弟节点查找,节点的子节点循环方法
    • jQuery Ajax全解析
    • Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
    • jQuery获取浏览器中的分辨率实现代码
    • JQuery入门——用映射方式绑定不同事件应用示例
    • jquery easyui validatebox remote的使用详解
    • jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
    • jquery利用命名空间移除绑定事件的方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有