jQuery dom操作 属性操作

jQuery DOM 操作 属性操作

一、通用属性操作

 <div class="attr">
        <img src="./屏幕截图 2020-10-24 173951.jpg" alt="" kaivon ="liu">
        <input type="text" value="这是一个输入框">
 </div>
    

1、attr()获取匹配的元素集合中的第一个元素属性的值

    $('.attr img').attr('src');
     // attr（）获取匹配的元素集合中的第一个元素的属性的值
    
    $('.attr img').attr('title','222');
    // 添加一个属性 attr('属性名','属性值 '),会把属性添加到所有元素的身上。
   
    $('.attr img').attr({
        class:'111',
        alt:"222"
    })
     // 设置多条属性
    

2、prop（）方法

  console.log($('.attr img').prop('src'));
    // prop,弹出图片绝对地址。。。attr弹出src中的内容
    console.log($('.attr img').prop('kaivon'));
    console.log($('.attr img').attr('kaivon'));
    // prop取不到标签的自定义属性，attr可以取到
    // 设置属性,自定义属性并没有添加到DOM标签，但会添加到DOM对象上
    $('.attr img').prop({
        id:'111',
        kaivon:'222'
    })

3、removeAttr() 移除属性

$('.attr img').removeAttr('kaivon');//删除的是标签上的属性
    $('.attr img').removeProp('id') //删除DOM对象上的属性，并不是标签上的属性

4、val() 主要获取表单元素的值

 console.log($('.attr input').val());
    $('.attr input').val('2222');

二、css属性

 <div class="css">
        <h2></h2>
        <p></p>
        <div></div>
 </div>

1、获取第一个元素的样式属性值

   console.log(
        $('.css').css('border'),
        $('.css').css('hieght'),
    );
    $('.css h2').css('width','100px');//设置
    $('.css p').css({
        width:'200px',
        height:'200px',
        padding:'20px',
        margin:'20px auto',
        border:'2px solid #000'
    })
    

2、height()

  console.log(
        $('.css p').width(),//获取宽度值
        $('.css p').height(),//获取高度值
        $('.css p').innerWidth(),//包含padding，但不包含border
        $('.css p').innerHeight(),//包含padding，但不包含border
        $('.css p').outerWidth(),//包含padding，且包含border
        $('.css p').outerHeight(),//包含padding，且包含border
    )
    
```

#### 3、offset()获取和设置元素坐标(相对于document）
```jquery

  console.log(
            $('.css div').offset().left,//相对于document
            $('.css div').offset().top,
        )
        $('.css div').offset({
            left:'300',
            top:'100'
        });
        
```

#### 4、position（）获取和设置元素坐标

```jquery

console.log(
            $('.css div').position().left,//相对于有定位的父级
            $('.css div').position().top,
        )
        // scrollLeft()水平滚动条的位置
        // scrollTop（）垂直滚动条的位置
        console.log(
            $('.css div').scrollLeft(),
            $('.css div').scrollTop(),
        )

```