jquery获取属性值

在前端开发中，经常需要获取元素的属性值，比如获取图片的src，获取a标签的href等等。而在jquery中，获取属性值也是非常方便的。本文将从多个角度分析，介绍jquery获取属性值的方式和注意事项。

1. attr()方法

jquery提供了attr()方法来获取元素的属性值。该方法的语法如下：

```

$(selector).attr(attributeName)

```

其中，selector表示要获取属性值的元素，attributeName表示要获取的属性名。例如，获取图片的src属性值可以使用以下代码：

```

var imgUrl = $('img').attr('src');

```

2. prop()方法

除了attr()方法外，jquery还提供了prop()方法来获取元素的属性值。该方法的语法如下：

```

$(selector).prop(propertyName)

```

其中，selector表示要获取属性值的元素，propertyName表示要获取的属性名。与attr()方法不同的是，prop()方法获取的是元素的属性状态而非属性值。例如，获取checkbox的checked属性状态可以使用以下代码：

```

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

```

3. data()方法

对于自定义属性，jquery提供了data()方法来获取属性值。该方法的语法如下：

```

$(selector).data(key)

```

其中，selector表示要获取属性值的元素，key表示自定义属性的名称。例如，获取自定义属性data-img的值可以使用以下代码：

```

var imgData = $('img').data('img');

```

需要注意的是，自定义属性的名称必须以"data-"开头。

4. 获取多个属性值

有时候需要一次性获取多个属性值，jquery也提供了相应的方法。以下方法可以同时获取多个属性值：

```

$(selector).attr({

attributeName1: value1,

attributeName2: value2,

...

})

```

例如，同时获取图片的src和alt属性值可以使用以下代码：

```

var imgInfo = $('img').attr({

'src': '',

'alt': ''

});

```

5. 注意事项

在使用jquery获取属性值时，需要注意以下几点：

- 如果要获取的元素不存在，attr()和prop()方法会返回undefined，而data()方法会返回null。

- 对于checkbox和radio等表单元素，prop()方法获取的是属性状态而非属性值。

- 对于自定义属性，名称必须以"data-"开头。

- 对于HTML5新增的属性，如dataset，可以使用attr()方法获取，但使用prop()方法获取会返回undefined。

综上所述，jquery提供了多种方法来获取元素的属性值，可以根据实际情况选择合适的方法。在使用时需要注意各种方法的语法和注意事项，以避免出现错误。