what’s the problem with javascript?
DESCRIPTION
The magic of jQuery Vlad Azarkhin Senior Architect & Technologist Updated 23. february 2013 by Henrik Høltzer. What’s the problem with JavaScript?. JavaScript was a initially introduced in Netscape 2.0B3 in Dec 1995, - PowerPoint PPT PresentationTRANSCRIPT
The magic of jQuery
Vlad AzarkhinSenior Architect & Technologist
Updated 23. february 2013 by Henrik Høltzer
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.
$(“#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
The current version is 1.9.1
(as of february 2013)
jquery.js should contain a copy of the compressed production code
<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:
<script src="//ajax.googleapis.com/ajax/libs/
jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/
jquery/1.9.1/jquery.min.js"></script>
You can also reference it from Google
Or by another CDN (Content Delivery Network)
Selects document elements
(more in a moment…)
$(“div”).hide();$(“div”).hide();
The Magic $() function
$(document).ready(function(){…});$(document).ready(function(){…});
Fired when the document is ready for programming.
Better use the full syntax:
$(function(){…});$(function(){…});
The Magic $() function
$(“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:
$(“*”) // 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
$(“#cities option:selected”).val()
$(“#cities option:selected”).text()
$(“#cities option:selected”).val()
$(“#cities option:selected”).text()
Find Dropdown Selected Item
<select id=“cities”>
<option value=“1”>Tel-Aviv</option>
<option value=“2” selected=“selected”>Yavne</option>
<option value=“3”>Raanana</option>
</select>
<select id=“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 jQueryi - 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 heightvar winHeight = $(window).height();
// set element height$(“#main”).height(winHeight);
//.width() – element
//.innerWidth() – .width() + padding
//.outerWidth() – .innerWidth() + border
//.outerWidth(true) – including margin
// get window heightvar 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 handlerfunction clickHandler(e) {
e.preventDefault();}
// prevent default action in handlerfunction clickHandler(e) {
e.preventDefault();}
// or just return falsefunction clickHandler(e) {return false;}// or just return falsefunction clickHandler(e) {return false;}
// stop bubbling, keep other handlerfunction clickHandler(e) {
e.stopPropagation();}
// stop bubbling, keep other handlerfunction clickHandler(e) {
e.stopPropagation();}
Preventing Bubbling
// stop bubbling and other handlersfunction clickHandler(e) {
e.stopImmediatePropagation();}
// stop bubbling and other handlersfunction clickHandler(e) {
e.stopImmediatePropagation();}
// or just return falsefunction clickHandler(e) {return false;}// or just return falsefunction clickHandler(e) {return false;}
// 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},function(data)
{alert(data);});
$.get(“test.aspx”, {id:1},function(data)
{alert(data);});
$.post(“test.aspx”, {id:1},function(data)
{alert(data);});
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
// definitionjQuery.fn.printLine = function(s) {
return jQuery(this).each(function() { this.append(“<div>”+ s +“</div>”);
});};
// usage$(“#log”).printLine(“Hello”);
// definitionjQuery.fn.printLine = function(s) {
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)
(function ($) {
jQuery.fn.printLine = function(s) {return $(this).each(function() {
this.append(“<div>”+ s +“</div>”);
});};
})(jQuery);
(function ($) {
jQuery.fn.printLine = function(s) {return $(this).each(function() {
this.append(“<div>”+ s +“</div>”);
});};
})(jQuery);
Closure to solve the $ issue
$.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
jQuery web-site: http://jquery.com
jQuery API: http://api.jquery.com
Many many blogs
jQuery in Action book:
Where to go next