Getting Started with Jquery-jquery for "ASP. 3-02"

The following subsections describe the basics of jquery. As mentioned earlier, it is not possible to introduce jquery in detail in just one chapter, but you can show you how to perform simple operations on the content in an HTML document and, more importantly, how to step through the other parts of the book. The jquery feature is accessed through a JavaScript function called jquery, but it is rarely seen in real-world applications. This is because the function has a shorthand name, which is the dollar sign ($). When you see a JavaScript code that begins with $, the jquery code is represented.

Wait for Dom

When working with the contents of an HTML document in a browser, you need to make sure that all the elements have been loaded before you can begin the change. This is especially important because the main purpose of jquery is to use the CSS selector to find the elements in the document, which are detailed later in this article. If you apply a CSS selector before the browser loads and finishes processing the entire HTML document, you may get unexpected results because some or all of the elements you are looking for are not available at this time. There are two ways to ensure that jquery code is executed after the DOM is fully processed. The first method is to place the script element at the end of the body part of the HTML document, making them the last element to be processed by the browser. The second method (the method used in this book) is to use the jquery ready function, as shown in Listing 4-5.

You'll find that almost every jquery example or demo you see online uses the Ready function. The document object that is passed to the $ function is the standard DOM API object that the browser uses to render the HTML document. When the DOM is the only parameter, it passes the function that you want to execute, calling the ready function on the result returned by the function. When the browser finishes processing all the elements in the document, the Ready function executes the function provided as an argument.

jquery statements

jquery statements are usually made up of two parts. The first section selects the elements to be processed, and the second section performs actions on those elements. Code Listing 4-6 adds a typical jquery statement to the Default.js file.

jquery uses CSS selectors to find elements, so the statements in Listing 4-6 first use the $ function to select all the TH elements in the document. Typically, the $ function calls other jquery functions, returning a collection of matching objects on which you can perform operations. The code listing calls the AddClass function, which modifies the class attribute of all elements in the collection to add the specified class (in this case, highlight).

The following is the th element that the Web form sends to the browser

The following is the th element after executing the jquery code:

The jquery statement performs an action on all th elements in the HTML document. jquery modifies the representation of the HTML document used to display content to the user using the browser-defined DOM API. That is, when you use jquery to perform an action on an element, the related changes are immediately displayed to the user, and the highlight class is added in the th element as shown in effect 4-4.

The table in the list is visually changed because a CSS style highlight is defined in the Styles.css file in code listing 4-2. Adds a class to the th element, changing how the browser displays the elements. We don't want to emphasize this too much, but note that jquery doesn't do anything magical-it simply wraps the standard browser APIs to make them easier to use.

Note: The changes made by jquery are limited to browsers and do not have any effect on HTML generated through Web Forms. After the Web form arrives in the browser, jquery is used to optimize the content sent by the Web form. Even if the Web form sends jquery statements to the browser, the browser executes the statements and makes the appropriate changes.

Getting Started with Jquery-jquery for "ASP. 3-02"