1. 遍历元素
<!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="../jQuery.min.js"></script>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<!--
1. $("div").each( function(index, dom ) { });
2. $.each($("div"), function(index, dom) { });
3. 遍历dom对象, 用$("div").each();
遍历数组, 对象等, 使用$.each();
$().each()：以每一个匹配的元素作为上下文来执行一个函数;
$.each()： 它是一个工具, 不同于遍历jQuery对象的 $().each()方法，此方法可用于遍历任何对象;
$().each():> 在dom处理上面用的较多
$.each():> 通常用来遍历数组或对象
-->
<script>
var arr = ["red", "green", "purple"];
$(function () {
//1. each方法：遍历元素
$("div").each(function (index, dom) {
console.log(index); //索引号
console.log(dom); //dom元素对象
$(dom).css("color", "red"); //dom对象转换为jQuery对象（$(dom)）
$(dom).css("color", arr[index]); //
});
console.log('---------------------');
//2. $.each()遍历: 主要用来遍历数据，处理数据, 遍历所有对象
// console.log($("div"));
$.each($("div"), function (index, dom) {
console.log(index);
console.log(dom);
});
console.log('---------------------');
//3. $.each()很好的遍历数组
$.each(arr, function (index, ele) {
console.log(index);
console.log(ele);
});
console.log('---------------------');
//4. $.each()遍历对象
$.each({ name: 'XingWei', age: 23 }, function (index, ele) {
console.log(index);
console.log(ele);
});
});
</script>
</body>
</html>
2. 元素操作
<!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="../jQuery.min.js"></script>
</head>
<body>
<ul>
<li>原先的li</li>
</ul>
<div class="test">原先的div</div>
<p>我是段落</p>
<!--
1. $();
2. append() / prepend(); // 向每个匹配的元素内部追加内容
3. after() / before(); // 在每个匹配的元素之后/之前插入内容
3. remove();
4. empty();
-->
<script>
$(function () {
// 1.创建元素: $('标签')
var li = $("<li>动态创建的li</li>");
// 2.添加元素:
// (1) 内部添加 append, prepend ;
// $("ul").append(li);
$("ul").prepend(li);
$("p").append($("<span>HelloWorld</span>")); //将span追加到了p的内部的后面
$("p").prepend($("<span>Before, HelloWorld</span>")); //将span追加到了p的内部的前面（F12即可知道）
// (2) 外部添加 after, before ;
var div = $("<div>动态创建的div</div>");
// $(".test").after(div);
$(".test").before(div);
// 3.删除元素
// $("ul").remove(); // 删除自身
// $("ul").empty(); // 删除它的孩子
// $("ul").html(""); // 同上
});
</script>
</body>
</html>
3. 尺寸
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
padding: 10px;
border: 15px solid red;
margin: 20px;
}
</style>
<script src="../jQuery.min.js"></script>
</head>
<body>
<div></div>
<!--
jQuery尺寸：
1. width() / height(): 只是 width, height;
2. innerWidth() / innerHeight(): 包含了 padding;
3. outerWidth() / outerHeight(): 包含了 padding + border;
4. outerWidth(true) / outerHeight(true): 包含了 padding + border + margin;
-->
<script>
$(function() {
// 1. width() / height()
console.log($("div").width()); //200px
// 2. innerWidth() / innerHeight()
console.log($("div").innerWidth()); //220px
// 3. outerWidth() / outerHeight()
console.log($("div").outerWidth()); //250px
// 4. outerWidth(true) / outerHeight(true)
console.log($("div").outerWidth(true)); //290px
})
</script>
</body>
</html>
4. 位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 400px;
height: 400px;
background-color: pink;
margin: 100px;
overflow: hidden;
position: relative;
}
.son {
width: 150px;
height: 150px;
background-color: purple;
position: absolute;
left: 10px;
top: 10px;
}
</style>
<script src="../jQuery.min.js"></script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<!--
位置主要有3个：
offset(), position(), scrollTop() / scrollLeft();
1. offset(): 获取或设置被选择元素相对于文档的偏移量，与父级没有任何关系; （返回一个坐标对象）
获取匹配元素在当前视口的相对偏移;
2. position(): 获取(只能获取, 不能设置)被选择元素相对于带有定位的父级的偏移坐标, 如果父级都没有定位, 则以文档为主;
-->
<script>
$(function() {
// 1. 获取或设置距离文档的位置（偏移） offset
console.log($(".son").offset());
console.log($(".son").offset().top);
$(".son").offset({
// top: 200,
// left: 200
});
// 2. 获取距离带有定位父级位置（偏移） position 如果没有带有定位的父级，则以文档为准
// 这个方法只能获取不能设置偏移
console.log($(".son").position());
// $(".son").position({
// top: 200,
// left: 200
// }); //只是获取, 设置则无效
})
</script>
</body>
</html>
5. scroll系列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
height: 2000px;
}
.back {
position: fixed;
width: 50px;
height: 50px;
background-color: pink;
right: 30px;
bottom: 100px;
display: none;
}
.container {
width: 900px;
height: 500px;
background-color: skyblue;
margin: 200px auto;
}
</style>
<script src="../jQuery.min.js"></script>
</head>
<body>
<div class="back">返回顶部</div>
<div class="container">
</div>
<!--
scrollTop() / scrollLeft():
scrollTop(): 获取匹配元素相对滚动条顶部的偏移;
scrollLeft(): 获取匹配元素相对滚动条左侧的偏移;
-->
<script>
$(function () {
$(document).scrollTop(100);
var boxTop = $(".container").offset().top;
// console.log(boxTop); // 200
$(window).scroll(function () { // 页面滚动事件
console.log($(document).scrollTop()); //
if ($(document).scrollTop() >= boxTop) {
$(".back").fadeIn();
} else {
$(".back").fadeOut();
}
});
// 返回顶部按钮
$(".back").click(function () {
// $(document).scrollTop(0); // 方式1-无动画
$("body, html").stop().animate({ // 方式2-动画
scrollTop: 0
});
// $(document).stop().animate({
// scrollTop: 0
// }); 不能是文档而是 html和body元素做动画, 这么写是错误的
})
})
</script>
</body>
</html>
