jQuery属性操作prop()、attr()和data()
jQuery 提供了一些属性操作的方法，主要包括 prop()、attr() 和 data() 等。通过这些方法，能够实现不同的需求。下面我们分别进行详细讲解。
1.prop() 方法
prop0 方法用来设置或获取元素固有属性值。元素固有属性是指元素本身自带的属性，如 标签的 href 属性。具体语法示例如下：
$(selector).prop("属性名") //获取属性值
$(selector).prop("属性“,“属性值") //设置属性值
下面我们通过代码演示 prop() 方法的使用。
<a href="http://localhost" title="主页"></a>
<script>console.log($("a").prop("href")); //输出结果：http://localhost$("a").prop("title","首页"); //设置title的值为“首页”
</script>
在上述代码中，第 3 行代码用于获取 标签的 href 属性，输出到控制台中。第 4 行代码用于设置 < a > 标签的 title 属性，将属性值设为 “首页”。
在开发中，还会经常使用 prop(‘属性’) 获取表单元素的 checked 值，示例代码如下：
<input type="checkbox"checked>
<script>//获取表单元素的checked值$("input").change(function() {console.log($(this).prop("checked")); //复选框选中时,输出结果为true});
</seript>
上述代码中，第 1 行代码设置了 input 的 type 值为 checkbox，表示复选框。第 4 行代码给 input 绑定了 change 事件，当表单元素状态发生变化时触发。如果复选框处于选中状态，则输出结果为 true，否则输出 false。
2. attr() 方法
Attr() 用来设置或获取元素的自定义属性，自定义属性是指用户给元素添加的非固有属性。例如，给 div 添加 index 属性，保存元素的索引值。具体语法如下。
$(selector).attr("属性名") // 获取属性值
$(selector).attr(”属性", “属性值“) // 设置属性值
下面我们通过代码演示 attr() 方法的使用，如下所示。
<div index="1" data-index="2">我是div</div>
<script>console.log($("div").attr("index")); // 输出结果：1console.log($("div").attr("data-index")); // 输出结果：2$("div").attr("index", 3); // 设置index的属性值为3$("div").attr("data-index", 4); // 设置data-index属性值为4
</script>
在上述代码中，div 的 index 属性是一个普通的自定义属性，data-index 是 HTML5 的自定义属性 (以“data-” 开头)，使用 atr()方法都可以进行设置或获取。需要注意的是，自定义属性无法使用 prop()设置和获取。
3. data() 方法
data() 方法用来在指定的元素上存取数据。数据保存在内存中，并不会修改 DOM 元素结构; 一旦页面刷新，之前存放的数据都将被移除。具体语法如下：
$(selector).data("数据名") // 获取数据
$(selector).data("数据名"，"数据值") // 设置数据
下面我们演示通过 data() 方法实现数据的操作，示例代码如下。
<div>我是div</div>
<script>$ ("div").data("uname","andy"); // 设置数据console.log ($("div").data("uname")); // 获取数据，输出结果：andy
</script>
上述代码运行后，umame 会保存到内存中，不会出现在 HTML 结构中。
使用 data() 方法还可以读取 HTML5 自定义属性 data-index，示例代码如下：
<div index="1"data-index="2">我是div</div>
<script>console.log($("div").data("index"))；//输出结果：2
</script>
在上述代码中，第 3 行用来获取 data-index 属性，属性名中不需要 “data-” 前缀，并且返回的结果是数字型。