Overview of jQuery - HTML5 Programming for ASP.NET Developers - page 54

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 () {
$(this).removeAttr("selected");
})
$("#GridView1 :input").removeAttr("disabled");
event.preventDefault();
})

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

Method Description

after() Inserts content after a specific element

append()

Appends content as specified by the parameter to the end of the matched elements.

appendTo() Appends the matched elements to the end of a target element.

attr() Gets or sets an attribute value

before()

Inserts content before a specific element

clone()

Makes a deep copy of an element and its contents

empty()

Removes all the child nodes of a specific element

html()

Returns the HTML markup of an element

insertAfter()

Inserts content after a specific element

insertBefore()

Inserts content before a specific element

prepend()

Inserts content as specified by the parameter at the beginning of the matched elements

prependTo()

Inserts the matched elements at the beginning of a target element

remove()

Removes a specific element and all its child elements