一、遍历祖先元素
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的类;