一，前言
jQuery提供了一系列的方法来帮助开发者轻松地遍历和操作DOM元素集合，同时jQuery 提供了一些简单的方法来实现基本的动画效果，如淡入淡出、滑动等，同时还允许用户创建自定义动画序列。
二，遍历
（1）遍历
.map()
通过一个函数匹配当前集合中的每个元素,产生一个包含新的jQuery 对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script src="../static/js/jquery-3.7.1.min.js"></script>
<body>
<ul id="list">
<li>列表 1</li>
<li>列表 2</li>
<li>列表 3</li>
<li>列表 4</li>
<li>列表 5</li>
</ul>
<script>
$("#list>li").map(function (index, element) {
console.log(index, element);
})
</script>
</body>
</html>
.each()
遍历一个jQuery对象，为每个匹配元素执行一个函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script src="../static/js/jquery-3.7.1.min.js"></script>
<body>
<ul id="list">
<li>列表 1</li>
<li>列表 2</li>
<li>列表 3</li>
<li>列表 4</li>
<li>列表 5</li>
</ul>
<script>
$("#list>li").each(function (index, element) {
console.log(index, element);
})
</script>
</body>
</html>
从结果上看，map()与each()方法是一致的， 但map()方法是返回一个新数组，each()方法是对原数组上修改。
.get()
通过jQuery对象获取一个对应的DOM元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script src="../static/js/jquery-3.7.1.min.js"></script>
<body>
<ul id="list">
<li>列表 1</li>
<li>列表 2</li>
<li>列表 3</li>
<li>列表 4</li>
<li>列表 5</li>
</ul>
<script>
console.log($($("#list>li").get(1)).html())
//$符可以将js对象转化为jQuery对象，jQuery对象可以通过map,each,get方法转化为JS对象。
</script>
</body>
</html>$符可以将js对象转化为jQuery对象，jQuery对象可以通过map,each,get方法转化为JS对象。
（2）树遍历
树遍历是描述节点间的关系，可以通过一系列方法来根据节点关系来遍历元素。
.children()
获得子元素，可以传递一个选择器参数
<script>
$(".first").children().css("border","1px solid red")
$(".first").children("li").css("border","1px solid red")
</script>
.find()
寻找后代元素
<script>
$(".first").find("li").css("border","1px solid red")
</script>
children()方法只会向下查找一级，find()方法会一直往下找
.next()
取得元素紧邻的后面同辈元素
<script>
$("div").next().css("border","2px solid red")
</script>
.parent()
取得元素的父元素
<script>
$("p").parent().css("border","2px solid red")
</script>
.siblings()
获得元素的兄弟元素，可以传递一个选择器参数
<script>
$(".text").siblings().css("border","2px solid red")
$(".text").siblings("p").css("border","2px solid red")
</script>
三，动画
.show()
执行显示动画
<script>
$("button").click(function(){
$("div").show(1000)
})
</script>.hide()
执行隐藏动画
<script>
$("button").click(function(){
$("div").hide(1000)
})
</script>.fadeIn()
通过淡入的方式显示匹配元素。
<script>
$("button").click(function () {
$("div").fadeIn(1000);
});
</script>.fadeOut()
通过淡出的方式显示匹配元素
<script>
$("button").click(function () {
$("div").fadeOut(1000);
});
</script>.slideDown()
用滑动动画显示一个元素
<script>
$("button").click(function () {
$("div").slideDown(1000);
});
</script>.slideUp()
用滑动动画隐藏一个元素
<script>
$("button").click(function () {
$("div").slideUp(1000);
});
</script>.animate()
执行自定义动画
<script>
$("button").click(function () {
$("div").animate({
width: "200px",
opacity: 0.5
}, 1500);
});
</script>
341
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
