jQuery: how can I add helpful information to my page elements?

I am tempted to make some custom attributes for some page elements to make selection easier, via the .attr(); function in jQuery.

I figure that this is probably discouraged, as there is a lot of flexibility in jQuery and javaScript that, as a novice, I have not learned to employ yet to its full potential.

Other than making cryptic IDs or adding lots of classes, what are some ways to add more information to my divs and other page elements for easy selecting via the selector $()?

I'm开发者_JAVA技巧 mostly curious as to pros/cons, and what memory issues or speed issues result based on different approaches.

There isn't a problem at all creating custom attributes on your elements. Anyway, you should follow the html5 data- spec.

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

The cool thing about using this is, jQuery (latest version) will automatically parse the data-x attributes and adds those into the .data() expando.

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

You are still able to run a selector like

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

on your elements.

ref.: .data(), html5 data attributes

HTML5 introduces data-* attributes. So if you are going to introduce custom attributes, I would at least stick to this specification.

There is also the .data() method in jQuery for associating arbitrary data with elements. As long as you don't need to use the data in a selector, this is the preferred way.

jQuery plug ins usually use some already existing attributes like "rel" or "title" but jQuery also has the .data() method which stores information on an specific object in javascript. It acts like a log.

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

Both of this techniques are acceptable and work well.

The first thing to be aware of is that the jQuery selectors are extremely powerful. You don't always need to select by an ID or a class - you can select by tag, by type, by relation to another selection (children/parents/siblings/etc). So, there may not be a need to add IDs or classes to your various elements in order to select them.

With that said, don't avoid classes and IDs just for avoiding classes and IDs. They exist for a reason, and that reason is to make selection of them straightforward and easy (whether it is with jQuery or CSS or whatever else). If you remove classes and IDs, you may make your HTML look nicer, but your jQuery code may become convoluted and/or very inefficient. (For example, it is always faster to select an ID directly than select a parent component and find its children.)

I don't think you should be discouraged to use attr(). It is a powerfull tool and really helps to add more information to your elements. I have some projects using it to suport internal javascript frameworks and it turns my code clean and legible. And it has the advantage to be is a ease to work with selectors!

You should really be using only classes and IDs for the initial selection but here are some handy selectors you can use on top of this:

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

A unique ID is the quickest way to find an element through jQuery, so if the purpose of your temptation is to make your elements easier for jQuery to retrieve, it seems pointless.

I've used such techniques for adding attributes such as title or alt for better accessibility.

Use .data('key', 'val') to set your data and.data('key') to read it.

I would definitely use the Data api (http://api.jquery.com/jQuery.data/)