jquery 添加

在jQuery中，我们可以使用attr()方法来添加或修改HTML元素的标签属性。attr()方法接受两个参数：属性名和属性值，如果只提供一个参数，那么它将返回该属性的值。

以下是一些示例，展示了如何使用attr()方法来添加或修改HTML元素的标签属性：

1、添加新的属性：

// 为所有的<p>元素添加一个名为"datacustom"的新属性，值为"example"
$("p").attr("datacustom", "example");

2、修改现有的属性：

// 将所有的<a>元素的href属性修改为"https://www.example.com"
$("a").attr("href", "https://www.example.com");

3、检查并设置属性：

// 检查所有的<img>元素是否具有src属性，如果没有，则添加它
$("img").each(function() {
  if (!$(this).attr("src")) {
    $(this).attr("src", "default.jpg");
  }
});

4、删除属性：

// 删除所有的<div>元素的一个名为"datacustom"的属性
$("div").removeAttr("datacustom");

5、动态添加属性：

// 为所有的<li>元素动态添加一个名为"dataindex"的属性，值为其在列表中的索引值
$("li").each(function(index) {
  $(this).attr("dataindex", index);
});

6、动态修改属性：

// 将所有的<span>元素的class属性修改为一个新的类名"newclass"
$("span").attr("class", "newclass");

7、动态删除属性：

// 删除所有具有特定类名的元素的一个名为"datacustom"的属性
$(".specificclass").removeAttr("datacustom");

8、动态检查并设置属性：

// 检查所有具有特定类名的元素是否具有某个属性，如果没有，则添加它
$(".specificclass").each(function() {
  if (!$(this).attr("target")) {
    $(this).attr("target", "_blank");
  }
});

9、动态获取属性值：

// 获取所有具有特定类名的元素的一个名为"datacustom"的属性值，并将其存储在一个数组中
var dataCustomValues = $(".specificclass").map(function() {
  return $(this).attr("datacustom");
}).get();

10、动态设置多个属性：

// 为所有具有特定类名的元素设置多个属性，包括class、id和style等
$(".specificclass").attr({
  "class": "newclass",
  "id": "newid",
  "style": "color: red; fontsize: 16px;"
});

通过以上示例，我们可以看到，使用jQuery的attr()方法可以非常方便地添加、修改、删除和检查HTML元素的标签属性，这使得我们在处理HTML元素时更加灵活和高效。