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
530
node
Avatar for nctunba nctunba
9
50k
JS
Avatar for nctunba nctunba
11
650

Other Decks in Programming

See All in Programming
MDN Web Docs に日本語翻訳でコントリビュート
Avatar for uutan1108 ohmori_yusuke
0
640
開発者から情シスまで - 多様なユーザー層に届けるAPI提供戦略 / Postman API Night Okinawa 2026 Winter
Avatar for tasshi tasshi
0
200
Fluid Templating in TYPO3 14
Avatar for Simon Praetorius s2b
0
130
IFSによる形状設計／デモシーンの魅力 @ 慶應大学SFC
Avatar for がむ gam0022
1
300
AIによる高速開発をどう制御するか？ ガードレール設置で開発速度と品質を両立させたチームの事例
Avatar for tonkotsuboy_com tonkotsuboy_com
7
2k
AI巻き込み型コードレビューのススメ
Avatar for Nealle nealle
0
130
CSC307 Lecture 04
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
660
責任感のあるCloudWatchアラームを設計しよう
Avatar for アキキー akihisaikeda
3
160
副作用をどこに置くか問題：オブジェクト指向で整理する設計判断ツリー
Avatar for Koya Masuda koxya
1
590
Rust 製のコードエディタ “Zed” を使ってみた
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
150
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
510
疑似コードによるプロンプト記述、どのくらい正確に実行される？
Avatar for kokuyouwind kokuyouwind
0
380

Featured

See All Featured
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
791
250k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.6k
A Soul's Torment
Avatar for Nat Ma seathinner
5
2.2k
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
160
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
14k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
1.6k
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
730
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.1k
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
440

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