JavaScript Frameworks - Beginning JavaScript - page 550

div.attr(“id”, “tabStrip-desc-” + num)
.text(“Description for tab “ + num)
);
}
Using jQuery objects to perform these operations cuts down on the amount of code you have to write,
which is also evident with the following deactivateTab() function:
function deactivateTab()
{
var descEl = $(“#tabStrip-desc-” + currentNum);
if (descEl.length > 0)
{
The fi rst line uses the jQuery function to select the <div/> element containing the tab's description.
You then use the length property to make sure jQuery found an element. Doing so ensures you won't
try to remove a nonexistent object from the DOM, which would result in an error.
If an element was found, then you use jQuery's remove() method to remove the element from
the DOM as follows:
descEl.remove();
$(“#tabStrip-tab-”+ currentNum).toggleClass(“tabStrip-tab-click”);
}
}
You then select the active tab's <div/> element and remove the tabStrip-tab-click CSS class with
the toggleClass() method.
Finally, you assign the handleEvent() function to handle the mouseover , mouseout , and click
events on the document object. The following code does this:
$(document).bind(“click mouseover mouseout”, handleEvent);
As you can see from this example, jQuery can make DOM manipulation much easier and requires less
typing from you. In this particular example, you wrote 28 less lines of CSS and JavaScript. That's well
worth the time of learning a framework, isn't it?!
DOM manipulation isn't the only area in which a framework such as jQuery can help you. In fact, it can
greatly reduce the amount of work you have to do to make XMLHttpRequest objects and requests.
Using jQuery for Ajax
The previous chapter walked you through the creation of a module to enable you to create and use
XMLHttpRequest objects to retrieve data from the web server. The module you created certainly made
Ajax requests easier to code, but Ajax requests are even easier with jQuery.