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').attr('index',1)console.log($('img').attr('index'));})
</script>
</body>

3、数据缓存data()：该方法在指定元素上存取数据，不会改变dom元素结构。页面刷新后，之前存储就会消失

（1）获取：选中元素.data('属性名')

$('img').data('a',5)

（2）设置：选中元素.data('属性名','值')

<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()删除本身

$('.del').click(function(){$(newli).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());//100console.log($('div').height());//200
</script>

（2）innerWidth(),innerHeight():获取元素的宽高,width,height+padding

<script>console.log($('div').innerWidth());//120console.log($('div').innerHeight());//220
</script>

（3）outerWidth(),outerHeight():获取元素的宽高,width,height+padding+border

<script>console.log($('div').outerWidth());//130console.log($('div').outerHeight());//230
</script>

（4）outerWidth(true),outerHeight(true):获取元素的宽高,width,height+padding+border+magrin

<script>console.log($('div').outerWidth(true));//150console.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()
})

完整例子：具体动画效果后续补发视频给小伙伴们