孟村| 沈丘| 利川| 上杭| 天柱| 汤原| 朔州| 盐都| 务川| 民乐| 长葛| 安国| 绥化| 保康| 班戈| 南华| 蓬溪| 宣威| 海门| 西宁| 阜宁| 天柱| 乌恰| 邓州| 合江| 广安| 沅陵| 北京| 巫溪| 上思| 会泽| 谢家集| 神池| 岚县| 泸定| 珠穆朗玛峰| 集贤| 沁阳| 新河| 长武| 东港| 雷山| 陇川| 清水河| 白云矿| 陆河| 恒山| 丰镇| 巴东| 二连浩特| 祁县| 额济纳旗| 长汀| 沐川| 滨海| 隆化| 郑州| 三水| 白云| 会理| 灵台| 肃宁| 台北市| 峨眉山| 罗城| 横县| 湖口| 淳化| 延寿| 绥芬河| 星子| 门源| 安乡| 临武| 正宁| 泸溪| 义马| 富裕| 万盛| 黎平| 宁国| 宜阳| 曹县| 白云矿| 嘉义县| 通山| 弥勒| 翁牛特旗| 大同市| 天山天池| 盐都| 青铜峡| 临沭| 竹山| 舒城| 华宁| 通辽| 河北| 沛县| 蚌埠| 江阴| 祁东| 神池| 天峨| 崇礼| 朝天| 城阳| 法库| 偃师| 祁东| 石狮| 济阳| 镇平| 四会| 行唐| 鄂州| 乌海| 鄄城| 泰和| 衡水| 遂昌| 广南| 岢岚| 唐海| 同仁| 秭归| 井陉| 陆川| 南和| 龙山| 潢川| 安溪| 黔江| 鹤壁| 枝江| 本溪市| 徐州| 建平| 修文| 龙岗| 循化| 丹寨| 琼海| 吴忠| 博兴| 邓州| 察哈尔右翼中旗| 潮安| 安图| 云安| 星子| 宁夏| 龙江| 固始| 阿拉尔| 翠峦| 夏邑| 平凉| 白云矿| 桐城| 临朐| 肇州| 淮滨| 仁布| 王益| 云集镇| 沽源| 宁陵| 祁连| 西和| 唐山| 如东| 瓯海| 景谷| 毕节| 陈巴尔虎旗| 甘德| 乌马河| 南汇| 黄山区| 保亭| 日喀则| 九江县| 易县| 峨眉山| 宣汉| 常州| 东兴| 惠安| 龙泉驿| 泽库| 阿巴嘎旗| 濠江| 奉节| 房县| 甘德| 宜川| 南芬| 崇左| 彝良| 罗定| 榆社| 潜江| 安新| 浦口| 云阳| 烈山| 沙洋| 庄河| 蓟县| 凉城| 溧阳| 武鸣| 施甸| 隰县| 太白| 乐亭| 且末| 崇阳| 盐津| 墨玉| 宝鸡| 内乡| 高唐| 松江| 凤冈| 平邑| 大化| 灵武| 台北县| 崇信| 淮阴| 龙山| 垦利| 青田| 仙游| 吴堡| 沙圪堵| 宁远| 嘉兴| 呼玛| 招远| 宿豫| 华安| 安福| 庐江| 西昌| 富县| 师宗| 北安| 鸡西| 蕲春| 绥德| 新乐| 合浦| 景洪| 石首| 彭阳| 涟源| 济南| 长丰| 旅顺口| 莘县| 湖口|
设为首页 - 加入收藏 江苏网 (http://www-jiangsuwang-cn.qsjczs.com)- 国内知名站长资讯网站,提供最新最全的站长资讯,创业经验,网站建设等!
热搜: 小米 中国 共享 不满
当前位置: 主页 > 业界 > 正文

jQuery 中十个非常有用的遍历函数(译)

发布时间:2018-11-21 22:28 所属栏目:[业界] 来源:站长网
导读:使用 jQuery ,可以很容易的选择HTML元素。但有些时候,在HTML结构较为复杂时,提炼我们选择的元素就是一件麻烦的事情。在这篇教程中,我们将探讨十种方法去精炼和扩展我们将要操作的集合。 HTML 首先,让我们看看下图显示的简单的页面,通过这个教程我们
标签:十九日 横山下

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

HTML

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

div.container是包裹元素;

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

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

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

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

为什么要遍历?

“为什么我们要进一步提炼一系列元素,难道是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中10个非常有用的遍历函数

2、filter

这个函数通过传递的选择表达式从一个集合中过滤元素。任何不匹配这个表达式的元素将从选择的集合中移除。

下面的这个例子直截了当。从 5个star中过滤出class为“on”的star。

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

【免责声明】本站内容转载自互联网,其相关言论仅代表作者个人观点绝非权威,不代表本站立场。如您发现内容存在版权问题,请提交相关链接至邮箱:bqsm@foxmail.com,我们将及时予以处理。

网友评论
推荐文章
百景园 魏善庄镇 承下公路 金龙客车厂 塘渡口镇
子材东大街 故名亢家村 梅力村 咸宁市 北苑村东站
黄寺大街西口 三十四团场 杨泥田村 大同山林场 菊园
石油化工 月黄村 东浦镇 荔枝公园 宿务
克隆侠蜘蛛池 http://www.kelongchi.com/