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: page/about-jquery/how-jquery-works.md
+22-25Lines changed: 22 additions & 25 deletions
Original file line number
Diff line number
Diff line change
@@ -31,7 +31,7 @@ can use:
31
31
<script src="jquery.js"></script>
32
32
```
33
33
34
-
You can download your own copy of jQuery from the [Downloading jQuery](http://jquery.com/download/) page
34
+
Download a copy of jQuery from the [Downloading jQuery](http://jquery.com/download/) page.
35
35
36
36
### Launching Code on Document Ready
37
37
The first thing that most Javascript programmers end up doing is adding some code to their program, similar to this:
@@ -42,7 +42,7 @@ window.onload = function() {
42
42
43
43
}
44
44
```
45
-
Inside of which is the code that you want to run right when the page is loaded. Problematically, however, the Javascript code isn't run until all images are finished downloading (this includes banner ads). The reason for using window.onload in the first place is that the HTML 'document' isn't finished loading yet, when you first try to run your code.
45
+
Inside of which is the code that you want to run right when the page is loaded. Problematically, however, the Javascript code isn't run until all images are finished downloading (this includes banner ads). The reason for using `window.onload` in the first place is that the HTML 'document' isn't finished loading yet, when you first try to run your code.
46
46
47
47
To circumvent both problems, jQuery has a simple statement that checks the `document` and waits until it's ready to be manipulated, known as the [ ready event ](http://api.jquery.com/ready):
48
48
@@ -91,11 +91,11 @@ The following is an example of what the complete HTML file might look like if
91
91
you were to use the script in your own file. Note that it links to Google's
92
92
[CDN](http://code.google.com/apis/libraries/) to load the jQuery core file.
93
93
Also, while the custom script is included in the `<head>`, it is generally
94
-
preferable to place it in a separate file and refer that file with the script
95
-
element's src attribute
94
+
preferable to place it in a separate file and refer to that file with the script
95
+
element's `src` attribute.
96
96
97
97
```
98
-
<!DOCTYPE html>
98
+
<!doctype html>
99
99
<html lang="en">
100
100
<head>
101
101
<meta charset="utf-8">
@@ -129,7 +129,7 @@ element's src attribute
129
129
130
130
Another common task is adding (or removing) a `class`.
131
131
132
-
First, add some style information into the `head` of your document, like this:
132
+
First, add some style information into the `head` of the document, like this:
133
133
134
134
```
135
135
<style>
@@ -139,15 +139,15 @@ First, add some style information into the `head` of your document, like this:
139
139
</style>
140
140
```
141
141
142
-
Next, add the [addClass](http://api.jquery.com/addClass) call to your script:
142
+
Next, add the [addClass](http://api.jquery.com/addClass) call to the script:
143
143
144
144
```
145
145
$("a").addClass("test");
146
146
```
147
147
148
-
All your `a` elements will now be bold.
148
+
All `a` elements will now be bold.
149
149
150
-
To remove the `class`, use [removeClass](http://api.jquery.com/removeClass)
150
+
To remove the `class`, use [removeClass](http://api.jquery.com/removeClass):
151
151
152
152
```
153
153
$("a").removeClass("test");
@@ -156,8 +156,8 @@ $("a").removeClass("test");
156
156
### Special Effects
157
157
158
158
In jQuery, a couple of handy [effects](http://api.jquery.com/category/effects/)
159
-
are provided, to really make your web site stand out. To put this to the test,
160
-
change the click that you added earlier to this:
159
+
are provided, to really make web sites stand out. For example,
160
+
change the click you added earlier to the following:
Now, if you click any link, it should make itself slowly disappear.
172
+
Now, the linkshould slowly disappear when clicked.
173
173
174
-
## Callback and Functions
174
+
## Callbacks and Functions
175
175
176
176
A callback is a function that is passed as an argument to another function and
177
177
is executed after its parent function has completed. The special thing about a
178
178
callback is that functions that appear after the "parent" can execute before
179
179
the callback executes. Another important thing to know is how to properly pass
180
180
the callback.
181
181
182
-
### Callback *without*arguments
182
+
### Callback *without*Arguments
183
183
184
-
For a callback with no arguments you pass it like this:
184
+
Pass callbacks with no arguments like this:
185
185
186
186
```
187
187
$.get( "myhtmlpage.html", myCallBack );
188
188
```
189
189
190
-
**Note** that the second parameter here is simply the function name (but *not* as a string and without parentheses). Functions in Javascript are 'First class citizens' and so can be passed around like variable references and executed at a later time.
190
+
**Note** that the second parameter here is simply the function name (but *not* as a string and without parentheses). Functions in Javascript are 'First class citizens' and can be passed around like variable references and executed at a later time.
191
191
192
-
### Callback *with*arguments
192
+
### Callback *with*Arguments
193
193
194
-
"What do you do if you have arguments that you want to pass?", you might ask yourself.
194
+
Executing callbacks with arguments can be tricky. The below example illustrates how to think about callbacks with arguments:
This will not work because it calls `myCallBack( param1, param2 )`
205
-
206
-
207
-
and then passes the return value as the second parameter to [$.get()](http://api.jquery.com/jQuery.get/)
204
+
This will not work because it calls `myCallBack( param1, param2 )` and then passes the return value as the second parameter to [$.get()](http://api.jquery.com/jQuery.get/).
208
205
209
206
#### Right
210
207
211
208
The problem with the above example is that `myCallBack( param1, param2 )` is
212
-
evaluated before being passed as a function. Javascript and by extension jQuery
213
-
expects a function pointer in cases like these, e.g., `setTimeout( function() {}, 100)`
209
+
evaluated before being passed as a function. Javascript (and by extension, jQuery)
210
+
expects a function pointer in cases like these, e.g., `setTimeout( function() {}, 100)`.
214
211
215
-
In the below usage, an anonymous function is created (just a block of
212
+
In the example below, an anonymous function is created (just a block of
216
213
statements) and is registered as the callback function. Note the use of
217
214
`function() {`. The anonymous function does exactly one thing: calls
218
215
`myCallBack`, with the values of `param1` and `param2` from the outer scope.
Arrays are zero-indexed, ordered lists of values. They are a handy way to store a set of
9
-
related items of the same type (such as strings), though in reality, an array
10
-
can include multiple types of items, including other arrays.
8
+
Arrays are zero-indexed, ordered lists of values. They are a handy way to store a set of related items of the same type (such as strings), though in reality, an array can include multiple types of items, including other arrays.
11
9
12
-
To create an array you can either use the object constructor or the literal declaration,
13
-
by assigning your variable a list of values right after the declaration.
10
+
To create an array, either use the object constructor or the literal declaration, by assigning the variable a list of values after the declaration.
14
11
15
12
```
16
13
// A simple array
17
14
var myArray1 = new Array( "hello", "world" ); // with constructor
18
15
var myArray2 = [ "hello", "world" ]; // literal declaration, the preferred way
If you don't know your values yet, it is also possible to declare an empty Array, and
26
-
add elements either through functions or through accessing by index:
18
+
The literal declaration is generally preferred. See the [Google Coding Guidelines](http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml#Array_and_Object_literals) for more information.
27
19
20
+
If the values are unknown, it is also possible to declare an empty Array, and add elements either through functions or through accessing by index:
28
21
29
22
```
30
23
// Creating empty arrays and adding values
@@ -37,9 +30,7 @@ myArray.push("world"); // adds "world" on index 1
37
30
myArray[ 2 ] = "!"; // adds "!" on index 2
38
31
```
39
32
40
-
'push' is a function which adds an element on the end of the array and expands the array
41
-
respectively. You also can directly add items by index. Missing indices will be filled
42
-
with 'undefined';
33
+
'push' is a function that adds an element on the end of the array and expands the array respectively. You also can directly add items by index. Missing indices will be filled with 'undefined'.
'join' creates a string representation of your array. It's parameter is as string
118
-
which works as a separator between elements (default is a comma);
106
+
`.join` creates a string representation of the array. Its parameter is a string that works as a separator between elements (default separator is a comma):
Removes the first element of an array. With 'pop' and 'shift' you can recreate the
165
-
method of a [queue](http://en.wikipedia.org/wiki/Queue_(data_structure))
151
+
Removes the first element of an array. With `.pop` and `.shift`, you can recreate the method of a [queue](http://en.wikipedia.org/wiki/Queue_(data_structure)):
The return value of descending (for this example) is important. If the return value is
243
-
less than zero, the index of a is before b, and if it is greater than zero it's vice-versa.
244
-
If the return value is zero, the elements index is equal.
225
+
The return value of descending (for this example) is important. If the return value is less than zero, the index of a is before b, and if it is greater than zero it's vice-versa. If the return value is zero, the elements index is equal.
245
226
246
-
##unshift
227
+
### `.unshift`
247
228
248
-
Inserts an element at the first position of the array
229
+
Inserts an element at the first position of the array:
In modern browsers, like Chrome, Firefox and Internet Explorer 9 it is possible to traverse
264
-
through arrays by a so called 'forEach' method, where you pass a function which is called
265
-
for each element in your array.
244
+
In modern browsers it is possible to traverse through arrays with a `.forEach` method, where you pass a function that is called for each element in the array.
266
245
267
246
The function takes up to three arguments:
268
-
*element - The element itself
269
-
*index - The index of this element in the array
270
-
*array - The array itself
247
+
**Element* - The element itself.
248
+
**Index* - The index of this element in the array.
249
+
**Array* - The array itself.
271
250
272
-
All of the are optional, but you will need at least the 'element' parameter in most cases.
251
+
All of these are optional, but you will need at least the 'element' parameter in most cases.
0 commit comments