Getting started with jQuery

What is jQuery

jQuery is a JravaScript based framework that emphasizes interaction between JavaScript and HTML. The main goal is to simplify common commands of JavaScript. It was first realized in the beginning of 2006. jQuery is free, open source software Dual-licensed under the MIT License and the GNU General Public License.

The jQuery file can be downloaded here (http://docs.jquery.com/Release:jQuery_1.3.2).

jQuery contains the following features:

• DOM (Document Object Model) element selections using the cross-browser open source selector engine Sizzle, a spin-off out of jQuery project
• DOM traversal and modification (including support for CSS 1-3 and basic XPath)
• Events
• CSS (Cascading Style Sheet) manipulation
• Effects and animations
• Ajax (asynchronous JavaScript and XML)
• Extensibility
• Utilities – such as browser version and the each function.
• JavaScript Plug-ins

Microsoft has announced plans to bundle jQuery initially in Visual Studio for use within ASP.NET AJAX framework and ASP.NET MVC Framework.

Examples: Access the selection in an HTML drop down list

jQuery usually exists as a single JavaScript file, containing all the common DOM, Event, Effects, and Ajax functions. It can be included within a web page using the following mark-up:

Suppose we have the following drop down list mark-up, where Vegetable has been selected

How can we use JQuery to determine the text of the selected option (Olympique de Marseille)?

One way is to use an xpath-like expression:

The #clubs tells us to go to the XML node with id = “clubs”. The option tells us to find all tags under categories with tag-name option.  The [@selected] tells us to find the option tag containing an attribute with a key called selected. The text function tells JQuery to return the text in the selected option tag (which in this case is Olympique de Marseille)

Another way to get the option text is to use the built in JQuery filter for getting the selection

A third way to get the option text is to use the find function on the clubs node:

The find function searches for the node within clubs containing the criteria, which in this case is a selected option.

For more information about jQuery, check their website at http://jquery.com/