jQuery

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
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