Lost password?

Common jQuery Functions

jQuery offers a variety of selectors to manipulate markup elements. The most common selectors are summarized in Listing 1.

Listing 1. Common jQuery Selectors

// Select element by identifier
$("#ElementID").something();

// Select element by CSS class
$(".ClassName").something();

// Select elements that have an identifier with a string
$("[id*='value']").something();

// Select elements that have an identifier that begins with a string
$("[id^='value']").something();

// Select elements that have an identifier ending with a string
$("[id$='value']").something();

// Select elements of a particular type
$("div").something();

Toggle Show and Hide

You can use the toggle function to toggle hide/show of an element in jQuery. An element can be hidden or shown using the hide and show functions, respectively (Listing 2).

Listing 2. Toggle, Show, and Hide Functions in jQuery

// Toggle hide/show of an element
$("#DivID").toggle(1000);

// Perform an action after the animation
$("#DivID").toggle(1000, function () {
alert("Toggle Complete");
});

// Hide an element
$("#DivID").hide(1000);

// Perform an action after the animation
$("#DivID").hide(1000, function () {
alert("Hide Complete");
});

// Show an element
$("#DivID").show(1000);

// Perform an action after the animation
$("#DivID").show(1000, function () {
alert("Show Complete");
});

Slide Functions

In jQuery, the basic slide functions are slideToggle, slideUp, and slideDown (Listing 3).

Listing 3. Toggle, Show, and Hide Functions in jQuery

// Toggle slide up and down
$("#DivID").slideToggle(1000);

// Perform an action after the animation
$("#DivID").slideToggle(1000, function () {
alert("Slide Toggle Complete");
});

// Slide up
$("#DivID").slideUp(1000);

// Perform an action after the animation
$("#DivID").slideUp(1000, function () {
alert("Slide Up Complete");
});

// Slide down
$("#DivID").slideDown(1000);

// Perform an action after the animation
$("#DivID").slideDown(1000, function () {
alert("Slide Down Complete");
});

Fade Functions

jQuery has the fadeIn, fadeOut, and fadeTo functions to fade an element in or out, or fade it to a specified style (Listing 4).

Listing 4. Fade an Element in, out, and to

// Fade in
$("#DivID").fadeIn(1000);

// Perform an action after the animation
$("#DivID").fadeIn(1000, function () {
alert("Fade In Complete");
});

// Fade out
$("#DivID").fadeOut(1000);

// Perform an action after the animation
$("#DivID").fadeOut(1000, function () {
alert("Fade Out Complete");
});

// Fade to (fades to specified opacity)
$("#DivID").fadeTo(1000, 0.25);

// Perform an action after the animation
$("#DivID").fadeTo(1000, 0.25, function () {
alert("Fade To Complete");
});

Animation Functions

Markup elements can be animated by changing the value of their CSS properties with animate (Listing 5).

Listing 5. Animation with jQuery

$("#DivID").animate({ opacity: 0.75 }, 1000);

// Perform an action after the animation
$("#DivID").animate({ opacity: 0.75 }, 1000, function () {
alert("Opacity Animation Complete");
});

Set and Retrieve Input Values

jQuery can set and retrieve the property value of input elements such as textboxes (Listing 6).

Listing 6. Get & Set Textbox Values

// Get the value of a textbox
var TextboxValue = $("#TextboxID").val();

// Set the value of a textbox
$("#TextboxID").val("New Textbox Value");

Set and Retrieve Element Markup Content

The markup content of elements can be manipulated with the html function (Listing 7).

Listing 7. Get and Set Markup Content

// Get the markup content of an element
var DivHTML = $("#DivID").html();

// Set markup content
$("#DivID").html("

The updated markup content.

");

Set and Retrieve Element Text

The textual content of elements can be manipulated with the text function (Listing 8).

Listing 8. Get and Set Textual Content

// Retrieve the textual content of an element
var DivText = $("#DivID").text();

// Set the textual content of element
$("#DivID").text("The new textual content.");
Set and Retrieve Element Dimensions

The dimensions of markup elements can be retrieved and changed using the height and width jQuery functions (Listing 9).

Listing 9. Get & Set Element dimensions

// Get element height
var ElementHeight = $("#DivID").height();

// Set element height
$("#DivID").height(300);

// Get element width
var ElementWidth = $("#DivID").width();

// Set element width
$("#DivID").width(400);

Handling CSS Classes

CSS Classes can be created and removed using the addClass and removeClass jQuery functions (Listing 10).

Listing 10. Add & Remove CSS Classes

// Create a CSS class
$("#DivID").addClass("newclassname");

// Remove a CSS class
$("#DivID").removeClass("classname");

// Create a new class and remove the old one
$("#DivID").removeClass("classname").
addClass("newclassname");

// Create and remove multiple classes
$("#DivID").removeClass("classname classname2").addClass("newclassname newclassname2");

Change CSS Properties

The CSS properties of markup elements can be manipulated by the css jQuery function (Listing 11).

Listing 11. Change the CSS Property for an Element

$("#DivID").css("border", "solid 1px #00f");

Reply