Question

我很想通过jQuery中的.attr();函数为某些页面元素制作一些自定义属性，以便更轻松地进行选择。

我认为这可能是气馁的，因为jQuery和javaScript有很多灵活性，作为一个新手，我还没有学会充分利用它。

除了制作神秘的ID或添加大量课程外，还有哪些方法可以为我的div和其他页面元素添加更多信息，以便通过选择器$()轻松选择？

我对于优点/缺点，以及根据不同方法产生的内存问题或速度问题感到非常好奇。

Answer 1

在元素上创建自定义属性没有任何问题。无论如何，您应该遵循html5 data-规范。

<div id="foo" data-info="hello" data-more="{'iam': 'anobject'}" />

使用它的很酷的事情是，jQuery（最新版本）将自动解析data-x属性并将其添加到.data() expando。

$('#foo').data('info') === 'hello'
$('#foo').data('more').iam === 'anobject'

你仍然可以运行像

这样的选择器

$('div[data-info=hello]')

关于你的元素。

参考：.data()，html5 data attributes

Answer 2

HTML5介绍data-* attributes。因此，如果您要引入自定义属性，我至少会坚持使用此规范。

jQuery中还有.data()方法，用于将任意数据与元素相关联。只要您不需要在选择器中使用数据，这是首选方法。

Answer 3

jQuery插件通常使用一些已经存在的属性，如“rel”或“title”，但jQuery也有.data()方法，用于在javascript中存储特定对象的信息。它就像一个日志。

http://api.jquery.com/jQuery.data/

这两种技术都是可以接受的并且效果很好。

Answer 4

要注意的第一件事是jQuery selectors 非常强大。您并不总是需要通过ID或类进行选择 - 您可以按标签，类型，与其他选择（儿童/父母/兄弟姐妹/等）的关系进行选择。因此，可能不需要为各种元素添加ID或类以便选择它们。

话虽如此，不要仅仅为避免类和ID而避免使用类和ID。它们存在是有原因的，其原因在于可以直接和简单地选择它们（无论是使用jQuery还是CSS或其他任何东西）。如果删除类和ID，可能会使HTML看起来更好，但是jQuery代码可能会变得错综复杂和/或效率很低。（例如，直接选择ID总是比选择父组件并找到其子组件更快。）

Answer 5

我认为你不应该气馁使用attr（）。它是一个功能强大的工具，真正有助于为您的元素添加更多信息。我有一些项目使用它来支持内部javascript框架，它使我的代码干净清晰。它的优势在于易于与选择器配合使用！

Answer 6

您应该只使用类和ID进行初始选择，但这里有一些方便的选择器，您可以在此基础上使用：

http://api.jquery.com/category/selectors/

Answer 7

唯一ID是通过jQuery查找元素的最快方式，因此如果您的诱惑的目的是让jQuery更容易检索元素，那么它似乎毫无意义。

我已经使用这些技术添加title或alt等属性，以便更好地访问。

Answer 8

使用.data('key', 'val')设置数据，.data('key')阅读。

Answer 9

我肯定会使用Data api（http://api.jquery.com/jQuery.data/）

jQuery：如何向页面元素添加有用的信息？

9 个答案: