使用jQuery选择复杂HTML的遍历函数

  jQuery中10个非常有用的遍历函数

  使用jQuery,可以很容易的选择HTML元素。但有些时候,在HTML结构较为复杂时,提炼我们选择的元素就是一件麻烦的事情。在这篇教程中,我们将探讨十种方法去精炼和扩展我们将要操作的集合。

  HTML

  首先,让我们看看下图所示的简单的页面,通过这个教程我们将选择这些元素。

  div.container是包裹元素;

  div.photo、div.title、div.rating是div.container的直接子级;

  每个div.star是div.rating的子级;

  当div.satr的class为“on”时,它是一个完整的star。


  为什么要遍历?

  “为什么我们要进一步提炼一系列元素,难道是jQuery选择语法不够强大?”

  好,让我们从示例开始。在上面提到的网页中,当一个star被点击时,我们需要给它以及左边的每个star添加class“on”。与此同时,我们要改变所有star父元素的背景颜色,因此,我们的代码如下:

  $(".star").click(function(){

  $(this).addClass("on");

  // 如何选取当前对象的父元素?

  // 如何获得当前star左侧所有的star?

  });

  在第二行,我们得到了我们点击的当前对象。但是,如何得到stars的父级?即div.rating。但是,在一个页面中,有很多div.rating。哪一个是我们想要的?如何获得“this”左边所有的star?

  可喜的是,jQuery允许我们基于这些基层关系,在现存集合的基础上获得新的元素集合。而这些正是遍历函数发挥作用的地方。

  1、children

  这个函数得到一组元素的直接子级。

  在很多情况下会很方便,看看下面这张图:

  开始的时候容器中的star全部被选择;

  给children()传递一个选择表达式将选择结果缩小至选中的star;

  如果chilidren()每接受任何参数,将返回所有直接子级;

  不返回孙级元素。

时间: 2024-11-30 23:46:21

使用jQuery选择复杂HTML的遍历函数的相关文章

jQuery 遍历函数详解

  文章介绍了几个在jQuery中非常有用的遍历函数,遍历函数是做么的方便.当在它们一起使用时,它们将更加强大.也就是说,一个函数的输出是另一个函数的输入,它们是链式的.下面我们就来详细探讨下吧. jQuery 遍历函数包括了用于筛选.查找和串联元素的方法. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 函数 描述 .add() 将元素添加到匹配元素的集合中. .andSelf()

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

jQuery 遍历函数 jQuery 遍历函数包括了用于筛选.查找和串联元素的方法. 函数 描述 .add() 将元素添加到匹配元素的集合中. .andSelf() 把堆栈中之前的元素集添加到当前集合中. .children() 获得匹配元素集合中每个元素的所有子元素. .closest() 从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素. .contents() 获得匹配元素集合中每个元素的子元素,包括文本和注释节点. .each() 对 jQuery 对象进行迭代,为每个匹配元

jquery遍历函数siblings()用法实例_jquery

本文实例讲述了jquery遍历函数siblings()用法.分享给大家供大家参考,具体如下: siblings([expr]) 得到所有匹配元素集合中各个元素的所有兄弟元素集合.返回匹配元素集合 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> &l

jQuery中常用的遍历函数用法实例总结_jquery

本文实例总结了jQuery中常用的遍历函数用法.分享给大家供大家参考.具体如下: 1. children()函数 children()函数用于选取每个匹配元素的子元素,并以jQuery对象的形式返回. 你还可以使用选择器进一步缩小筛选范围,筛选出符合指定选择器的元素. 用法示例如下: // 返回jQuery对象所有匹配元素的标识信息数组 // 每个元素形如:tagName或tagName#id(如果有id的话) function getTagsInfo($doms){ return $doms.

《扩展 jQuery》——第6章 函数插件6.1 定义插件

第6章 函数插件 本章涵盖以下内容: 定义一个函数插件: 通过函数插件本地化内容: 通过函数插件访问cookie. 前一章中介绍的集合插件用来操作在页面上通过选择或遍历得到的一组元素.但是开发者也可以创建一些不操作集合元素,而是在jQuery框架上提供一些工具函数的插件.这就是函数插件. 这种类型插件的例子包括Debug插件,用来记录一些调试信息:还包括Cookie插件,用来操作网站的cookie(将在6.2节中详述).与前面的插件一样,只有想不到,没有做不到. 因为函数插件不操作元素集合,也通

jQuery ajax json 数据的遍历代码_AJAX相关

先给大家说下我的需求:进行ajax请求后,后台传递回来以下json数据. 具体实现代码如下所示: JavaScript代码 { "data":[ {"id":"1","name":"选择A","value":"A"}, {"id":"2","name":"选择B","value&

jQuery ajax json 数据的遍历代码

先给大家说下我的需求:进行ajax请求后,后台传递回来以下json数据. 具体实现代码如下所示: JavaScript代码 { "data":[ {"id":"1","name":"选择A","value":"A"}, {"id":"2","name":"选择B","value&

jquery选择符快速提取web表单数据示例

 遇到要重复多次同样的事时,就想找一种省时省力的方法,下面就为大家介绍下利用jquery选择符快速提取web表单数据 本人比较懒,在做web时,当遇到要重复多次同样的事时,就想找一种省时省力的方法.    以前在web提交表单并且需要验证用户输入时,在提取用户输入信息时,都要在js用到document.getElementById(),这样一个两个表单域还行,但有很多时(我就遇到过有十几个的情况)看看都眼花,所以个人就比较反感这种方式,不过还好,我自己瞎琢磨,利用jquery找到了一种方便的方法

初窥JQuery(一)jquery选择符 必备知识点_jquery

本章内容根据本人在开发中常用到的选择符作为例子来进行讲解,如有更多常用的简单的例子可回复提供,参与讨论,一起学习研究,首先我们从常用的CSS选择符开始. CSS选择符包括通配选择符.ID选择符.属性选择符.包含选择符.类选择符等,他们的基本格式为: 通配选择符:$("#ID *") 表示该元素下的所有元素. ID选择符:$("#ID") 表示获得指定ID的元素. 属性选择符:$("input[type=text]") 表示type属性为text的