Introduction to jQuery and jQuery Selectors

Please note that jQuery is dual licensed under the MIT and GPL licenses.

Short History and Current Status

The initial idea of developing a Javascript library that uses Pseudo-CSS Selectors to bind Javascript functions to HTML elements and to manipulate DOM elements using Javascript belongs to Ben Nolan with a library called Behaviour.

John Resig, a developer who was unhappy with Behaviour’s features and syntax, blogged about his compliments about the library in August 2005. He did not provide any working code or demo, however, the idea of him was obviously so cool that most of us are using a library called jQuery that was mentioned within that blog post first.

First stable version of jQuery was released on 26 August 2006 and it is version 1.4.1 as of today and can be downloaded from www.jquery.com.

Definition of Parts

jQuery consists of two main parts. One of them is being referred as jQuery Core and the other one being jQuery UI.

jQuery Core is the part that implements the selectors feature and is responsible for handling/binding events, DOM manipulation and Ajax.

jQuery UI, on the other hand, handles animations, provides support for effects, themes, widgets, etc. jQuery UI is developed on top of jQuery Core.

You do not necessarily work with jQuery UI to take advantage of using jQuery for development, however, you will find yourself doing that after a while since some of the plug-ins that you may want to use might be requiring jQuery UI library.

Advantages of Using jQuery

Being one of the essentials of web development for many web application and/or HTML developers, jQuery simplifies most of the tasks that you would like to achieve using Javascript with the huge plug-in database and what is more, it takes important problems like cross-browser issues away from your coding pleasure.

We can list the advantages of using jQuery as follows. Please remember that there can be a lot more that I forget to mention.

• jQuery is cross-browser. Both jQuery Core and jQuery UI supports IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+ and Chrome. (Please do not forget that 3^rd party plug-ins that the community fellows or individuals develop might support some of these browsers and some not.)
• jQuery supports what you are used to use and upcoming standards. CSS 3, Json, etc.
• jQuery is extensible. Objects in jQuery can be extended with your own implementations. Yes, in an object oriented way.
• jQuery is independent. What programming language you use does not matter. Since jQuery is a Javascript library, all it needs is a browser to run. Microsoft supports jQuery by providing jQuery IntelliSense in Visual Studio, even providing the “.js” files within the ASP.NET Web Application project template in Visual Studio 2010. A lot of PHP developers use jQuery as well. Both ASP.NET and PHP developers support the community by developing jQuery plug-ins to be used by other developers.
• jQuery is open source. You know what you are working with and you can dig into the code if you need to debug some stuff.
• jQuery has a lot of plug-ins. As we, all developers , say “No need to reinvent the wheel”. Indeed, there really is not any reason to do that. Just pick up the plug-ins you want to use from jQuery Plug-ins Repository at http://plugins.jquery.com/ and start using them.
• jQuery is lightweight. The regular (uncompressed) size of the jQuery.js file is 157 kilobytes for version 1.4.1. You may want to use the regular version in case you want to debug what is going on deep in the library. Once you are ready to go live, just start using the Minified (Gzipped) version of jQuery which is only 23 kilobytes in size for version 1.4.1.

Who Uses jQuery So Far?

• Microsoft
• Google
• Facebook
• Digg
• Netflix
• Mozilla
• WordPress
• Drupal

And a lot more.

What Are Selectors?

Selectors are the identifiers that you can use to access HTML elements in the DOM. There are several options to achieve that. You can access an element using its tag name, using its ID, using the CSS selectors it has been assigned or combining any of these with attribute selectors. For instance selecting all “input” tags that has a type of “submit”.

Some basic selectors can be seen below.

$(“*”)

This is an “All Selector” and will select all elements within the DOM. It is known to be extremely slow when your page contains too many HTML elements within the DOM.

$(“#myElement”)

This is an “ID Selector” and will select the HTML element that has an ID attribute of “myElement”. Please see the “#” prepended to the ID.

$(“#myElement > *”)

This is a “Child Selector” and will select all the children elements of “myElement” element. However, the selected elements will be only the first level children elements of the parent element. To achieve that and select any children of children elements as well, you may simply remove the “>” char and make it as $(“#myElement *”).

$(“.black”)

This is a “Class Selector” and will select any type of element that has a “black” CSS class assigned. E.g.: <input type=”text” class=”black” /> or <div class=”black”></div>.

$(“div”)

This is an “Element Selector” and will select all “div” elements. “div” is an example here and can be img, input, a, table or any other tag name.

$(“div.black”)

This is again an “Element Selector” but together with a “Class Selector” and will select the “div” element that has a “black” CSS class assigned. E.g.: <div class=”black”></div>.

$(“#myElement div.black”)

This selector will select all “black” CSS class assigned “div” elements that is placed under “myElement” element.

$(“:submit”)

This is a type selector and will select any input element that has a type of “submit”. E.g.: <input type=”submit” />. There are many other selectors similar to this one. :reset, :radio, :text, :checkbox, :checked are to be listed for instance.

$(“div[attributeName=’value’]”)

This is an “Attribute Equals Selector” and will select any “div” element that has an attribute of “attributeName” and a value of “value” within the attribute. There are other attribute selectors like Attribute Contains, Ends With, Not Equal, Starts With selectors.

For a complete list of jQuery selectors, please refer to http://api.jquery.com/category/selectors/.

Please do not forget to download the sample Web Site project from here. The website was created using Visual Studio 2010 Beta 2.