Jquery is one of the most powerful scripting languages for its easiness of coding and the huge library of functions. In the new era of the web designing the flash animation can be completely replaced by the Jquery which will increase the page loading speed and decrease the size of page over JavaScript.
Another advantage of Jquery over JavaScript is number of Lines Of Code (LOC). Jquery has a huge library of functions, with which all the complex problems can be solved in to few lines of code. For example, designers will normally use flash to create effects on pictures which can be done effectively using inbuilt functions in Jquery.
In JavaScript it is very difficult to highlight every row in a table with a contrasting color, which can be solved in Jquery by a single line of code.
Again, Jquery is lighter in weight, simple in coding and a wide range of plug-ins is available.
$(“table tr:nth-child(even)”).addClass(“altcolor”);
The Jquery code starts with a line and the entire code is written inside the function. So it will stack all as soon as the DOM object is loaded. You can load your element before the window load. This makes the Jquery very efficient and very fast over the JavaScript. Every thing that you wrote in side the bracket is ready to go as early as window is loaded.
$(document).ready (function () {
});
How Jquery Works?
Before you start to write the code you need to download the latest Jquery library from the internet and give it as the library in script src(<script type=”text/javascript “ src=”Jquery.js”></script>) or you can give the src directly to the site where you can down load the latest library
src=”http://code.jquery.com/jquery-latest.pack.js”
Example:
<script type=”text/JavaScript” src=”http://code.jquery.com/jquery-latest.pack.js”></script>
<script type=”text/JavaScript”>
$(document).ready (function()
{
———————————
Jquery code
—————————-
});
</script>
DOM Element selection
Jquery uses the CSS element such as Id, classes, attribute filter, relationship to another element or filter conditions which can be chained for the DOM selection
For instance, in a normal JavaScript, it is very difficult to select all 2nd column LI elements in an HTML. In Jquery you can achieve this using a simple line of code like
$(“#liEntries li:nth-child(2)”)
Eg: $(‘.classname’) //selection by class
$(‘#idname ’) //selection by id
Grabbing Value
Some of the methods in the Jquery will return the value in the DOM attribute, so it will help to get the size and width of the DOM element
Var height = $(“div#wraper”).height(); //to get the height of the div tag
Var src = $(“img#photo”).attr(“ src ”); // to get the path of the image
Traversing through the DOM
In the Jquery we can easily move from one DOM to the next DOM using some inbuilt methods. For example by Jquery method you got one picture form the gallery list and now you want to take all the consecutive pictures in the list, for that you can simply use
$(“img”).next();
Similarly the other methods are
$(“img”).first ();
$(“img”).last ();
$(“img”).prev ();
Event handling in Jquery
Jquery is binding the handler to each item individually behind-the-scenes.
$(‘#div-id’).click(function(){ //for on click action
————————————–
Jquery Code
—————————————
});
$(‘#div-id’).hover(function(){
});
In the competitive world of business fast output in a more easy and error free method is widely acceptable in any area. The advantages of Jquery over other methods are strongly recommendable.