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
400
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
140
Pragmatic Approaches to the Mobile Web
matthewbuchanan
0
100
Map Local and other works of Staggering Genius
matthewbuchanan
1
130
The State of Web Type
matthewbuchanan
5
290
Web Bites
matthewbuchanan
2
130
Tumblr 20x20
matthewbuchanan
3
170
Web Typography
matthewbuchanan
5
340
Other Decks in Programming
See All in Programming
Introduction to Git & GitHub
latte72
0
120
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
170
パスタの技術
yusukebe
1
520
フロントエンドのmonorepo化と責務分離のリアーキテクト
kajitack
2
140
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
120
Ruby Parser progress report 2025
yui_knk
1
150
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
220
Scale out your Claude Code ~自社専用Agentで10xする開発プロセス~
yukukotani
9
2.6k
testingを眺める
matumoto
1
120
UbieのAIパートナーを支えるコンテキストエンジニアリング実践
syucream
2
750
マイコンでもRustのtestがしたい その2/KernelVM Tokyo 18
tnishinaga
2
2.3k
The state patternの実践 個人開発で培ったpractice集
miyanokomiya
0
150
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
140
7.1k
Producing Creativity
orderedlist
PRO
347
40k
Building Adaptive Systems
keathley
43
2.7k
It's Worth the Effort
3n
187
28k
Agile that works and the tools we love
rasmusluckow
329
21k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
480
Site-Speed That Sticks
csswizardry
10
790
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Become a Pro
speakerdeck
PRO
29
5.5k
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()