), HTMLParagraphElement (for
), HTMLInputElement
(for ), and so on.
Each HTMLElement in the DOM has properties like any other JavaScript object. One of the important properties is
attributes, which contains an element’s attributeName and attributeValue pairs. HTML elements have methods
like appendChild(), getAttribute(), and getElementByTagName().
Listing 2-9 demonstrates how an HTML element from the DOM can be referenced and how to use its property
and execute its method.
Listing 2-9. Code to demonstrate how to access to an HTMLElement’s property and method
35
www.it-ebooks.info
Chapter 2 ■ jQuery Fundamentals
First Name:
Figure 2-13 displays the page when viewed in a browser.
Figure 2-13. An HTML element’s property and method
The var htmlElement = document.getElementById("txtFirstName"); line gets the HTMLElement from the
DOM that has an ID of txtFirstName. Once you have the HTMLElement, you can get and set its properties and
attributes and execute DOM methods on it. This example is getting its property value by using htmlElement.value
and getting its attribute type by executing the getAttribute() method.
Figures 2-14 and 2-15 show the pop-up messages that appear when any name (for example, John) is entered and
the Get First Name & Type button is clicked.
Figure 2-14. An HTML element and its value property
Figure 2-15. An HTML element and its type attribute
The screen and messages in the previous figures are from Firefox browser; you might see slightly different format
depending on the browser you are using.
36
www.it-ebooks.info
Chapter 2 ■ jQuery Fundamentals
jQuery Objects
When creating new HTML elements or selecting existing ones, jQuery returns a jQuery object that’s a collection of
HTML elements. A jQuery object wraps these HTML elements and native DOM methods to make them work across
different browsers and to implement consistent behavior. A jQuery object enables you to achieve tasks easily and
with less code compared to using native DOM method calls. jQuery objects are not dynamic in the sense that their
HTMLElements collection won’t grow or shrink based on addition or removal of elements in the HTML document.
Chapters 3, 4, 5, and 6 cover how jQuery objects are created and explain the methods you can use to act on HTML
elements within the jQuery object.
2-8. Using the jQuery Function
You can access the jQuery library’s properties and methods using the jQuery function. One of the most commonly
used methods is ready(), which accepts a function parameter and binds it to the document’s ready event.
The syntax is as follows:
jQuery(document).ready(function () {
// Code segment to execute when document is ready
// (i.e., when DOM is completely created)
});
In place of jQuery, you can use its shorthand $. Using $, you can rewrite the previous code as:
$(document).ready(function () {
// Code segment to execute when document is ready
// (i.e., when DOM is completely created)
});
The previous code can also be written as:
$(function () {
// Code segment to execute when document is ready
// (i.e., when DOM is completely created)
});
which has the same effect as the original code.
If you are using some other JavaScript library that also uses $ as shorthand, in order to prevent a conflict between
the JavaScript libraries, you should instead set your own shorthand (for example, jq) for the jQuery library by using
the following code:
var jq = jQuery.noConflict();
jQuery Function Arguments
The following is the list of jQuery function’s ($) arguments and their purposes:
•
$(function)—A code segment in the specified function is executed when the DOM is ready.
The following is the syntax to define the DOM-ready function:
$(function() { ... });
37
www.it-ebooks.info
Chapter 2 ■ jQuery Fundamentals
When you specify a function and its code, you are just defining the function and logic in it. It won’t be executed
until the document-ready event is triggered. If you use a function name in its place, that function is executed
immediately when the browser interprets the line, without waiting for the DOM to be ready.
•
$("selector")—Selects HTML elements that match the specified selector and returns a
jQuery object.
•
$(HTMLElement)—Returns a jQuery object with the specified HTMLElement in it.
•
$(HTMLElement[])—Returns a jQuery object with the HTML elements specified in the
HTMLElement[] array.
•
$("HTMLString")—Creates new HTML elements from the specified HTMLString.
Chapters 3, 4, 5, and 6 cover these function arguments in detail. Here I am simply providing very basic examples
to familiarize you with the concepts.
The jQuery Function with the Function as an Argument
Using the jQuery function ($) with the function as an argument is the most used feature in the jQuery. If the code
is accessing or manipulating DOM elements, then that code must be defined inside this function. The body of
the function will be executed only when all the DOM elements are created and are ready to be used. Listing 2-10
demonstrates the use of the jQuery function with the function as an argument.
Listing 2-10. jQuery function with the function as an argument
This jQuery code is binding function() {...} to the document ready event. After the DOM is ready, this
function will be executed. Such functions, which are bound to events, are also called event handlers. Figure 2-16 show
the pop-up message after the DOM is ready.
38
www.it-ebooks.info
