Introduction to jQuery

Introduction to jQuery
Nagaraju Sangam, UI Developer

Agenda
Introduction
World without jQuery
With jQuery
Selectors
Events
Effects
DOM traversal
DOM manipulation
Plug-Ins
Demos

Objective
To help you understand jQuery and to let you know where to explore more about jQuery.

Prerequisites
Basic programming experience
Little knowledge of JavaScript.

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.

DOM traversal without jQuery?
 document.all
 document.getElementById
 document.getElementByClassName
 document.getElementByTagname
 document.getElementByName
 querySelectorAll

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

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

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”); }

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

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:

DEMO:
<html> <head> <script src="C:UserssnagarajuDesktopPPT presentationsjQueryjQuery Samplesjquery-1.3.2.js"></script> <script> function f(){ alert("JS");} window.onload=f; $(document).ready(function(){alert("jQuery");}); </script> </head> <body> <img src="http://www.soundwordsministries.com/wp- content/uploads/2008/05/mothers-day-flowers.jpg"/> </body> </html>

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 } );

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”});

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

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.

Performance Comparison of JavaScript Libraries
jQuery and Dojo are good as per the above statistics.
( Source: http://blog.creonfx.com )

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

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…} );

jQuery: Chaining
$("div").addClass("red").find("span").css({'color':'pink');
<div>
inside dIV tag...
<span> Hello..! this is a ptag</span>
</div>

jQuery: Selectors
$(“*”)
$(“div”)
$(“.class”)
$(“p.class”)
$(DIV.note)
$("a:first”)
$("p a")  Get the anchor tags under P tags
$("a[rel='home']") match attributes
$('a:nth-child(4)') ==== $('a:eq(5)')
$('li a[title=title]')
$('li>a') direct Childs.
$(..)[0]==$(..).get(0)

DEMO
1. Selected option:
$(“select options:checked”) .val()
<select>
<option> 1</option>
<option> 2</option>
</select>
2. Select alternate td’s
$(“td:nth-of-type(2n)”)

jQuery: Events
click()
mouseover()
mouseout()
mouseenter()
Blur()
change()
dblclick()
focus()
keydown()
keyup()
scroll()
resize()
load()

DEMO
$(“a”).click( function(){
alert(“hi”);
});
$(“a”).on(“click”, function(){
alet(“hi”);
})
$(“a”).bind(“click”, function(){
});
$(“a”).live(“click”, function(){
});

jQuery: Effects
Syntax: $(exp).function(); $(exp).function(speed); $(exp).function(speed,callback);
show()
hide()
toggle()
slideup()
slidedown()
slidetoggle()
fadeIN()
fadeout()
fadeTo(0
animation()

jQuery: DOM Traversal
.find()
.next()
.prev()
.nextAll
.append()
.children()
.parent()
.eq(exp)
.not(exp)
.add(exp)
.next()
.prevAll()
.end()

jQuery: DOM Manipulation
.appendTo(exp)
.appendTo(jQueryobject)
.preappend()
.PreappendTo(exp)
.PreappendTo(jQueryobject)
.after(content)
.before(content)
.wrap(html)
.empty()
.remove()
.removeExp()

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();

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.

References
Reference Websites:
www.jquery.com
www.docs.jquery.com
www.api.jquery.com
http://www.learningjquery.com
Video Tutorials:
http://hiddenpixels.com/tutorials/jquery-beginners-video-tutorials/
http://www.bennadel.com/resources/presentations/jquery/video/index.htm
http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-video-series/
http://tutorialvid.com/viewVideo.php?video_id=1644&title=jQuery_for_Beginners_Video_Tutorial_Part_4

Introduction to jQuery

More Related Content

What's hot

Similar to Introduction to jQuery

More from Nagaraju Sangam

Recently uploaded

Introduction to jQuery