一、遍历祖先元素
parent 方法是用来查找指定元素的父元素的
parents 方法是用来查找指定元素的所有祖先元素的。
格式:
$().parent.css();
二、遍历兄弟元素
1.前兄弟元素查找
- $().prev(); // 查找指定元素前向第一个元素
-
- $().preAll(); // 查找指定元素前向所有元素
- $().preAll().css();
2.后兄弟元素查找
- $().next(); // 查找指定元素的第一个后向兄弟元素
-
- $().nextAll(); // 查找指定元素的所有后向兄弟元素
- $().nextAll().css()
3.所有兄弟元素查找
$().siblings();
三、遍历后代元素
children 方法和 find 方法都是用来查找元素的子元素的,区别是 children 只能获取元素的儿子节点,而 find 方法可以获取元素的所有符合条件的后代节点。
1.children方法
jQuery对象.children();
- $(this).children("#title").css("font-size", "25px");
- $(this).children().css("text-align", "center");
2.find方法
jQuery对象.find(selector);
四、过滤元素
1.类名过滤
在 jQuery 中使用 hasClass 方法可以用来判断指定元素是否包含该类名的元素。返回值boolean
$().hasClass("类名");
2.下标过滤
在 jQuery 中使用 eq 方法可以实现下标过滤。n为元素的下标值
$().eq(n);
- $(function () {
- $("body").click(function () {
- // 列表中下标值为 0-2 的元素会改变字体颜色
- var $li = $("li");
- for (var i = 0; i < 3; i++) {
- $li.eq(i).css("color", "#77acf1");
- }
- });
- });
3.判断过滤
在 jQuery 中可以使用 is 方法来判断指定元素中是否有符合条件的存在。返回boolean值。
$().is(selector);
- var value = $("div").is(":animated");
- if (value) {
- $("p").text("元素处于动画状态");
- } else {
- $("p").text("元素不处于动画状态");
- }
判断是否处于动画效果
4.反向过滤
jQuery 中使用 not 方法可以选择不符合条件的元素。
$().not(selector|function)
它的参数有两种,当为选择器时,我们会通过选择器来过滤不符合条件的元素;当为函数时,我们会通过函数来过滤不符合条件的元素。
$(this).not(".div2").css("background", "#ffc478");
除div2的类;