This code selects an element with an id of "myDivId". Since id's are unique thisexpression always selects 1 element, or none if the id does not exist.

$('#myDivId')

•

This code selects an element with a class of "myCssClass". Since any number of elementscan have the same class, this expression will select any number of elements.

$('.myCssClass')

A selected element can be assigned to a javascript variable like this

var myDivElement = $('#myDivId');

Usually selected elements are acted on by other JQuery functions:

var myValue = $('#myDivId').val(); // get the value of an element$('#myDivId').val("hello world"); // set the value of an element

[edit]

How do I test whether an element has a particular class?

(Sometimes also: Does jQuery have a hasClass method?)

•

You can use theis()method along with an appropriate selector

if ( $('#myDiv').is('.pretty') )$('#myDiv').show();

Note that this method allows you to test for other things as well. For example, you can testwhether an element is hidden (by using the custom:hiddenselector):

if ( $('#myDiv').is(':hidden') )$('#myDiv').show();

•

Note also thathasClasshas been added as of version 1.2 to handle the most common useof is():

$("div").click(function(){if ( $(this).hasClass("protected") )$(this).animate({ left: -10 }).animate({ left: 10 }).animate({ left: -10 }).animate({ left: 10 }).animate({ left: 0 });});

[edit]

How do I test whether an element exists?

•

You can use thelengthproperty of the jQuery collection returned by your selector:

if ( $('#myDiv').length )$('#myDiv').show();

Note: It isn't always necessary to test whether an element exists. The following code would showthe item if it exists, and do nothing (no errors) if it did not:

$('#myDiv').show();

[edit]

How do I determine the state of a toggled element?

You can check the state using the :visible or :hidden selectors.

var isVisible = $('#myDiv').is(':visible');var isHidden = $('#myDiv').is(':hidden');

If you're simply acting on an element based on its visibility, just include ":visible" or ":hidden" inthe selector expression. For example:

$('#myDiv:visible').animate({left: '+=200px'}, 'slow');

[edit]

How do I select an element that has weird characters in its ID?

For example, it can be common for some frameworks to generate unique IDs that have specialcharacters in them (like '.' or '[..]'). The problem is that these characters have a special meaning inCSS.Thankfully, jQuery has a workaround, which allows you to do the following:

// Does not work$("#some.id")// Works!$("#some\\.id")

and another example:

// Does not work$("#some[id]")// Works!$("#some\\[id\\]")

A convenient way to wrap some wrapping is the following function:

function jq(myid){ return '#'+myid.replace(/:/g,"\\:").replace(/\./g,"\\.");}

this allows to use "just the ID" to identify a DOM-Element. jq(..) takes care of adding a '#' at the beginning and escaping all dots.[edit]

How do I disable/enable an element?

You can disable/enable an element by setting the 'disabled' attribute to 'disabled' (to disable it) or "" (to enable it). The result of which looks something like this:

// Disable #x$("#x").attr("disabled","disabled");// Enable #x$("#x").removeAttr("disabled");

You can try an example of enabling/disabling with the following demo:and here's the source code to the demo:

[edit]