jQuery的attr()方法和JavaScript的属性操作

在jQuery中，attr() 方法用于获取或设置元素属性的值。而在原生JavaScript中，如果你需要获取或设置属性，通常会使用.setAttribute() 和 .getAttribute() 方法。

以下是两者的对比和使用示例：

jQuery的attr()方法:

获取属性值：

$(selector).attr('attributeName');

设置属性值：

$(selector).attr('attributeName', 'value');

原生JavaScript的setAttribute()和getAttribute()方法:

获取属性值：

element.getAttribute('attributeName');

设置属性值：

element.setAttribute('attributeName', 'value');

举例：

HTML元素：

<img id="myImage" src="image.jpg" alt="My Image">

使用jQuery的attr()方法：

// 获取图片的src属性
var src = $('#myImage').attr('src');
 
// 设置图片的alt属性
$('#myImage').attr('alt', 'New Alt Text');

使用原生JavaScript的setAttribute()和getAttribute()方法：

// 获取图片的src属性
var img = document.getElementById('myImage');
var src = img.getAttribute('src');
 
// 设置图片的alt属性
img.setAttribute('alt', 'New Alt Text');

在实际应用中，你需要根据你的需求和环境来选择使用哪一种方法。jQuery提供了更简洁的语法和跨浏览器的兼容性，而原生JavaScript则提供了更直接和更接近底层的操作方式。