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 effectShow Table Hide Table Reset Table
Before you read any further, please make sure that you have clicked show table and can see a table
If we want to make all the odd rows of the table to have a bluish gray color we would write
$("#results tr:odd").css("background","#ccccff");
Now lets make the even rows have lighter bluish gray Show Me
$("#results tr:even").css("background", "#ddddff");
What if we want to make the header row have a different look ? Show Me
$("#results tr:first").css("background", "black"); $("#results tr:first").css("color", "white"); $("#results tr:first").css("font-weight", "bold");
We also could have assigned a class name to the header tr element like this
$("#results tr:first").addClass("header");
JQuery has other advanced ordering operators, but we don’t have the scope to cover that here.
Modifications By Example
Modification to the html DOM in JQuery is fairly simple and easy. See the examples below
Let assume that we want add an image banner at the top of the document. Here is how ...
$("body").prepend("<img src='banner.jpg' />");
Change the inner html of an existing div or any html element
$("div#mydialog").html("<p>Hi There!</p>");
What if we want to wrap a div around an existing table? Use the wrap function ...
$("#mytable").wrap("<div></div>");
How to replace all hr elements (horizontal line) with a br element
$("<br/>").replaceAll("hr");
Call the empty function to remove all child nodes. The code example below will clean all div elements with class set to ‘header’. The div will be empty.
$("div.header").empty();
The ‘clone’ function clones any html element. You can also clone with the event handler in place. $("#mybutton").clone(); // clone the button $("#mybutton").clone(true); // clone the button with event handlers
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!
Recent Comments