Skip to content

Commit 907fda3

Browse files
ajpianoajpiano
committed
[docs.jquery.com] How jQuery Works tutorial with very minor revisions
1 parent b83bddc commit 907fda3

File tree

1 file changed

+178
-0
lines changed

1 file changed

+178
-0
lines changed

‎content/getting-started/how-jquery-works.md

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
---
2+
title : How jQuery Works
3+
status: needswork
4+
editrequired: 11
5+
attribution: jQuery Docs
6+
---
7+
### jQuery: The Basics
8+
9+
This is a basic tutorial, designed to help you get started using jQuery. If you
10+
don't have a test page setup yet, start by creating a new HTML page with the
11+
following contents:
12+
<!doctype html>
13+
<html>
14+
<head>
15+
<meta charset="utf-8">
16+
<title>Demo</title>
17+
</head>
18+
<body>
19+
<a href="http://jquery.com/">jQuery</a>
20+
<script src="jquery.js"></script>
21+
<script>
22+
23+
</script>
24+
</body>
25+
</html>
26+
27+
Edit the `src` attribute in the script tag to point to your copy of jquery.js.
28+
For example, if jquery.js is in the same directory as your HTML file, you
29+
can use:
30+
31+
<script src="jquery.js"></script>
32+
33+
You can download your own copy of jQuery from the [Downloading jQuery](../downloading-jquery/) page
34+
35+
### Launching Code on Document Ready
36+
The first thing that most Javascript programmers end up doing is adding some code to their program, similar to this:
37+
38+
window.onload = function(){ alert("welcome"); }
39+
40+
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.
41+
42+
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):
43+
44+
$(document).ready(function(){
45+
// Your code here
46+
});
47+
48+
Inside the ready event, add a click handler to the link:
49+
50+
$(document).ready(function(){
51+
<b>$("a").click(function(event){
52+
alert("Thanks for visiting!");
53+
});</b>
54+
});
55+
56+
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.
57+
58+
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:
59+
60+
$(document).ready(function(){
61+
$("a").click(function(<b>event</b>){
62+
alert("As you can see, the link no longer took you to jquery.com");
63+
<b>event.preventDefault();</b>
64+
});
65+
});
66+
67+
### Complete Example
68+
69+
The following is an example of what the complete HTML file might look like if
70+
you were to use the script in your own file. Note that it links to Google's
71+
[CDN](http://code.google.com/apis/libraries/) to load the jQuery core file.
72+
Also, while the custom script is included in the `<head>`, it is generally
73+
preferable to place it in a separate file and refer that file with the script
74+
element's src attribute
75+
76+
<!DOCTYPE html>
77+
<html lang="en">
78+
<head>
79+
<meta charset="utf-8">
80+
<title>jQuery demo</title>
81+
</head>
82+
<body>
83+
<a href="http://jquery.com/">jQuery</a>
84+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
85+
<script>
86+
$(document).ready(function(){
87+
$("a").click(function(event){
88+
alert("The link will no longer take you to jquery.com");
89+
event.preventDefault();
90+
});
91+
});
92+
</script>
93+
</body>
94+
</html>
95+
96+
### Adding and Removing an HTML Class
97+
98+
**Important:** *The remaining jQuery examples will need to be placed inside the ready event so that they are executed when the document is ready to be worked on. See [[#Launching_Code_on_Document_Ready|Launching Code on Document Ready]] above for details.*
99+
100+
Another common task is adding (or removing) a `class`.
101+
102+
First, add some style information into the `head` of your document, like this:
103+
104+
<style>
105+
a.test { font-weight: bold; }
106+
</style>
107+
108+
Next, add the [addClass](http://api.jquery.com/addClass) call to your script:
109+
110+
$("a").addClass("test");
111+
112+
All your `a` elements will now be bold.
113+
114+
To remove the `class`, use [removeClass](http://api.jquery.com/removeClass)
115+
116+
$("a").removeClass("test");
117+
118+
### Special Effects
119+
120+
In jQuery, a couple of handy [effects](http://api.jquery.com/category/effects/)
121+
are provided, to really make your web site stand out. To put this to the test,
122+
change the click that you added earlier to this:
123+
124+
$("a").click(function(event){
125+
event.preventDefault();
126+
$(this).hide("slow");
127+
});
128+
129+
Now, if you click any link, it should make itself slowly disappear.
130+
131+
## Callback and Functions
132+
133+
A callback is a function that is passed as an argument to another function and
134+
is executed after its parent function has completed. The special thing about a
135+
callback is that functions that appear after the "parent" can execute before
136+
the callback executes. Another important thing to know is how to properly pass
137+
the callback.
138+
139+
### Callback *without* arguments
140+
141+
For a callback with no arguments you pass it like this:
142+
143+
$.get('myhtmlpage.html', myCallBack);
144+
145+
**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.
146+
147+
### Callback *with* arguments
148+
149+
"What do you do if you have arguments that you want to pass?", you might ask yourself.
150+
151+
#### Wrong
152+
The Wrong Way (will ***not*** work!)
153+
154+
$.get('myhtmlpage.html', myCallBack(param1, param2));
155+
156+
157+
This will not work because it calls
158+
159+
myCallBack(param1, param2)
160+
161+
and then passes the return value as the second parameter to [$.get()](http://api.jquery.com/jQuery.get/)
162+
163+
#### Right
164+
165+
The problem with the above example is that `myCallBack(param1, param2)` is
166+
evaluated before being passed as a function. Javascript and by extension jQuery
167+
expects a function pointer in cases like these, e.g., `setTimeout( function() {}, 100)`
168+
169+
In the below usage, an anonymous function is created (just a block of
170+
statements) and is registered as the callback function. Note the use of
171+
`function(){`. The anonymous function does exactly one thing: calls
172+
`myCallBack`, with the values of `param1` and `param2` from the outer scope.
173+
174+
$.get('myhtmlpage.html', function(){
175+
myCallBack(param1, param2);
176+
});
177+
178+
`param1` and `param2` are evaluated as a callback when the `$.get` is done getting the page.

0 commit comments

Comments
 (0)