JQuery的属性操作及事件

2023-04-18 10:00:47 浏览数 (1)

一、属性操作

1、固有属性

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

代码语言：javascript复制
console.log($('img').prop('src'));

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

代码语言：javascript复制
<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('属性名')

代码语言：javascript复制
console.log($('img').attr('index'));

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

代码语言：javascript复制
<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('属性名')

代码语言：javascript复制
$('img').data('a',5)

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

代码语言：javascript复制
<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方法的话，需要单独封装】

代码语言：javascript复制
<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：循环出来数据

代码语言：javascript复制
<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）创建：$('<标签></标签>')

代码语言：javascript复制
var newli = $('<li>4</li>')

（2）添加

①内部：

        前：选到对应位置.prepend(创建元素)

代码语言：javascript复制
<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(创建元素)

代码语言：javascript复制
$('ul').prepend(newli)

②外部：

        前：选到对应位置.before(创建元素)

代码语言：javascript复制
$('ul').before(newli)

        后：选到对应位置.after(创建元素)

代码语言：javascript复制
$('ul').after(newli)

（3）删除

①选到对应元素：remove()删除本身

代码语言：javascript复制
$('.del').click(function(){
        $(newli).remove()
})

②选到对应元素：empty()删除匹配的所有子节点

代码语言：javascript复制
$('ul').empty()

③对应元素：html('')删除匹配的所有子节点

代码语言：javascript复制
$('ul').html('')  //注意有单引号

4、完整的效果

代码语言：javascript复制
<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、尺寸

例子

代码语言：javascript复制
<!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

代码语言：javascript复制
<script>
    console.log($('div').width());//100
    console.log($('div').height());//200
</script>

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

代码语言：javascript复制
<script>
    console.log($('div').innerWidth());//120
    console.log($('div').innerHeight());//220
</script>

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

代码语言：javascript复制
<script>
    console.log($('div').outerWidth());//130
    console.log($('div').outerHeight());//230
</script>

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

代码语言：javascript复制
<script>
    console.log($('div').outerWidth(true));//150
    console.log($('div').outerHeight(true));//250
</script>

2、位置

（1）offset()：设置或获取元素偏移量（获取,设置元素相对于偏离文档的位置）

代码语言：javascript复制
<!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()：获取元素偏移【只能获取不能设置】

返回被选元素带有定位的父级偏移坐标,如果父级没有定位,那就是以文档为准

代码语言：javascript复制
<!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()设置或获取元素被卷去的头部和左侧

代码语言：javascript复制
<!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）带有动画的返回顶部

代码语言：javascript复制
$(window).scroll(function(){
        $(document).scrollTop()
})

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

前端 学习笔记 jquery事件 属性操作 遍历

0 人点赞