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

jQuery

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
540
node
Avatar for nctunba nctunba
9
50k
JS
Avatar for nctunba nctunba
11
650

Other Decks in Programming

See All in Programming
AIとRubyの静的型付け
Avatar for ukin0k0 ukin0k0
0
510
AI駆動開発で崩れていくコードベースを立て直す
Avatar for Kyoko NR kyoko_nr_nr
1
410
Spec Driven Development | AI Summit Lisbon
Avatar for Daniel Sogl danielsogl
PRO
0
110
Inside Stream API
Avatar for Yuichi.Sakuraba skrb
1
570
Java × distroless で 軽量なコンテナイメージを / Java on Distroless
Avatar for Daisuke Garaike contour_gara
0
460
tsserverとは何だったのか、これからどうなるのか
Avatar for Ryota Nakamura nowaki28
1
430
柔軟なPDFレイアウトエディタを支える型システム設計 — Discriminated UnionとConditional Typeの実践
Avatar for minako-ph minako__ph
4
1.3k
Lemonade + Foundry Toolkit でお手軽アプリ開発
Avatar for 瀬尾佳隆 seosoft
1
260
Make SRE Operations Easier with Azure SRE Agent
Avatar for KAMEGAWA Kazushi kkamegawa
0
2.9k
運用エージェントは "作る" から "育てる" へ - 記憶と自己進化の3層設計パターン / self-evolving-agents-three-layer-agent-design
Avatar for geeawa gawa
12
3.4k
AIエージェントの隔離技術の徹底比較
Avatar for kawayu kawayu
0
450
Copilot CLI の継戦能力を高める コンテキスト管理
Avatar for Nozomuts nozomutu
1
1.2k

Featured

See All Featured
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.3k
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
810
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
610
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.5k
We Analyzed 250 Million AI Search Results: Here's What I Found
Avatar for Josh Blyskal joshbly
1
1.3k
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
2k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
8.2k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
2
1.5k
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
400
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
40k

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