naresh information technologies9 jquery technicality • lightweight – 14kb (minified and gzipped)...
TRANSCRIPT
-
Naresh Information
Technologies
-
jQuery
• Nagaraju Bende • MCPD.NET Sr Consultant,Trainer
• http://nbende.wordpress.com
http://nbende.wordpress.com/
-
JavaScript is a weakly typed, classless,
prototype based OO language, that
can also be used outside the
browser. It is not a browser DOM.
About JAvascript …
-
The world’s most misunderstood
programming language.
Most People Say
-
With AJAX … • Javascript has become essential to current
web page development, but …
• Javascript is not a good language design
• Javascript has become bloated
– DOM navigation
– Browser differences
• Writing Javascript code is tedious, time-
consuming, and error-prone
-
jQuery is a lightweight, open-source
JavaScript library that simplifies
interaction between HTML and
JavaScript
jQuery …
-
It was and still being
developed
by John Resig from
Mozilla and was
first announced in
January 2006
-
with jQuery
• jQuery makes writing Javascript much
easier
– DOM navigation (css-like syntax)
– Apply methods to sets of DOM elements
– Builder model (chain method calls)
– Extensible and there are tons of libraries
– Handles most browser differences so you don’t
have to
• Server provides data
• jQuery on client provides presentation
-
9
jQuery Technicality
• Lightweight – 14kb (Minified and Gzipped)
• Cross-browser support (IE 6.0+, FF 1.5+,
Safari 2.0+, Opera 9.0+)
• CSS-like syntax – easy for developers/non-
developers to understand
• Active developer community
• Extensible - plugins
-
10
Example – Ajax the old way function GetXmlHttpObject(handler) {
var objXmlHttp = null; //Holds the local xmlHTTP object instance
//Depending on the browser, try to create the xmlHttp object
if (is_ie){
var strObjName = (is_ie5) ? 'Microsoft.XMLHTTP' : 'Msxml2.XMLHTTP';
try{
objXmlHttp = new ActiveXObject(strObjName);
objXmlHttp.onreadystatechange = handler;
}
catch(e){
//Object creation errored
alert('Verify that activescripting and activeX controls are enabled');
return;
}
}
else{
// Mozilla | Netscape | Safari
objXmlHttp = new XMLHttpRequest();
objXmlHttp.onload = handler;
objXmlHttp.onerror = handler;
}
//Return the instantiated object
return objXmlHttp;
}
-
11
Example – Ajax with jQuery
$.get("update_actions.aspx", {st: "yes", f: $(this).attr("ID")} );
-
$(“#firstName”).text(“Joe Black”);
$(“button”).click(function() {alert “Clicked”;});
$(“.content”).hide();
$(“#main”).load(“content.htm”);
$(“”).html(“Loading…”).appendTo(“#content”);
A Quality code by Query:
Very compact and fluent programming model
-
Download the latest version from
http://jquery.com
http://jquery.com/
-
To enable itellisense in VS 2008 SP1
install the –vsdoc hotfix:
VS90SP1-KB958502-x86.exe
http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736
-
Copy the
jquery.js
and the
jquery-vsdoc.js
into your application
folder
-
jQuery Core Concepts
-
Create HTML elements on the fly
var el = $(“”)
$() function runs the total show
-
Manipulate existing DOM elements
$(window).width()
$() function
-
Selects document elements
(more in a moment…)
$(“div”).hide();
$(“div”, $(“p”)).hide();
$() function
-
$(document).ready(function(){…});
Fired when the document is ready for
programming.
Better use the full syntax:
$(function(){…});
$() function
-
No need to reference the –vsdoc.js
Reference it in your markup
-
… or just drag it into the file
///
Reference it in your JS files:
-
You can also reference it from Google
-
$(“div”).hide()
$(“”).appendTo(“body”)
$(“:button”).click()
jQuery’s programming philosophy is:
GET >> ACT
-
$(“*”) // find everything
All Selector
Selectors return a pseudo-array of jQuery
elements
-
$(“div”)
// Hello jQuery
Basic Selectors
Yes, jQuery implements CSS Selectors!
$(“#usr”)
// John
$(“.menu”)
// Home
By Tag:
By ID:
By Class:
-
$(“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”)
Combination of Selectors
-
$(“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
Selection Index Filters
-
Effects using jQuery
-
// 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);
Sliding Elements
-
$(“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
Detecting animation completion
Every effect function has a (speed, callback)
overload
-
// .animate(options, duration)
$(“div”).animate({
width: “90%”,
opacity: 0.5,
borderWidth: “5px”
}, 1000);
Custom Animation
-
EFFECTS DEMO
-
$(“div”).load(“content.htm”);
// passing parameters
$(“#content”).load(“getcontent.aspx”,
{“id”:”33”,
“type”:”main”});
Loading content
-
39
Useful jQuery links
• www.jquery.com – jQuery homepage
• www.learningjquery.com – jQuery tutorial
blog
• www.visualjquery.com – jQuery
documentation
• http://ui.jquery.com – jQuery user interface
• http://bassistance.de/jquery-plugins/ -
homepage of the author of several useful
jQuery plugins.
http://www.jquery.com/http://www.learningjquery.com/http://www.visualjquery.com/http://ui.jquery.com/http://bassistance.de/jquery-plugins/http://bassistance.de/jquery-plugins/http://bassistance.de/jquery-plugins/