jQuery中attr、prop、data三者有何具体区别及各自用法详解？

本文共计937个文字，预计阅读时间需要4分钟。

本例讲解jQuery中的attr、prop、data的区别与用法。

在jQuery中，获取或设置元素的属性可以通过attr、prop、data三种方法实现。它们各自有特定的用途和场景。

1. attr - 用途：获取或设置元素的HTML属性。 - 示例：`$('div').attr('class', 'newClass');` - 适用于：任何HTML属性，包括自定义属性。

2. prop - 用途：获取或设置元素的HTML属性，但主要针对HTML5中的属性，如表单控件属性。 - 示例：`$('input[type=text]').prop('readonly', true);` - 适用于：HTML5属性，如type、name、readonly等。

3. data - 用途：用于存储与元素相关联的数据，不作为HTML属性。 - 示例：`$('div').data('info', 'Some data');` - 适用于：存储任意类型的数据，适合用于自定义数据存储。

区别：- 数据类型：attr和prop用于获取和设置HTML属性，data用于存储自定义数据。- 数据持久性：attr和prop设置的属性会出现在元素的HTML代码中，而data存储的数据不会。- HTML5属性：prop特别适用于HTML5的属性，而attr可以用于所有属性。

总结：选择使用哪种方法取决于具体需求。对于HTML属性，使用attr或prop；对于自定义数据，使用data。

本文实例讲述了jquery中attr、prop、data区别与用法。