I am one of those few developers who will not give one ounce of respect to Javascript development and does not even consider it a serious programming language even. Unfortunately with the advent of Web 2.0 the Javascript has taken a more serious role, still I did not get to grow any respect for it. My attitude has always been like, use it when needed, learn if needed ... then throw it out of your brain as it is wasting precious neural pathways.

However, the Web 2.0 and startup surge is waning and it has got a few good developers to work on this dynamic language who have come up a few good development frameworks which I have finally learned to respect. The most amazing framework here is JQuery, which have changed my outlook on Javascript. I have taken an hour of my time to learn what JQuery does and I must say I am impressed. To give a short example I would say at my first try with JQuery I was able to write code in one single line that would normally take me 8 to 10 lines. I was also able to write it in 2 or 3 minutes, which would have taken me 15 mins.

The objective of this post is to provide you with a very basic and very fast start to JQuery . I know there are a million really good posts and tutorials out there on the internet. So, if you already know JQuery you can skip this.

Getting started and the ‘$’ function

The first step is to download the JQuery js file from the site and adding a script reference to your html page. If you want to see how it works internally then download the uncompressed version 100KB, otherwise use the compacted 15KB runtime js. The basic function in JQuery is the ‘$’ and is used everywhere. Any JQuery notation starts with $. If you are already using the ‘$’ character for some functions then you can still use JQuery by calling the ‘noConflict()’ function. It will revert back the use of $. The ‘$’ is a selector function.

Here are some sample JQuery notations

// Makes an element visible which has the id 'mydiv'
$("#mydiv").show();// Makes each odd tr element to have a blue backcolor
$("tr:odd").css("background-color", "blue");

Simple Selectors by Example

The $ function serves as a selector that selects a single html element or multiple html element. Here is how to select the span elements that are children of a div element and make it have 1 pixel solid border. Here all span that are inside a div element (may not be immediate child of the div) will be selected.

$("div span").css("border", "1px solid");

Here is how we select the links that are descendent of span which are direct children of a div

$("div > span a")

Here is how we can select a div with id mydiv

$("div#mydiv")

Here is how we select all links under div elements that have css class set to mycss

$("div.mycss a")

We can also use attributes to search for elements. The format is [attribute name=attribute value]. For example if we want to find a link that points to http://www.google.com then we would write

$("a[href=http://www.google.com]")

We can also use partial match. For example if we want to find any image that have been used outside of our domain we can try looking for the images that have started with the ‘http://’. The operator for starts with matching looks like this [attribute name ^= starts with value]. See example below

$("img[src^=http]")

Similarly if we can also match string that ends with a specific word. The format is [attribute name *= end with value]. This is how we can find only the png images ..

$("img[src$=.png]")

JQuery can also match any part of the string with the *= operator. If we want to find any link that refers to the word ‘washington’ anywhere in its path then we would write

$("a[href*=washington]")

How do we find an element that has an attribute which is optional. For example we want to find images that have alternative text assigned. This is how …

$("img[alt]")

Position Selection By Example

JQuery also has very strong support for selection based on position of an element. So in order to demonstrate lets use a table. Click the the button below see a table.

$("#results").fadeIn("slow"); // Show table with fade in effect
$("#results").fadeOut("slow"); // Show hide with fade out effect

Learn it, there is so much more ...

In last 15 minutes I have only covered a fraction of what JQuery can do with very little code. JQuery can do so much more. It can do animation, ajax, superb event handling, extreme css manipulation and much more. I have only covered the surface of what it can do in selection and modification. The areas I have covered is less than 10% of the core JQuery library, imagine what the thousand other plugins can do. Stop using plain JS, learn JQuery, Its efficient, excellent and is worth the time. With my very little experience, I would say JQuery can reduce your JavaScript code to a minimum of 60% or its original size and on average 20%-30% of original code size. Don’t waste a second ... grab JQuery from the net and learn it, IMMEDIATELY!

Comments

Nice introduction to JQuery. I am also started learning JQuery now and I have designed a horizontal layout web page @ http://www.veerasundar.com/sbox/hnav/ completely using JQuery and css. Hope this will also helpful.

Sweet, little tutorial on jQuery! Viewers will instantly see some magic of jQuery :)

My view about JS libraries was similar to yours and jQuery was the first library to turn me around - around a year back. From the beginning, I've come across a number of alternatives (dojo, YUI, extJS, etc) but still jQuery is my fav.

I have collected a few useful jQuery plugins in my blog, among the vast sea. The last one is here:

Sometimes the sociology essays writing play very big role in university student's life period and nearly every guy has an experience of essays ordering. Thence, this is a common issue for all students.