Scribd
Upload
15 views

CoursJQuery 4

The document discusses the jQuery JavaScript library, including its history, features, and uses. jQuery simplifies HTML and JavaScript interaction and DOM manipulation. It has a large community and ecosystem of plugins.

Uploaded by

hichamoumzil0
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
15 views

CoursJQuery 4

The document discusses the jQuery JavaScript library, including its history, features, and uses. jQuery simplifies HTML and JavaScript interaction and DOM manipulation. It has a large community and ecosystem of plugins.

Uploaded by

hichamoumzil0
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 35

jQuery

DrupalCamp Toronto - May 2008


John Resig (ejohn.org)
Why Libraries?
• Makes JavaScript bearable
• Gets the job done fast
• Simplifies cross-browser support
What is jQuery?
✦ An open source JavaScript library that
simplifies the interaction between HTML
and JavaScript.
We missed you!
✦ We’ve been busy:
✦ jQuery 1.1
✦ jQuery 1.1.1
✦ jQuery 1.1.2
✦ jQuery 1.1.3
✦ jQuery 1.1.4
✦ jQuery 1.2
✦ jQuery 1.2.1
✦ jQuery 1.2.2
✦ jQuery 1.2.3

✦ ... since the last Drupal release


Major Releases
✦ More info:
✦ jQuery 1.1:
http://jquery.com/blog/2007/01/14/jquery-birthday-11-new-site-new-docs/
✦ jQuery 1.1.3:
http://jquery.com/blog/2007/07/01/jquery-113-800-faster-still-20kb/
✦ jQuery 1.1.4:
http://jquery.com/blog/2007/08/24/jquery-114-faster-more-tests-ready-
for-12/
✦ jQuery 1.2:
http://docs.jquery.com/Release:jQuery_1.2
✦ jQuery 1.2.2:
http://docs.jquery.com/Release:jQuery_1.2.2
✦ jQuery 1.2.3:
http://docs.jquery.com/Release:jQuery_1.2.3
✦ All: http://docs.jquery.com/Downloading_jQuery
The Focus of jQuery

Find Some Elements Do something with them


{

{
$(“div”).addClass(“special”);
jQuery Object
Keep Clean
✦ jQuery can be rename ‘$’:
var $jq = jQuery.noConflict();
$jq(“div”).hide();
✦ jQuery can even rename ‘jQuery’ allowing
multiple copies of jQuery to work side-by-
side.
✦ var $a = jQuery.noConflict(true);
// load other version of jQuery
$a(“div”).hide(); // still works!
Find Some Elements...
✦ Full CSS Selector 1-3 Support
✦ Better CSS Selector support than most
browsers
$(“div”)
<div id=”body”>
<h2>Some Header</h2>
<div class=”contents”>
<p>...</p>
<p>...</p>
</div>
</div>
$(“#body”)
<div id=”body”>
<h2>Some Header</h2>
<div class=”contents”>
<p>...</p>
<p>...</p>
</div>
</div>
$(“div#body”)
<div id=”body”>
<h2>Some Header</h2>
<div class=”contents”>
<p>...</p>
<p>...</p>
</div>
</div>
$(“div.contents p”)
<div id=”body”>
<h2>Some Header</h2>
<div class=”contents”>
<p>...</p>
<p>...</p>
</div>
</div>
$(“.foo > div”)
<div id=”body”>
<h2>Some Header</h2>
<div class=”contents”>
<p>...</p>
<p>...</p>
</div>
</div>
$(“div:has(div)”)
<div id=”body”>
<h2>Some Header</h2>
<div class=”contents”>
<p>...</p>
<p>...</p>
</div>
</div>
Do something with them
✦ DOM Manipulation (append, prepend, remove)
✦ Events (click, hover, toggle)
✦ Effects (hide, show, slideDown, fadeOut)
✦ AJAX (load, get, post)
DOM Manipulation
✦ $(“a[target=_blank]”)
.append(“ (Opens in New Window)”);
✦ $(“#body”).css({
border: “1px solid green”,
height: “40px”
});
Events
✦ $(“form”).submit(function(){
if ( $(“input#name”).val() == “” ) {
$(“span.help”).show();
return false;
}
});
✦ $(“a#open”).click(function(){
$(“#menu”).show();
return false;
});
Animations
✦ $(“#menu”).slideDown(“slow”);
✦ Individual properties:
$(“div”).animate({
fontSize: “2em”,
width: “+=20%”,
color: “green” // via plugin
});

✦ Callbacks:
$(“div”).hide(500, function(){
// $(this) is an individual <div> element
$(this).show(500);
});
Ajax
✦ $(“#body”).load(“sample.html”);
✦ Before:
<div id=”body”></div>
✦ After:
<div id=”body”>
<h1>Hello, world!</h1>
</div>
✦ $.getJSON(“test.json”, function(js){
for ( var name in js )
$(“ul”).append(“<li>” + name + “</li>”);
});
Ajax (cont.)
✦ $(“#body”).load(“sample.html h1:first”);
✦ Before:
<div id=”body”></div>
✦ After:
<div id=”body”>
<h1>Hello, world!</h1>
</div>
Chaining
✦ You can have multiple actions against a single set
of elements
✦ $(“div”).hide();
✦ $(“div”).hide().css(“color”,”blue”);
✦ $(“div”).hide().css(“color”,”blue”).slideDown();
Chaining (cont.)
✦ $(“ul.open”)
.children(“li”)
.addClass(“open”)
.end()
.find(“a”)
.click(function(){
$(this).next().toggle();
return false;
})
.end();
Why jQuery?
✦ Fully documented
✦ Great community
✦ Tons of plugins
✦ Small size (15kb)
✦ Everything works in IE 6+, Firefox,
Safari 2+, and Opera 9+
Accordion Menu
http://jquery.com/files/apple/
http://jquery.com/files/apple/done.html
Plugins
✦ Huge plugin ecosystem
✦ Managed by Plugin tracker - built with
Drupal!
http://plugins.jquery.com/
✦ Hundreds in the tracker - even more on
the web
jQuery Plugins
✦ Extend the jQuery system
✦ Add on extra methods:
$(“div”).hideRemove();
✦ Trivial to implement:
jQuery.fn.hideRemove = function(speed){
return this.hide(speed, function(){
jQuery(this).remove();
});
};
Todo List
http://jquery.com/files/todo/
http://jquery.com/files/todo/done.php
jQuery UI
✦ A complete set of themed, cross-browser,
user interface components.
✦ Drag, Drop, Sort, Select, Resize
✦ Accordion, Datepicker, Dialog, Slider, Tabs
✦ More info:
http://docs.jquery.com/UI
✦ 1.5 is in beta right now:
http://jquery.com/blog/2008/02/12/jquery-ui-15b-new-api-more-features-huge-performance-boost/
Accessibility
✦ Keyboard Accessible
✦ Screenreader Accessible
✦ Grant from Mozilla Foundation to
implement ARIA
Support
✦ Liferay (Java CMS) hired Paul Bakaus,
jQuery UI lead to work on it full time.
✦ More support on the way!
Who uses jQuery?
✦ Google
✦ IBM
✦ NBC
✦ Amazon
✦ Wordpress
✦ Digg
✦ many others...
Community
✦ Very active mailing list
✦ 100+ Posts/Day
✦ 6000+ Members

✦ Technorati: Dozens of blog posts per day


Books
✦ 3 Books Released:
✦ Learning jQuery (Packt)
✦ jQuery Reference (Packt)
✦ jQuery in Action (Manning)
Random
✦ New Logo
✦ and New Web Site
✦ Coming Soon!
jquery.com
docs.jquery.com - jquery.com/plugins
More:
ui.jquery.com
visualjquery.com
learningjquery.com

You might also like