1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

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

作者:用户 来源:互联网 时间:2016-06-25 15:04:39

jquery函数div元素选择一个jquery控制div选取jquery遍历元素jquery遍历htmljquery点击改变class孙级栏目

使用jQuery选择复杂HTML的遍历函数 - 摘要: 本文讲的是使用jQuery选择复杂HTML的遍历函数,   jQuery中10个非常有用的遍历函数   使用jQuery,可以很容易的选择HTML元素。但有些时候,在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选择复杂HTML的遍历函数-jquery 遍历复杂json

  为什么要遍历?

  “为什么我们要进一步提炼一系列元素,难道是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()每接受任何参数,将返回所有直接子级;

  不返回孙级元素。

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



以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery , 函数 , div , 元素 , 选择 , 一个 , jquery控制div选取 , jquery遍历元素 , jquery遍历html , jquery点击改变class 孙级栏目 jquery 遍历复杂json、jquery 选择器 遍历、jquery 类选择器 遍历、jquery复杂选择器、jquery 遍历函数,以便于您获取更多的相关知识。

一道面试题(关于千万量级数据结构排序)

...线性排序算法。 2.再因为是千万级的数据,可以考虑使用桶排序,建立一个有711大小的桶(数组),遍历整个文档,根据分数大小在相应的桶号上计数。 3.根据上面两步,基本是可以实现单纯的成绩排序。而且时间复杂...

使用JQuery选择HTML遍历函数的方法_jquery

使用JQuery,可以很容易的选择THML元素。但在有些时候,HTML结构比较复杂的时候,提炼我们选择的元素就是一件比较麻烦的事情。 1、children 这个函数得到一组元素的直接子级。 给children()传递一个选择表达式将选择结果缩小至选...

使用jQuery简化Ajax开发下

4. 让你的html动起来 你可以使用jQuery做一些基本的动画和效果。动画效果的核心就是函数animate(), 它可以随时改变指定的css样式. 举例来说, 你可以改变高度, 宽度, 透明度或者位置. 你还可以指定动画的速度, 改变速度的时候你可...

Easy Ajax with jQuery[中文版2]

示例二: 使用jQuery建造聊天程序为了展示jQuery的强大,我们将建立一个具有ajax功能的聊天程序.它允许用户发布信息,并且可以实时的更新信息--但是没有任何的页面刷新.鉴于我们将要处理一个相对比较复杂的应用,我将更加深入的...

jQuery使用技巧简单汇总

1.使用最新的jquery版本 觉得这个建议有待商榷,虽然越新的jquery版本性能上更加优秀,但是有些方法的变迁还是会导致一些bug,比如从1.4.2到1.5时很多朋友就抱怨ajax上出现问题了。建议是旧的页面的jquery升级需谨慎,新项目可以...

前三篇
后三篇