Getting started with 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.

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.

jQueryChart

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:

jQuery_script1

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

jQuery_script2

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:

jQuery_script3

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

jQuery_script4

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

jQuery_script5

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/



Digital news!

Are you as digitally addicted as we are? We can supply you with a regular dose of digital news. Simply sign-up, or click to Follow us online.

About the author

Jeremy Cottino
Jeremy Cottino

Experienced in project management of IS/IT projects for multinational companies. Jeremy is the reference profile within the company with regards project management methodology and tools. Confirmed client-server and web development engineer, Microsoft Certified Professional (.net platform, SQL Server and SharePoint)