注意：在使用 jquery时，需先引入jquery文件：
<script src="./js/jquery-3.6.1.min.js"></script>
jquery:
是对JS代码的封装，jquery所有的方法返回的都是jquery对象，该对象内部存储一个私有的数组，数组中存储需要操作的DOM节点元素。
jquery使用以下语句获取标签：
$('.list')：$相当于document.querySelector，
即：$('.list') =>document.querySelector('.list')。
$相当于将其进行了封装，使语句更简洁。
JS和jquery在添加内容和样式时的区别：
网页布局：
<body>
<ul class="list" id="example">
</ul>
</body>使用js添加内容和样式
let list=document.querySelector('.list');
list.innerHTML='文本';
cssText：和innerHTML一样，但提高了渲染性能
list.style.cssText=`width:200px;background-color:red;color:white;`;使用jquery添加内容和样式
//设置多个样式
$('.list').html('<h1>文本</h1>').css({
//html和text区别：html方法在获取和设置元素时，设置的是HTML代码，text设置的是元素的文本内容，等价于JS中innerHTML和innerText
width:'200px',
backgroundColor:'red',
color:'white'
});
//设置一个样式
$('.list').html('文本').css('color','blue');jquery中的一些方法：
网页布局：
<body>
<ul class="list" id="example">
</ul>
</body>append()：向指定标签(父级)所有内容的后面插入指定的内容
prepend()：向父级标签所有内容的前面插入内容
以上两个操作为子级操作
after()：向指定标签所有内容的后面插入内容
before()：向指定标签所有内容的前面插入内容
以上两个操作为同级操作
replaceWith()：用指定内容替换指定的标签
empty()：删除匹配元素集合中所有的子节点(将标签中的内容删除，但标签还在)
remove()：直接删除指定标签，标签名和内容全删除
//在js中，1.在当前标签的尾部插入一个新元素：appendChild(newelement),
//2.在开头插入一个新元素：insertBefore(newelement)
//文档处理
//向指定标签(父级)所有内容的后面插入指定的内容，本次操作是子级操作
$('.list').append('<li>向父级所有内容的后面插入指定的内容</li>');
//向父级标签所有内容的前面插入内容，本次操作是子级操作
$('.list').prepend('<li>向父级标签所有内容的前面插入内容</li>');
//向指定标签所有内容的前面或后面插入内容，本次操作是同级操作
//1.后面插入内容
$('.list').after('<li>后面插入内容,是同级操作</li>');
//2.前面插入内容
$('#example').before('<li>前面插入内容,是同级操作</li>');
//用指定内容替换指定的标签，等价于js中的replaceChild(newChild, oldChild),替换子节点
//$('#example').replaceWith('<p>替换标签</p>');//将id为example的ul标签及其子级全部内容替换为p标签
//删除指定元素
//$('li').empty();//删除匹配元素集合中所有的子节点(将标签中的内容删除，但标签还在)
//$('li').remove();//直接删除指定标签，标签名和内容全删除网页布局：
<body>
<div class="name">
<p>文本</p>
<button class="btn">显示</button>
<input type="text" value="你好">
<input type="password">
</div>
</body>(a).attr(b,c):将元素节点a的b属性值修改为c,属性存在则修改，不存在则添加
attr(a):获取元素，返回元素节点属性a的值
removeAttr():删除元素属性
html():获取标签内容
html('<h1>修改标签内容</h1>'):修改标签内容
text('修改文本内容'):修改文本内容
val():获取value值
val('修改value值'):修改value值
$('input').get(0):获取input标签
input[type="text"]:获取type为text的input标签
<script src="./js/jquery-3.6.1.min.js"></script>
<script>
//(a).attr(b,c):修改元素节点a的b属性为c,属性存在则修改，不存在则添加
$('div').attr('id','name1');
$('div').attr('class','name1');
console.log($('div').attr('class'));//attr(a):获取元素，返回元素节点属性a的值
//删除元素属性
console.log($('div').removeAttr('class'));
//获取标签内容
console.log($('.btn').html());//输出结果：显示
//修改标签内容
console.log($('.btn').html('<h1>修改标签内容</h1>'));
//修改文本内容
console.log($('p').text('修改文本内容'));
//form表单设置或获取数据通过val（）操作。
//获取value值
console.log($('input').val());
//修改value值
console.log($('input').val('修改value值'));
//获取input标签
console.log($('input').get(0));
console.log($('input[type="text"]'));
</script>jquery设置点击事件
页面布局：
<body>
<div>
<p>点击事件</p>
<button class="btn">点击</button>
</div>
</body>设置点击事件：
$('div').on('click',function(e){
console.log(e);
})// 以上默认的事件是以事件冒泡处理（当点击div时，target为div,当点击p时，target为p,当点击button时，target为button）
//target:事件的目标元素
可以指定给div中的.btn绑定（灵活）---明确指定给div中的.btn添加事件（运行返回不一样）
$('div').on('click','.btn',function(e){
console.log(this);//this指向button标签（原生的DOM节点，不是jquery对象，但系统会转换为jquery对象）
//转变为jquery对象
//parent():返回指定节点的父级节点，返回结果是一个jquery对象
console.log($(this).parent());
//get()[0]：返回document节点的唯一方法。返回结果为：div标签
console.log($(this).parent().get()[0]);
//查找HTML元素 parents
console.log($(this).parents('html')[0]);
//返回所有的子元素 children
console.log($('html').children());
//在每个div中查找所有的.btn
console.log($('div').children('.btn'));
})以上涉及的方法：
（1）parent():返回指定节点的父级节点，返回结果是一个jquery对象
（2）get()[0]：返回document节点的唯一方法。返回结果为：标签
（3）parents：查找HTML元素
（4）children：返回所有的子元素
例：
//在每个div中查找所有的.btn
console.log($('div').children('.btn'));
对标签坐标信息或尺寸信息的获取
<!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>
<style>
.win{
width: 200px;
height: 200px;
background-color: blue;
position: relative;
}
div{
background-color: aqua;
position: absolute;
top: 100px;
left: 100px;
}
body,html{
height: 1000px;
}
</style>
</head>
<body>
<div class="win">
<div>
<p>文本</p>
<button class="btn">按钮</button>
</div>
</div>
</body>
<script src="./js/jquery-3.6.1.min.js"></script>
<script>
//对标签坐标信息或尺寸信息的获取
//获取正常网页的位置。offset().left:距离左侧的距离
console.log($('.win div').offset().left,$('.win div').offset().top);//8 16
console.log($('.win div').position().left);
//获取网页滚动的距离
//scrollTop():可以用来获取浏览器滚动距离，也可以设置浏览器滚动到的位置
$(window).on('scroll',function(){
console.log($(window).scrollTop());
});
//设置网页初始位置
//load:传递参数
$(window).on('load',function(){
$(window).scrollTop(500);
});
</script>
</html>以上涉及的方法：
（1）offset().left:距离左侧的距离
（2）position()：获取position值
（3）scrollTop():可以用来获取浏览器滚动距离，也可以设置浏览器滚动到的位置
格式：
$(window).on('scroll',function(){
console.log($(window).scrollTop());
});
（4）设置网页初始位置，load:传递参数
格式：
$(window).on('load',function(){
$(window).scrollTop(500);
});
其他方法：
（1）width()：获取标签的尺寸信息(标签的宽高---内容层)
（2）innerWidth()：获取或设置标签内容层+内边距的宽度
（3）outerWidth()：内容层+内边距+边框border的宽度
使用jquery实现内容的隐藏和显示：两种方式
<!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>
<style>
.mark{
width: 500px;
height: 200px;
background-color: aqua;
text-align: center;
line-height: 200px;
font-size: 35px;
color: white;
/* display: none; */
}
</style>
</head>
<body>
<div class="mark">对CSS样式修改</div>
<button class="btn" id="btn">隐藏</button>
</body>
<script src="./js/jquery-3.6.1.min.js"></script>
<script>
//设置CSS样式
$('.mark').css({
//inset:阴影方向，内倾，默认向外
boxShadow:'inset 0 0 50px green'
});
console.log($('.mark').css('color'));
//方式1：
//设置动画
// $('.mark').delay(2000).animate({
// width:'300px',
// height:'100px',
// opacity:'0.2',
// //注意：CSS样式数值类型的可以生效，非数值类型不生效。以下语句不生效
// boxShadow:'10px 10px 10px black',
// backgroundColor:'blue'
// },2000);
//方式2:
//给button按钮添加点击事件:延迟动画
//fadeIn():淡入。fadeOut()：淡出
$('#btn').on('click',function(){
if($(this).html()=='显示'){
//$('.mark').show();//show()：显示
//将上面设置CSS样式：display: none;
$('.mark').delay(2000).slideDown(2000);//slideDown()：以滑块形式显示出来。2000：2s时间显示出来
//delay(2000):延迟2s再显示
$(this).html('隐藏');
}else{
$('.mark').slideUp(2000);//slideUp(2000):隐藏
$(this).html('显示');
}
});
</script>
</html>
方式1：只在运行时隐藏一次，不能再显示出来。 效果如下：（按钮无效）
方式2：可以一直进行隐藏和显示，通过给button按钮添加点击事件:延迟动画。通过fadeIn():淡入。fadeOut()：淡出实现。效果如下：
点击隐藏时：内容隐藏，且按钮变换为”显示“
点击显示时：内容显示，且按钮变换为”隐藏“
实现留言板
<!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>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.box{
width: 500px;
margin: 100px auto;
border: 1px solid red;
padding: 20px;
background-image:url('../day24/img/7.jpg') ;
}
.div_txt{
margin-bottom:15px ;
}
/* 多行文本输入框 */
.txt{
width: 400px;
height: 100px;
outline: none;
/* 禁止拖拽文本域 */
resize: none;
box-shadow: 2px 2px 2px navy;
padding: 20px;
box-sizing: border-box;
}
.btn{
display: block;
margin-top: 15px;
border: 0;
background-color: rgba(168, 147, 241, 0.9);
padding: 8px 35px;
color: white;
font-size: 18px;
margin-bottom: 15px;
box-shadow: 2px 2px 2px navy;
}
li{
color: firebrick;
box-shadow: 2px 2px 2px salmon;
font-size: 18px;
padding: 5px;
display: none;
overflow: hidden;
}
a{
float: right;
text-decoration: none;
font-size: 14px;
color: red;
padding: 5px;
}
</style>
</head>
<body>
<div class="box">
<div class="div_txt">请输入留言内容：</div>
<!-- 多行文本输入框 -->
<textarea name="" id="" class="txt" cols="30" rows="10">
</textarea>
<button class="btn">留言</button>
<!-- 存放留言板内容 -->
<ul>
<!-- 在JS中动态添加 -->
<!-- <li>第一条留言
<a href="#">删除</a>
</li> -->
</ul>
</div>
</body>
<script src="./js/jquery-3.6.1.min.js"></script>
<script>
//1.点击留言按钮，动态创建一个li标签，放入到留言板ul中，添加删除按钮
$('.btn').on('click',function(){
//创建li
var li=$('<li></li>');
//获取内容
li.html($('.txt').val()+'<a href="#">删除</a>');
//console.log($('.txt').val());
// 存放li标签，prepend：在元素开始位置插入
$('ul').prepend(li);
//使用滑动效果，显示被隐藏的被选元素（注意：元素初始设置为隐藏状态：display: none;）
li.slideDown(500);
// 清空内容
$('.txt').val('');
})
//2.点击删除按钮，删除当前留言（li）
//指定ul下的a标签，绑定点击事件
$('ul').on('click','a',function(){
//parent:返回被选元素的直接父元素，即：li
//console.log($(this).parent());
//slideUp:使用滑动效果，隐藏被选元素,注意：只有已经显示出来的才生效
$(this).parent().slideUp(function(){
// $(this).remove();
$(this.remove());
});
})
</script>
</html>JS通过两步实现：
1.点击留言按钮，动态创建一个li标签，放入到留言板ul中，并添加删除按钮
2.点击删除按钮，删除当前留言（li）
效果：
添加留言：
删除留言：
实现点击回到顶部：
<!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>
<style>
body{
height: 1500px;
}
.back{
/* 固定定位:随着页面滚轮的滑动，此内容一致固定不动 */
position: fixed;
right: 30px;
bottom: 100px;
width: 60px;
height: 60px;
background-color: aqua;
font-size: 14px;
line-height: 60px;
border-radius: 15px;
color: white;
text-align: center;
box-shadow: 2px 2px 2px rebeccapurple;
transition: all 2s;
cursor: pointer;
display: none;
}
.back:hover{
background-color: cadetblue;
}
.con{
width: 500px;
height: 500px;
background-color: aquamarine;
margin: 0 auto;
position: fixed;
right: 35px;
bottom: 200px;
}
</style>
</head>
<body>
<div class="back">返回顶部</div>
<div class="con"></div>
</body>
<script src="./js/jquery-3.6.1.min.js"></script>
<script>
//匿名函数实现闭包，模拟块级作用域，减少全局变量，降低命名冲突
//执行完匿名函数，存储在内存中的相关变量会被销毁，节省内存
$(function(){
//scrollTop:滚轮初始时距离顶部的位置
$(document).scrollTop(100);
//offset().top：.con内容距离顶部的距离
let boxTop=$('.con').offset().top;
//console.log(boxTop);
$(window).scroll(function(){
//console.log($(document).scrollTop());
if($(document).scrollTop()>=300){
//fadeIn():逐渐改变被选元素的不透明程度,和display: none;配套使用
$('.back').fadeIn();
}else{
//fadeOut():从隐藏到可见
$('.back').fadeOut();
}
});
//点击返回到顶部
$('.back').on('click',function(){
//方法1：返回速度过快，解决方法：方法2
//$(document).scrollTop(0);
//方法2：
//stop():停止所有在指定元素上正在运行的动画。
$('html,body').stop().animate({
scrollTop:0
},500)
})
})
</script>
</html>（1）使用固定定位：
/* 固定定位:随着页面滚轮的滑动，此内容一直固定不动 */
position: fixed;
right: 30px;
bottom: 100px;
（2）使用匿名函数：
//匿名函数实现闭包，模拟块级作用域，减少全局变量，降低命名冲突
//执行完匿名函数，存储在内存中的相关变量会被销毁，节省内存
（3）点击回到顶部的方法有两种：
//方法1：返回速度过快，解决方法：方法2
//$(document).scrollTop(0);
//方法2：
//stop():停止所有在指定元素上正在运行的动画。
$('html,body').stop().animate({
scrollTop:0
},500)
效果：
起始位置：
滑块到达距离顶部>300位置时：
点击返回顶部：
