Beginning ASP.NET 4.5 in CSharp and VB Opsylum

406 x CHAPTER 11 JQUERY
jQuery goes one step further, and enables you to hook up events not only to a single element, but to
a whole matched set at once. This is extremely powerful because it enables you to bind handlers to
a large number of elements with only a few lines of code. Consider, for example, a table with many
rows. To make the table a little more visually attractive, you could apply a technique that is called
“active item tracking,” where the item your mouse is over changes color. Without jQuery you would
write onmouseover and onmouseout handlers on each and every row in the table. This clearly leads
to a lot of excessive bloat in the final HTML of the page. With jQuery, all you need is this code,
again using the HTML code samples you used before:
$(function()
{
$('#DemoTable tr')
.bind('mouseover', function() { $(this).css('background-color', 'yellow') });
});
This code finds all the table rows within the #DemoTable element and then dynamically assigns a
function that is called when you hover your mouse over each row. If you hover your mouse over
them, the background changes color. But if you move your mouse away, the new color remains.
To fix this problem, you can use jQuery’s chaining concept, where the result of a jQuery method
returns the matched set so you can apply another function to it. To bind the mouseout to a new
function, simply call bind again on the return value of the first call to bind:
$('#DemoTable tr')
.bind('mouseover', function() { $(this).css('background-color', 'yellow') })
.bind('mouseout', function() { $(this).css('background-color', '') });
Notice how the semicolon that closed off the line in the previous example has been moved to the
final line. Then the second bind is simply chained to the previous call to bind. It’s a bit difficult to
see because the code is spread out over multiple lines to accommodate the width of this book, but
this code actually comes down to this:
$('#DemoTable tr').bind('mouseover', ...). bind('mouseout', ...);
This code does three things: first it uses $('#DemoTable tr') to find all rows in the table. On the
matched set that is returned it calls bind to dynamically hook up some behavior that fires when you
move your mouse over a row. Then bind is called again on the matched set returned by the first call
to bind to reset the background color when you move your mouse away from the table row. Notice
how I am setting the color to an empty string ('') to remove the CSS background property so you can
see the original background again.
There’s one more important thing to look at in this example and that’s the way the background
color is set:
$(this).css('background-color', 'yellow')
The this keyword in this example refers to the element to which the item is applied: the table row in
this case. Using $(this) then gives you a jQuery matched set (containing a single element) to which
you can apply regular jQuery methods such as css. Instead of using jQuery you can also execute
standard JavaScript against the this element.
this.style.backgroundColor = 'yellow'