You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+14-1Lines changed: 14 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,7 @@
1
1
# jQuery intro notes:
2
2
3
3
#### Before you start:
4
+
4
5
Be sure you have a solid understanding of [this](https://zellwk.com/blog/this/).
5
6
6
7
### General Notes
@@ -71,7 +72,9 @@ Get REALLY comfortable with CSS selectors. They are the heart of the library and
71
72
---
72
73
73
74
### Sample Code
74
-
Have a solid look through the code included in this repo. It gives a 1000ft overview of basic jQuery functionality.
75
+
Have a solid look through the code included in this repo. It gives a 1000ft overview of basic jQuery functionality. Open up the index.html and toggle functions in ```0_main.js``` to see their effects.
76
+
77
+
---
75
78
76
79
### Event Delegation
77
80
Event delegation refers to the process of using event propagation (bubbling) to handle events at a higher level in the DOM than the element on which the event originated. It allows us to attach a single event listener for elements that exist now or in the future.
@@ -93,6 +96,8 @@ var delegatedEventListener = function(){
93
96
94
97
**Translation** - Make this your DEFAULT pattern. Using this pattern for building event listeners allows you on listen to DOM elements which will be dynamically placed on the page after the initial load.
95
98
99
+
---
100
+
96
101
### The DOM:
97
102
98
103
DOM === Document Object Model
@@ -107,6 +112,8 @@ jQuery DOM features include:
107
112
- AJAX
108
113
- Various utilities
109
114
115
+
---
116
+
110
117
### AJAX:
111
118
112
119
AJAX is my **FAVORITE** part of Javascript, it's the part that talks to Ruby!
@@ -193,15 +200,21 @@ end
193
200
194
201
In the ```GET``` route above we are sending a partial back to AJAX. In the ```POST``` route we are sending back the @dog object as JSON. Same rules as always applies here. _Be VERY aware of what_ your methods are returning. If you are expecting a partial and get JSON your AJAX will fail. :-(
195
202
203
+
---
204
+
196
205
### ProTip:
197
206
Chrome defines ```$()``` as well. This is not jQuery. Always be sure you have **_actually_** loaded jQuery into your project. If you can select an element with $ but cannot run various jQuery methods on it this is most likely the culprit (Laugh now... Its happened to better Devs than you friend ;-)
198
207
208
+
---
209
+
199
210
### Final Thought
200
211
201
212
*Chrome Dev Tools*__From this point forward they should never be closed when you are developing.__
202
213
203
214
What's the first 2 rules of debugging?!? __READ THE ERROR MESSAGE__. Where do we find JS error messages...? In the Dev Tools Console!
0 commit comments