Theming

Using jQuery Selectors

Last updated
Categories

This page is archived

We're keeping this page up as a courtesy to folks who may need to refer to old instructions. We don't plan to update this page.

Alternate resources

Sprout Video

Use jQuery selectors to locate and select elements on the page. jQuery selectors operate much like CSS3 seletors. Start out simple by selecting elements by tag, DOM id, or class name. Then get more advanced and select form elements based on their current state, and complex n-th child selectors. Additional notes: As a result of Drupal 7 using jQuery in no conflict mode, the jQuery object is not automatically assigned to the global $ symbol. The easiest way to get around this in Firebug or Webkit Inspector is to just use jQuery('element'); or do $ = jQuery; and then use the $ as per usual. If you take a look at the JS files in Drupal 7 you'll see that they almost all use an anonymous closure in order to assign the $ variable. Something like the following. (function ($) { // Add your code here and use $ as per usual. })(jQuery);