Download - Jquery
![Page 2: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/2.jpg)
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
![Page 3: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/3.jpg)
What’s the problem with JavaScript?
![Page 4: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/4.jpg)
JavaScript was a initially
introduced in Netscape 2.0B3
in Dec 1995,
LiveScript, Jscript, however, it’s
official name is
ECMAScript
![Page 5: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/5.jpg)
JavaScript is a C-family, world’s
worst named, extremely
powerful language (not a
script), totally unrelated to
Java
![Page 6: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/6.jpg)
JavaScript is a weakly typed,
classless, prototype based OO
language, that can also be
used outside the browser. It is
not a browser DOM.
![Page 7: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/7.jpg)
The world’s most
misunderstood
programming language.
(Douglas Crockford)
![Page 8: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/8.jpg)
Browser DOM really sucks, and
this is where jQuery comes to
rescue.
![Page 9: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/9.jpg)
This session is about improving your Quality
of Life !
![Page 10: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/10.jpg)
Introduction to jQuery
![Page 11: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/11.jpg)
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
![Page 12: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/12.jpg)
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
![Page 13: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/13.jpg)
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
![Page 14: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/14.jpg)
All Other Frameworks
14
![Page 16: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/16.jpg)
JQuery versus Dojo versus YUI
16
![Page 17: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/17.jpg)
17
![Page 18: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/18.jpg)
18
When we compare these 3 libraries/frameworks, I found the following which was quite useful.http://selectors.turnwheel.com/slickspeed.php
![Page 19: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/19.jpg)
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
![Page 20: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/20.jpg)
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
![Page 21: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/21.jpg)
21
![Page 22: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/22.jpg)
Historical trend This diagram shows the historical trend in the percentage of
websites using JQuery.
22
![Page 23: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/23.jpg)
JavaScript libraries market position This diagram shows the market positions in terms of popularity
and traffic of the 5 most popular JavaScript libraries.
23
![Page 24: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/24.jpg)
Document Object Model (DOM): nounBlah blah blah long
definition that makes little sense….
What is the DOM?
24
![Page 25: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/25.jpg)
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
![Page 26: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/26.jpg)
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
![Page 27: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/27.jpg)
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
![Page 28: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/28.jpg)
jQuery Core Concepts
![Page 29: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/29.jpg)
Create HTML elements on the fly
var el = $(“<div/>”)
The Magic $() function
![Page 30: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/30.jpg)
Manipulate existing DOM elements
$(window).width()
The Magic $() function
![Page 31: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/31.jpg)
Selects document elements(more in a moment…)
$(“div”).hide();
$(“div”, $(“p”)).hide();
The Magic $() function
![Page 32: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/32.jpg)
$(document).ready(function(){…});
Fired when the document is ready for programming.
Better use the full syntax:
$(function(){…});
The Magic $() function
![Page 33: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/33.jpg)
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
![Page 34: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/34.jpg)
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
![Page 35: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/35.jpg)
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
![Page 36: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/36.jpg)
Get > Act
Chainability
The $() function
Three Major Concepts of jQuery
![Page 37: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/37.jpg)
jQuery Selectors
![Page 38: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/38.jpg)
$(“*”) // find everything
All Selector
Selectors return a pseudo-array of jQuery elements
![Page 39: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/39.jpg)
$(“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:
![Page 40: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/40.jpg)
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
![Page 41: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/41.jpg)
Break It Down Now!$(function(){// = $(document).ready(function(){
});
$ ("p") .addClass("isCool");
41
![Page 42: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/42.jpg)
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
![Page 43: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/43.jpg)
Get Classy <p>Get Classy <p>
jQuery:$("p").addClass("sophisticated");
Before:<p>
After:<p class="sophisticated">
jsbin.com/ecayo3/18#slide22
43
![Page 44: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/44.jpg)
This <p> Has No Class At All! jQuery:$("p").removeClass("sophisticated");
Before:<p class="sophisticated">
After:<p class="">
44
![Page 45: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/45.jpg)
<div> Hide and SeekjQuery:$("div").show();
Before:<div style="display:none;">
After:<div style="display:block;">
45
![Page 46: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/46.jpg)
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
![Page 47: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/47.jpg)
You Can Chain Most Methods Together
$("p")
.addClass("sophisticated") .text("Hello World!") .show();
47
![Page 48: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/48.jpg)
Some of Basic Methods
api.jquery.com/
48
![Page 49: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/49.jpg)
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
![Page 50: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/50.jpg)
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
![Page 51: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/51.jpg)
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
![Page 52: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/52.jpg)
Questions?
52
http://www.jquerymagic.com/
![Page 53: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/53.jpg)
PluginsPlugins
53
![Page 54: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/54.jpg)
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
![Page 55: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/55.jpg)
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
![Page 56: Jquery](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71d984a795932588b457f/html5/thumbnails/56.jpg)
I Like Plugins!Show Us More!
56