jQuery attr 与 prop

Java

jQuery attr 与 prop？

jQuery 是一款广泛使用的 JavaScript 库，用于简化 HTML 文档遍历、事件处理、动画等操作。在 jQuery 中，常常会用到两个函数 attr() 和 prop() 来操作元素的属性和属性值。这两个函数看起来很相似，但在使用的时候有一些细微的差别。本文将介绍 attr() 和 prop() 的区别，并通过案例代码来说明它们的使用方法。

attr() 函数

attr() 函数用于获取或设置元素的属性值。通过传入一个属性名作为参数，我们可以获取指定元素的属性值。同时，也可以传入属性名和属性值来设置元素的属性值。

下面是一个简单的案例代码，演示了如何使用 attr() 函数获取和设置元素的属性值：

Javascript
// 获取元素的属性值
var hrefValue = $('a').attr('href');
console.log(hrefValue);
// 设置元素的属性值
$('img').attr('src', 'new-image.jpg');

在上述代码中，我们使用了 $('a') 来选取页面中的所有 <a> 标签，并通过 attr('href') 来获取这些标签的 href 属性值。然后，我们使用了 $('img') 来选取页面中的所有 <img> 标签，并通过 attr('src', 'new-image.jpg') 来将这些标签的 src 属性值设置为 'new-image.jpg'。

prop() 函数

prop() 函数用于获取或设置元素的属性。与 attr() 不同，prop() 获取的是元素的属性本身，而不是属性值。同时，也可以传入属性名和属性值来设置元素的属性值。

下面是一个简单的案例代码，演示了如何使用 prop() 函数获取和设置元素的属性：

Javascript
// 获取元素的属性
var isChecked = $('input[type="checkbox"]').prop('checked');
console.log(isChecked);
// 设置元素的属性值
$('input[type="radio"]').prop('checked', true);

在上述代码中，我们使用了 $('input[type="checkbox"]') 来选取页面中的所有 标签中 type 属性值为 "checkbox" 的元素，并通过 prop('checked') 来获取这些元素的 checked 属性。然后，我们使用了 $('input[type="radio"]') 来选取页面中的所有 标签中 type 属性值为 "radio" 的元素，并通过 prop('checked', true) 来将这些元素的 checked 属性设置为 true。

attr() 和 prop() 都是 jQuery 中用于操作元素属性的函数，但在使用上有一些区别。attr() 用于获取或设置元素的属性值，而 prop() 用于获取或设置元素的属性。需要根据具体的需求来选择使用哪个函数。

通过本文的介绍，我们了解了 attr() 和 prop() 的区别，并通过案例代码演示了它们的使用方法。希望这些内容对你在使用 jQuery 进行开发时有所帮助！