如何使用 jQuery 添加 HTML 属性答案

【问题标题】：How to add an HTML attribute with jQuery如何使用 jQuery 添加 HTML 属性
【发布时间】：2011-04-21 10:22:09
【问题描述】：

嗯，我有这个 jQuery 图像幻灯片，它在中使用了属性“control”。看到它没有验证，我搜索了一种通过 jQuery 在我的 HMTL 中添加这个属性的方法，但我并没有真正找到任何相关的东西。现在我并不真正关心我的页面的有效性，但我真的很好奇如何在 HTML 标记中添加 HTML 属性。

如果我的解释不够清楚，我有以下代码：

<a id="previous" control="-6" href="#"></a>

我想用 jQuery 添加 control="-6"。

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

使用jQuery的attr函数

$("#previous").attr("control", "-6");

一个例子

// Try to retrieve the control attribute
// returns undefined because the attribute doesn't exists
$("#previous").attr("control");

// Set the control attribute
$("#previous").attr("control", "-6");

// Retrieve the control attribute (-6)
$("#previous").attr("control");

看到这个example on jsFiddle

您也可以使用data 函数在元素上存储值。工作方式相同，例如：

$("#previous").data("control"); // undefined
$("#previous").data("control", "-6"); // set the element data
$("#previous").data("control"); // retrieve -6

使用data，您可以存储更复杂的值，例如对象

$("#previos").data("control", { value: -6 });
($("#previos").data("control")).value; // -6

查看data example on jsFiddle

【讨论】：

正确答案。但是，我反对使用 data()，我不认为 html 节点是存储数据的合适位置，即混合 V 和 M。我总是创建一个模型对象，用于维护屏幕上的任何常见数据。但是，它对于小型应用和轻量级页面增强很有用

【解决方案2】：

由于这里已经很好地介绍了 jQuery 版本，我想我会提供 一些不同的东西，所以这里有一个原生 DOM API 替代方案：

document.getElementById('previous').setAttribute('control','-6');

是的，我知道您要求使用 jQuery。了解本地方式也永远不会受到伤害。 :o)

【讨论】：

【解决方案3】：

让我看看我是否理解你。例如，您有以下代码：

<a id="previous" href="#"></a>

你希望它是 jQuery：

<a id="previous" control="-6" href="#"></a>

对吗？如果是。你只需要这样做：

$('#previous').attr('control', -6);

如果一个属性不存在，它是由 jQuery 创建的。因此，要删除它，您可以这样做：

$('#previous').removeAttr('control');

你所做的不尊重 html 规则和其他一切，但它工作正常，很多插件都这样做。 ;D

我希望这会有所帮助！

再见！

【讨论】：

你能举一个不遵守规则的例子吗？
HTML 规则不接受自定义标签属性。尝试使用 W3C 验证器validator.w3.org。没什么好担心的，它们工作正常。问题是您的自定义属性可能与插件的自定义属性冲突，甚至与一些新属性冲突。

【解决方案4】：

试试这个：

$('#previous').attr('control', '-6');

为什么？ jQuery 的$.attr(); 函数允许您添加、获取或更新属性（类、id、href、链接、src、控件和其他所有内容！）。

【讨论】：

【解决方案5】：

$("#previous").attr("control", "-6");

【讨论】：

【解决方案6】：

HTML：

<a id="previous" href="#">...</a>

jQuery:

$('#previous').attr('control', '-6');

【讨论】：

【解决方案7】：

jQuery 的attr 可以做到这一点。示例：

$("#previous").attr("control", "-6");

还可以在http://jsfiddle.net/grfSN/ 上查看此示例。

【讨论】：