目录
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);
});
