The document provides an introduction to jQuery, explaining what it is, its benefits over traditional JavaScript, and how it can be used. Key points covered include:
- jQuery is a lightweight JavaScript library that makes client-side scripting easier by providing cross-browser compatibility and methods for selecting, manipulating, and traversing DOM elements.
- jQuery solves many cross-browser issues that exist with traditional JavaScript and allows unobtrusive JavaScript that separates behavior from content.
- jQuery simplifies many common tasks like DOM traversal and manipulation through methods like $.(), selectors, events, effects, and plugins. This allows easier and more readable code compared to traditional JavaScript.
- The document provides examples of how to use
5. What is jQuery?
A light weight framework for Client Side JavaScript.
JavaScript Library/API
jQuery library file is light weight
It can be downloaded from http://www.jQuery.com
An Open Source Project
It is maintained by a group of developers, with a very active support base and thorough, well written documentation.
6. DOM traversal without jQuery?
document.all
document.getElementById
document.getElementByClassName
document.getElementByTagname
document.getElementByName
querySelectorAll
7. 1. Cross Browser Issues
document.all: It’s a MS implementation , supported by only IE4+ and Opera 5+
getElementById: IE5-7 return the element with name=“id".
getElementByClassname: Opera4+ do not recognize when there is more than one class.
Eg: <p class=“x y”></p>
querySelectorAll : It’s new, not supported by few browsers.
Source: http://www.quirksmode.org/dom/w3c_core.html
8. Cross browser issues: JS vs jQuery
jQuery’s cross browser layer makes it to work for all browsers and all versions.
Write once and run everywhere.
Java Script
jQuery
JS1
IE
JS2
MoZilla
JS3
Opera
IE
MoZilla
Opera
JQuery
9. 2. JavaScript onload event
JS onLoad event executes as soon as the entire page loads but the DOM elements might not have been completely loaded by this time. This is not acceptable in few situations.
onload:
1) function fun() { alert(“hello”); }
window.onload=fun;
2) window.onload=function() { alert(“hello”); }
10. JS onload Vs jQuery DOM load
DOM Load
Content load: Images, graphics etc
DOM Load
Content load: Images, graphics etc
jQuery fires here
JS fires here
11. 3.Unobstructive Javascript
Unobstructive Javascript = Separation of behavior from content (separate JS from HTML).
This can be achieved in JS using addEventListener method in onload event, but the problem is that this code executes only when the entire page loads.
<head> <scrip> var el=document.getElementbyId(“ID”); // DOM is not yet loaded, hence this will not work el.addEventListener(“click”, function(){ alert(“hello”); },true); </script> <body> <P id=“id” name=“OK”/> Click here !!! </P> </body>
In the Onload event:
<head> <scrip> function f(){ var el=document.getElementbyId(“ID”); // DOM is loaded, hence this will work el.addEventListener(“click”, function(){ alert(“hello”); },true); } window.onload=f; </script> <body>
-Now, It works . But, f() executes only when the entire page is loaded including all the images.
Inside script tag:
13. Anonymous functions:
Anonymous functions are functions that are dynamically declared at runtime without a name.
Eg:- var myfun=function(){ alert(“hello”); };
myfun();
How these are useful?
1) Pass logic to another function
a) window.addEventListener("load“, function() { alert("All done");}, false);
b) window.onload=function{ alert(“hello”); };
2) Single use functions:
function(){ alert(“hello”); return (0) }(); // declare and call at the same time
jQuery method takes anonymous function as a parameter.
Eg: jQuery( function() { //code goes here } );
14. Ease of Coding
Display all div content in red color and bold font: -
Javascript
var divs = document.getAllElementsByTagName(“div”);
for(i=0;i<=divs.length;i=i+1)
{
divs[i].style.color=“red”;
divs[i].style.fontWeight=“bold”;
}
jQuery
$(“div”).css({ color:”red”; font-Weight:”bold”});
15. Why jQuery when JS can do everything?
Cross browser compatible.
IE 6+
Fire Fox 2+
Opera 9+
Safari 3+
Mozilla
Chrome 1.0
Unobstructive Javascript: Seperates behaviour with content
Don’t need to wait until the images are loaded, instead the javascript can be executed as soon as the DOM is ready.
Ease of coding
Simple Syntax (Readable)
Efficient
Light weight (14KB to 19 KB)
Open Source ( GNU&MIT public licences)
Excellent Documentation
Strong community
Implicit iteraion
Chaining
Plug-in Support
VS Support ( VS 2005 SP1)
Intelle sense
Supports Ajax
17. Other JavaScript Libraries
Prototype (63+126kp scriptulo) : Will not deal with visual effects and animations. On top of it script.aculo.US deals with it.
Script.Aculo.US: More visual frame work, can’t integrate with other frameworks. Less community support.
Yahoo-UI: Large in size
Mootools: suitable for apps that require less js, less community support.
Dojo: So popular and efficient as jQuery. Not as simpler as jQuery.
18. Performance Comparison of JavaScript Libraries
jQuery and Dojo are good as per the above statistics.
( Source: http://blog.creonfx.com )
19. jQuery Constructs
jQuery()
$() // short notation for jQuery()
Create a different alias instead of jQuery to use in the rest of the script.
var jQ = jQuery.noConflict();
jQ("div p").hide();
Usage of “$” shouldn’t create conflic with other frameworks?
jQuery.noConflict();
$("content").style.display = 'none'; // now the $ is of the other framework
20. jQuery : on DOM load
Below anonymous function executes as soon as the DOM loads. jQuery(document).ready( function(){ // code goes here…} );
Below is equalent to the above code jQuery( function(){ // code goes here…} );
33. jQuery: Plug-in
Create a plug-in javascript file Name of the js file: jQuery.pluginname.js js file contnet: jQuery.fn.pluginname=function(){ // code goes here };
Create a html file and include js file in the html head section <scrip scr=path and file name ></sript>
Call the plug-in method $(“p”).pluginname();
35. jQuery: Considerations
jQuery is not a replacement for javascript.
Jquery can have performance implication and as always it depends on how you write code.
jQuery doesn’t solve All.
Use ID selector as much as possible or atleast use nested selector using ID as parent like.
To search all input element . $(“input”) will perform slower than $(“#tableName input”) which will be faster.
Use JQuery methods only to change properties , get values and modify attribute otherwise use of native members can create cross browser issues.