jQuery 设置和获取属性（四）

标签（空格分隔）： 前端学习

---

设置和获取属性

$('li').attr('name')//获取li元素的name属性

$('li').attr('name','tom')//修改li元素的name属性值为tom

$('li').attr({
     'name': 'tom',
     'age': '18'
})//设置多个属性

$('li').removeAttr('name')//删除name属性

设置表单元素的属性
可以使用prop()方法针对checked、selected、disable属性，要使用prop()方法。prop方法通常用来影响DOM元素的动态状态，而不是修改HTML的属性。

$('checkbox').prop('checked')//获取checked属性值

$('checkbox').prop('checked',true)//设置checked属性值为true

$('checkbox').removeProp('checked')//移除checked属性

特殊属性操作
1.val()方法

$('#name').val('张三') //设置值

$('#name').val() //获取值

2.html和text方法
html方法相当于innerHTML，text相当于innerText

$('div').html('<span>这是一段内容</span>') //设置内容
$('div').html() //获取内容
$('div').text('<span>这是一段内容</span>')
$('div').text()//获取内容

注：html方法会识别html标签，text方法会直接获取内容中字符串的部分，并不会识别html标签

3.height和width方法

$('img').height() //不带参数获取高度
$('img').height(200) //带参数设置高度
$(window).width() //获取可视区域宽度
$(window).height() //获取可视区域高度

4.offset方法
获取元素距离document的位置

let position = $('#d1').offset() //获取元素在页面(document)中的坐标
$('#d1').offset({
    left: 400,
    top: 500
}) //设置元素坐标

5.position方法
获取元素距离有定位的父元素的位置

let position = $('.child').position() //获取相对于最近的有定位的父元素的位置

6.scrollTop与scrollLeft方法
设置或者获取滚动条的位置,可以设置回到顶部等操作

$(window).scrollTop() //获取页面被卷曲的高度
$(window).scrollTop(200) //设置页面被卷曲的高度
$(window).scrollLeft() //获取页面被卷曲的宽度
$(window).scrollLeft(200)\//设置页面被卷曲的宽度
$(function() {
     $(window).scroll(function(e) {
         console.log(e)
     })
})