jQuery

What’s the problem
with JavaScript?

JavaScript was a initially
introduced in Netscape 2.0B3 in
Dec 1995,
a.k.a. Mocha, LiveScript, Jscript,
however, it’s official name is
ECMAScript

JavaScript is a C-family, world’s
worst named, extremely powerful
language (not a script), totally
unrelated to Java

JavaScript is a weakly typed,
classless, prototype based OO
language, that can also be used
outside the browser. It is not a
browser DOM.

The world’s most
misunderstood programming
language.
(Douglas Crockford)

Browser DOM really sucks, and this
is where jQuery comes to rescue.

This session is about
improving your Quality
of Life !

$(“#firstName”).text(“Joe Black”);
$(“button”).click(function() {alert “Clicked”;});
$(“.content”).hide();
$(“#main”).load(“content.htm”);
$(“<div/>”).html(“Loading…”).appendTo(“#content”);
$(“#firstName”).text(“Joe Black”);
$(“button”).click(function() {alert “Clicked”;});
$(“.content”).hide();
$(“#main”).load(“content.htm”);
$(“<div/>”).html(“Loading…”).appendTo(“#content”);
A Quality of Life by jQuery:
Very compact and fluent programming
model

jQuery is a lightweight, open-
source JavaScript library that
simplifies interaction between
HTML and JavaScript

It was and still being
developed
by John Resig from
Mozilla and was first
announced in January
2006

It has a great community, great
documentation, tons of plugins,
and it was recently adopted by
Microsoft
(how about intellisense in VS?)

The current version is 1.7.2
(as of July 2012)

Download the latest version from
http://jquery.com

To enable itellisense in VS 2008
SP1
install the –vsdoc hotfix:
VS90SP1-KB958502-x86.exe

Copy the
jquery.js
and the
jquery-vsdoc.js
into your application
folder

No need to reference the –vsdoc.js
<script src=“jquery.js”/><script src=“jquery.js”/>
Reference it in your markup

… or just drag it into the file
///<reference path=“jquery.js”/>///<reference path=“jquery.js”/>
Reference it in your JS files:

Create HTML elements on the fly
var el = $(“<div/>”)var el = $(“<div/>”)
The Magic $() function

Manipulate existing DOM elements
$(window).width()$(window).width()

Selects document elements
(more in a moment…)
$(“div”).hide();
$(“div”, $(“p”)).hide();
$(“div”).hide();
$(“div”, $(“p”)).hide();

$(document).ready(function(){…});$(document).ready(function(){…});
Fired when the document is ready for
programming.
Better use the full syntax:
$(function(){…});$(function(){…});

It may be used in case of conflict with other
frameworks.
jQuery(“div”);jQuery(“div”);
The full name of $() function is

jQuery uses closures for isolation
(function(){
var
jQuery=window.jQuery=window.$=function(){
// …
};
})();
(function(){
var
jQuery=window.jQuery=window.$=function(){
// …
};
})();
The library is designed to be isolated

var foo = jQuery.noConflict();
// now foo() is the jQuery main function
foo(“div”).hide();
var foo = jQuery.noConflict();
// now foo() is the jQuery main function
foo(“div”).hide();
Avoid $() conflict with other
frameworks
// remove the conflicting $ and jQuery
var foo = jQuery.noConflict(true);
// remove the conflicting $ and jQuery
var foo = jQuery.noConflict(true);

$(“div”).hide()
$(“<span/>”).appendTo(“body”)
$(“:button”).click()
$(“div”).hide()
$(“<span/>”).appendTo(“body”)
$(“:button”).click()
jQuery’s programming philosophy is:
GET >> ACT

$(“div”).show()
.addClass(“main”)
.html(“Hello jQuery”);
$(“div”).show()
.addClass(“main”)
.html(“Hello jQuery”);
Almost every function returns jQuery,
which provides a fluent programming
interface and chainability:

Get > Act
Chainability
The $() function
Three Major Concepts of jQuery

$(“*”) // find everything$(“*”) // find everything
All Selector
Selectors return a pseudo-array of jQuery
elements

$(“div”)
// <div>Hello jQuery</div>
$(“div”)
// <div>Hello jQuery</div>
Basic Selectors
Yes, jQuery implements CSS
Selectors!
$(“#usr”)
// <span id=“usr”>John</span>
$(“#usr”)
// <span id=“usr”>John</span>
$(“.menu”)
// <ul class=“menu”>Home</ul>
$(“.menu”)
// <ul class=“menu”>Home</ul>
By Tag:
By ID:
By
Class:

$(“div.main”) // tag and class
$(“table#data”) // tag and id
$(“div.main”) // tag and class
$(“table#data”) // tag and id
More Precise Selectors

// find by id + by class
$(“#content, .menu”)
// multiple combination
$(“h1, h2, h3, div.content”)
// find by id + by class
$(“#content, .menu”)
// multiple combination
$(“h1, h2, h3, div.content”)
Combination of Selectors

$(“table td”) // descendants
$(“tr > td”) // children
$(“label + input”) // next
$(“#content ~ div”) // siblings
$(“table td”) // descendants
$(“tr > td”) // children
$(“label + input”) // next
$(“#content ~ div”) // siblings
Hierarchy Selectors

$(“tr:first”) // first element
$(“tr:last”) // last element
$(“tr:lt(2)”) // index less than
$(“tr:gt(2)”) // index gr. than
$(“tr:eq(2)”) // index equals
$(“tr:first”) // first element
$(“tr:last”) // last element
$(“tr:lt(2)”) // index less than
$(“tr:gt(2)”) // index gr. than
$(“tr:eq(2)”) // index equals
Selection Index Filters

$(“div:visible”) // if visible
$(“div:hidden”) // if not
$(“div:visible”) // if visible
$(“div:hidden”) // if not
Visibility Filters

$(“div[id]”) // has attribute
$(“div[dir=‘rtl’]”) // equals to
$(“div[id^=‘main’]”) // starts with
$(“div[id$=‘name’]”) // ends with
$(“a[href*=‘msdn’]”) // contains
$(“div[id]”) // has attribute
$(“div[dir=‘rtl’]”) // equals to
$(“div[id^=‘main’]”) // starts with
$(“div[id$=‘name’]”) // ends with
$(“a[href*=‘msdn’]”) // contains
Attribute Filters

$(“input:checkbox”) // checkboxes
$(“input:radio”) // radio buttons
$(“:button”) // buttons
$(“:text”) // text inputs
$(“input:checkbox”) // checkboxes
$(“input:radio”) // radio buttons
$(“:button”) // buttons
$(“:text”) // text inputs
Forms Selectors

$(“input:checked”) // checked
$(“input:selected”) // selected
$(“input:enabled”) // enabled
$(“input:disabled”) // disabled
$(“input:checked”) // checked
$(“input:selected”) // selected
$(“input:enabled”) // enabled
$(“input:disabled”) // disabled
Forms Filters

$(“select[name=‘ddl’] option:selected”).val()$(“select[name=‘ddl’] option:selected”).val()
Find Dropdown Selected Item
<select name=“cities”>
<option value=“1”>Tel-Aviv</option>
<option value=“2” selected=“selected”>Yavne</option>
<option value=“3”>Raanana</option>
</select>
<select name=“cities”>
<option value=“1”>Tel-Aviv</option>
<option value=“2” selected=“selected”>Yavne</option>
<option value=“3”>Raanana</option>
</select>

$(“div”).length$(“div”).length
Returns number of selected elements.
It is the best way to check selector.
A Selector returns a pseudo array
of jQuery objects

$(“div”).get(2) or $(“div”)[2]$(“div”).get(2) or $(“div”)[2]
Returns a 2nd
DOM element of the
selection
Getting a specific DOM element

$(“div”).eq(2)$(“div”).eq(2)
Returns a 2nd
jQuery element of the
selection
Getting a specific jQuery element

var sum = 0;
$(“div.number”).each(
function(){
sum += (+this.innerHTML);
});
var sum = 0;
$(“div.number”).each(
function(){
sum += (+this.innerHTML);
});
this – is a current DOM element
each(fn) traverses every selected
element calling fn()

$(“table tr”).each(
function(i){
if (i % 2)
$(this).addClass(“odd”);
});
$(“table tr”).each(
function(i){
if (i % 2)
$(this).addClass(“odd”);
});
$(this) – convert DOM to jQuery
i - index of the current element
each(fn) also passes an indexer

.next(expr) // next sibling
.prev(expr) // previous sibling
.siblings(expr) // siblings
.children(expr) // children
.parent(expr) // parent
.next(expr) // next sibling
.prev(expr) // previous sibling
.siblings(expr) // siblings
.children(expr) // children
.parent(expr) // parent
Traversing HTML

$(“table td”).each(function() {
if ($(this).is(“:first-child”)) {
$(this).addClass(“firstCol”);
}
});
$(“table td”).each(function() {
if ($(this).is(“:first-child”)) {
$(this).addClass(“firstCol”);
}
});
Check for expression

// select paragraph and then find
// elements with class ‘header’ inside
$(“p”).find(“.header”).show();
// equivalent to:
$(“.header”, $(“p”)).show();
// select paragraph and then find
// elements with class ‘header’ inside
$(“p”).find(“.header”).show();
// equivalent to:
$(“.header”, $(“p”)).show();
Find in selected

$(“<li><span></span></li>”) // li
.find(“span”) // span
.html(“About Us”) // span
.andSelf() // span, li
.addClass(“menu”) // span,li
.end() // span
.end() // li
.appendTo(“ul.main-menu”);
$(“<li><span></span></li>”) // li
.find(“span”) // span
.html(“About Us”) // span
.andSelf() // span, li
.addClass(“menu”) // span,li
.end() // span
.end() // li
.appendTo(“ul.main-menu”);
Advanced Chaining

$(“div”)
.slice(2, 5)
.not(“.green”)
.addClass(“middle”);
$(“div”)
.slice(2, 5)
.not(“.green”)
.addClass(“middle”);
Get Part of Selected Result

$(“p”).html(“<div>Hello $!</div>”);
// escape the content of div.b
$(“div.a”).text($(“div.b”).html());
$(“p”).html(“<div>Hello $!</div>”);
// escape the content of div.b
$(“div.a”).text($(“div.b”).html());
Getting and Setting Inner Content

// get the value of the checked checkbox
$(“input:checkbox:checked”).val();
// get the value of the checked checkbox
$(“input:checkbox:checked”).val();
Getting and Setting Values
// set the value of the textbox
$(“:text[name=‘txt’]”).val(“Hello”);
// set the value of the textbox
$(“:text[name=‘txt’]”).val(“Hello”);
// select or check lists or checkboxes
$(“#lst”).val([“NY”,”IL”,”NS”]);
// select or check lists or checkboxes
$(“#lst”).val([“NY”,”IL”,”NS”]);

Handling CSS Classes
// add and remove class
$(“p”).removeClass(“blue”).addClass(“red”);
// add and remove class
$(“p”).removeClass(“blue”).addClass(“red”);
// add if absent, remove otherwise
$(“div”).toggleClass(“main”);
// add if absent, remove otherwise
$(“div”).toggleClass(“main”);
// test for class existance
if ($(“div”).hasClass(“main”)) { //… }
// test for class existance
if ($(“div”).hasClass(“main”)) { //… }

// select > append to the end
$(“h1”).append(“<li>Hello $!</li>”);
// select > append to the beginning
$(“ul”).prepend(“<li>Hello $!</li>”);
// select > append to the end
$(“h1”).append(“<li>Hello $!</li>”);
// select > append to the beginning
$(“ul”).prepend(“<li>Hello $!</li>”);
Inserting new Elements
// create > append/prepend to selector
$(“<li/>”).html(“9”).appendTo(“ul”);
$(“<li/>”).html(“1”).prependTo(“ul”);
// create > append/prepend to selector
$(“<li/>”).html(“9”).appendTo(“ul”);
$(“<li/>”).html(“1”).prependTo(“ul”);

// select > replace
$(“h1”).replaceWith(“<div>Hello</div>”);
// select > replace
$(“h1”).replaceWith(“<div>Hello</div>”);
Replacing Elements
// create > replace selection
$(“<div>Hello</div>”).replaceAll(“h1”);
// create > replace selection
$(“<div>Hello</div>”).replaceAll(“h1”);

$(“h3”).each(function(){
$(this).replaceWith(“<div>”
+ $(this).html()
+ ”</div>”);
});
$(“h3”).each(function(){
$(this).replaceWith(“<div>”
+ $(this).html()
+ ”</div>”);
});
Replacing Elements while keeping
the content

// remove all children
$(“#mainContent”).empty();
// remove all children
$(“#mainContent”).empty();
Deleting Elements
// remove selection
$(“span.names”).remove();
// remove selection
$(“span.names”).remove();
// change position
$(“p”).remove(“:not(.red)”)
.appendTo(“#main”);
// change position
$(“p”).remove(“:not(.red)”)
.appendTo(“#main”);

$(“a”).attr(“href”,”home.htm”);
// <a href=“home.htm”>…</a>
$(“a”).attr(“href”,”home.htm”);
// <a href=“home.htm”>…</a>
Handling attributes
// set the same as the first one
$(“button:gt(0)”).attr(“disabled”,
$(“button:eq(0)”).attr(“disabled));
// set the same as the first one
$(“button:gt(0)”).attr(“disabled”,
$(“button:eq(0)”).attr(“disabled));
// remove attribute - enable
$(“button”).removeAttr(“disabled”)
// remove attribute - enable
$(“button”).removeAttr(“disabled”)

$(“img”).attr({
“src” : “/images/smile.jpg”,
“alt” : “Smile”,
“width” : 10,
“height” : 10
});
$(“img”).attr({
“src” : “/images/smile.jpg”,
“alt” : “Smile”,
“width” : 10,
“height” : 10
});
Setting multiple attributes

// get style
$(“div”).css(“background-color”);
// get style
$(“div”).css(“background-color”);
CSS Manipulations
// set style
$(“div”).css(“float”, “left”);
// set style
$(“div”).css(“float”, “left”);
// set multiple style properties
$(“div”).css({“color”:”blue”,
“padding”: “1em”
“margin-right”: “0”,
marginLeft: “10px”});
// set multiple style properties
$(“div”).css({“color”:”blue”,
“padding”: “1em”
“margin-right”: “0”,
marginLeft: “10px”});

// get window height
var winHeight = $(window).height();
// set element height
$(“#main”).height(winHeight);
//.width() – element
//.innerWidth() – .width() + padding
//.outerWidth() – .innerWidth() + border
//.outerWidth(true) – including margin
// get window height
var winHeight = $(window).height();
// set element height
$(“#main”).height(winHeight);
//.width() – element
//.innerWidth() – .width() + padding
//.outerWidth() – .innerWidth() + border
//.outerWidth(true) – including margin
Dimensions
The default unit is Pixel (px)

// from the document
$(“div”).offset().top;
// from the parent element
$(“div”).position().left;
// scrolling position
$(window).scrollTop();
// from the document
$(“div”).offset().top;
// from the parent element
$(“div”).position().left;
// scrolling position
$(window).scrollTop();
Positioning

$(document).ready(function(){
//…
});
$(document).ready(function(){
//…
});
When the DOM is ready…
 Fires when the document is ready for
programming.
 Uses advanced listeners for detecting.
 window.onload() is a fallback.

// execute always
$(“div”).bind(“click”, fn);
// execute only once
$(“div”).one(“click”, fn);
// execute always
$(“div”).bind(“click”, fn);
// execute only once
$(“div”).one(“click”, fn);
Attach Event
Possible event values:
blur, focus, load, resize, scroll, unload, beforeunload, click,
dblclick, mousedown, mouseup, mousemove, mouseover,
mouseout, mouseenter, mouseleave, change, select, submit,
keydown, keypress, keyup, error
(or any custom event)

$(“div”).unbind(“click”, fn);$(“div”).unbind(“click”, fn);
Detaching Events
(Unique ID added to every attached function)

$(“div”).trigger(“click”);$(“div”).trigger(“click”);
Events Triggering
Triggers browser’s event action as well.
Can trigger custom events.
Triggered events bubble up.

// attach / trigger
elem.blur(fn) / elem.blur()
elem.focus(fn) / elem.focus()
elem.click(fn) / elem.click()
elem.change(fn) / elem.change()
// attach / trigger
elem.blur(fn) / elem.blur()
elem.focus(fn) / elem.focus()
elem.click(fn) / elem.click()
elem.change(fn) / elem.change()
Events Helpers
And many others…

// use different triggering function
$(“div”).triggerHandler(“click”);
// use different triggering function
$(“div”).triggerHandler(“click”);
Preventing Browser Default Action
// prevent default action in handler
function clickHandler(e) {
e.preventDefault();
}
// prevent default action in handler
e.preventDefault();
}
// or just return false
function clickHandler(e) {return false;}

// stop bubbling, keep other handler
e.stopPropagation();
}
// stop bubbling, keep other handler
e.stopPropagation();
}
Preventing Bubbling
// stop bubbling and other handlers
e.stopImmediatePropagation();
}
// stop bubbling and other handlers
e.stopImmediatePropagation();
}

// attach live event
(“div”).live(“click”, fn);
// detach live event
(“div”).die(“click”, fn);
// attach live event
(“div”).live(“click”, fn);
// detach live event
(“div”).die(“click”, fn);
Live Events
Currently supported events:
click, dblclick, mousedown, mouseup, mousemove, mouseover,
mouseout, keydown, keypress, keyup

// just show
$(“div”).show();
// reveal slowly, slow=600ms
$(“div”).show(“slow”);
// hide fast, fast=200ms
$(“div”).hide(“fast”);
// hide or show in 100ms $
(“div”).toggle(100);
// just show
$(“div”).show();
// reveal slowly, slow=600ms
$(“div”).show(“slow”);
// hide fast, fast=200ms
$(“div”).hide(“fast”);
// hide or show in 100ms $
(“div”).toggle(100);
Showing or Hiding Element

$(“div”).slideUp();
$(“div”).slideDown(“fast”);
$(“div”).slideToggle(1000);
$(“div”).slideUp();
$(“div”).slideDown(“fast”);
$(“div”).slideToggle(1000);
Sliding Elements

$(“div”).fadeIn(“fast”);
$(“div”).fadeOut(“normal”);
// fade to a custom opacity
$(“div”).fadeTo (“fast”, 0.5);
$(“div”).fadeIn(“fast”);
$(“div”).fadeOut(“normal”);
// fade to a custom opacity
$(“div”).fadeTo (“fast”, 0.5);
Fading Elements
Fading === changing opacity

$(“div”).hide(“slow”, function() {
alert(“The DIV is hidden”);
});
$(“div”).show(“fast”, function() {
$(this).html(“Hello jQuery”);
}); // this is a current DOM element
$(“div”).hide(“slow”, function() {
alert(“The DIV is hidden”);
});
$(“div”).show(“fast”, function() {
$(this).html(“Hello jQuery”);
}); // this is a current DOM element
Detecting animation completion
Every effect function has a (speed, callback)
overload

// .animate(options, duration)
$(“div”).animate({
width: “90%”,
opacity: 0.5,
borderWidth: “5px”
}, 1000);
// .animate(options, duration)
$(“div”).animate({
width: “90%”,
opacity: 0.5,
borderWidth: “5px”
}, 1000);
Custom Animation

$(“div”).animate({width: “90%”},100)
.animate({opacity: 0.5},200)
.animate({borderWidth: “5px”});
$(“div”).animate({width: “90%”},100)
.animate({opacity: 0.5},200)
.animate({borderWidth: “5px”});
Chaining Animation
By default animations are queued and than
performed one by one

$(“div”)
.animate({width: “90%”},
{queue:false, duration:1000})
.animate({opacity : 0.5});
$(“div”)
.animate({width: “90%”},
{queue:false, duration:1000})
.animate({opacity : 0.5});
Controlling Animations Sync
The first animation will be performed
immediately without queuing

$(“div”).load(“content.htm”);
// passing parameters
$(“#content”).load(“getcontent.aspx”,
{“id”:”33”,
“type”:”main”});
$(“div”).load(“content.htm”);
// passing parameters
$(“#content”).load(“getcontent.aspx”,
{“id”:”33”,
“type”:”main”});
Loading content

$.get(“test.aspx”, {id:1},
function(data){alert(data);});
$.post(“test.aspx”, {id:1},
$.get(“test.aspx”, {id:1},
$.post(“test.aspx”, {id:1},
Sending GET/POST requests

$.getJSON(“users.aspx”, {id:1},
function(users)
{
alert(users[0].name);
});
$.getJSON(“users.aspx”, {id:1},
function(users)
{
alert(users[0].name);
});
Retrieving JSON Data

$.getScript(“script.js”,
function()
{
doSomeFunction();
});
$.getScript(“script.js”,
function()
{
doSomeFunction();
});
Retrieving JS Files

// definition
jQuery.fn.printLine = function(s) {
return jQuery(this).each(function() {
this.append(“<div>”+ s +“</div>”);
});
};
// usage
$(“#log”).printLine(“Hello”);
// definition
return jQuery(this).each(function() {
this.append(“<div>”+ s +“</div>”);
});
};
// usage
$(“#log”).printLine(“Hello”);
Adding Methods
Do not use $ in the method
(at least not until next slide)

$.expr[‘:’].test = function(o, i, m, s) {
// o – current object in the selection
// i – loop index in the stack
// m – meta data about your selector
// s – stack of all the elements
// return true to include the element
// return false to exclude the element
};
$.expr[‘:’].test = function(o, i, m, s) {
// o – current object in the selection
// i – loop index in the stack
// m – meta data about your selector
// s – stack of all the elements
// return true to include the element
// return false to exclude the element
};
Custom Selectors

More Functionality on every aspect
URL parameters parser
Browser and features detection
Data Cache
Utilities Helper functions
Various Plug-ins
More things to explore

Niladri Karmakar
Phone: 9832495742,9800095111
Email: niladri.17@gmail.com
arena1slg@gmail.com
Contact me
Thank YOU!

jQuery

More Related Content

What's hot (17)

Similar to jQuery (20)

Recently uploaded (20)

jQuery