jquery
DESCRIPTION
TRANSCRIPT
Objective In this tutorial, we will learn everything about the jQuery. After
completing the tutorial you will be able to understand about jQuery.
This jQuery tutorial covers: Introduction to jQuery Features of jQuery Comparison between different tool kits Jquery Selectors
2
What’s the problem with JavaScript?
JavaScript was a initially
introduced in Netscape 2.0B3
in Dec 1995,
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 !
Introduction to jQuery
A Little Bit About jQueryWhat is jQuery?•jQuery is an Open-Source JavaScript framework that simplifies cross-browser client side scripting.
• Animations
• DOM manipulation
• AJAX
• Extensibility through plugins
•jQuery was created by John Resig and released
01/06
•Most current release is 1.7.2 (3/19/12)
11
A Little Bit About jQueryWhy should you use it?
•Easy to learn! It uses CSS syntax for selection
•Its tiny 71KB (24KB, minified and Gzipped)
•Documented api.jquery.com & Supported forum.jquery.com
•Cross browser compatibility: IE 6+, FF 2+
•It is the most used JavaScript library on the web
today• 39% of all sites that use JavaScript use jQuery.
trends.builtwith.com/javascript/JQuery <- See, I'm not a liar..
12
Features Of Jquery. jQuery includes the following features:
DOM element selections using the cross-browser open source selector engine Sizzle, a spin-off out of the jQuery project
DOM traversal and modification (including support for CSS 1-3)DOM manipulation based on CSS selectors that uses node
elements name and node elements attributes (id and class) as criteria to build selectors
EventsEffects and animationsAjaxExtensibility through plug-insCross-browser support
13
All Other Frameworks
14
JQuery versus Dojo versus YUI
16
17
18
When we compare these 3 libraries/frameworks, I found the following which was quite useful.http://selectors.turnwheel.com/slickspeed.php
jQuery vs MooTools
jQuery Core MooTools Core
Library Size 55.9K 64.3K
Features
License MIT & GPL MIT
DOM Utilites yes yes
Animation yes yes
Event Handling yes yes
CSS3 Selectors yes (a subset) yes (a subset)
Ajax yes yes
Native Extensions (excluding Element)
about a dozen for Array, Object, and String
about six dozen for Array, Object, String, Function, and Number
Inheritance Not supported directly with jQuery
Provided with Class constructor
19
The Mottos Say It AllIf you go to the jQuery site, here's what it says at the top
of the page:ojQuery is a fast and concise JavaScript Library
that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.
...and if you go to MooTools, this is what you'll find:oMooTools is a compact, modular, Object-
Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.20
21
Historical trend This diagram shows the historical trend in the percentage of
websites using JQuery.
22
JavaScript libraries market position This diagram shows the market positions in terms of popularity
and traffic of the 5 most popular JavaScript libraries.
23
Document Object Model (DOM): nounBlah blah blah long
definition that makes little sense….
What is the DOM?
24
What Is The DOM?Long story short, the DOM is your html
document code. From the <!DOCTYPE> to the </html>
The DOM is loaded top to bottom, so include your scripts at the bottom of the page for best performance.
The DOM is "ready" when everything on the page has loaded.
• Stylesheets• JavaScripts• Images
25
Wait!! In order to make sure that jQuery can find the
element you asked it for, your browser needs to have loaded it (the DOM needs to be ready).
Q. How can I be sure my code runs at DOM ready?
A. Wrap all your jQuery code with the document ready function:
$(document).ready(function(){ // insert sweet, sweet jQuery code here…
});26
And What If I Don't Wanna, Huh?
1. Code doesn't work, throws an error (90%)
2. Code works… this page load, next page load see #1. (~9%)3. Code opens a worm hole that transports your page back to 1990 revolutionizing the
Web as we know it. While seemingly great, it also creates a paradox and destroys the universe. * (<1%)
*(has yet to be fully verified)
1 of 3 things will happen:
27
jQuery Core Concepts
Create HTML elements on the fly
var el = $(“<div/>”)
The Magic $() function
Manipulate existing DOM elements
$(window).width()
The Magic $() function
Selects document elements(more in a moment…)
$(“div”).hide();
$(“div”, $(“p”)).hide();
The Magic $() function
$(document).ready(function(){…});
Fired when the document is ready for programming.
Better use the full syntax:
$(function(){…});
The Magic $() function
Loading jQueryIn order to use jQuery you need to load
it.You can include it locally on your own server:
<script src="/js/jquery.js">
Or use one of the CDN's made available:ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js
CDN's are Gzipped and minified
33
Load Scripts At The BottomProblem:When scripts are downloading they block everything else in almost all browsers!
Solution:Best practice: Load your scripts at the bottom of your page so they don't interrupt page content downloads.
34
jQuery SyntaxThe jQuery syntax is tailor made for selecting HTML elements and perform some action on the element(s).
Basic syntax is: $(selector).action()A dollar sign to define jQueryA (selector) to "query (or find)" HTML elements
A jQuery action() to be performed on the element(s)
35
Get > Act
Chainability
The $() function
Three Major Concepts of jQuery
jQuery Selectors
$(“*”) // find everything
All Selector
Selectors return a pseudo-array of jQuery elements
$(“div”)
// <div>Hello jQuery</div>
Basic Selectors
Yes, jQuery implements CSS Selectors!
$(“#usr”)
// <span id=“usr”>John</span>
$(“.menu”)
// <ul class=“menu”>Home</ul>
By Tag:
By ID:
By Class:
And BOOM! Goes The Dynamite.
And BOOM! Goes The Dynamite.Html:
<p>Hello World! I'm Eric</p>Script:
$(function(){
$("p").addClass("isCool");//keep telling yourself that..
});
Resulting html:
<p class="isCool">Hello World! I'm Eric</p>
jsbin.com/ecayo3/18#slide19
40
Break It Down Now!$(function(){// = $(document).ready(function(){
});
$ ("p") .addClass("isCool");
41
All Your Basic Selectors Are Belong To Us
Uses the same syntax you use to style elements in CSS!
api.jquery.com/category/selectors/
42
Get Classy <p>Get Classy <p>
jQuery:$("p").addClass("sophisticated");
Before:<p>
After:<p class="sophisticated">
jsbin.com/ecayo3/18#slide22
43
This <p> Has No Class At All! jQuery:$("p").removeClass("sophisticated");
Before:<p class="sophisticated">
After:<p class="">
44
<div> Hide and SeekjQuery:$("div").show();
Before:<div style="display:none;">
After:<div style="display:block;">
45
I’m Not Lame, Am I?jQuery:$("#eric").text("Is Cool");
Before:<p id="eric">Is Lame</p>
After:<p id="eric">Is Cool</p>
46
You Can Chain Most Methods Together
$("p")
.addClass("sophisticated") .text("Hello World!") .show();
47
Some of Basic Methods
api.jquery.com/
48
A Simple Example: <html>
<head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$("p").click(function(){$(this).hide();});});</script></head><body><p>If you click on me, I will disappear.</p></body></html>
49
Downloading jQueryTwo versions of jQuery are available for
downloading: one minified and one uncompressed (for debugging or reading).
Both versions can be downloaded fromhttp://docs.jquery.com/
Downloading_jQuery#Download_jQuery
50
Alternatives to DownloadingIf you don't want to store the jQuery library on your own computer, you can use the hosted jQuery library from Google or Microsoft.
Google<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script></head>
Microsoft<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script></head>
51
Questions?
52
http://www.jquerymagic.com/
PluginsPlugins
53
Viva Variety!“If you want to create an animation, effect
or UI component, chances are pretty good that someone has done your work for you already.”
plugins.jquery.com
54
Great ReferencesJohn Resig's introduction slidesjQuery 1.4 Cheat SheetjQuery APIjQuery ForumsYAYquery Podcast (explicit)http://docs.jquery.com/How_
jQuery_Works
DEMOS:jsbin.com/ecayo3/18
55
I Like Plugins!Show Us More!
56
