Upgrade to Pro — share decks privately, control downloads, hide ads and more …

jQuery

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for nctunba nctunba
March 21, 2012
Programming
630
8

 jQuery

Avatar for nctunba

nctunba

March 21, 2012

More Decks by nctunba

See All by nctunba
被 Qt 快樂的玩弄
Avatar for nctunba nctunba
2
410
被 Qt 快樂的玩弄 part 1
Avatar for nctunba nctunba
1
310
Node - Express - Socket.io
Avatar for nctunba nctunba
1
440
Python
Avatar for nctunba nctunba
3
550
node
Avatar for nctunba nctunba
9
50k
JS
Avatar for nctunba nctunba
11
650

Other Decks in Programming

See All in Programming
仕様書を書く前にハーネスを作る - Agent Native開発は「探索を速く、判定を固く」
Avatar for Gota gotalab555
4
1.7k
人間の目はかわらない、だからJPEGは30年もつ
Avatar for yuzneri yuzneri
12
19k
AI時代のPHPer生存戦略 ～「言語、もうなんでもよくない？」に本気で向き合う～
Avatar for viviON vivion
0
820
Go 1.27 における memory allocation の高速化
Avatar for ANDPAD inc andpad
0
260
使いながら育てる Claude Code — 開発フローの1コマンド化 × 繰り返し指摘の自動仕組み化
Avatar for endo shiki shiki_kakaku
0
1.9k
Go言語とトイモデルで学ぶTransformerの気持ち / fukuokago23-transformer
Avatar for monochromegane monochromegane
0
190
Foundation Models frameworkで画像分析
Avatar for リョウ ryodeveloper
1
630
Laravelで学ぶ Webアプリケーションチューニング入門/web_application_tuning_101
Avatar for Ryo Tomidokoro hanhan1978
4
1.9k
170k Jobs a Day on GKE: Scaling Mercari's CI Platform - and What's Next for AI-Native Development
Avatar for Junya Okabe junyaokabe
0
110
いまどきの Codex で開発する visionOS アプリの開発スタイルについて
Avatar for kazuhiro hara karad
0
150
AI Readyの正体はデータマネジメントだ メダリオン2.0の最前線
Avatar for freee freee
PRO
0
320
Building a Meta Ray-Ban display app
Avatar for Akio Itaya akkeylab
0
170

Featured

See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
6k
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.3k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1033
470k
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
66
57k
A Soul's Torment
Avatar for Nat Ma seathinner
6
3.5k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
940
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
Avatar for Marco Roth marcoroth
3
450
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
210
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
332
25k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
3k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3.2k

Transcript

  1. jQuery

  2. $

  3. write less, do more

  4. JavaScript Library

  5. Client-side Scripting

  6. Saves people's lifes since 2006

  7. Does the dirty work for you

  8. by “dirty work”, I mean W3C DOM

  9. Document Object Model

  10. Object Model for Documents

  11. Object Model for HTML

  12. HTML <=> DOM

  13. HTML <=> DOM

  14. HTML <=> DOM <=> JS

  15. API between HTML & JS

  16. W3C DOM

  17. ugly & tedious

  18. jQuery

  19. jQuery Manipulation Attributes Effects Selectors Traversing Plugins Ajax Events

  20. Install

  21. None

  22. <html> <head> <script src=”path/to/jquery”></script> </head> <body> </body> </html>

  23. Hello World

  24. DOM is a tree

  25. |-> Document |-> <html> |-> <body> |-> <h1> |-> text

    node |-> <p> |-> <a> |-> <br> |-> <a>

  26. $('h1').text('hello world')

  27. $('h1').text('hello world') Select and manipulate

  28. $('h1').text('hello world') Select and manipulate

  29. $ I am jQuery

  30. $('h1') the Selector

  31. .text('hello world') Set text

  32. .text() Get text

  33. var text = $('h1').text(); console.log(text);

  34. $('h1') .text('hello') .fadeOut(); Chaining!

  35. Selectors

  36. Selects the nodes in the tree

  37. Act just like CSS Selectors

  38. $('h1') All h1 elements

  39. $('p') All p elements

  40. $('h1.banana') All h1 elements with class banana

  41. $('h1#chuck') All h1 elements with id chuck

  42. $('.banana') All elements with class banana

  43. $('[type=”text”]') All elements with attribute type = text

  44. Manipulations

  45. Play with a node

  46. CSS

  47. How a node looks like

  48. Traversing

  49. Visit other nodes

  50. Events

  51. Nodes are responsive

  52. $(...).someEvent(callback)

  53. Ajax

  54. Grabs you data