jQuery For Developers Stack Overflow Dev Days Toronto

for Developers

Introduction
Ralph Whitbeck
jQuery Team Member, on the Evangelism team
Co-authored O’Rielly’s “jQuery Cookbook” due out end of year
Senior Web Application Engineer
BrandLogic Corporation ( http://brandlogic.com)
Blog: http://ralphwhitbeck.com
Twitter: @RedWolves

We’re not in Kansas anymore!

Overview
Who, what, where and why of jQuery
Review Core jQuery Concepts
jQuery API Overview
jQuery plugins
jQuery UI
jQuery News
Announcement

Who uses jQuery
35.36% of all sites that use JavaScript, use jQuery
A little more then 1 out 5 sites (23.07%), use jQuery
http://trends.builtwith.com/javascript/JQuery

Who uses jQuery
35% of all site that use JavaScript, use jQuery
1 out 5 sites, use jQuery
http://trends.builtwith.com/javascript/JQuery

What is jQuery?
jQuery is a JavaScript Library!
Dealing with the DOM
(e.g. selecting, creating, traversing, changing, etc.)
JavaScript Events
Animations
Ajax interactions

What does that mean?

if (browserType == "ie") document.poppedLayer =
eval('document.getElementById("HiddenDIV")');
else
document.poppedLayer =
eval('document.layers["HiddenDIV"]');
document.poppedLayer.style.visibility = "visible";
It means no more of this…

Using jQuery we can do this

jQuery(“#HiddenDiv”).show();


jQuery (“#HiddenDIV”).show();
var $ = jQuery; $(“#HiddenDiv”).show(); jQuery function


jQuery(“ #HiddenDIV ”).show();
jQuery Function jQuery Selector (CSS expression)


jQuery(“#HiddenDIV”) .show();
jQuery Wrapped Set jQuery Function jQuery Selector (CSS expression)


jQuery(“#HiddenDIV”). show() ;
jQuery Wrapped Set jQuery Function jQuery Selector (CSS expression) jQuery Method

jQuery really is the “write less, do more” JavaScript Library!

Why use jQuery?
Helps us to simplify and speed up web development
Allows us to avoid common headaches associated with cross-browser development
Provides a large pool of plugins
Large and active community
Tested on 50 browsers, 11 platforms
It’s for both developers and designers

Where to get jQuery
Download the source from Github (moved last night)
Or use a CDN
Google
Microsoft

Core jQuery Concepts
Select Something, do something
Create something, do something
Chaining and Operating
Demo’d
http://ejohn.org/apps/learn-jquery/
and
http://ralphwhitbeck.com/talks/stackoverflowdevdays/createdosomething.html

jQuery API Overview
Core
Selectors
Attributes
Traversing
Manipulation
CSS
Events
Effects
Ajax
Utilities
You can review Core Methods at: http://docs.jquery.com or http://api.jquery.com

jQuery Plugins
There are over 2200 plugins
Plugins extend jQuery’s functionality
If you can’t find the functionality in a plugin, make your own!
You can make a jQuery Plugin in six steps

Step 1. create a private scope for $ alias
<!DOCTYPE html><html><body> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script> (function($){ })(jQuery); </script></body></html> A jQuery plugin in 6 steps

Step 2. attach plugin to fn alias
<!DOCTYPE html><html><body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
(function($){
$.fn.loveNotHate = function(){
$(this).text($(this).text().replace(/hate/g,'love'));
};
})(jQuery);
</script></body></html>
A jQuery plugin in 6 steps

Step 2. attach plugin to fn alias
<p>I hate jQuery!</p>
<script>
(function($){
};
})(jQuery);
jQuery('p').loveNotHate();

Step 3. add implicit iteration
<script>
(function($){
this.each(function(){
});
};
})(jQuery);

Step 3. add implicit iteration
<p>I mean really hate jQuery!</p>
<script>
(function($){
this.each(function(){
});
};
})(jQuery);

Step 4. enable chaining
<script>
(function($){
return this.each(function(){
});
};
})(jQuery);

Step 4. enable chaining
<script>
(function($){
});
};
})(jQuery);
jQuery('p').loveNotHate() .hide() ;

Step 5. add default options
<script>
(function($){
$(this).text($(this).text().replace(/hate/g, $.fn.loveNotHate.defaultOptions.text ));
});
};
$.fn.loveNotHate.defaultOptions = {text:'love'};
})(jQuery);

Step 6. add custom options
<script>
(function($){
$(this).text($(this).text().replace(/hate/g, $.fn.loveNotHate.defaultOptions.text));
});
};
})(jQuery);
jQuery('p').loveNotHate( {text:'love-love-love'} );

Plugins are simple, just follow the steps!

jQuery UI
Official jQuery Project
Provides plugins that make user interface elements easy
Contains:
Interactions (Draggable, Droppable, Resizable, Selectable & Sortable)
Widgets (Accordian, Datepicker, Dialog, Progressbar, Slider, Tabs)
Effects (AddClass, RemoveClass, Animate, Effects, etc.)
Theming

What can jQuery & jQuery UI Produce?
High school students from Spotswood High School
Jamie Gilar
John Cicolella
Demo’d http://www.jamie.strunex.net/homework/channel/ Also Demo’d http://ralphwhitbeck.com/talks/stackoverflowdevdays/ui-createdosomething.html

jQuery News
Four Conferences next year (online, San Francisco, London, and Boston)
Revamped Plugin site (by EOY)
jQuery Ownership transferred from John Resig to the Software Freedom Conservancy.
jQuery 1.4 coming soon
Much More, including…

Announcement

The Official jQuery Podcast
jQuery Podcast
Co-hosting with Elijah Manor
Scheduled to release 1 st Episode mid-November
Similar in format to This Week in Tech
Live streaming via http://tinychat.com/jquerypodcast
Twitter Account: @jQueryPodcast

The Official jQuery Podcast
Interview key people in the jQuery Community
First scheduled guest is John Resig
Second scheduled guest is Richard D. Worth
Hopefully Jeff and Joel in the future

Thank You
Questions?

http://ralphwhitbeck.com	164
http://www.globalnerdy.com	80
http://blogs.msdn.com	31
http://www.onhuge.com	28
http://coderwall.com	9
http://www.slideshare.net	5

jQuery For Developers Stack Overflow Dev Days Toronto

by Ralph Whitbeck on Oct 24, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

6 Embeds 317

Statistics

jQuery For Developers Stack Overflow Dev Days Toronto — Presentation Transcript