JQuery中attr属性和jQuery.data()学习笔记【必看】

JQuery中attr属性和jQuery.data()学习笔记

本篇学习笔记主要介绍 JQuery 中的 attr 属性和 jQuery.data() 方法，在描述两者的用法和区别之前，需要先认识一些基本概念：

• 属性（Attribute）：HTML 元素的属性（例如 id、class等）。
• 数据（Data）：JavaScript 对象中的变量或者属性，可以通过 JavaScript 对象操作读取或修改。

attr 属性

attr 是 jQuery 提供的一种操作元素属性的方法，通过 attr 方法可以获取或设置 HTML 元素的属性值。以下是 attr 的基本用法示例：

// 获取元素属性值
$('input[type="text"]').attr('name');
// 设置元素属性值
$('input[type="text"]').attr('name','username');

其中，第一个参数是要获取或设置的属性名，第二个参数是要设置的属性值（可选）。如果只有第一个参数，则返回获取到的属性值；如果有第二个参数，则将属性设置为指定的值。

需要注意的是，使用 attr 方法获取到的属性值，一般都是字符串类型。因此，在某些情况下，需要使用 JavaScript 自带的 parseInt 和 parseFloat 函数进行类型转换。

jQuery.data()

jQuery.data() 方法是 jQuery 提供的一种读取或设置数据的方法，可以在 JavaScript 对象中存储数据。与 attr 属性不同，jQuery.data() 在存储数据时不会改变 DOM 元素的属性。以下是 jQuery.data() 的基本用法示例：

// 设置、读取数据
$('input[type="text"]').data('username','John Smith');
$('input[type="text"]').data('username');

// 处理数据
$('input[type="text"]').data('age', 30);
$('input[type="text"]').data('age', function(i, val) {
  return val + 1;
});

其中，第一个参数是要存储或读取的属性名，第二个参数是要存储的属性值（可选），或者是一个函数，用于处理已经存储的值并返回新的值。如果只有一个参数，则返回获取到的属性值。

需要注意的是，使用 jQuery.data() 方法读取到的值，可以是任意数据类型，而且可以存储任意 JavaScript 对象。这个特性使得 jQuery.data() 比 attr 更加灵活，因为它可以存储更多的数据。

区别

• attr 对应 HTML 元素的属性，设值的时候会直接修改 DOM 树，而 jQuery.data() 存储的数据不会修改 DOM 树。
• attr 设置的属性值必须为字符串类型，而 jQuery.data() 存储的值可以是任意类型，包括函数和对象。

示例说明

示例1：使用 attr 属性修改元素属性值

假设我们有一个网站，上面有一个文本框，用于输入用户的邮箱地址。当用户在文本框输入了一个有效的邮箱地址后，我们需要将文本框的边框样式改变为绿色，表示输入的邮箱地址正确。以下是示例代码：

<input type="text" id="email" name="email" placeholder="请输入邮箱地址">

$("#email").on("blur", function(){
  if(isValidEmail($(this).val())){
    $(this).attr("style","border:1px solid green");
  }
});

function isValidEmail(email){
  // 此处省略邮箱验证逻辑
  return true;
}

在 input 元素中，我们添加了一个 id 属性，用于方便在 jQuery 中选择该元素。在代码中，我们使用 jQuery 的 on 方法，监听文本框的 blur 事件（当用户从输入框中离开之后触发），并在事件处理函数中，使用 attr 属性设置 border 样式，以改变文本框的样式。

示例2：使用 jQuery.data() 存储数据

假设我们有一个网站，上面有一个购物车功能。当用户在购物车页面中勾选了某个商品之后，我们需要将该商品添加到购物车中，并更新购物车中的商品数量和总价。以下是示例代码：

<div id="cart"></div>
<input type="checkbox" id="product" name="product" value="1" data-price="100">

$("#product").on("change", function(){
  var price = $(this).data("price");
  var isChecked = $(this).prop("checked");

  if(isChecked){
    var cart = $("#cart").data("cart") || {total:0, count:0};
    cart.total += price;
    cart.count += 1;
    $("#cart").data("cart", cart);
  } else {
    var cart = $("#cart").data("cart");
    cart.total -= price;
    cart.count -= 1;
    $("#cart").data("cart", cart);
  }

  updateCart();
});

function updateCart(){
  var cart = $("#cart").data("cart");
  $("#cart").html("购物车：共"+cart.count+"件商品，总价￥"+cart.total+"元。");
}

在 input 元素中，我们添加了一个 data-price 属性，用于指定该商品的单价。在代码中，我们使用 jQuery 的 data 方法，在购物车中存储 cart 对象，对象中包含总价和数量两个属性。在监听复选框的 change 事件之后，我们读取 data-price 字段的值，并根据选中状态更新 cart 对象中的数据。最后，我们使用 updateCart 函数，更新购物车显示的文本内容。