Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Zero to Hero, a jQuery Primer
Search
Matthew Buchanan
September 15, 2011
Programming
8
390
Zero to Hero, a jQuery Primer
Presented to Auckland Web Meetup, 15 September 2011.
Matthew Buchanan
September 15, 2011
Tweet
Share
More Decks by Matthew Buchanan
See All by Matthew Buchanan
Better Letters
matthewbuchanan
2
130
Pragmatic Approaches to the Mobile Web
matthewbuchanan
0
96
Map Local and other works of Staggering Genius
matthewbuchanan
1
120
The State of Web Type
matthewbuchanan
5
290
Web Bites
matthewbuchanan
2
120
Tumblr 20x20
matthewbuchanan
3
160
Web Typography
matthewbuchanan
5
330
Other Decks in Programming
See All in Programming
イベント駆動で成長して委員会
happymana
1
260
Macとオーディオ再生 2024/11/02
yusukeito
0
320
Kaigi on Rails 2024 - Rails APIモードのためのシンプルで効果的なCSRF対策 / kaigionrails-2024-csrf
corocn
5
3.7k
Tauriでネイティブアプリを作りたい
tsucchinoko
0
350
AWS Lambdaから始まった Serverlessの「熱」とキャリアパス / It started with AWS Lambda Serverless “fever” and career path
seike460
PRO
0
110
C#/.NETのこれまでのふりかえり
tomokusaba
1
180
Tuning GraphQL on Rails
pyama86
2
1.2k
Kubernetes for Data Engineers: Building Scalable, Reliable Data Pipelines
sucitw
1
220
Jakarta EE meets AI
ivargrimstad
0
120
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
1.5k
みんなでプロポーザルを書いてみた
yuriko1211
0
170
From Subtype Polymorphism To Typeclass-based Ad hoc Polymorphism- An Example
philipschwarz
PRO
0
190
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
427
64k
Keith and Marios Guide to Fast Websites
keithpitt
409
22k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.8k
YesSQL, Process and Tooling at Scale
rocio
168
14k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
Typedesign – Prime Four
hannesfritz
40
2.4k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
A designer walks into a library…
pauljervisheath
202
24k
Thoughts on Productivity
jonyablonski
67
4.3k
Writing Fast Ruby
sferik
627
61k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Transcript
0 TO HERO SEPTEMBER 2011 A jQuery Primer
WHAT JavaScript framework Cross-browser compatible Lightweight (31KB) APIs for DOM,
events, animation, Ajax
WHY Most popular Concise Well documented and maintained Extensible via
plugins Easy for designers
HOW Either self-host or include from CDN <head> <script src="http://code.jquery.com/
jquery-‐1.6.3.min.js"></script> </head>
CORE The core is the jQuery() function, a standard JavaScript
function To save space, it’s aliased to $() Revert with jQuery.noConflict()
SELECTION Given this HTML element <div id="menu"></div> Select it with
jQuery("#menu") or simply $("#menu")
SELECTION <h1>jQuery Notes</h1> <ul class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul>
SELECTION <h1>jQuery Notes</h1> <ul class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul> $("h1")
SELECTION <h1>jQuery Notes</h1> <ul class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul> $(":header")
SELECTION <h1>jQuery Notes</h1> <ul class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul> $("ul")
SELECTION <h1>jQuery Notes</h1> <ul class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul> $(".benefits")
SELECTION <h1>jQuery Notes</h1> <ul class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul> $("ul
li")
SELECTION <h1>jQuery Notes</h1> <ul class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul> $("ul
li:eq(1)")
SELECTION <h1>jQuery Notes</h1> <ul class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul> $("ul
li:not(:first)")
Accepts CSS 2 & 3 selectors, such as $("article >
section") $(".menu li:last-‐child") $("a[href^='http://']") $("table tr:nth-‐child(2n+1) td") Uses cross-browser Sizzle engine SELECTION
And custom extensions, such as :visible, :hidden, :focus, :disabled :eq(),
:lt(), :gt(), :even, :odd :empty, :not(), :has(), :contains() :input, :checkbox, :radio, :file :header, :text, :image CUSTOM
DIY Or make your own selectors $.expr[":"].parked = function(obj){…}; and
apply them $(".blues:parked").each(…);
OBJECTS Using jQuery with objects $(document) $(window) Define the current
context $(this)
OBJECTS For example $("div").hover(function() { $(this).addClass("on"); }, function() {…});
CORE Code is generally run when DOM is ready window.onload
= function(){…} $(document).ready(function(){…}); Can be called repeatedly, and shortened to $(function(){…});
CORE jQuery deals in ‘collections’ of one or more objects,
so $("ul li") returns a collection of all matching elements
CORE Some JavaScript properties work with collections $("ul li").length As
well as array indices to isolate individual DOM nodes $("ul li")[0]
TIP When assigning jQuery collections to variables, prefix with $
var $myList = $("#mylist"); Useful reminder as to a variable’s type.
CORE jQuery uses JavaScript syntax for conditional statements, loops, etc.
if (this > that) { $("nav").hide(); } else {…}
METHODS Now for the cool stuff. Call jQuery methods to
manipulate objects, data and collections $("ul li").slideDown() $("ul li").addClass()
METHODS Attribute Methods .val(), .attr(), .prop() .addClass(), .removeClass() .hasClass(), .toggleClass()
and more…
METHODS <h1>jQuery Notes</h1> <ul class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul>
METHODS <h1>jQuery Notes</h1> <ul class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul> $("ul").addClass("big")
METHODS <h1>jQuery Notes</h1> <ul class="benefits big"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul>
$("ul").addClass("big")
METHODS CSS / Dimension Methods .css(), .height(), .width() .innerHeight(), outerHeight()
.innerWidth(), .outerWidth() .offset(), .position() and more…
METHODS <h1>jQuery Notes</h1> <ul class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul>
METHODS <h1>jQuery Notes</h1> <ul class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul> $("h1").css("color",
"lime")
METHODS <h1 style="color:lime"> jQuery Notes</h1> <ul class="benefits"> <li>Popular</li> <li>Concise</li> …
$("h1").css("color", "lime")
METHODS Traversal Methods .each(), .find(), .filter() .children(), .siblings(), .end() .first(),
.last(), .next(), .prev() .parent(), .andSelf(), .closest() and more…
METHODS <h1>jQuery Notes</h1> <ul class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul>
METHODS <h1>jQuery Notes</h1> <ul class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul> $(".benefits").prev()
METHODS <h1>jQuery Notes</h1> <ul class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul> $(".benefits").prev()
METHODS <h1>jQuery Notes</h1> <ul class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul> $("*").filter(":last-‐child")
METHODS <h1>jQuery Notes</h1> <ul class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul> $("*").filter(":last-‐child")
METHODS Manipulation Methods .after(), .before() .clone(), .detach(), .remove() .append(), .prepend(),
.text() .html(), .wrap(), .unwrap() and more…
METHODS <h1>jQuery Notes</h1> <ul class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul>
METHODS <h1>jQuery Notes</h1> <ul class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul> $("ul").prepend("<li>First!</li>")
METHODS <h1>jQuery Notes</h1> <ul class="benefits"> <li>First!</li> <li>Popular</li> <li>Concise</li> … $("ul").prepend("<li>First!</li>")
METHODS <h1>jQuery Notes</h1> <ul class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul> $("ul").insertBefore("h1")
METHODS <ul class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul> <h1>jQuery Notes</h1> $("ul").insertBefore("h1")
METHODS <h1>jQuery Notes</h1> <ul class="benefits"> <li>Popular</li> <li>Concise</li> <li>Extensible</li> </ul> $("li").unwrap()
METHODS <h1>jQuery Notes</h1> <li>Popular</li> <li>Concise</li> <li>Extensible</li> $("li").unwrap()
METHODS Effects Methods .hide(), .show() .animate(), .delay(), .stop() .fadeIn(), .fadeOut(),
.fadeToggle() .slideUp(), .slideDown() and more…
METHODS Events Methods .click(), .bind(), .live() .focus(), .blur(), .hover() .mouseenter(),
.mouseleave() .load(), .resize(), .scroll() and more…
METHODS Ajax Methods .load(), .ajax() .get(), .post(), .param() .getJSON(), .getScript()
.serialize(), .serializeArray() and more…
METHODS if (!document.ELEMENT_NODE) { document.ELEMENT_NODE = 1; document.ATTRIBUTE_NODE =
2; document.TEXT_NODE = 3; document.CDATA_SECTION_NODE = 4; document.ENTITY_REFERENCE_NODE = 5; document.ENTITY_NODE = 6; document.PROCESSING_INSTRUCTION_NODE = 7; document.COMMENT_NODE = 8; document.DOCUMENT_NODE = 9; document.DOCUMENT_TYPE_NODE = 10; document.DOCUMENT_FRAGMENT_NODE = 11; document.NOTATION_NODE = 12; } document._importNode = function(node, allChildren) { switch (node.nodeType) { case document.ELEMENT_NODE: var newNode = document.createElement(node.nodeName); if (node.attributes && node.attributes.length > 0) for (var i = 0; il = node.attributes.length; i < il) newNode.setAttribute(node.attributes[i].nodeName, node.getAttribute(node.attributes[i++].nodeName)); if (allChildren && node.childNodes && node.childNodes.length > 0) for (var i = 0; il = node.childNodes.length; i < il) newNode.appendChild(document._importNode(node.childNodes[i++], allChildren)); return newNode; break; case document.TEXT_NODE: case document.CDATA_SECTION_NODE: case document.COMMENT_NODE: return document.createTextNode(node.nodeValue); break; } }; www.alistapart.com/articles/crossbrowserscripting
METHODS $("div").load("index.html");
METHODS $("div").load("index.html #main");
METHODS As well as methods for… Array handling Forms manipulation
File parsing Feature detection and more…
CHAINING Most methods return the same jQuery collection, and can
be chained in sequence $("div:hidden") .text("Error") .css("color","red") .fadeIn();
CHAINING If a method returns a new collection, return to
the previous collection using end() $("div").find("a") .addClass("mute") .end() .find("b").hide();
CALLBACKS Some methods allow more code to be executed once
they complete (a ‘callback’) $("div").animate( {top: 50}, function() {…} );
DEMO Given the following markup <p>…</p> how might we show
the user a success message above the text?
DEMO One solution var message = "Page saved";
$("<div>", {class: "msg"}) .text(message) .insertBefore("p") .hide().fadeIn();
DEMO Page saved Single-origin coffee viral aesthetic, jean shorts master
cleanse tofu yr lo-fi chambray sartorial beard +1 retro photo booth. Pitchfork williamsburg beard vinyl wes anderson. Mlkshk brooklyn portland 3 wolf moon readymade iphone food truck. Austin lomo messenger bag, mcsweeney’s gentrify tattooed vegan fixie.
$("<div>", {class: "msg"}) .text(message) .insertBefore("p").hide() .css("opacity", 0) .slideDown(function() { $(this).css("opacity",
1) .hide().fadeIn(); }); BETTER?
DEMO Page saved Single-origin coffee viral aesthetic, jean shorts master
cleanse tofu yr lo-fi chambray sartorial beard +1 retro photo booth. Pitchfork williamsburg beard vinyl wes anderson. Mlkshk brooklyn portland 3 wolf moon readymade iphone food truck. Austin lomo messenger bag, mcsweeney’s gentrify tattooed vegan fixie.
PLUGINS Plugins allow you to extend the jQuery model to
include new methods. Galleries, lightboxes Form validation, input masks Layout control Drag & drop, sliders, calendars, etc.
PLUGINS Creating your own plugin is easy $.fn.addIcon = function()
{ return this.prepend( $("<span>", {class: "icon"}) ); }
PLUGINS Creating your own plugin is easy $(":header").addIcon();
PLUGINS Last week from Paravel and Chris Coyier, a plugin
for fluid-width video embeds…
WHERE jquery.com plugins.jquery.com jqapi.com code.google.com/apis/libraries/ fitvidsjs.com hipsteripsum.me
Matthew Buchanan / @mrb matthewbuchanan.name www.cactuslab.com .end()