JQUERY - HOW DO I - K. Manohar Goud - 9866550012

K. MANOHAR GOUD

9866550012

How do I select an item using class or ID?

This code selects an element with an ID of "myDivId". Since IDs are unique, this expression always selects either zero or one elements depending upon whether or not an element with the specified ID exists.

1	$( "#myDivId" );

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

1	$( ".myCssClass" );

A jQuery object containing the selected element can be assigned to a JavaScript variable like normal:

1	var myDivElement = $( "#myDivId" );

Usually, elements in a jQuery object are acted on by other jQuery functions:

1 2 3

var myValue = $( "#myDivId" ).val(); // Get the value of a form input. $( "#myDivId" ).val( "hello world" ); // Set the value of a form input.

How do I select elements when already have DOM element?

If you have a variable containing a DOM element, and want to select elements related to that DOM element, simply wrap it in a jQuery object.

1 2 3

var myDomElement = document.getElementById( "foo" ); // A plain DOM element. $( myDomElement ).find( "a" ); // Finds all anchors inside the DOM element.

Many people try to concatenate a DOM element or jQuery object with a CSS selector, like so:

1	$( myDomElement + ".bar" ); // This is equivalent to $( "[object HTMLElement].bar" );

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

.hasClass() (added in version 1.2) handles this common use case:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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

You can also use the .is() method along with an appropriate selector for more advanced matching:

1 2 3 4 5

if ( $( "#myDiv" ).is( ".pretty.awesome" ) ) { $( "#myDiv" ).show(); }

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

1 2 3 4 5

if ( $( "#myDiv" ).is( ":hidden" ) ) { $( "#myDiv" ).show(); }

How do I test whether an element exists?

Use the .length property of the jQuery collection returned by your selector:

1 2 3 4 5

if ( $( "#myDiv" ).length ) { $( "#myDiv" ).show(); }

Note that it isn't always necessary to test whether an element exists. The following code will show the element if it exists, and do nothing (with no errors) if it does not:

1	$( "#myDiv" ).show();

How do I determine the state of a toggled element?

You can determine whether an element is collapsed or not by using the :visible and :hidden selectors.

1 2 3

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 in the selector expression. For example:

1 2 3 4 5

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

How do I select an element by an ID that has characters used in CSS notation?

Because jQuery uses CSS syntax for selecting elements, some characters are interpreted as CSS notation. For example, ID attributes, after an initial letter (a-z or A-Z), may also use periods and colons, in addition to letters, numbers, hyphens, and underscores. The colon (":") and period (".") are problematic within the context of a jQuery selector because they indicate a pseudo-class and class, respectively.

In order to tell jQuery to treat these characters literally rather than as CSS notation, they must be "escaped" by placing two backslashes in front of them.

1 2 3 4 5 6 7 8 9 10 11

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

The following function takes care of escaping these characters and places a "#" at the beginning of the ID string:

1 2 3 4 5

function jq( myid ) { return "#" + myid.replace( /(:|\.|\[|\])/g, "\\$1" ); }

The function can be used like so:

1	$( jq( "some.id" ) )

How do I disable/enable a form element?

You can enable or disable a form element using the .prop() method:

1 2 3 4 5

// Disable #x $( "#x" ).prop( "disabled", true ); // Enable #x $( "#x" ).prop( "disabled", false );

How do I check/uncheck a checkbox input or radio button?

You can check or uncheck a checkbox element or a radio button using the .prop() method:

1 2 3 4 5

// Check #x $( "#x" ).prop( "checked", true ); // Uncheck #x $( "#x" ).prop( "checked", false );

How do I get the text value of a selected option?

Select elements typically have two values that you want to access. First there's the value to be sent to the server, which is easy:

1 2	$( "#myselect" ).val(); // => 1

The second is the text value of the select. For example, using the following select box:

1 2 3 4 5 6 7

<select id="myselect"> <option value="1">Mr</option> <option value="2">Mrs</option> <option value="3">Ms</option> <option value="4">Dr</option> <option value="5">Prof</option> </select>

If you wanted to get the string "Mr" if the first option was selected (instead of just "1") you would do that in the following way:

1 2	$( "#myselect option:selected" ).text(); // => "Mr"

How do I replace text from the 3rd element of a list of 10 items?

Either the :eq() selector or the .eq() method will allow you to select the proper item. However, to replace the text, you must get the value before you set it:

1 2 3 4 5 6 7 8 9

// This doesn't work; text() returns a string, not the jQuery object: $( this ).find( "li a" ).eq( 2 ).text().replace( "foo", "bar" ); // This works: var $thirdLink = $( this ).find( "li a" ).eq( 2 ); var linkText = $thirdLink.text().replace( "foo", "bar" ); $thirdLink.text( linkText );

The first example just discards the modified text. The second example saves the modified text and then replaces the old text with the new modified text. Remember, .text() gets; .text( "foo" ) sets.

How do I pull a native DOM element from a jQuery object?

A jQuery object is an array-like wrapper around one or more DOM elements. To get a reference to the actual DOM elements (instead of the jQuery object), you have two options. The first (and fastest) method is to use array notation:

1	$( "#foo" )[ 0 ]; // Equivalent to document.getElementById( "foo" )

The second method is to use the .get() function:

1	$( "#foo" ).get( 0 ); // Identical to above, only slower.

You can also call .get() without any arguments to retrieve a true array of DOM elements.