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
+64-35Lines changed: 64 additions & 35 deletions
Original file line number
Diff line number
Diff line change
@@ -7,7 +7,7 @@ level: beginner
7
7
This is a basic tutorial, designed to help you get started using jQuery. If you
8
8
don't have a test page setup yet, start by creating a new HTML page with the
9
9
following contents:
10
-
```html
10
+
```
11
11
<!doctype html>
12
12
<html>
13
13
<head>
@@ -18,7 +18,7 @@ following contents:
18
18
<a href="http://jquery.com/">jQuery</a>
19
19
<script src="jquery.js"></script>
20
20
<script>
21
-
var foo ="bar";
21
+
var foo = "bar";
22
22
</script>
23
23
</body>
24
24
</html>
@@ -27,46 +27,61 @@ following contents:
27
27
Edit the `src` attribute in the script tag to point to your copy of jquery.js.
28
28
For example, if jquery.js is in the same directory as your HTML file, you
29
29
can use:
30
-
```html
30
+
```
31
31
<script src="jquery.js"></script>
32
32
```
33
33
34
-
You can download your own copy of jQuery from the [Downloading jQuery](../downloading-jquery/) page
34
+
You can download your own 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:
38
-
```js
39
-
window.onload=function(){ alert("welcome"); }
38
+
```
39
+
window.onload = function() {
40
+
41
+
alert("welcome");
42
+
43
+
}
40
44
```
41
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.
42
46
43
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):
44
48
45
-
```js
46
-
$(document).ready(function(){
49
+
```
50
+
$( document ).ready( function() {
51
+
47
52
// Your code here
53
+
48
54
});
49
55
```
50
56
51
57
Inside the ready event, add a click handler to the link:
52
58
53
-
```js
54
-
$(document).ready(function(){
55
-
$("a").click(function(event){
59
+
```
60
+
$( document ).ready(function(){
61
+
62
+
$("a").click(function( event ) {
63
+
56
64
alert("Thanks for visiting!");
65
+
57
66
});
67
+
58
68
});
59
69
```
60
70
Save your HTML file and reload the test page in your browser. Clicking the link on the page should make a browser's alert pop-up, before leaving to go to the main jQuery page.
61
71
62
72
For click and most other [events](http://api.jquery.com/category/events/), you can prevent the default behaviour - here, following the link to jquery.com - by calling event.preventDefault() in the event handler:
63
73
64
-
```js
65
-
$(document).ready(function(){
66
-
$("a").click(function(<b>event</b>){
74
+
```
75
+
$( document ).ready(function() {
76
+
77
+
$("a").click(function( event ) {
78
+
67
79
alert("As you can see, the link no longer took you to jquery.com");
68
-
<b>event.preventDefault();</b>
80
+
81
+
event.preventDefault();
82
+
69
83
});
84
+
70
85
});
71
86
```
72
87
@@ -79,7 +94,7 @@ Also, while the custom script is included in the `<head>`, it is generally
79
94
preferable to place it in a separate file and refer that file with the script
alert("The link will no longer take you to jquery.com");
114
+
96
115
event.preventDefault();
116
+
97
117
});
118
+
98
119
});
120
+
99
121
</script>
100
122
</body>
101
123
</html>
@@ -109,23 +131,25 @@ Another common task is adding (or removing) a `class`.
109
131
110
132
First, add some style information into the `head` of your document, like this:
111
133
112
-
```html
134
+
```
113
135
<style>
114
-
a.test { font-weight: bold; }
136
+
a.test {
137
+
font-weight: bold;
138
+
}
115
139
</style>
116
140
```
117
141
118
142
Next, add the [addClass](http://api.jquery.com/addClass) call to your script:
119
143
120
-
```js
144
+
```
121
145
$("a").addClass("test");
122
146
```
123
147
124
148
All your `a` elements will now be bold.
125
149
126
150
To remove the `class`, use [removeClass](http://api.jquery.com/removeClass)
127
151
128
-
```js
152
+
```
129
153
$("a").removeClass("test");
130
154
```
131
155
@@ -135,10 +159,13 @@ In jQuery, a couple of handy [effects](http://api.jquery.com/category/effects/)
135
159
are provided, to really make your web site stand out. To put this to the test,
136
160
change the click that you added earlier to this:
137
161
138
-
```js
139
-
$("a").click(function(event){
162
+
```
163
+
$("a").click(function( event ){
164
+
140
165
event.preventDefault();
141
-
$(this).hide("slow");
166
+
167
+
$( this ).hide("slow");
168
+
142
169
});
143
170
```
144
171
@@ -156,8 +183,8 @@ the callback.
156
183
157
184
For a callback with no arguments you pass it like this:
158
185
159
-
```js
160
-
$.get('myhtmlpage.html', myCallBack);
186
+
```
187
+
$.get( "myhtmlpage.html", myCallBack);
161
188
```
162
189
163
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.
0 commit comments