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

jQuery

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for nctunba nctunba
March 21, 2012
Programming
8
630

 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
430
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
encoding/json/v2のUnmarshalはこう変わった：内部実装で見る設計改善
Avatar for Hiroki Kurasawa kurakura0916
0
390
エラーログのマスキングの仕組みづくりに役立ったASTの話
Avatar for Kenichi Shihota kumoichi
0
160
Cyrius ーLinux非依存にコンテナをネイティブ実行する専用OSー
Avatar for n4mlz n4mlz
0
120
Railsの気持ちを考えながらコントローラとビューを整頓する/tidying-rails-controllers-and-views-as-rails-think
Avatar for MOROHASHI Kyosuke moro
5
390
SourceGeneratorのマーカー属性問題について
Avatar for tkym htkym
0
180
CSC307 Lecture 13
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
320
AI時代のソフトウェア開発でも「人が仕様を書く」から始めよう-医療IT現場での実践とこれから
Avatar for kouki.miura koukimiura
0
140
PJのドキュメントを全部Git管理にしたら、一番喜んだのはAIだった
Avatar for oga_aiichiro nanaism
0
250
NOT A HOTEL - 建築や人と融合し、自由を創り出すソフトウェア
Avatar for Hokuto Shimokawa not_a_hokuts
2
980
今更考える「単一責任原則」 / Thinking about the Single Responsibility Principle
Avatar for philomagi tooppoo
3
1.6k
ふつうの Rubyist、ちいさなデバイス、大きな一年
Avatar for bash0C7 bash0c7
0
780
AIコードレビューの導入・運用と AI駆動開発における「AI4QA」の取り組みについて
Avatar for ハゲワシ hagevvashi
0
320

Featured

See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
850
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
170
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
140
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
3.7k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
199
73k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
1
3.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
190
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.3k

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