JQuery的属性操作及事件
一、属性操作
1、固有属性
（1）获取：选中元素.prop('属性名')
console.log($('img').prop('src')); （2）设置：选中元素.prop('属性名','值')<body>
<img src="https://p1.music.126.net/c-LMZbZbQLcMobnFciAl7w==/109951167683507100.jpg?imageView&quality=89" alt="">
<button>修改</button>
<script>
$('button').click(function(){
$('img').prop('src','https://p1.music.126.net/wb1Gd2C7DknUivCqdFaKeQ==/109951167683687375.jpg?imageView&quality=89')
console.log($('img').prop('src'));
})
</script>
</body> 2、自定义属性attr()
（1）获取：选中元素.attr('属性名')
console.log($('img').attr('index'));
（2）设置：选中元素.attr('属性名','值')
<body>
<img src="https://p1.music.126.net/c-LMZbZbQLcMobnFciAl7w==/109951167683507100.jpg?imageView&quality=89" alt="">
<button>修改</button>
<script>
$('button').click(function(){
$('img').data('a',5)
console.log($('img').data('a'));
})
</script>
</body> （3）区别①data()：在元素本身是看不到设置的属性（不会更改DOM结构），但是该属性是存在的，且可以获取输出
②attr()：在元素本身是可以看到设置的属性，也可以获取输出
二、遍历操作
1、区别
（1）隐式迭代：给同一类元素做同样的操作（2）遍历操作：给同一类元素做不同的事情
2、遍历元素
（1）each(fuction(index,domEle))index：下标
domEle：Dom元素【注意：不是jq元素，用jq方法的话，需要单独封装】
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var colorArr = ['red','green','blue']
$('li').each(function(index,dom){//一定要注意记得传参
console.log(index,dom);
$(dom).css('background',colorArr[index])
})
</script>
</body> （2）$.each(object,function(index,element){})
index：下标
element：循环出来数据
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var colorArr = ['red','green','blue']
$.each(colorArr,function(index,item){
console.log(index,item);
})
</script>
</body> 3、创建/添加/删除元素
（1）创建：$('<标签></标签>')
var newli = $('<li>4</li>')
（2）添加
①内部前面：选到对应位置.prepend(创建元素)
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<button class="add">添加</button>
<button class="del">删除</button>
<script>
$('.add').click(function(){
var newli = $('<li>4</li>')
$('ul').append(newli)
})
</script>
</body> 
②内部后面：选到对应位置.append(创建元素)
$('ul').prepend(newli)
③外部前面：选到对应位置.before(创建元素)
$('ul').before(newli)
④外部后面：选到对应位置.after(创建元素)
$('ul').after(newli)
（3）删除
①选到对应元素：remove()删除本身
②选到对应元素：empty()删除匹配的所有子节点
$('ul').empty()
③对应元素：html('')删除匹配的所有子节点
$('ul').html('') //注意有单引号
4、完整的效果
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<button class="add">添加</button>
<button class="del">删除</button>
<script>
$('.add').click(function(){
var newli
$('li').each(function(index,dom){
newli = $(`<li>${index+2}</li>`)//``模板字符串
})
$('ul').append(newli)
})
$('.del').click(function(){
$('ul').html('')
})
</script>
</body> 三、尺寸、位置操作
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-3.6.0.js"></script>
<style>
div{
width: 100px;
height: 200px;
padding: 10px;
border: 5px solid red;
margin: 10px;
}
</style>
</head>
<body>
<div></div>
</body>
</html> （1）width(),height():获取元素的宽高，只算宽高width、height<script>
console.log($('div').width());//100
console.log($('div').height());//200
</script> （2）innerWidth(),innerHeight():获取元素的宽高,width,height+padding<script>
console.log($('div').innerWidth());//120
console.log($('div').innerHeight());//220
</script> （3）outerWidth(),outerHeight():获取元素的宽高,width,height+padding+border<script>
console.log($('div').outerWidth());//130
console.log($('div').outerHeight());//230
</script> （4）outerWidth(true),outerHeight(true):获取元素的宽高,width,height+padding+border+magrin<script>
console.log($('div').outerWidth(true));//150
console.log($('div').outerHeight(true));//250
</script> 2、位置
（1）offset()：设置或获取元素偏移量（获取,设置元素相对于偏离文档的位置）
<!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-3.6.0.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 200px;
padding: 10px;
border: 5px solid red;
margin: 10px;
}
</style>
</head>
<body>
<div></div>
<script>
console.log($('div').offset());
$('div').offset({top:50,left:30})
console.log($('div').offset());
</script>
</body>
</html> （2）position()：获取元素偏移【只能获取不能设置】
返回被选元素带有定位的父级偏移坐标,如果父级没有定位,那就是以文档为准
<!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-3.6.0.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 100px;
height: 200px;
padding: 10px;
border: 5px solid red;
margin: 10px;
position: relative;
}
.son{
width: 20px;
height: 20px;
background-color: skyblue;
position: absolute;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<script>
console.log($('.son').position());
$('.father').offset({top:50,left:30})
console.log($('.son').position());
</script>
</body>
</html> （3）滚动条：scrollTop()/sroclLeft()设置或获取元素被卷去的头部和左侧<!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-3.6.0.js"></script>
<style>
.box{
width: 300px;
height: 300px;
overflow: auto;
}
</style>
</head>
<body>
<div class="box">
<img src="https://p1.music.126.net/RQImixd1s2jJwb7LWbv-iw==/109951167683330209.jpg?imageView&quality=89" alt="">
</div>
<script>
$('.box').scroll(function(){
console.log($('.box').scrollTop()); //返回：顶部滚动多少
})
</script>
</body>
</html> （4）带有动画的返回顶部
$(window).scroll(function(){
$(document).scrollTop()
}) 完整例子：具体动画效果后续补发视频给小伙伴们🧐<!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-3.6.0.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.btn{
width: 200px;
height: 50px;
background-color: skyblue;
line-height: 50px;
text-align: center;
position: fixed;
bottom: 100px;
right: 50px;
display: none;
}
</style>
</head>
<body>
<img src="http://p1.music.126.net/c-LMZbZbQLcMobnFciAl7w==/109951167683507100.jpg?imageView&blur=40x20" alt="">
<img src="http://p1.music.126.net/wb1Gd2C7DknUivCqdFaKeQ==/109951167683687375.jpg?imageView&blur=40x20" alt="">
<img src="http://p1.music.126.net/RQImixd1s2jJwb7LWbv-iw==/109951167683330209.jpg?imageView&blur=40x20" alt="">
<button class="btn">返回顶部</button>
<script>
$(window).scroll(function () {
console.log($(document).scrollTop());
if ($(document).scrollTop() >= 300) {
$('.btn').fadeIn(500)
} else {
$('.btn').fadeOut(500)
}
})
$('.btn').click(function () {
$('html').animate(
{
scrollTop: '0'
},
1000
)
})
</script>
</body>
</html> 四、事件（jQuery 事件 | 菜鸟教程 (runoob.com)）
1、单个事件注册：element.事件(fuction(){})
（1）.hover：模仿鼠标悬停事件
（2）参数
①函数1：鼠标移上去触发什么事件
②函数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-3.6.0.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
button{
width: 200px;
height: 50px;
}
</style>
</head>
<body>
<button>鼠标悬浮</button>
<script>
$('button').hover(
function(){
$(this).css('background','red')
},
function(){
$(this).css('background','')
}
)
</script>
</body>
</html> 2、事件处理on()绑定事件：$('选择器').on('类型',fuction(){})
（1）优点一：可以绑定多个函数，处理相同或不同的程序
①处理相同的程序
<script>
$('button').on('click mouseenter',function(){
console.log('成功');
})
</script> ②处理不同的程序<script>
$('button').on({
click:function(){
console.lo***击成功');
},
mouseenter:function(){
console.log('成功');
}
})
</script> （2）优点二： 可以给动态生成元素绑定，绑定事件（必须是对子节点绑定）<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<button class="add">添加</button>
<button class="del">删除</button>
<script>
$('.add').click(function(){
var newli
$('li').each(function(index,dom){
newli = $(`<li>${index+2}</li>`)//``模板字符串
})
$('ul').append(newli)
})
$('.del').click(function(){
$('ul').html('')
})
$('ul').on('click','li',function(){
console.lo***击');
})
</script>
</body> 3、事件处理off()解绑事件
（1）移除全部事件：ele.off()
<script>
$('button').on({
click:function(){
console.lo***击成功');
},
mouseenter:function(){
console.log('成功');
}
})
$('button').off()
</script> （2）移除某一个事件：ele.off('类型')$('button').off('click') 4、事件只触发一次：one()
$('button').one('click',function(){
console.log('仅一次');
}) 5、自动触发事件
$('button').click() 五、插件
jQuery插件库-收集最全最新最好的jQuery插件 (jq22.com)
小伙伴可以在这个网站找喜欢的作品，下载压缩包后，可以直接看效果，而且都有源码的哦🧐
JS及JQuery框架 文章被收录于专栏
JavaScript的基本语法（变量、数据类型、运算符等等），流程控制（顺序、分支、循环），数组，函数（作用域、预解析），对象（自定义、内置），DOM（节点操作、获取元素），BOM（定时器、回调函数、同步异步） JQuery框架的入口函数，隐式迭代，排他思想，链式编程，样式操作，属性操作，事件监听
查看11道真题和解析
