通过标签中的 id 属性将值传递给 javascript/JQuery 是常见的做法吗？安全吗？答案

【问题标题】：Is passing values to javascript/JQuery through the id attribute in tags common practice? Is it safe?通过标签中的 id 属性将值传递给 javascript/JQuery 是常见的做法吗？安全吗？
【发布时间】：2010-09-15 11:13:12
【问题描述】：

我发现自己经常这样做，出于动画目的的特定属性，特别是当我使用通过 PHP 获得的数据库值生成某些东西时。有理由不这样做吗？

一些示例代码，以消除歧义。

这将是 JQuery：

$('.class').each(function(){
    var my_new_width = $(this).attr('id');
            $(this).stop(false, true).animate({width: my_new_width}, 100);
});

HTML 将是：

<img id='100' src='path'/>

很明显，这段代码没有提供任何功能，并且打算与.hover() 或其他东西一起使用。只是想澄清问题中的歧义。

【问题讨论】：

“id 标签”？你能举例说明你的意思吗？
您错误地使用了“标签”一词 - id 是一个属性。 HTML 标记的组成部分是：<elementName attribute="value">
我好像记得html的id属性不能以数字开头。

标签： php javascript jquery html tags

【解决方案1】：

根据 W3C id's must begin with a letter，如果您不这样做，我并不希望它会爆炸。在 HTML5 中，您将在尝试嵌入数据时使用 data- 前缀。

有关更多讨论和信息，请参阅此 SO 问题：Custom attributes - Yea or nay?

就个人而言，我更喜欢使用rel 属性...出于某种原因，我觉得它是正确的...即使它是错误的并且不符合 w3c 标准。

【讨论】：

谢谢！我现在要切换到使用数据属性。 :)
顺便说一句。使用自定义数据属性时是否存在兼容性问题？

【解决方案2】：

使用 id 属性作为信息的占位符是常见的做法并且是安全的，只要您注意一些准则：

ID 必须是唯一的
ID 不能以数字开头

比较有争议的是使用自定义属性占位符。使用 jQuery 可以很容易地从属性中分配和检索值。这将使您的代码更易于阅读和维护，但会破坏 HTML 验证。

【讨论】：

如何使用自定义属性？我可以只编一个属性名，然后使用它吗？
建议您阅读这篇关于自定义属性的文章：ejohn.org/blog/html-5-data-attributes 本质上，在 HTML 5 之前，任何自定义属性都将无法通过 HTML 验证。如果您在自定义属性前加上 'data-' 例如 data-id="value"，则 HTML 5 验证将通过
谢谢丹尼尔。这个评论太棒了！正是我想要的。

【解决方案3】：

如果您的意思是我认为的意思，这是一种非常普遍的做法，您应该会发现它相对安全，如果您包含一些示例代码会有所帮助。

只要元素上的 id 是唯一的，您就不会遇到同时访问多个 ID 的问题。

Here are the jQuery docs on the Id selector.。本质上，语法是$("#elementId")。由于选择器只是一个字符串文字，您可以通过这种方式注入元素的 id：$("#" + elementId)，其中 elementId 在这种情况下是一个变量。

不这样做的唯一原因是当您发现自己一遍又一遍地为许多元素重复相同的 jQuery 时，脚本之间的唯一区别是传递的 Id。在这种情况下，您应该使用类选择器：

当您开始使用选择器语法选择类时，您将真正体验到 jQuery 的强大功能：$(".className")。这将返回元素的“包装集”，本质上是匹配元素的数组。

它允许您在一次调用中将行为绑定到多个元素。正是这个功能大大减少了我大部分页面上的脚本行数。

【讨论】：

我认为他的意思并不像你想的那样......我认为他说的是在页面上设置属性的 ID，比如，然后得到在某些 jQuery 代码中以某种方式持有该元素，并从中获取 ID (3)，以用于其他操作。
谁能说出来？不知道为什么有人对我投了反对票。即使不是这个模糊问题的答案，我所说的也没有错。

【解决方案4】：

这对我来说似乎非常违反直觉，主要是因为您似乎不太可能保证唯一性，还因为这不是 ID 的本意——它会让其他阅读您的代码的人感到困惑。

也许如果你发布一个更完整的例子来说明你是如何使用它的，人们会更容易提出更好的方法。

【讨论】：

我添加了一个非常简短的示例。显然，id 必须是唯一的。这可以通过使用 mysql 中的主键或唯一键作为属性来完成；或手动确保 .html 文件。但老实说，我认为自己需要这种技巧的唯一一次是当我使用数学来确定新的 css 属性应该是什么时，或者当我链接到数据库时。