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
nctunba
March 21, 2012
Programming
9
610
jQuery
nctunba
March 21, 2012
Tweet
Share
More Decks by nctunba
See All by nctunba
被 Qt 快樂的玩弄
nctunba
2
390
被 Qt 快樂的玩弄 part 1
nctunba
1
280
Node - Express - Socket.io
nctunba
1
420
Python
nctunba
3
520
node
nctunba
9
50k
JS
nctunba
11
640
Other Decks in Programming
See All in Programming
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
110
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
570
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
47
31k
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
200
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
870
エンジニア向け採用ピッチ資料
inusan
0
170
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
980
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
140
WindowInsetsだってテストしたい
ryunen344
1
200
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
knakagawa
1
120
5つのアンチパターンから学ぶLT設計
narihara
1
120
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
930
The Language of Interfaces
destraynor
158
25k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Practical Orchestrator
shlominoach
188
11k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
KATA
mclloyd
30
14k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
For a Future-Friendly Web
brad_frost
179
9.8k
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