jQuery框架（六）：文档操作、循环、css操作
文章目录
- 一、文档操作
- 二、jQuery的each循环
- 1、对数据类型的循环
- 2、对jq对象的循环（重点）
- 三、css操作
- 1、offset
- 3、scrollTop
- （1）实时监控scrollTop值
- （2）实战练习（回到顶部）
- （3）其实其他标签也可能有滚动事件
一、文档操作
//创建一个标签对象
$(""
)
'注意：下面所有的方法.前面的一定是一个jq对象！'
//内部插入（父子关系）
// 把标签Hello追加到p标签中（给p标签中末尾添加一个子标签）
$("").append(content|fn) ----->$("p").append("Hello");
// 把p标签追加到div标签中
$("").appendTo(content) ----->$("p").appendTo("div");
// 把标签Hello放入p标签中的所有子标签的最前面
$("").prepend(content|fn) ----->$("p").prepend("Hello");
// 把标签p放入class为foo的标签中的所有子标签的最前面
$("").prependTo(content) ----->$("p").prependTo("#foo");
//外部插入（兄弟关系）
// 把标签Hello插入到p标签之后
$("").after(content|fn) ----->$("p").after("Hello");
// 把标签p插入到class为foo的标签后面
$("").insertAfter(content) ----->$("p").insertAfter("#foo");
$("").before(content|fn) ----->$("p").before("Hello");
$("").insertBefore(content) ----->$("p").insertBefore("#foo");
//替换
// 使用Paragraph. 替换p标签
$("").replaceWith(content|fn) ----->$("p").replaceWith("Paragraph. ");
//删除
// 清空p标签
$("p").empty()
// 删除p标签
$("p").remove()
//复制
$(selector).clone(true|false)
// true：规定需复制事件处理程序。
// false：默认。规定不复制事件处理程序。
二、jQuery的each循环
除了js的for循环，while循环，我们jq还增加了两种循环，each和map，这里我们学习下each循环就够了！
作用：专门用于遍历jQuery对象匹配的所有元素。
1、对数据类型的循环
li=[10,20,30,40]
dic={name:"yuan",sex:"male"}
$.each(li,function(i,x) {
console.log(i, x)
})
$.each(dic,function(i,x) {
console.log(i, x)
})
2、对jq对象的循环（重点）
$("tr").each(function(){ // tr标签一般有多个，遍历每个tr标签，每个tr都要执行后面这个匿名函数
console.log($(this).html()) // this代表当前tr标签
})
三、css操作
| css属性 | 描述 |
|---|---|
| $("").css(属性,属性值) | 设置或返回匹配元素的样式属性。 |
| $("").heigth(val | fn) | 设置或返回匹配元素的content高度。 |
| $("").width(val | fn) | 设置或返回匹配元素的content宽度。 |
| $("").innerHeigth() / innerWidth() | 返回匹配元素的content+padding高度(宽度) |
| $("").outerHeight() / outerWidth() | 返回匹配元素的content+padding+border高度(宽度) |
| $("").offset(value) | 返回或设置匹配元素相对于文档的偏移（位置） |
| $("").position() | 返回匹配元素相对于已定位父元素的位置（偏移） |
| $("").scrollTop(value) | 返回或设置匹配元素的滚动条的垂直位置 |
| $("").scrollLeft(value) | 返回或设置匹配元素的滚动条的水平位置 |
js中也有offset系列和scroll系列方法，注意js和jq的区别：点击我
jq的position+offset=js的offset
js的scroll和jq的scroll差不多
height、width、position用法很简单就不说了，这里重点讲下offset、scrollTop！
1、offset
定义：获取匹配元素在当前视口的相对偏移。返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。
另外返回的left和top以像素计；
用法：
var _left = $(selector).offset().left
var _top = $(selector).offset().top;
3、scrollTop
定义：获取匹配元素相对滚动条顶部的偏移。此方法对可见和隐藏元素均有效
我们一般不直接使用scrollTop，这样我们只能获取一次scrollTop的值，我们希望能实时获取scrollTop值的变动，关于scrollTop的应用场景请看：点击我
（1）实时监控scrollTop值
// 实时监控整个浏览器窗口的滚动事件，只要一发生滚动事件，就调用一次函数
$(window).scroll(function(){})
// 获取html标签的滚动条相对于整个界面的距离
$('html').scrollTop
// 获取div标签的滚动条相对于div的顶部的距离，在第（3）点中会详细讲解
$('div').scrollTop
（2）实战练习（回到顶部）
实现效果：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动事件title>
<script src="jquery-3.5.1.js">script>
<style>
img{
width: 100%;
display: none;
cursor: pointer;
}
#box{
width:1000px;
height:1200px;
margin:0 auto;
border:1px solid red;
overflow:hidden;
}
#img_div{
width: 70px;
height: 70px;
position:fixed;
bottom: 20px;
right: 20px;
border-radius: 50%;
overflow: hidden;
}
style>
<script>
$(function(){
$(window).scroll(function(){ //实时监控整个浏览器窗口的滚动事件
let value = $('html').scrollTop();
if(value>300){
$('img').fadeIn(300);
}else{
$('img').fadeOut(300);
}
});
$('img').click(function(){
// $('html').scrollTop(0); 瞬间回到顶部,没有一个平滑的过程，用户体验不好
$('html').animate({'scrollTop':0},'slow') //定时器，在一段时间内回到顶部
})
})
script>
head>
<body>
<div id="box">div>
<div id="img_div">
<img src="a1.png" alt="回到顶部">
div>
body>
不懂animate的请看：click me！
（3）其实其他标签也可能有滚动事件
实现效果：
实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{
height: 100px;
width: 100px;
border: 2px solid black;
overflow: auto; //溢出了我们可以选择隐藏，或者auto就变成了滚轮！
}
</style>
</head>
<body>
<div id="d1">
<h1>1111</h1>
<h1>1111</h1>
<h1>1111</h1>
<h1>1111</h1>
<h1>1111</h1>
</div>
</body>
</html>
既然我们windows窗口的滚动事件可以监听，可以scrollTop获取滑动条相对于html页面的位置，可以设置回到顶部，当然我们也可以为这个div标签设置这些功能！
实现效果：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{
height: 100px;
width: 100px;
border: 2px solid black;
overflow: auto;
}
span{
position: fixed;
left: 66px;
top: 85px;
font-family: "Songti SC";
font-size: smaller;
background-color: skyblue;
cursor: pointer;
border: 1px solid black;
display: none;
}
</style>
</head>
<body>
<div id="d1">
<h1>1111</h1>
<h1>1111</h1>
<h1>1111</h1>
<h1>1111</h1>
<h1>1111</h1>
<h1>1111</h1>
<h1>1111</h1>
<h1>1111</h1>
<h1>1111</h1>
<span>顶部</span>
</div>
</body>
<script src="jquery-3.5.1.js"></script>
<script>
$(function () {
$('#d1').scroll(function () {
let value = $('#d1').scrollTop();
if (value > 100){
$('span').fadeIn(500);
}else{
$('span').fadeOut(500);
}
})
$('span').click(function () {
$('#d1').animate({'scrollTop':0},'slow');
})
})
</script>
</html>
但是一般只有html页面才会设置回到顶部，像这种body的内部滚动事件不会设置回到顶部！