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
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
nctunba
March 21, 2012
Programming
630
8
Share
jQuery
nctunba
March 21, 2012
More Decks by nctunba
See All by nctunba
被 Qt 快樂的玩弄
nctunba
2
410
被 Qt 快樂的玩弄 part 1
nctunba
1
300
Node - Express - Socket.io
nctunba
1
430
Python
nctunba
3
530
node
nctunba
9
50k
JS
nctunba
11
650
Other Decks in Programming
See All in Programming
「接続」—パフォーマンスチューニングの最後の一手 〜点と点を結ぶ、その一瞬のために〜
kentaroutakeda
4
2.2k
へんな働き方
yusukebe
6
2.9k
今からFlash開発できるわけないじゃん、ムリムリ! (※ムリじゃなかった!?)
arkw
0
170
RailsのValidatesをSwift Macrosで再現してみた
hokuron
0
140
Geminiをパートナーに神社DXシステムを個人開発した話(いなめぐDX 開発振り返り)
fujiba
0
130
Laravel Nightwatchの裏側 - Laravel公式Observabilityツールを支える設計と実装
avosalmon
1
270
Tamach-sre-3_ANDPAD-shimaison93
mane12yurks38
0
220
ロボットのための工場に灯りは要らない
watany
12
3.3k
AIと共にエンジニアとPMの “二刀流”を実現する
naruogram
0
110
Ruby and LLM Ecosystem 2nd
koic
1
1.4k
飯MCP
yusukebe
0
440
Java 21/25 Virtual Threads 소개
debop
0
310
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
408
66k
Code Review Best Practice
trishagee
74
20k
Leadership Guide Workshop - DevTernity 2021
reverentgeek
1
260
Being A Developer After 40
akosma
91
590k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
madoxten
62
53k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
kimpetersen
PRO
0
280
Java REST API Framework Comparison - PWX 2021
mraible
34
9.2k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
Mobile First: as difficult as doing things right
swwweet
225
10k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.7k
More Than Pixels: Becoming A User Experience Designer
marktimemedia
3
370
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
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