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
Here is how we select all links under div elements that have css class set to mycss
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
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
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 ..
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
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 …
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
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
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
What if we want to wrap a div around an existing table? Use the wrap function ...
How to replace all hr elements (horizontal line) with a br element
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 ...