Understanding jQuery methods
Once you have selected DOM elements, you will want to manipulate
them. This is where jQuery methods come into play. The jQuery library
has a tremendous number of methods that perform all kinds of useful DOM
manipulations. These manipulations are always performed on the
collection of elements returned from the jQuery global function. Table 2 shows some commonly used jQuery methods.
Table 2. Common jQuery methods
|
Method |
Example |
Description |
|
Read the HTML within an element |
var x = $("#displayDiv").html(); |
Returns the inner HTML of the element whose ID is “displayDiv” |
|
Modify the HTML within an element |
$("#displayDiv").html("<p>Hello</p>") |
Sets the inner HTML of the element whose ID is “displayDiv” |
|
Read the text of an element |
$("ul#displayList > li:first").text(); |
Returns the text of the first list item in the unordered list whose ID is “displayList” |
|
Modify the text of an element |
$("ul#displayList > li:first").text("Item 1"); |
Sets the text of the first list item in the unordered list whose ID is “displayList” |
|
Read the value of a style property |
var x = $("#displayDiv").css("marginTop"); |
Returns the value of the “margin-top” CSS property for the element whose ID is “displayDiv” |
|
Set the value of a style property |
$("#displayDiv").css("marginTop","5px"); |
Sets the value of the “margin-top” CSS property for the element whose ID is “displayDiv” to “5px” |
|
Add a CSS class to an element |
$("#displayDiv").addClass("emphasis") |
Adds the CSS class named “emphasis” to the element whose ID is “displayDiv” |
|
Remove a CSS class from an element |
$("#displayDiv").removeClass("emphasis") |
Removes the CSS class named “emphasis” to the element whose ID is “displayDiv” |
|
Hide an element |
$("#displayDiv").hide() |
Hides the element whose ID is “displayDiv” |
|
Show an element |
$("#displayDiv").show() |
Shows the element whose ID is “displayDiv” |
|
Toggle the display of an element |
$("#displayDiv").toggle() |
Hides the element whose ID is “displayDiv” if it is visible; otherwise, shows it |
jQuery supports many methods for manipulating DOM elements beyond what is shown in Table 2. The complete reference of supported methods is available at http://api.jquery.com/category/manipulation.
Furthermore, jQuery methods can be chained together so that you can
perform several operations in a single line of code. The following code
changes the inner HTML of an element, adds a class, and then displays
the result, all in a single line:
$("displayDiv").html("<p>Hello</p>").addClass("emphasis").show();
Understanding jQuery event handling
Along with selecting and manipulating elements, you can use jQuery to attach event handlers to DOM elements. By handling events
in jQuery, you can keep your JavaScript code out of the webpage and
contained within custom libraries. This approach makes your code much
more maintainable and isolated than using a more traditional approach
to bind events to DOM elements.
The basic approach for binding events is to select the target DOM
element by using the global function and then bind the event. The code
to run in response to the event can be defined directly in the binding
as an anonymous function. The following code shows a simple example of
binding the click event of all paragraph elements:
$("p").click( function (e) {
alert($(e.target).text());
});
Notice in the preceding code that the function handling the click
event is defined in line with the binding. Additionally, notice how the
element that caused the event can be determined by selecting e.target within the function.
Of all the events available in jQuery, the most important is the ready event of the document
object. This event fires when the DOM is ready for selection and
manipulation. The SharePoint-hosted app project template in Visual
Studio 2012 automatically adds this event handler into the Apps.js library of the app to act as the starting point. This is a pattern that you should follow in your apps, as well.
