JavaScript中的 attribute 和 jQuery中的 attr 方法浅析

JavaScript中的attribute和jQuery中的attr方法浅析

在JavaScript和jQuery中，都提供了获取和设置元素属性的方法。但是它们的实现机制和细节是不同的。

JavaScript中的attribute

getAttribute()和setAttribute()是JavaScript提供的操作元素属性的方法。前者可以获取指定元素的指定属性，后者可以将指定的属性设置为指定的值，如果元素中没有该属性，则创建该属性并设置其值。

示例1：获取元素属性

<div id="box" data-name="John"></div>

var box = document.getElementById('box');
var name = box.getAttribute('data-name');
console.log(name); //输出 John

示例2：设置元素属性

box.setAttribute('data-age', 18);
console.log(box.getAttribute('data-age')); //输出 18

jQuery中的attr方法

在jQuery中，也提供了获取和设置元素属性的方法，可以使用attr()方法获取或设置元素的指定属性值。

示例1：获取元素属性

<div id="box" data-name="John"></div>

var name = $('#box').attr('data-name');
console.log(name); //输出 John

示例2：设置元素属性

$('#box').attr('data-age', 18);
console.log($('#box').attr('data-age')); //输出 18

上述两种示例中，JavaScript和jQuery的实现机制略有差异，但最终效果是一致的。

要注意的是，在jQuery中，使用prop()方法可以获取或设置元素的属性值，但是它与attr()方法的区别是，前者获取的是指定属性的属性值，后者获取的是指定属性的HTML属性值。

综上所述，对于获取和设置元素属性，JavaScript提供了getAttribute()和setAttribute()方法，而jQuery提供了attr()方法和prop()方法。这些方法的使用应根据实际需求和实现机制来选择。