jQuery 遍历函数包括了用于筛选, 查找和串联元素的方法. 本文主要介绍日常工作中常用的 JQ 遍历,
帮助一下初学者快速的接触遍历函数, 提高自己的代码编写速度, 写出更简洁更实用的代码,
祝前端的同学们, 在前端这条没有尽头的路上渐行渐远.
如果有什么不对的地方 大家多提意见 互相学习 相互参考!!!
1.each()
语法:$(selector).each(function(index,element))
实例:$('li').each(
- $(this).CSS(color,#c10000);
- )
拆分一个数组, 并为每个数组中的匹配元素, 定义方法.
2.eq()
语法:.eq(index) //index 代表的是整数 最小为 0 代表第一个对应元素
实例:$("#nav ul").find("li").eq(2).addClass("blod"); // 找到 id 为 nav 里面的 ul 里面的 li 找到第 3 个 li 并为它加上一个. blod 样式.
通常找到的 li 都是一个数组 eq() 方法是把其中你想要的那个单独提出来进行修改 样式增加
3.find()
语法:.find(selector) //selector 代表的是字符串值, 包含供匹配当前元素集合的选择器表达式.
实例:$("#nav ul").find("li").addClass("blod"); // 找到 id 为 nav 里面的 ul 里面的所有 li 并为它加上一个. blod 样式.
方法获得当前元素集合中每个元素的后代, 通过选择器, jQuery 对象或元素来筛选.
4.next(selector)
语法:.next(selector) //seLector 代表的是字符串值, 包含用于匹配元素的选择器表达式.
实例:$("#nav ul").next("div") // 找到 id 为 nav 里面的 ul 找到 ul 标签下面的第一个 div 标签
next() 获得匹配元素集合中每个元素紧邻的同胞元素. 如果提供选择器, 则取回匹配该选择器的下一个同胞元素.
5.first()
语法:.first()
实例:$("#nav ul").first("li").addClass("blod"); // 找到 id 为 nav 下的 ul 下的 li 找到第 1 个 li 并为它加上一个. blod 样式.
first() 将匹配元素集合缩减为集合中的第一个元素.
6.parent()
语法:.parent(seletor) //seLector 代表的是字符串值, 包含用于匹配元素的选择器表达式.
实例:$("#nav ul").parent("div").addClass("blod"); // 找到 id 为 nav 下的 ul 的父级元素 div 为它加上一个. blod 样式.
parent() 获得当前匹配元素集合中每个元素的父元素, 使用选择器进行筛选是可选的.
7.parents()
语法:.parents(seletor)
实例:$("#nav ul").parents("div").addClass("blod"); // 找到 id 为 nav 下的 ul 的祖先元素 div 为它加上一个. blod 样式.
parents() 获得当前匹配元素集合中每个元素的祖先元素, 使用选择器进行筛选是可选的.
8,siblings()
语法:.parents(seletor)
实例:$("#nav ul").first("li").siblings().addClass("blod"); // 找到 id 为 nav 下的 ul 的第一个 li 为除了这个 li 以外的所有加上一个. blod 样式.
siblings() 获得匹配集合中每个元素的同胞, 通过选择器进行筛选是可选的.
来源: http://www.bubuko.com/infodetail-2601644.html