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
380
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
95
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
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
0
120
RAGの回答精度評価用のQAデータセットを生成AIに作らせた話
kurahara
0
250
Modular Monolith Go Server with GraphQL Federation + gRPC
110y
1
580
令和トラベルにおけるLLM活用事例:社内ツール開発から得た学びと実践
ippo012
0
210
私のEbitengineの第一歩
qt_luigi
0
450
長期運用プロダクトの開発速度を維持し続けるためのリファクタリング実践例
wataruss
8
2.7k
『ドメイン駆動設計をはじめよう』中核の業務領域
masuda220
PRO
5
1k
Our Websites Need a Lifestyle Change, Not a Diet
ryantownsend
0
150
Why Prism?
kddnewton
4
1.7k
From Idea to IDE: Developing Plugins for Android Studio
thisaay
1
220
状態管理ライブラリZustandの導入から運用まで
k1tikurisu
3
470
The Shape of a Service Object
inem
0
520
Featured
See All Featured
Thoughts on Productivity
jonyablonski
66
4.2k
Gamification - CAS2011
davidbonilla
79
5k
Making the Leap to Tech Lead
cromwellryan
128
8.8k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
278
13k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
41
6.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
38
9.2k
Statistics for Hackers
jakevdp
794
220k
Documentation Writing (for coders)
carmenintech
65
4.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
359
19k
Visualization
eitanlees
142
15k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
25
3.9k
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
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()