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
jQuery
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
nctunba
March 21, 2012
Programming
8
620
jQuery
nctunba
March 21, 2012
Tweet
Share
More Decks by nctunba
See All by nctunba
被 Qt 快樂的玩弄
nctunba
2
400
被 Qt 快樂的玩弄 part 1
nctunba
1
290
Node - Express - Socket.io
nctunba
1
420
Python
nctunba
3
530
node
nctunba
9
50k
JS
nctunba
11
650
Other Decks in Programming
See All in Programming
コントリビューターによるDenoのすゝめ / Deno Recommendations by a Contributor
petamoriken
0
200
SourceGeneratorのススメ
htkym
0
190
16年目のピクシブ百科事典を支える最新の技術基盤 / The Modern Tech Stack Powering Pixiv Encyclopedia in its 16th Year
ahuglajbclajep
5
1k
AWS re:Invent 2025参加 直前 Seattle-Tacoma Airport(SEA)におけるハードウェア紛失インシデントLT
tetutetu214
2
110
Lambda のコードストレージ容量に気をつけましょう
tattwan718
0
110
Basic Architectures
denyspoltorak
0
660
humanlayerのブログから学ぶ、良いCLAUDE.mdの書き方
tsukamoto1783
0
190
フロントエンド開発の勘所 -複数事業を経験して見えた判断軸の違い-
heimusu
7
2.8k
CSC307 Lecture 04
javiergs
PRO
0
660
Unicodeどうしてる? PHPから見たUnicode対応と他言語での対応についてのお伺い
youkidearitai
PRO
1
2.5k
Honoを使ったリモートMCPサーバでAIツールとの連携を加速させる!
tosuri13
1
170
0→1 フロントエンド開発 Tips🚀 #レバテックMeetup
bengo4com
0
560
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
254
22k
How to build a perfect <img>
jonoalderson
1
4.9k
My Coaching Mixtape
mlcsv
0
47
Tell your own story through comics
letsgokoyo
1
810
How STYLIGHT went responsive
nonsquared
100
6k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.8k
Chasing Engaging Ingredients in Design
codingconduct
0
110
First, design no harm
axbom
PRO
2
1.1k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
aleyda
1
1.9k
Statistics for Hackers
jakevdp
799
230k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
sarafernandez
1
1.3k
Art, The Web, and Tiny UX
lynnandtonic
304
21k
Transcript
jQuery
$
write less, do more
JavaScript Library
Client-side Scripting
Saves people's lifes since 2006
Does the dirty work for you
by “dirty work”, I mean W3C DOM
Document Object Model
Object Model for Documents
Object Model for HTML
HTML <=> DOM
HTML <=> DOM
HTML <=> DOM <=> JS
API between HTML & JS
W3C DOM
ugly & tedious
jQuery
jQuery Manipulation Attributes Effects Selectors Traversing Plugins Ajax Events
Install
None
<html> <head> <script src=”path/to/jquery”></script> </head> <body> </body> </html>
Hello World
DOM is a tree
|-> Document |-> <html> |-> <body> |-> <h1> |-> text
node |-> <p> |-> <a> |-> <br> |-> <a>
$('h1').text('hello world')
$('h1').text('hello world') Select and manipulate
$('h1').text('hello world') Select and manipulate
$ I am jQuery
$('h1') the Selector
.text('hello world') Set text
.text() Get text
var text = $('h1').text(); console.log(text);
$('h1') .text('hello') .fadeOut(); Chaining!
Selectors
Selects the nodes in the tree
Act just like CSS Selectors
$('h1') All h1 elements
$('p') All p elements
$('h1.banana') All h1 elements with class banana
$('h1#chuck') All h1 elements with id chuck
$('.banana') All elements with class banana
$('[type=”text”]') All elements with attribute type = text
Manipulations
Play with a node
CSS
How a node looks like
Traversing
Visit other nodes
Events
Nodes are responsive
$(...).someEvent(callback)
Ajax
Grabs you data