`
huangyongxing310
  • 浏览: 498733 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

jQuery 遍历 基础

阅读更多
jQuery 遍历

jQuery 遍历,意为“移动”,用于根据其相对于其他元素的关系来“查找”(或选取)HTML 元素。
以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止。





<div> 元素是 <ul> 的父元素,同时是其中所有内容的祖先。
<ul> 元素是 <li> 元素的父元素,同时是 <div> 的子元素
左边的 <li> 元素是 <span> 的父元素,<ul> 的子元素,同时是 <div> 的后代。
<span> 元素是 <li> 的子元素,同时是 <ul> 和 <div> 的后代。
两个 <li> 元素是同胞(拥有相同的父元素)。
右边的 <li> 元素是 <b> 的父元素,<ul> 的子元素,同时是 <div> 的后代。
<b> 元素是右边的 <li> 的子元素,同时是 <ul> 和 <div> 的后代。


向上遍历 DOM 树
parent() 方法返回被选元素的直接父元素。
parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

实例:
$("span").parentsUntil("div"); //返回介于 <span> 与 <div> 元素之间的所有祖先元素



向下遍历 DOM 树
children() 方法返回被选元素的所有直接子元素。
find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。



在 DOM 树中水平遍历
siblings() 方法返回被选元素的所有同胞元素。
next() 方法返回被选元素的下一个同胞元素。
nextAll() 方法返回被选元素的所有跟随的同胞元素。
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
//$("h2").nextUntil("h6");

prev() //与next方向相反
prevAll()
prevUntil()



jQuery 遍历 - 过滤
first() 方法返回被选元素的首个元素。
//$("div p").first();//第一个<div> 元素内部的第一个 <p> 元素(要符合两个条件)

last() 方法返回被选元素的最后一个元素。
// $("div p").last();//最后一个 <div> 元素中的最后一个 <p> 元素(要符合两个条件)

eq() 方法返回被选元素中带有指定索引号的元素。首个元素的索引号是 0 而不是 1。
//$("p").eq(1);

filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。
//$("p").filter(".intro");

not() 方法返回不匹配标准的所有元素。 //$("p").not(".intro");



参考原文:http://www.w3school.com.cn/jquery
  • 大小: 2 KB
分享到:
评论

相关推荐

    jQuery 遍历 – 祖先

    在jQuery库中,遍历DOM树是常见的操作,特别是当你需要查找或操作元素的祖先时。"祖先"在这个上下文中指的是元素的父级、父级的父级,以及更高级别的上级元素,直至文档的根节点`&lt;html&gt;`。jQuery提供了几个方便的...

    jQuery 遍历map()方法详解

    由于返回值是 jQuery 封装的数组,使用 get() 来处理返回的对象以得到基础的数组 四、案例: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=utf-8 /&gt; &lt;title&gt;jquery map&lt;/title&gt; ...

    JQuery遍历的知识

    了解了这些基础知识后,你可以进一步探索jQuery的其他功能,如选择器、事件处理、动画效果以及Ajax操作。jQuery的强大之处在于它的灵活性和易用性,使得开发者能够更专注于业务逻辑,而不是底层的JavaScript细节。...

    jquery遍历input取得input的name

    ### jQuery遍历input获取name属性值详解 在前端开发领域,jQuery因其简洁、高效的特点而备受开发者喜爱。本文将深入探讨如何使用jQuery遍历页面中的`&lt;input&gt;`元素,并从中提取`name`属性的值。这是一项非常实用的...

    jQuery遍历json的方法分析

    本文将详细介绍jQuery遍历JSON数据的方法,并结合实例来分析相关技巧。 首先,JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。它基于JavaScript的...

    JQuery遍历元素的父辈和祖先的方法

    接下来,我们将探讨如何使用JQuery遍历元素的父辈和祖先。 1. parent()方法 parent()方法用于获取当前选中元素的直接父辈元素。这是遍历父辈元素中最基础的方法。例如,在给定的代码片段中,通过点击一个按钮,使用...

    jquery遍历select元素(实例讲解)

    本文将深入探讨如何使用jQuery来遍历`select`元素,并通过实例代码进行讲解。 `select`元素在HTML中通常用于创建下拉列表,允许用户在多个选项中做出选择。在jQuery中,遍历`select`元素及其子`option`元素,可以...

    jQuery遍历json的方法(推荐)

    首先,文档标题提到了“jQuery遍历json的方法”,这里指的是使用jQuery来处理从服务器接收的JSON格式数据。JSON是JavaScript Object Notation的缩写,它是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于...

    jquery基础教程中文版2015

    jQuery是一款强大的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。2015年发布的这个基础教程,旨在帮助初学者快速掌握jQuery的核心概念和技术。 一、jQuery简介 jQuery由John Resig在...

    jQuery简单实现遍历单选框的方法

    通过本例,开发者可以掌握使用jQuery遍历特定组单选框、判断选中状态,并将结果显示在输入框中的方法。同时,文档提及的相关链接也为开发者提供了拓展知识的途径,这对于提升使用jQuery开发复杂表单的能力有着重要...

    JS 遍历 json 和 JQuery 遍历json操作完整示例

    在本篇文章中,我们将深入探讨如何使用 JavaScript 和 jQuery 来遍历和操作 JSON 对象。 首先,我们来看一下如何使用 JavaScript 原生语法来遍历 JSON 对象。在给出的示例中,我们创建了一个简单的 JSON 对象: ``...

    JQuery遍历DOM节点的方法

    在使用JQuery进行DOM操作时,遍历节点是一个基础且重要的技能。通过上述方法,开发者可以灵活地获取元素的子元素、同辈元素以及进行复杂的DOM结构遍历。需要注意的是,正确使用这些遍历方法,能够有效地提高代码的...

    Javascript Jquery 遍历Json的实现代码

    在JavaScript和jQuery中,遍历JSON对象是一种常见的操作,特别是在处理服务器返回的数据或者构建动态页面时。本篇文章将深入探讨如何使用JavaScript和jQuery来遍历和处理JSON数据。 首先,让我们了解一下JSON...

    浅析jQuery 遍历函数,javascript中的each遍历

    这是一个很好的实际应用例子,展示了如何在实际页面中应用jQuery遍历。 总的来说,jQuery的遍历函数提供了非常强大的机制来操作HTML文档,无论是在处理数组数据还是操作DOM元素时都非常方便。掌握这些遍历方法,...

    JS Jquery 遍历,筛选页面元素 自动完成(实现代码)

    总结来说,文章提供了使用JavaScript和JQuery进行元素遍历和筛选的一个基础示例,并解释了实现自动完成功能的思路和方法。通过学习这些知识点,前端开发者可以更好地掌握页面交互的高级技巧,提升用户界面的友好性和...

    JS与jQuery遍历Table所有单元格内容的方法

    在JavaScript和jQuery中遍历Table的所有单元格内容是常见的任务,尤其在处理表格数据时非常有用。下面将详细讲解这两种方法。 首先,我们来看纯JavaScript的实现方式: ```javascript function GetInfoFromTable...

    jQuery基础.pptx

    jQuery(3.4.1)基础 1 jQuery简介 jQuery优势 jQuery安装 jQuery语法 1、jQuery简介 1.1 学习jQuery之前,需要以下基础知识 HTML CSS JavaScript 1、jQuery简介 1.2 什么是jQuery? jQuery是一个JavaScript函数库 轻量...

    jQuery遍历DOM节点操作之filter()方法详解

    在深入了解jQuery库提供的filter()方法之前,我们先要明确DOM节点遍历的概念。DOM(文档对象模型)是HTML或XML文档的编程接口,允许脚本和程序动态访问和更新文档的结构、样式和内容。在进行网页开发时,经常会需要...

Global site tag (gtag.js) - Google Analytics