Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
jQuery
Search
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
640
Other Decks in Programming
See All in Programming
非同期処理の迷宮を抜ける: 初学者がつまづく構造的な原因
pd1xx
1
690
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
manfredsteyer
PRO
0
200
AIコーディングエージェント(skywork)
kondai24
0
150
LLMで複雑な検索条件アセットから脱却する!! 生成的検索インタフェースの設計論
po3rin
2
630
CSC305 Lecture 17
javiergs
PRO
0
340
Navigation 3: 적응형 UI를 위한 앱 탐색
fornewid
1
210
【CA.ai #3】ワークフローから見直すAIエージェント — 必要な場面と“選ばない”判断
satoaoaka
0
230
AI時代もSEOを頑張っている話
shirahama_x
0
270
TUIライブラリつくってみた / i-just-make-TUI-library
kazto
1
340
リリース時」テストから「デイリー実行」へ!開発マネージャが取り組んだ、レガシー自動テストのモダン化戦略
goataka
0
120
connect-python: convenient protobuf RPC for Python
anuraaga
0
370
dotfiles 式年遷宮 令和最新版
masawada
1
710
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
12
970
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
128
54k
KATA
mclloyd
PRO
32
15k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
Building a Scalable Design System with Sketch
lauravandoore
463
34k
YesSQL, Process and Tooling at Scale
rocio
174
15k
Producing Creativity
orderedlist
PRO
348
40k
jQuery: Nuts, Bolts and Bling
dougneiner
65
8.2k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Context Engineering - Making Every Token Count
addyosmani
9
490
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3.1k
Unsuck your backbone
ammeep
671
58k
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