Upload
ralph-whitbeck
View
132
Download
2
Tags:
Embed Size (px)
DESCRIPTION
The first part of a three part beginner track, this talk is for the designer/developer that is just starting out with jQuery. Perhaps you’ve heard of jQuery or you’ve used it occasion- ally, this talk will help you understand the core jQuery library.We will:•Cover jQuery’s history •Introduce you to the core team •Explain how jQuery works •Demonstrate how to set-up jQuery •Explore core jQuery methods and structure • Look through a couple of real-world examples
Citation preview
Beginning
Introduction
Ralph Whitbeck
Senior Web Application Engineer BrandLogic Corporationhttp://brandlogic.com
Blog: http://ralphwhitbeck.com
Twitter: RedWolves
Introduction
Tip Jar is open Tips can be sent via paypal
*Speaker Note*
Pause so audience can write down address
Setting Expectations
• This begins the first part of a three part beginners track
Setting Expectations
• This begins the first part of a three part beginners track
o Beginning jQuery
Setting Expectations
• This begins the first part of a three part beginners track
o Beginning jQuery
o Extending jQuery - Understanding plugins
Setting Expectations
• This begins the first part of a three part beginners track
o Beginning jQuery
o Extending jQuery - Understanding plugins
o Beginning jQuery UI
Setting Expectations
Setting Expectations
• This talk is for those just starting out with jQuery
Setting Expectations
• This talk is for those just starting out with jQuery
• We'll explore jQuery's history
Setting Expectations
• This talk is for those just starting out with jQuery
• We'll explore jQuery's history
• Meet the core team
Setting Expectations
• This talk is for those just starting out with jQuery
• We'll explore jQuery's history
• Meet the core team
• How jQuery works
Setting Expectations
• This talk is for those just starting out with jQuery
• We'll explore jQuery's history
• Meet the core team
• How jQuery works
• Get jQuery on your page
Setting Expectations
• This talk is for those just starting out with jQuery
• We'll explore jQuery's history
• Meet the core team
• How jQuery works
• Get jQuery on your page
• Walk through a real-world examples
What is jQuery?
What is jQuery?
• jQuery is JavaScript
What is jQuery?
• With JavaScript show a hidden element
if (browserType == "gecko" ) document.poppedLayer =
eval('document.getElementById(”HiddenDIV")'); else if (browserType == "ie")
document.poppedLayer =
eval('document.getElementById(”HiddenDIV")'); else
document.poppedLayer = eval('document.layers[”HiddenDIV"]');
document.poppedLayer.style.visibility = "visible";
What is jQuery?
• Show a hidden div using jQuery
$(“#HiddenDIV”).show();
What is jQuery?
• jQuery is JavaScript
• It's a light-weight library (19kb minified and GZIPed)
What is jQuery?
• jQuery is JavaScript
• It's a light-weight library (19kb minified and GZIPed)
• Easy and fast HTML DOM Selection
What is jQuery?
• jQuery is JavaScript
• It's a light-weight library (19kb minified and GZIPed)
• Easy and fast HTML DOM Selection
• Built to work on all "modern" browsers (IE6+, FF 2.0+, Safari 3.0+, Opera 9+, Chrome 1.0+)
What is jQuery?
• jQuery is JavaScript
• It's a light-weight library (19kb minified and GZIPed)
• Easy and fast HTML DOM Selection
• Built to work on all modern browsers (IE6+, FF 2.0+, Safari 3.0+, Opera 9+, Chrome 1.0+)
• It's Open Source
What can jQuery Produce?
High school students from Spotswood High SchoolJamie GilarJohn Cicolella
Demo’d http://www.jamie.strunex.net/homework/channel/
Benefits to jQuery
Benefits to jQuery
• Well documented (http://docs.jquery.com)
Benefits to jQuery
• Well documented (http://docs.jquery.com)
• Thriving community of developerso Blogs o Twittero Online Tutorials o Bookso Conferenceso Classes
Benefits to jQuery
• jQuery is Extensibleo Create/release your own pluginso Thousands of plugins available
Benefits to jQuery
• jQuery is Extensibleo Create/release your own pluginso Thousands of plugins available
• jQuery works with other librarieso Prototypeo Mootools
Who is using jQuery?
• Amazon
• IBM
• Microsoft
• Netflix
• Dell, Inc.
• NBC
• EA
• Match
• MLB
• ESPN
• Best Buy
jQuery's History
jQuery was released: January 14, 2006 BarCampNYC
jQuery's History
Versions • 1.0 - August 26, 2006
jQuery's History
Versions • 1.0 - August 26, 2006
• 1.1 - January 14, 2007
jQuery's History
Versions • 1.0 - August 26, 2006
• 1.1 - January 14, 2007
• 1.1.3 - July 5, 2007
jQuery's History
Versions • 1.2 - September 10, 2007
jQuery's History
Versions • 1.2 - September 10, 2007
• jQuery UI released - September 16, 2007
jQuery's History
Versions • 1.2 - September 10, 2007
• jQuery UI released - September 16, 2007
• 1.2.6 - May 24, 2008
jQuery's History
Versions • Web site redesign - August 28, 2008
jQuery's History
jQuery's History
Versions • Web site redesign - August 28, 2008
• 1.3 - January 14, 2009
jQuery's History
Versions • Web site redesign - August 28, 2008
• 1.3 - January 14, 2009
• 1.3.2 - February 20, 2009
jQuery's Core Team
jQuery's Core Team
Development • John Resig
• Brandon Aaron
• Ariel Flesler
• Jörn Zaefferer
jQuery's Core Team
Evangelism • Rey Bango
• Karl Swedberg
• Cody Lindley
jQuery's Core Team
jQuery UI • Paul Bakaus
• Richard D. Worth
• Scott González
• Todd Parker
• Many others
jQuery's Core Team
Plugins • Yehuda Katz
• Klaus Hartl
• Mike Alsup
jQuery's Core Team
Web, Design and Infrastructure • Scott Jehl
• Mike Hostetler
• Jonathan Sharp
Setting up jQuery
Setting up jQuery
Include jQuery on the page
Setting up jQuery
Include jQuery on the page • Download latest from jQuery.com
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
Setting up jQuery
Include jQuery on the page • Download latest from jQuery.com
<script src="jquery-1.3.2.min.js" type="text/javascript></script>
• Include the latest from Google AJAX Libraries API
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
Setting up jQuery
Set jQuery to run when the DOM is loaded. $(document).ready(function(){ //put your jQuery code here. });
How jQuery Works
$("div").show();
How jQuery Works
$
Initiate the jQuery Object
How jQuery Works
jQuery("div").show();
How jQuery Works
("div")
Select Elements
How jQuery Works
$("div")$("div#intro h2")
$("div.section > p")$("a[href='http://www.jquery.com']")
$("ul#nav li:first")
How jQuery Works
.show()Do Something
How jQuery Works
Demo(Demo based on: http://ejohn.org/apps/learn-jquery/)
How jQuery is Structured
• Core
• Selectors
• Attributes
• Traversing
• Manipulation
• CSS
• Events
• AJAX
• Effects
jQuery Core
.each()
.length()
.eq()
.get()
.index()
.data()
.removeData()
...and many more!
Selectors
#id
element
.class
:first
:last
:not(selector)
[attribute=value]
...and many more!
Attributes
.removeAttr() .addClass()
.hasClass() .removeClass() .toggleClass() .html() .val()
...and many more!
Traversing
.not() .add() .children()
.context()
.next()
.prevAll()
.siblings()
...and many more!
Manipulation
.append() .after()
.insertAfter()
.wrap()
.replaceWith()
.empty()
...and many more!
CSS
.width() .innerHeight()
.height()
.outerHeight()
.offset()
.position()
.css()
...and many more!
Events
.ready() .mouseout()
.trigger()
.hover()
.toggle()
.blur()
.live()
...and many more!
AJAX
.ajax() .load()
.getJSON()
.getScript()
.serialize
.get()
.post()
...and many more!
Effects
.hide() .show()
.fadeTo()
.slideToggle()
.toggle()
.slideUp()
.slideDown()
...and many more!
Putting it all together
Real-World Demo (Demo based on:
http://ralphwhitbeck.com/2007/11/20/PullingTwitterUpdatesWithJSONAndJQuery.aspx)
Thank You
Speaker rate
http://speakerrate.com/talks/1400-beginning-jquery
Thank You
Speaker rate
http://speakerrate.com/talks/1400-beginning-jquery