Getting started with jQuery

1. WHAT JQUERY IS GOOD AT Without a doubt, one of the strong points of using jQuery is how it diminishes many cross­browser concerns. Without it, writing cross-browser-compatible JavaScript code is a tedious, and unnecessary, exercise. It’s difficult not to marvel at how much time is saved getting things running in both IE and Firefox [ [ ...]

07
Feb
Development Tools with jQuery

You have several tools at your disposal for developing JavaScript and jQuery, other than the traditional editor/browser setup. If your style of development is more command-line-oriented, you have jconsole and Rhino. jconsole is a web application that enables you to interactively enter JavaScript code. It comes with a few additional functions such as print(), load(), [ [ ...]

07
Feb
Debugging JavaScript and jQuery

It’s time to use the tools discussed in this chapter, especially Firebug (or the Chrome developer tools) and JSLint—they’ll catch many errors for you. Rather than using alert calls with variables and objects, place breakpoints and inspect the values of each object/variable as they are manipulated by your scripts. Also, make liberal use of the [ [ ...]

07
Feb
Using the FireQuery Plugin with jQuery

There’s another Firefox plugin for your jQuery repertoire: the FireQuery plugin, which enhances Firebug for better handling of jQuery. Features include: Elements and handlers dynamically added by jQuery at run time can be visually inspected in the console. Elements that are members of a jQuery “collection” are highlighted in the window on a mouseover event. [ [ ...]

07
Feb
JavaScript Primer for jQuery

1. UNDERSTANDING NUMBERS Like any other programming language, JavaScript manipulates values such as numbers or text. The kinds of values a language can work with are its data types. JavaScript supports the basic data types of number and string. All numbers are 64-bit double-precision, and range from -5e-324 to 1.7976931348623157e308. In other words, there’s no [ [ ...]

07
Feb
Understanding the Structure of a jQuery Script

Some mainstream languages (which shall go unnamed) contain a monolithic “standard library,” which really isn’t so standard. Rather than using a standard library with a common denominator set of tools, several additional modules are added. This results in unnecessarily large downloads, wasted resources, and functionality that you may never use. On the other hand, the [ [ ...]

08
Feb
The jQuery core: Using JavaScript Unobtrusively

In the dark days of JavaScript, code like the following was common: <!DOCTYPE html> <html> <head> <script type=”text/javascript”> function showStuff(){ var content = document.getElementById(“content”); content.style.display = “block”;o com } function changeBGColor(elem){ elem.style.backgroundColor = “green”; } </script> </head> <body> <ul id=”content” onLoad=”javascript:showStuff();” style=”display:none;”> <li onClick=”javascript: changeBGColor(this);”>Item 1</li> <li onClick=”javascript: changeBGColor(this);”>Item 2</li> <li onClick=”javascript: changeBGColor(this);”>Item 3</li> <li [ [ ...]

08
Feb
The jQuery core: The jQuery Framework Structure

Because jQuery is a well-written modular framework, it’s easy to treat it as a black box. But, it’s instructive to look at the underlying code, and see how the nuts and bolts go together. If you’re interested, as of jQuery 1.3, the selector engine is now based on a separate project by John Resig, called [ [ ...]

08
Feb
The jQuery core: Understanding the DOM and Events

Both HTML and XML are hierarchical tree structures of tags (or elements). The window contains a document; documents contain an HTML element, which in turn contains a child header and body element, and so forth. The best definition of the DOM is the one specified by the W3C: “The Document Object Model is a platform- [ [ ...]

08
Feb
The jQuery core: Using jQuery with Other JavaScript Libraries

From time to time you may want to include in your program other JavaScript frameworks or libraries with your code. If those frameworks use the dollar sign as a variable, this will cause conflicts. But, because jQuery plays nice with others, it has a method for avoiding these conflicts. To do so, use the $.noConflict(); [ [ ...]

08
Feb
The Power of jQuery Selectors: Selecting Elements

jQuery provides a myriad of ways to select DOM elements: you can select elements by attributes, element type, element position, CSS class, or a combination of these. The syntax for selecting elements is as follows: $(selector,[context]) or jQuery(selector, [context]) To select elements by tag name, use the tag name in the selector. For example, $(“div”) [ [ ...]

08
Feb
The Power of jQuery Selectors: Selecting by CSS Styles

In a similar fashion to CSS, if you want to select elements by class, use a dot (.). For example: $(“p.highlighted”); Up to now, you’ve selected elements using the format $(“element#id”), $(“element.class”), or something similar. It’s not actually necessary to precede any of these selectors with an element name followed by the filter. It’s just [ [ ...]

08
Feb
The Power of jQuery Selectors: Selecting by Attributes

jQuery allows for an extraordinary amount of flexibility for selecting elements according to their attributes. First, and most obvious, is selecting an attribute that matches an exact string pattern: $(“[attributeName=’string2match’]”) or $(“[attributeName=’string2match’]”) But, there are also attribute selectors reminiscent of regexes, so you can match using part of a string as well; for example, the [ [ ...]

08
Feb
The Power of jQuery Selectors: Selecting by Position

Elements can also be selected by their relation to other elements (child/parent relationships), or by hierarchical position in a document. Some examples might include selecting the first or last items in a list, or the even rows in a table. Suppose you have an ordered list like the one in the following code snippet. It [ [ ...]

08
Feb
The Power of jQuery Selectors: Using Filter Selectors

Notice that the previous set of selectors all begin with a colon (:). This class of selectors is known as filters, because they filter a base selector. Just to add more to the jQuery filter mayhem, there are filters specifically for form elements, such as :button or :input, a filter for detecting if an element [ [ ...]

08
Feb
The Power of jQuery Selectors: Custom User Selectors

If the current built-in selectors aren’t enough, you can extend jQuery with your own custom-made selectors. To do so, you must extend the core jQuery object. The following code snippet creates a custom selector that selects elements with a green background: <!DOCTYPE html> <html> <head> <script src=”http://code.jquery.com/jquery-1.7.1.js”> </script> <script> $(function(){ // Define custom filter by [ [ ...]

08
Feb
Doing DOM Traversal in jQuery

By now, we hope you’re convinced that the jQuery selectors offer a diverse set of options for creating a wrapper object with elements selected from the DOM. The next set of tools you’ll need in your arsenal will allow you to manage your wrapped set. Handling tasks such as getting element references, getting another wrapper [ [ ...]

08
Feb
Accessing and Modifying Elements, Attributes, and Content in jQuery

Now that you’ve seen the myriad ways jQuery can select elements, you probably will want to do something with these retrieved elements such as getting/setting text, attributes, or even HTML content. jQuery provides several convenient methods for achieving all of this. 1. Working with Content One of the most glorious features of JavaScript is the [ [ ...]

08
Feb
Generating HTML in jQuery

It’s also possible to generate code with the jQuery wrapper function. To do so, pass in a string to the jQuery function like so: $(”<p>My nifty paragraph</p>”); This is only half the story, because the new paragraph element added to the DOM is parentless. You’ll need an additional jQuery method like .appendTo() in order to [ [ ...]

08
Feb
Understanding the Browser Event Model

Before getting into how jQuery handles events, and how it saves you a lot of grief, let’s review JavaScript event models. JavaScript was originally introduced as LiveScript back in 1995. Getting in the DeLorean and jumping back in time to 1996, Netscape Navigator and Microsoft Internet Explorer 3 were all the rage among the young [ [ ...]

08
Feb