Bug Tracker

Ticket #6849: Tutorials How_jQuery_Works-dmethvin.htm

File Tutorials How_jQuery_Works-dmethvin.htm, 28.3 KB (added by dmethvin, 12 years ago)
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
4        <head>
5                <meta http-equiv="content-type" content="text/html; charset=utf-8" />
6                <meta name="keywords" content="Tutorials:How jQuery Works,Ajax,Attributes/addClass,Attributes/removeClass,Downloading jQuery,Effects,Events,Main Page,CSS,Effects,Events" />
7<link rel="shortcut icon" href="/favicon.ico" />
8<link rel="search" type="application/opensearchdescription+xml" href="/opensearch_desc.php" title="jQuery JavaScript Library (English)" />
9                <title>Tutorials:How jQuery Works - jQuery JavaScript Library</title>
10                <link rel="stylesheet" href="http://static.jquery.com/files/rocker/css/reset.css" type="text/css" />
11                <link rel="stylesheet" href="http://static.jquery.com/files/rocker/css/screen.css" type="text/css" />
12                <style type="text/css" media="screen,projection">/*<![CDATA[*/ @import "http://docs.jquery.com/skins/monobook/main.css?9"; /*]]>*/</style>
13
14                <link rel="stylesheet" type="text/css" href="http://jquery.com/files/social/jquery.tabs.css" />
15                <!--[if lte IE 7]>
16                <link rel="stylesheet" href="http://jquery.com/files/social/jquery.tabs-ie.css" type="text/css" media="projection, screen"/>
17                <![endif]-->
18
19                <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
20                <script src="http://jquery.com/files/social/js/jquery.tabs.js"></script>
21
22                <script>$(function(){
23                        $("div[id=examples]").each(function(){
24                                $(this).siblings("div:first").find("div.desc").after(
25                                        $(this).find("div.example:has(#demo):first").remove().clone());
26
27                                if ( !$("div.example", this).length )
28                                        $(this).remove();
29                        });
30
31                        $("div.entry")
32                                .children("p").remove().end()
33                                .find("ul:first li").each(function(){
34                                        if ( !$(this).parent().siblings( $("a",this).attr("href") ).length )
35                                                $(this).remove();
36                                }).end()
37                                .not(".ui")
38                                .tabs();
39
40                        $("div.args > br").remove();
41
42                        $("div.example")
43                                .children("p").remove().end()
44                                .tabs();
45
46                        var keywords = "String,Number,Object,Options,Array,Function,Callback,Selector,Event,Element,Integer,Float,Boolean".split(",");
47
48                        $("td.default span, td.type").each(function(){
49                                var html = this.innerHTML;
50                                jQuery.each(keywords, function(i,key){
51                                        html = html.replace(new RegExp(key, "ig"), "<a href='/Types#" + key + "'>" + key + "</a>");
52                                });
53                                this.innerHTML = html;
54                        });
55
56                        $("div[id=source]").each(function(){
57                                var source = $("pre", this).html()
58                                        .replace(/<\/?a.*?>/ig, "")
59                                        .replace(/<\/?strong.*?>/ig, "")
60                                        .replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&");
61
62                                //var items = [];
63                                //source = source.replace(/\s*<(link|script).*?>\s\*/g, function(m){
64                                        //items.push(m);
65                                        //return "";
66                                //}).replace("</head>", items.join("") + "</head>")
67                                //*/
68
69                                var iframe = document.createElement("iframe");
70                                iframe.src = "/index-blank.html";
71                                iframe.width = "100%";
72                                iframe.height = $(this).prev().attr("rel") || "125";
73                                iframe.style.border = "none";
74                                $(this).prev().append(iframe);
75
76
77                                $(window).load(function(){
78                                        var doc = iframe.contentDocument || iframe.contentWindow.document;
79                                          source = source
80                                                  .replace(/<script>([^<])/g,"<script>window.onload = (function(){\ntry{$1")
81                                                  .replace(/([^>])<\/sc/g,  '$1\n}catch(e){}});</sc');
82
83                                            source = source
84                                                    .replace("</head>", "<style>html,body{border:0; margin:0; padding:0;}</style></head>");
85
86                                        doc.open();
87                                        doc.write( source );
88                                        doc.close();
89                                });
90
91                        });
92                });</script>
93                <script type="text/javascript" src="http://static.jquery.com/files/rocker/scripts/custom.js"></script>
94                <link rel="shortcut icon" href="http://static.jquery.com/favicon.ico" type="image/x-icon"/>
95                <style type="text/css" media="screen,projection">/*<![CDATA[*/ @import "/skins/monobook/main.css?9"; /*]]>*/</style>
96                <link rel="stylesheet" type="text/css" media="print" href="/skins/common/commonPrint.css" />
97                <!--[if lt IE 5.5000]><style type="text/css">@import "/skins/monobook/IE50Fixes.css";</style><![endif]-->
98                <!--[if IE 5.5000]><style type="text/css">@import "/skins/monobook/IE55Fixes.css";</style><![endif]-->
99                <!--[if IE 6]><style type="text/css">@import "/skins/monobook/IE60Fixes.css";</style><![endif]-->
100                <!--[if IE 7]><style type="text/css">@import "/skins/monobook/IE70Fixes.css?1";</style><![endif]-->
101                <!--[if lt IE 7]><script type="text/javascript" src="/skins/common/IEFixes.js"></script>
102                <meta http-equiv="imagetoolbar" content="no" /><![endif]-->
103               
104                <!-- Head Scripts -->
105                        </head>
106        <body id="jq-interior"  class="mediawiki ns-0 ltr">
107
108        <div id="jq-siteContain">
109                        <div id="jq-header">
110                                <a id="jq-siteLogo" href="http://jquery.com/" title="jQuery Home"><img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" width="215" height="53" alt="jQuery: Write Less, Do More." /></a>
111
112                                <div id="jq-primaryNavigation">
113
114                                        <ul>
115<li class="jq-jquery jq-current"><a href="http://jquery.com/" title="jQuery Home">jQuery</a></li>
116<li class="jq-plugins"><a href="http://plugins.jquery.com/" title="jQuery Plugins">Plugins</a></li>
117<li class="jq-ui"><a href="http://jqueryui.com/" title="jQuery UI">UI</a></li>
118<li class="jq-meetup"><a href="http://meetups.jquery.com/" title="jQuery Meetups">Meetups</a></li>
119<li class="jq-forum"><a href="http://forum.jquery.com/" title="jQuery Forum">Forum</a></li>
120<li class="jq-blog"><a href="http://blog.jquery.com/" title="jQuery Blog">Blog</a></li>
121<li class="jq-about"><a href="http://jquery.org/about" title="About jQuery">About</a></li>
122<li class="jq-donate"><a href="http://jquery.org/donate" title="Donate to jQuery">Donate</a></li>
123                                        </ul>
124                                </div><!-- /#primaryNavigation -->
125
126                                <div id="jq-secondaryNavigation">
127                                        <ul>
128                                                <li class="jq-download jq-first"><a href="http://docs.jquery.com/Downloading_jQuery">Download</a></li>
129                                                <li class="jq-documentation jq-current"><a href="http://docs.jquery.com/">Documentation</a></li>
130                                                <li class="jq-tutorials"><a href="http://docs.jquery.com/Tutorials">Tutorials</a></li>
131
132                                                <li class="jq-bugTracker"><a href="http://dev.jquery.com/">Bug Tracker</a></li>
133                                                <li class="jq-discussion jq-last"><a href="http://docs.jquery.com/Discussion">Discussion</a></li>
134                                        </ul>
135                                </div><!-- /#secondaryNavigation -->
136
137                               
138
139                                <h1>Documentation</h1>
140
141                                <form id="jq-primarySearchForm" action="/Special:Search">
142
143                                        <div>
144                                                <input type="hidden" value="1" name="ns0"/>
145                                                <label for="primarySearch">Search <span class="jq-jquery">jQuery</span></label>
146                                                <input type="text" value="" accesskey="f" title="Search jQuery" name="search" id="jq-primarySearch"/>
147                                                <button type="submit" name="go" id="jq-searchGoButton"><span>Go</span></button>
148                                        </div>
149
150                                </form>
151
152                        </div><!-- /#header -->
153
154                        <div id="jq-content" class="jq-clearfix">
155
156                                <div id="jq-interiorNavigation">
157                                        <div class='jq-portlet' id='jq-p-Getting-Started'>
158                                                <h5>Getting Started</h5>
159                                                <div class='jq-pBody'>
160
161                                                        <ul>
162
163                                                                <li id="jq-n-Main-Page"><a href="/Main_Page">Main Page</a></li>
164                                                                <li id="jq-n-Downloading-jQuery"><a href="/Downloading_jQuery">Downloading jQuery</a></li>
165                               
166                                                                <li id="jq-n-How-jQuery-Works"><a href="/How_jQuery_Works">How jQuery Works</a></li>
167                                                                <li id="jq-n-FAQ"><a href="/Frequently_Asked_Questions">FAQ</a></li>
168                                                                <li id="jq-n-Tutorials"><a href="/Tutorials">Tutorials</a></li>
169
170                                                                <li id="jq-n-Using-jQuery-with-Other-Libraries"><a href="/Using_jQuery_with_Other_Libraries">Using jQuery with Other Libraries</a></li>
171
172                                                                <li id="jq-n-Variable-Types"><a href="/Types">Variable Types</a></li>
173                                                        </ul>
174                               
175                                                </div>
176                                        </div>
177                                                <div class='jq-portlet' id='jq-p-API-Reference'>
178                                                <h5>API Reference</h5>
179
180                                                <div class='jq-pBody'>
181
182                                                        <ul>
183                                                                <li id="jq-n-jQuery-Core"><a href="/Core">jQuery Core</a></li>
184                                                                <li id="jq-n-Selectors"><a href="/Selectors">Selectors</a></li>
185                               
186                                                                <li id="jq-n-Attributes"><a href="/Attributes">Attributes</a></li>
187                                                                <li id="jq-n-Traversing"><a href="/Traversing">Traversing</a></li>
188                                                                <li id="jq-n-Manipulation"><a href="/Manipulation">Manipulation</a></li>
189
190                                                                <li id="jq-n-CSS"><a href="/CSS">CSS</a></li>
191                                                                <li id="jq-n-Events"><a href="/Events">Events</a></li>
192                                                                <li id="jq-n-Effects"><a href="/Effects">Effects</a></li>
193                               
194                                                                <li id="jq-n-Ajax"><a href="/Ajax">Ajax</a></li>
195                                                                <li id="jq-n-Utilities"><a href="/Utilities">Utilities</a></li>
196                                                                <li id="jq-n-jQuery-UI"><a href="/UI">jQuery UI</a></li>
197
198                                                        </ul>
199                                                </div>
200                                        </div>
201                                                <div class='jq-portlet' id='jq-p-Plugins'>
202                               
203                                                <h5>Plugins</h5>
204                                                <div class='jq-pBody'>
205                                                        <ul>
206                                                                <li id="jq-n-Plugin-Repository"><a href="http://jquery.com/plugins/">Plugin Repository</a></li>
207
208                                                                <li id="jq-n-Authoring"><a href="/Plugins/Authoring">Authoring</a></li>
209                                                        </ul>
210                                                </div>
211                               
212                                        </div>
213                                                <div class='jq-portlet' id='jq-p-Support'>
214                                                <h5>Support</h5>
215                                                <div class='jq-pBody'>
216
217                                                        <ul>
218
219                                                                <li id="jq-n-Mailing-List-and-Chat"><a href="/Discussion">Mailing List and Chat</a></li>
220                                                                <li id="jq-n-Submit-New-Bug"><a href="http://jquery.com/dev/bugs/new/">Submit New Bug</a></li>
221                                                                <li id="jq-n-Commercial-Support"><a href="/Commercial_Support">Commercial Support</a></li>
222                               
223                                                        </ul>
224                                                </div>
225                                        </div>
226                                                <div class='jq-portlet' id='jq-p-About-jQuery'>
227
228                                                <h5>About jQuery</h5>
229
230                                                <div class='jq-pBody'>
231                                                        <ul>
232                                                                <li id="jq-n-Contributors"><a href="/Contributors">Contributors</a></li>
233                               
234                                                                <li id="jq-n-History-of-jQuery"><a href="/History_of_jQuery">History of jQuery</a></li>
235                                                                <li id="jq-n-Sites-Using-jQuery"><a href="/Sites_Using_jQuery">Sites Using jQuery</a></li>
236
237                                                                <li id="jq-n-Browser-Compatibility"><a href="/Browser_Compatibility">Browser Compatibility</a></li>
238                                                                <li id="jq-n-License"><a href="/Licensing">Licensing</a></li>
239
240                                                                <li id="jq-n-Donate"><a href="/Donate">Donate</a></li>
241                                                        </ul>
242                               
243                                                </div>
244                                        </div>
245                                               
246        <div class="jq-portlet" id="p-tb">
247                <h5>Toolbox</h5>
248                <div class="jq-pBody">
249                        <ul>
250                                <li id="t-whatlinkshere"><a href="/index.php?title=Special:Whatlinkshere&amp;target=Tutorials%3AHow_jQuery_Works">What links here</a></li>
251                                <li id="t-recentchangeslinked"><a href="/index.php?title=Special:Recentchangeslinked&amp;target=Tutorials%3AHow_jQuery_Works">Related changes</a></li>
252<li id="t-upload"><a href="/Special:Upload">Upload file</a></li>
253<li id="t-specialpages"><a href="/Special:Specialpages">Special pages</a></li>
254                                <li id="t-print"><a href="/action/render/Tutorials:How_jQuery_Works">Printable version</a></li>                         <li id="t-permalink"><a href="/index.php?title=Tutorials:How_jQuery_Works&amp;oldid=20221">Permanent link</a></li>                      </ul>
255                </div>
256        </div>
257
258        <div id="jq-p-cactions" class="jq-portlet">
259                <h5>Views</h5>
260                <div class="jq-pBody">
261                <ul>
262                                 <li id="jq-ca-nstab-main" class="selected"><a href="/Tutorials:How_jQuery_Works">Article</a></li>
263                                 <li id="jq-ca-talk"><a href="/Talk:Tutorials:How_jQuery_Works">Discussion</a></li>
264                                 <li id="jq-ca-edit"><a href="/action/edit/Tutorials:How_jQuery_Works">Edit</a></li>
265                                 <li id="jq-ca-history"><a href="/action/history/Tutorials:How_jQuery_Works">History</a></li>
266                </ul>
267                </div>
268        </div>
269        <div class="jq-portlet" id="jq-p-personal">
270                <h5>Personal tools</h5>
271                <div class="jq-pBody">
272                        <ul>
273                                <li id="jq-pt-login"><a href="/index.php?title=Special:Userlogin&amp;returnto=Tutorials:How_jQuery_Works">Log in / create account</a></li>
274                        </ul>
275                </div>
276        </div>
277
278                                       
279                                </div><!-- /#interiorNavigation -->
280
281
282
283
284
285                                <div id="jq-primaryContent">
286                <div id="column-content">
287        <div id="docs-content">
288                <a name="top" id="top"></a>
289                                <!--<div style="background:#efefff; border:#9f9fff 1px solid; padding: 10px;"><strong>UPDATE:</strong> The jQuery API documentation has been completely rewritten and moved to <a href="http://api.jquery.com/">api.jquery.com</a>. More details <a href="http://jquery14.com/pre-release-1/new-jquery-api-site">can be found on the jQuery blog</a>.</div>-->
290                <h1 class="firstHeading">Tutorials:How jQuery Works</h1>
291                <div id="bodyContent">
292                        <h3 id="siteSub">From jQuery JavaScript Library</h3>
293                        <div id="contentSub"></div>
294                                                                        <div id="jump-to-nav">Jump to: <a href="#column-one">navigation</a>, <a href="#searchInput">search</a></div>                    <!-- start content -->
295                        <div style="padding:10px;margin:10px;background:#F5F5F5;border:1px solid #DDD;">
296<p><big>A basic introduction to jQuery and the concepts that you need to know to use it.</big>
297</p><p><b>Original:</b> <a href="http://docs.jquery.com/Tutorials:How_jQuery_Works" class="external free" title="http://docs.jquery.com/Tutorials:How_jQuery_Works">http://docs.jquery.com/Tutorials:How_jQuery_Works</a><br />
298<b>Author:</b> <a href="http://ejohn.org/" class="external text" title="http://ejohn.org/">John Resig.</a>
299</p>
300Similar Tutorials:&nbsp;<a href="/Category:JQuery_Core" title="Category:JQuery Core">jQuery Core</a>,&nbsp;<a href="/Category:Selectors" title="Category:Selectors">Selectors</a>,&nbsp;<a href="/Category:CSS" title="Category:CSS">CSS</a>,&nbsp;<a href="/Category:Traversing" title="Category:Traversing">Traversing</a>,&nbsp;<a href="/Category:Manipulation" title="Category:Manipulation">Manipulation</a>,&nbsp;<a href="/Category:Events" title="Category:Events">Events</a>,&nbsp;<a href="/Category:Effects" title="Category:Effects">Effects</a></div>
301<table id="toc" class="toc" summary="Contents"><tr><td><div id="toctitle"><h2>Contents</h2></div>
302<ul>
303<li class="toclevel-1"><a href="#jQuery:_The_Basics"><span class="tocnumber">1</span> <span class="toctext">jQuery: The Basics</span></a></li>
304<li class="toclevel-1"><a href="#Launching_Code_on_Document_Ready"><span class="tocnumber">2</span> <span class="toctext">Launching Code on Document Ready</span></a></li>
305<li class="toclevel-1"><a href="#Complete_Example"><span class="tocnumber">3</span> <span class="toctext">Complete Example</span></a></li>
306<li class="toclevel-1"><a href="#Adding_and_Removing_an_HTML_Class"><span class="tocnumber">4</span> <span class="toctext">Adding and Removing an HTML Class</span></a></li>
307<li class="toclevel-1"><a href="#Special_Effects"><span class="tocnumber">5</span> <span class="toctext">Special Effects</span></a></li>
308<li class="toclevel-1"><a href="#Callback_and_Functions"><span class="tocnumber">6</span> <span class="toctext">Callback and Functions</span></a>
309<ul>
310<li class="toclevel-2"><a href="#Callback_without_arguments"><span class="tocnumber">6.1</span> <span class="toctext">Callback without arguments</span></a></li>
311<li class="toclevel-2"><a href="#Callback_with_arguments"><span class="tocnumber">6.2</span> <span class="toctext">Callback with arguments</span></a>
312<ul>
313<li class="toclevel-3"><a href="#Wrong"><span class="tocnumber">6.2.1</span> <span class="toctext">Wrong</span></a></li>
314<li class="toclevel-3"><a href="#Right"><span class="tocnumber">6.2.2</span> <span class="toctext">Right</span></a></li>
315</ul>
316</li>
317</ul>
318</li>
319<li class="toclevel-1"><a href="#More_Reading"><span class="tocnumber">7</span> <span class="toctext">More Reading</span></a></li>
320</ul>
321</td></tr></table><script type="text/javascript"> if (window.showTocToggle) { var tocShowText = "show"; var tocHideText = "hide"; showTocToggle(); } </script>
322<div class="editsection" style="float:right;margin-left:5px;">[<a href="/action/edit/Tutorials:How_jQuery_Works?section=1" title="Edit section: jQuery: The Basics">edit</a>]</div><a name="jQuery:_The_Basics"></a><h3> jQuery: The Basics </h3>
323<p>This is a basic tutorial, designed to help you get started using jQuery. If you don't have a test page setup yet, start by creating a new HTML page with the following contents:
324</p>
325<pre>
326&lt;!doctype html&gt;
327&lt;html&gt;
328  &lt;head&gt;
329    &lt;script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;&gt;&lt;/script&gt;
330
331    &lt;script type=&quot;text/javascript&quot;&gt;
332     
333    &lt;/script&gt;
334  &lt;/head&gt;
335  &lt;body&gt;
336    &lt;a href=&quot;http://jquery.com/&quot;&gt;jQuery&lt;/a&gt;
337  &lt;/body&gt;
338&lt;/html&gt;
339</pre>
340<p>Edit the <code>src</code> attribute in the script tag to point to your copy of jquery.js.
341For example, if jquery.js is in the same directory as your HTML file, you
342can use:
343</p>
344<pre> &lt;script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;&gt;&lt;/script&gt;
345</pre>
346<p>You can download your own copy of jQuery from the <a href="/Downloading_jQuery" title="Downloading jQuery">Downloading jQuery</a> page
347</p>
348<div class="editsection" style="float:right;margin-left:5px;">[<a href="/action/edit/Tutorials:How_jQuery_Works?section=2" title="Edit section: Launching Code on Document Ready">edit</a>]</div><a name="Launching_Code_on_Document_Ready"></a><h3> Launching Code on Document Ready </h3>
349<p>The first thing that most Javascript programmers end up doing is adding some code to their program, similar to this:
350</p>
351<pre> window.onload = function(){ alert("welcome"); }
352</pre>
353<p>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.
354</p><p>To circumvent both problems, jQuery has a simple statement that checks the <code>document</code> and waits until it's ready to be manipulated, known as the <a href="/Events#ready.28_fn_.29" title="Events">ready event</a>:
355</p>
356<pre> $(document).ready(function(){
357   // Your code here
358 });
359</pre>
360<p>Inside the ready event, add a click handler to the link:
361</p>
362<pre> $(document).ready(function(){
363   <b>$("a").click(function(event){
364     alert("Thanks for visiting!");
365   });</b>
366 });
367</pre>
368<p>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.
369</p><p>For click and most other <a href="/Events" title="Events">events</a>, you can prevent the default behaviour - here, following the link to jquery.com - by calling event.preventDefault() in the event handler:
370</p>
371<pre> $(document).ready(function(){
372   $("a").click(function(<b>event</b>){
373     alert("As you can see, the link no longer took you to jquery.com");
374     <b>event.preventDefault();</b>
375   });
376 });
377</pre>
378<div class="editsection" style="float:right;margin-left:5px;">[<a href="/action/edit/Tutorials:How_jQuery_Works?section=3" title="Edit section: Complete Example">edit</a>]</div><a name="Complete_Example"></a><h3> Complete Example </h3>
379<p>The following is an example of what the complete HTML file might look like if you were to use the script in your own file. Note that it links to Google's <a href="http://code.google.com/apis/libraries/" class="external text" title="http://code.google.com/apis/libraries/">CDN</a> to load the jQuery core file. Also, while the custom script is included in the &lt;head&gt;, it is generally preferable to place it in a separate file and refer that file with the script element's src attribute
380</p>
381<pre> &lt;!DOCTYPE html&gt;
382 &lt;html lang="en"&gt;
383 &lt;head&gt;
384   &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
385   &lt;script src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" class="external free" title="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js</a>" type="text/javascript"&gt;&lt;/script&gt;
386   &lt;script type="text/javascript"&gt;
387     $(document).ready(function(){
388       $("a").click(function(event){
389         alert("As you can see, the link no longer took you to jquery.com");
390         event.preventDefault();
391       });
392     });
393     
394   &lt;/script&gt;
395 &lt;/head&gt;
396 &lt;body&gt;
397   &lt;a href=&quot;<a href="http://jquery.com/" class="external free" title="http://jquery.com/">http://jquery.com/</a>"&gt;jQuery&lt;/a&gt;
398 &lt;/body&gt;
399 &lt;/html&gt;
400</pre>
401<div class="editsection" style="float:right;margin-left:5px;">[<a href="/action/edit/Tutorials:How_jQuery_Works?section=4" title="Edit section: Adding and Removing an HTML Class">edit</a>]</div><a name="Adding_and_Removing_an_HTML_Class"></a><h3> Adding and Removing an HTML Class </h3>
402<p><strong>Important:</strong> <em>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 <a href="#Launching_Code_on_Document_Ready" title="">Launching Code on Document Ready</a> above for details.</em>
403</p><p>Another common task is adding (or removing) a <code>class</code>.
404</p><p>First, add some style information into the &lt;head&gt; of your document, like this:
405</p>
406<pre> &lt;style type="text/css"&gt;
407    a.test { font-weight: bold; }
408 &lt;/style&gt;
409</pre>
410<p>Next, add the <a href="/Attributes/addClass" title="Attributes/addClass">addClass</a> call to your script:
411</p>
412<pre>  $("a").addClass("test");
413</pre>
414<p>All your <code>a</code> elements will now be bold.
415</p><p>To remove the <code>class</code>, use <a href="/Attributes/removeClass" title="Attributes/removeClass">removeClass</a>
416</p>
417<pre> $("a").removeClass("test");
418</pre>
419<ul><li>(HTML allows multiple classes to be added to an element.)
420</li></ul>
421<div class="editsection" style="float:right;margin-left:5px;">[<a href="/action/edit/Tutorials:How_jQuery_Works?section=5" title="Edit section: Special Effects">edit</a>]</div><a name="Special_Effects"></a><h3> Special Effects </h3>
422<p>In jQuery, a couple of handy <a href="/Effects" title="Effects">effects</a> are provided, to really make your web site stand out. To put this to the test, change the click that you added earlier to this:
423</p>
424<pre> $("a").click(function(event){
425   event.preventDefault();
426   $(this).hide("slow");
427 });
428</pre>
429<p>Now, if you click any link, it should make itself slowly disappear.
430</p><p><br />
431</p>
432<div class="editsection" style="float:right;margin-left:5px;">[<a href="/action/edit/Tutorials:How_jQuery_Works?section=6" title="Edit section: Callback and Functions">edit</a>]</div><a name="Callback_and_Functions"></a><h2> Callback and Functions </h2>
433<p>A callback is a function that is passed as an argument to another function and is executed after its parent function has completed. The special thing about a callback is that functions that appear after the "parent" can execute before the callback executes.
434Another important thing to know is how to properly pass the callback. This is where I have often forgotten the proper syntax.
435</p>
436<div class="editsection" style="float:right;margin-left:5px;">[<a href="/action/edit/Tutorials:How_jQuery_Works?section=7" title="Edit section: Callback without arguments">edit</a>]</div><a name="Callback_without_arguments"></a><h3> Callback <em>without</em> arguments </h3>
437<p>For a callback with no arguments you pass it like this:
438</p>
439<pre> $.get('myhtmlpage.html', myCallBack);
440</pre>
441<p><b>Note</b> that the second parameter here is simply the function name (but <i>not</i> 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.
442</p>
443<div class="editsection" style="float:right;margin-left:5px;">[<a href="/action/edit/Tutorials:How_jQuery_Works?section=8" title="Edit section: Callback with arguments">edit</a>]</div><a name="Callback_with_arguments"></a><h3> Callback <em>with</em> arguments </h3>
444<p>"What do you do if you have arguments that you want to pass?", you might ask yourself.
445</p>
446<div class="editsection" style="float:right;margin-left:5px;">[<a href="/action/edit/Tutorials:How_jQuery_Works?section=9" title="Edit section: Wrong">edit</a>]</div><a name="Wrong"></a><h4> Wrong </h4>
447<p>The Wrong Way (will <b>not</b> work!)
448</p>
449<pre> $.get('myhtmlpage.html', myCallBack(param1, param2));
450</pre>
451<p><br />
452This will not work because it calls
453</p>
454<pre>myCallBack(param1, param2)
455</pre>
456<p>and then passes the return value as the second parameter to <code><a href="/Ajax" title="Ajax">$.get()</a></code>
457</p>
458<div class="editsection" style="float:right;margin-left:5px;">[<a href="/action/edit/Tutorials:How_jQuery_Works?section=10" title="Edit section: Right">edit</a>]</div><a name="Right"></a><h4> Right </h4>
459<p>The problem with the above example is that myCallBack(param1, param2) is evaluated before being passed as a function. Javascript and by extension jQuery expects a function pointer in cases like these. I.E. setTimeout function.
460</p><p>In the below usage, an anonymous function is created (just a block of statements) and is registered as the callback function.  Note the use of 'function(){'.  The anonymous function does exactly one thing:  calls myCallBack, with the values of param1 and param2 in the outer scope.
461</p>
462<pre>$.get('myhtmlpage.html', function(){
463  myCallBack(param1, param2);
464});
465</pre>
466<p>param1 and param2 are evaluated as a callback when the '$.get' is done getting the page.
467</p><p><br />
468</p>
469<div class="editsection" style="float:right;margin-left:5px;">[<a href="/action/edit/Tutorials:How_jQuery_Works?section=11" title="Edit section: More Reading">edit</a>]</div><a name="More_Reading"></a><h2> More Reading </h2>
470<p>From here, you should probably begin looking at the rest of the <a href="/Main_Page" title="Main Page">Documentation</a> - it's very comprehensive and covers all aspects of jQuery. If you have any questions, please feel free to send a message to the jQuery Forums
471</p><!--
472Pre-expand include size: 3869 bytes
473Post-expand include size: 2761 bytes
474Template argument size: 1192 bytes
475Maximum: 2097152 bytes
476-->
477
478<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:1498-0!1!0!!en!2 and timestamp 20100822135550 -->
479<div class="printfooter">
480Retrieved from "<a href="http://docs.jquery.com/Tutorials:How_jQuery_Works">http://docs.jquery.com/Tutorials:How_jQuery_Works</a>"</div>
481                        <div id="catlinks"><p class='catlinks'><a href="/index.php?title=Special:Categories&amp;article=Tutorials%3AHow_jQuery_Works" title="Special:Categories">Categories</a>: <span dir='ltr'><a href="/Category:JQuery_Core" title="Category:JQuery Core">JQuery Core</a></span> | <span dir='ltr'><a href="/Category:Selectors" title="Category:Selectors">Selectors</a></span> | <span dir='ltr'><a href="/Category:CSS" title="Category:CSS">CSS</a></span> | <span dir='ltr'><a href="/Category:Traversing" title="Category:Traversing">Traversing</a></span> | <span dir='ltr'><a href="/Category:Manipulation" title="Category:Manipulation">Manipulation</a></span> | <span dir='ltr'><a href="/Category:Events" title="Category:Events">Events</a></span> | <span dir='ltr'><a href="/Category:Effects" title="Category:Effects">Effects</a></span> | <span dir='ltr'><a href="/Category:Tutorials" title="Category:Tutorials">Tutorials</a></span></p></div>                       <!-- end content -->
482                        <div class="visualClear"></div>
483                </div>
484        </div>
485                </div>
486
487                                </div><!-- /#primaryContent -->
488
489                               
490                               
491                               
492                        </div><!-- /#content -->
493
494
495                        <div id="jq-footer" class="jq-clearfix">
496
497                                <div id="jq-credits">
498                                <p id="jq-copyright">&copy; 2010 <a href="http://jquery.org/">The jQuery Project</a></p>
499                                <p id="jq-hosting">Sponsored by <a href="http://mediatemple.net" class="jq-mediaTemple">Media Temple</a> and <a href="http://jquery.org/sponsors">others</a>.</p>
500                                </div>
501
502                                <div id="jq-footerNavigation">
503                                        <ul>
504                                                <li class="jq-download jq-first"><a href="http://docs.jquery.com/Downloading_jQuery">Download</a></li>
505                                                <li class="jq-documentation jq-current"><a href="http://docs.jquery.com/">Documentation</a></li>
506                                                <li class="jq-tutorials"><a href="http://docs.jquery.com/Tutorials">Tutorials</a></li>
507                                                <li class="jq-bugTracker"><a href="http://dev.jquery.com/">Bug Tracker</a></li>
508                                                <li class="jq-discussion jq-last"><a href="http://docs.jquery.com/Discussion">Discussion</a></li>
509                                        </ul>
510                                </div><!-- /#secondaryNavigation -->
511                               
512                        </div><!-- /#footer -->
513
514
515        </div><!-- /#siteContain -->
516
517<script type="text/javascript">
518var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-1076265-1']); _gaq.push(['_trackPageview']); _gaq.push(['_setDomainName', '.jquery.com']);
519(function() {var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
520ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
521(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);})();
522</script>
523        </body>
524<!-- Cached 20100822135551 -->
525</html>
526