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

jQuery

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
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
300
Node - Express - Socket.io
Avatar for nctunba nctunba
1
430
Python
Avatar for nctunba nctunba
3
540
node
Avatar for nctunba nctunba
9
50k
JS
Avatar for nctunba nctunba
11
650

Other Decks in Programming

See All in Programming
Symfony AI in Action - SymfonyLive Berlin 2026
Avatar for Christopher Hertel chr_hertel
1
120
なぜあなたのコードには「コシ」がないのか？〜AI時代に問う、最後まで美味しい設計と戦略〜 #phpconkagawa / phpconkagawa2026
Avatar for shogogg shogogg
0
140
GitHubCopilotCLIをはじめよう.pdf
Avatar for tkym htkym
0
320
How We Benchmarked Quarkus: Patterns and anti-patterns
Avatar for Holly Cummins hollycummins
1
180
Building on Bluesky's AT Protocol with Ruby
Avatar for Kuba Suder mackuba
0
100
HTML-Aware ERB: The Path to Reactive Rendering @ RubyKaigi 2026, Hakodate, Japan
Avatar for Marco Roth marcoroth
0
640
PHPer、Cloudflare に引っ越す
Avatar for Suguru Oki / スー suguruooki
1
140
WebAssembly を読み込むベストプラクティス 2026年春版 / Best Practices for Loading WebAssembly (Spring 2026)
Avatar for petamoriken / 森建 petamoriken
5
1.1k
Vibe NLP for Applied NLP
Avatar for Ines Montani inesmontani
PRO
0
600
JOAI2026 1st solution - heron0519 -
Avatar for heron0519 heron0519
0
180
Surviving Black Friday: 329 billion requests with Falcon!
Avatar for Samuel Williams ioquatix
0
2.8k
Cache-moi si tu peux : patterns et pièges du cache en production - Devoxx France 2026 - Conférence
Avatar for Sébastien LECACHEUR slecache
0
330

Featured

See All Featured
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
2
1k
Between Models and Reality
Avatar for mayunak mayunak
3
280
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
110
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.2k
New Earth Scene 8
Avatar for Sydney Stone popppiees
3
2.2k
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.5k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
21k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8.1k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
290

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