• Choose a category
• All
• Classic-Fiction

To further restrict a query, you can use either the find or filter function on a wrapped set. They are not the same, of course. The function filter explores the current wrapped set for matching elements and doesn’t ever look into DOM for descendants. The function find, instead, looks inside of each of the elements in the wrapped set for elements that match the expression. In doing so, however, the function explores the DOM of each element in the wrapped set.

Operating on a Wrapped Set

The power of jQuery descends primarily from the powerful query language that allows you to select nearly any possible combination of DOM elements you can think of. However, the query language would not be much without a rich collection of predefined operations to apply to selected elements. The jQuery library offers a wide range of functions you can apply to the content of a wrapped set. We have already taken a look at how to enumerate the content of a wrapped set; let’s now proceed with more specific operations.

As mentioned, function calls can be chained because any wrapped set returned by a query is in turn another jQuery object that can be further queried. The following expression is just fine:

$(selector).hide().addClass("hiddenElement");

It first hides from view all matching elements and then adds a specific CSS class to each of them. In jQuery, however, not all functions return a jQuery object. You must be aware of this to avoid nasty script errors. Chaining functions that act as value getters (not returning a jQuery object) is fine as long as these functions go at the end of the expression.

Important

Before going any further, it is worth recalling that this is an ASP.NET Web Forms book. This means that in spite of the changes introduced in version 4 to the algorithm for generating control IDs, there is still a chance you’ll end up using complex hierarchies of controls in which you don’t exactly know the actual ID being generated for a given segment of the markup. As you saw in Chapter 6, this problem is addressed by the ClientIDMode property added in ASP.NET 4 to the Control class. An easy way to retrieve the client ID of an ASP.NET control—at least when the ASP.NET control outputs a single piece of HTML—is the following:

The code block captures the value of the ClientID property of the specified ASP.NET control and will emit it into the script block.

Controlling Visibility

The functions hide and show allow you to remove from view or display all elements that match a given selector. These functions help a lot in building dynamic views where you need to adjust the next user interface based on a current user’s choice. Here’s how to hide an element:

To display it, you just replace the call to hide with a call to show. The most interesting aspect of show and hide methods is the built-in support for completion callbacks and effects. Here are the full signatures supported by the functions:

$(selector).hide()

$(selector).show()

$(selector).hide(duration, callback)

$(selector).show(duration, callback)

$(selector).hide(duration, easing, callback)

$(selector).show(duration, easing, callback)

When duration is specified, functions perform an animation while hiding or showing the element. The duration argument indicates the time (in milliseconds) the animation will take to run. You can also specify a couple of descriptive values such as fast and slow, which correspond to fixed values—specifically, 200 and 600 milliseconds.

The easing parameter indicates the internal function to use to perform the animation. Default values are linear and swing, which animate height, width, and opacity. Different effects can be achieved only through plug-ins.

The callback function runs at the end of the animation. The function doesn’t get any parameter. However, the expression this in the context