HTML and CSS Reference
In-Depth Information
This event handler disables all input elements including check boxes and radio buttons. It then selects
the options selected in the list box and iterates through them one by one using the each() method. The
code in the each() block checks whether the current row contains a selected city. This checking is done
using the :contains() selector. This selector accepts a string and returns only those rows that contain the
specified string value. If a city is found in a row, the disabled attribute of the corresponding check box and
radio button is removed using the removeAttr() method.
The click event handler of the Clear Selection button is shown in Listing 2-13.
Listing 2-13. Click Event Handler of the Clear Selection Button
$("#Button1").click(function (event) {
$("#ListBox1 option").each(function () {
$("#GridView1 :input").removeAttr("disabled");
The button's click event handler iterates through all the list-box options using the each() method and
unselects them one by one by removing the selected attribute. All the <input> elements are enabled by
removing the disabled attribute, because no city is now selected in the list box.
Modifying the DOM Using jQuery
By now, you know how to alter existing elements and their attributes. jQuery also lets you insert, append,
remove, and replace elements from the HTML DOM so you can modify the document structure. For
example, suppose you're calling a remote service from client-side jQuery code and, based on what the
service returns, you need to generate HTML markup on the fly. Such tasks can be accomplished using
jQuery methods that let you manipulate the HTML DOM. Table 2-6 lists some of the most commonly used
DOM-manipulation methods.
Table 2-6. jQuery Methods for Modifying the HTML DOM
Inserts content after a specific element
Appends content as specified by the parameter to the end of the matched elements.
Appends the matched elements to the end of a target element.
Gets or sets an attribute value
Inserts content before a specific element
Makes a deep copy of an element and its contents
Removes all the child nodes of a specific element
Returns the HTML markup of an element
Inserts content after a specific element
Inserts content before a specific element
Inserts content as specified by the parameter at the beginning of the matched elements
Inserts the matched elements at the beginning of a target element
Removes a specific element and all its child elements
Search WWH ::

Custom Search