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

jQuery

nctunba
March 21, 2012
Programming
9
600

 jQuery

nctunba

March 21, 2012
Tweet

More Decks by nctunba

See All by nctunba
被 Qt 快樂的玩弄
nctunba
2
370
被 Qt 快樂的玩弄 part 1
nctunba
1
260
Node - Express - Socket.io
nctunba
1
410
Python
nctunba
3
520
node
nctunba
9
49k
JS
nctunba
11
630

Other Decks in Programming

See All in Programming
Laravel や Symfony で手っ取り早く
OpenAPI のドキュメントを作成する
azuki
2
120
ActiveSupport::Notifications supporting instrumentation of Rails apps with OpenTelemetry
ymtdzzz
1
250
型付き API リクエストを実現するいくつかの手法とその選択 / Typed API Request
euxn23
8
2.3k
Djangoの開発環境で工夫したこと - pre-commit / DevContainer
hiroki_yod
1
180
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
110
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
260
受け取る人から提供する人になるということ
little_rubyist
0
250
React への依存を最小にするフロントエンド設計
takonda
14
4k
デザインパターンで理解するLLMエージェントの作り方 / How to develop an LLM agent using agentic design patterns
rkaga
8
620
Amazon Qを使ってIaCを触ろう！
maruto
0
420
Kaigi on Rails 2024 〜運営の裏側〜
krpk1900
1
260
最新TCAキャッチアップ
0si43
0
200

Featured

See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
The Invisible Side of Design
smashingmag
298
50k
How STYLIGHT went responsive
nonsquared
95
5.2k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.8k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
RailsConf 2023
tenderlove
29
900
BBQ
matthewcrist
85
9.3k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k

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