jquery怎么获取标签的属性值

胖磊大大_2816

发布时间：2023-04-06 08:54:39

6215人浏览过

来源于php中文网

原创

近年来，web 前端已经成为非常火热的行业，而 jquery 作为一款优秀的 javascript 库，被广泛应用于 web 前端开发的各个方面。在使用 jquery 时，获取标签属性值是基础中的基础。下面，我们来了解一下 jquery 获取标签属性值的几种方法。

1. attr() 方法

attr() 方法是 jQuery 中比较常见的一个方法，它用于获取或设置指定元素的属性值。下面是 attr() 方法的基本语法：

$(selector).attr(attribute)

其中，selector 表示指定的元素，attribute 表示要获取或设置的属性名。如果要获取指定元素的某个属性值，那么可以在 attribute 参数中传入该属性名。例如，我们要获取某个 div 元素的 class 属性值，可以这样写：

var className = $('div').attr('class');

上面的代码中，$('div') 表示选取所有的 div 元素，attr('class') 表示获取这些元素的 class 属性值。如果要设置某个元素的属性值，则需要在 attribute 参数中传入该属性名和属性值。例如，我们要将某个 img 元素的 src 属性值修改为 newImg.png，可以这样写：

$('img').attr('src', 'newImg.png');

在使用 attr() 方法获取标签属性值时，需要注意以下几点：

如果选择器所匹配的元素有多个，那么只会返回第一个元素的属性值。
如果属性不存在，则返回 undefined。
如果属性名写错了，也会返回 undefined。

2. prop() 方法

prop() 方法与 attr() 方法类似，也用于获取或设置指定元素的属性值。不同的是，prop() 方法主要用于获取或设置一些元素特有的属性，例如 checked、selected 等。下面是 prop() 方法的基本语法：

$(selector).prop(property)

其中，selector 表示指定的元素，property 表示要获取或设置的属性名。如果要获取指定元素的某个属性值，那么可以在 property 参数中传入该属性名。例如，我们要获取某个 checkbox 元素的 checked 属性值，可以这样写：

var isChecked = $('input[type=checkbox]').prop('checked');

上面的代码中，$('input[type=checkbox]') 表示选取所有的 checkbox 元素，prop('checked') 表示获取这些元素的 checked 属性值。如果要设置某个元素的属性值，则需要在 property 参数中传入该属性名和属性值。例如，我们要将某个 checkbox 元素的 checked 属性值设置为 true，可以这样写：

$('input[type=checkbox]').prop('checked', true);

在使用 prop() 方法获取标签属性值时，需要注意以下几点：

如果选择器所匹配的元素有多个，那么只会返回第一个元素的属性值。
如果属性不存在，则返回 undefined。
如果属性名写错了，也会返回 undefined。

3. data() 方法

data() 方法是 jQuery 中比较常见的另一种获取标签属性值的方法，它用于获取指定元素的自定义数据属性。下面是 data() 方法的基本语法：

$(selector).data(key)

其中，selector 表示指定的元素，key 表示要获取的自定义数据属性名。例如，我们要获取某个 div 元素的自定义数据属性 data-id 的值，可以这样写：

<div data-id="123"></div>

var dataId = $('div').data('id');

上面的代码中，$('div') 表示选取所有的 div 元素，data('id') 表示获取这些元素的自定义数据属性 data-id 的值。如果要设置某个元素的自定义数据属性，则需要在 data() 方法中传入该属性名和属性值。例如，我们要将某个 div 元素的自定义数据属性 data-name 设置为 myName，可以这样写：