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

jQuery

Avatar for nctunba nctunba
March 21, 2012
Programming
8
620

 jQuery

Avatar for nctunba

nctunba

March 21, 2012
Tweet

More Decks by nctunba

See All by nctunba
被 Qt 快樂的玩弄
Avatar for nctunba nctunba
2
400
被 Qt 快樂的玩弄 part 1
Avatar for nctunba nctunba
1
290
Node - Express - Socket.io
Avatar for nctunba nctunba
1
420
Python
Avatar for nctunba nctunba
3
520
node
Avatar for nctunba nctunba
9
50k
JS
Avatar for nctunba nctunba
11
640

Other Decks in Programming

See All in Programming
ボトムアップの生成AI活用を推進する社内AIエージェント開発
Avatar for aku11i aku11i
0
1.4k
AIのバカさ加減に怒る前にやっておくこと
Avatar for k2moons blueeventhorizon
0
130
SidekiqでAIに商品説明を生成させてみた
Avatar for Aki Nakahara akinko_0915
0
110
エンジニアインターン「Treasure」とHonoの2年、そして未来へ / Our Journey with Hono Two Years at Treasure and Beyond
Avatar for CARTA Engineering carta_engineering
0
470
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
Avatar for Masahiro Nishimi masahiro_nishimi
4
17k
data-viz-talk-cz-2025
Avatar for Leonardo Collado-Torres lcolladotor
0
110
GC25 Recap: The Code You Reviewed is Not the Code You Built / #newt_gophercon_tour
Avatar for mazrean mazrean
0
140
Designing Repeatable Edits: The Architecture of . in Vim
Avatar for Satoru Kitaguchi satorunooshie
0
210
開発組織の戦略的な役割と 設計スキル向上の効果
Avatar for 増田 亨 masuda220
PRO
10
2k
퇴근 후 1억이 거래되는 서비스 만들기 | 내가 AI를 사용하는 방법
Avatar for Seungmin 마량 maryang
2
250
Swift Concurrency 年表クイズ
Avatar for omochimetaru omochi
3
220
ALL CODE BASE ARE BELONG TO STUDY
Avatar for uzulla uzulla
29
6.9k

Featured

See All Featured
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
5
710
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
62k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
8
330
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
73
11k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
36
6.1k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.9k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
272
21k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.3k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
127
54k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
186
22k

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