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

jQuery

Avatar for nctunba nctunba
March 21, 2012
Programming
9
610

 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
LLMは麻雀を知らなすぎるから俺が教育してやる
Avatar for po3rin po3rin
3
2.2k
WebAssemblyインタプリタを書く ～Component Modelを添えて～
Avatar for ruccho ruccho
1
890
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
Avatar for hiyanger hiyanger
13
3.2k
decksh - a little language for decks
Avatar for Anthony Starks ajstarks
4
21k
AIエージェント開発、DevOps and LLMOps
Avatar for Kento.Yamada ymd65536
1
320
Microsoft Orleans, Daprのアクターモデルを使い効率的に開発、デプロイを行うためのSekibanの試行錯誤 / Sekiban: Exploring Efficient Development and Deployment with Microsoft Orleans and Dapr Actor Models
Avatar for Tomohisa Takaoka tomohisa
0
200
Claude Code と OpenAI o3 で メタデータ情報を作る
Avatar for laket laket
0
130
Jakarta EE Core Profile and Helidon - Speed, Simplicity, and AI Integration
Avatar for ivargrimstad ivargrimstad
0
140
オホーツクでコミュニティを立ち上げた理由―地方出身プログラマの挑戦 / TechRAMEN 2025 Conference
Avatar for はる lemonade_37
2
490
開発チーム・開発組織の設計改善スキルの向上
Avatar for 増田 亨 masuda220
PRO
10
4k
#QiitaBash TDDで(自分の)開発がどう変わったか
Avatar for Tommy(sigma) ryosukedtomita
1
380
実践 Dev Containers × Claude Code
Avatar for Yuto Akiba touyu
1
230

Featured

See All Featured
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
11k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
51
3.4k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
36
6.8k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
2
580
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
Fireside Chat
Avatar for paigeccino paigeccino
39
3.6k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
431
65k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.4k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
70
11k
Visualization
Avatar for Eitan Lees eitanlees
146
16k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.8k

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