用法一：获取属性

获取某属性

$(selector).attr(attribute)

例子

获取图片 src 属性值

$("#imgId").attr("src");

用法二：设置属性

设置某属性

$(selector).attr(attribute,value)

例子

设置图片 src 属性值

$("#imgId").attr("src",path);

自定义属性

.attr() 方法支持获取、设置 自定义属性

应用场景：有时，我们要在标签加上自定义的属性，不让用户看到，还能用来保存信息，方便后面使用

html：

<div id="info" data-id="1" data-name="李雷">
该div标签中，加上自定义属性，不让用户看到，还能保存信息，方便后面使用
</div>
<button id="btn">获取属性</button>
<button id="btn2">设置属性</button>

js：

<script>
    $(function(){
        $("#btn").click(function(){
            var id = $("#info").attr("data-id")
            var name = $("#info").attr("data-name")
            console.log("id：",id)
            console.log("name：",name)
        })
        $("#btn2").click(function(){
            var id = $("#info").attr("data-id",'20')
            var name = $("#info").attr("data-name",'韩梅梅')
        })
    })
</script>

注意返回值是 undefined

如果当前元素 没有设定某属性，浏览器会默认给这个元素加上 默认值，如下面代码，图片有默认的 width 和 height：

<img id="imgId" src="1.jpg" />

但是使用attr只能返回 undefined，如下：

$("#imgId").attr("width")

解决

可以使用 .prop() 方法，如下：

$("#imgId").prop("width")

注意： .prop() 方法 不能获取 自定义属性

参考：
https://www.runoob.com/jquery/html-attr.html

原文出处：/show_1IX5mwi6rVwZ.html