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
8
610
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
520
node
nctunba
9
50k
JS
nctunba
11
640
Other Decks in Programming
See All in Programming
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
220
Advance Your Career with Open Source
ivargrimstad
0
440
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
250
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
390
CSC305 Lecture 04
javiergs
PRO
0
260
Cloudflare AgentsとAI SDKでAIエージェントを作ってみた
briete
0
130
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
180
あなたの知らない「動画広告」の世界 - iOSDC Japan 2025
ukitaka
0
460
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
190
どの様にAIエージェントと 協業すべきだったのか?
takefumiyoshii
2
630
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
2
780
Signals & Resource API in Angular: 3 Effective Rules for Your Architecture @BASTA 2025 in Mainz
manfredsteyer
PRO
0
110
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
40
2.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
A better future with KSS
kneath
239
18k
Why Our Code Smells
bkeepers
PRO
339
57k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Speed Design
sergeychernyshev
32
1.1k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
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