目录
jQuery树遍历
jQuery动画(一)
jQuery动画(二)
jQuery树遍历
1、 .children()
获得子元素，可以传递一个选择器参数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body><ul class="first"><li>item 1</li><li><ul class="secode"><li>child item 1</li><li>child item 2</li><span>child span</span></ul></li><li>item 3</li></ul><script>$(".first").children().css("border","1px solid red")$(".first").children("li").css("border","1px solid red")</script>
</body>
</html>
2、.find()
寻找后代元素
温馨提示
.find() 和 .children() 方法是相似的，但后者只是再DOM树中向下遍历一个层级（注：就是只查找子元素，而不是后代元素）。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body><ul class="first"><li>item 1</li><li><ul class="secode"><li>child item 1</li><li>child item 2</li><span>child span</span></ul></li><li>item 3</li></ul><script>$(".first").find("li").css("border","1px solid red")</script>
</body>
</html>
3、.next()
取得元素紧邻的后面同辈元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body><div>Hello</div><p>内容</p><span>元素</span><script>$("div").next().css("border","2px solid red")</script>
</body>
</html>
4、.parent()
取得元素的父元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body><div><p>Hello</p></div><script>$("p").parent().css("border","2px solid red")</script>
</body>
</html>5、.siblings()
获得元素的兄弟元素，可以传递一个选择器参数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body><div><p>Hello1</p><p>Hello2</p><span>World</span><p class="text">Hello3</p><p>Hello4</p><p>Hello5</p></div><script>$(".text").siblings().css("border","2px solid red")$(".text").siblings("p").css("border","2px solid red")</script>
</body>
</html>
jQuery动画(一)
1、 .show()
执行显示动画
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jquery-3.6.0.min.js"></script><style>div{width: 100px;height: 100px;background-color: red;display: none;}</style>
</head>
<body><button>动画</button><div></div><script>$("button").click(function(){$("div").show(1000)})</script>
</body>
</html>
2、.hide()
执行隐藏动画
$("button").click(function(){$("div").hide(1000)
})3、.fadeIn()
通过淡入的方式显示匹配元素。
$("button").click(function () {$("div").fadeIn(1000);
});
4、.fadeOut()
通过淡出的方式显示匹配元素
$("button").click(function () {$("div").fadeOut(1000);
});jQuery动画(二)
jQuery提供了一系列的动画基本方法，同时也提供了自定动画方案 .animate()
1、 .slideDown()
用滑动动画显示一个元素
$("button").click(function () {$("div").slideDown(1000);
});2、.slideUp()
用滑动动画隐藏一个元素
$("button").click(function () {$("div").slideUp(1000);
});
3、.animate()
执行自定义动画
$("button").click(function () {$("div").animate({width: "200px",opacity: 0.5}, 1500);
});
