diff --git a/page/about-jquery/how-jquery-works.md b/page/about-jquery/how-jquery-works.md index f21205db..5b8dfa00 100644 --- a/page/about-jquery/how-jquery-works.md +++ b/page/about-jquery/how-jquery-works.md @@ -2,50 +2,52 @@ title : How jQuery Works level: beginner --- + ### jQuery: The Basics -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 the following HTML page: +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 the following HTML page: ``` - + jQuery ``` -The `src` attribute in the ` @@ -108,7 +115,7 @@ and load it on the page with a `` element's `src` attribute. **Important:** *You must place the remaining jQuery examples inside the `ready` event so that your code executes when the document is ready to be worked on.* -Another common task is adding or removing a `class`. +Another common task is adding or removing a class. First, add some style information into the `` of the document, like this: @@ -120,15 +127,15 @@ a.test { ``` -Next, add the [addClass()](http://api.jquery.com/addClass) call to the script: +Next, add the [.addClass()](http://api.jquery.com/addClass/) call to the script: ``` $( "a" ).addClass( "test" ); ``` -All `a` elements are now bold. +All `` elements are now bold. -To remove an existing `class`, use [removeClass()](http://api.jquery.com/removeClass): +To remove an existing class, use [.removeClass()](http://api.jquery.com/removeClass/): ``` $( "a" ).removeClass( "test" ); @@ -136,26 +143,23 @@ $( "a" ).removeClass( "test" ); ### Special Effects -jQuery also provides some handy [effects](http://api.jquery.com/category/effects/) -to help you make your web sites stand out. -For example, if you create a click handler of: +jQuery also provides some handy [effects](http://api.jquery.com/category/effects/) to help you make your web sites stand out. For example, if you create a click handler of: ``` -$( "a" ).click(function( event ){ +$( "a" ).click(function( event ) { + event.preventDefault(); + $( this ).hide( "slow" ); + }); ``` -then the link slowly disappears when clicked. +Then the link slowly disappears when clicked. ## Callbacks and Functions -Unlike many other programming languages, JavaScript enables you to freely pass functions around to be executed at a later time. -A *callback* is a function that is passed as an argument to another function and -is executed after its parent function has completed. Callbacks are special because -they patiently wait to execute until their parent finishes. -Meanwhile, the browser can be executing other functions or doing all sorts of other work. +Unlike many other programming languages, JavaScript enables you to freely pass functions around to be executed at a later time. A *callback* is a function that is passed as an argument to another function and is executed after its parent function has completed. Callbacks are special because they patiently wait to execute until their parent finishes. Meanwhile, the browser can be executing other functions or doing all sorts of other work. To use callbacks, it is important to know how to pass them into their parent function. @@ -167,8 +171,9 @@ If a callback has no arguments, you can pass it in like this: $.get( "myhtmlpage.html", myCallBack ); ``` -When [$.get](http://api.jquery.com/jQuery.get/) finishes getting the page `myhtmlpage.html`, it executes the `myCallBack` function. -**Note** that the second parameter here is simply the function name (but *not* as a string and without parentheses). +When [$.get()](http://api.jquery.com/jQuery.get/) finishes getting the page `myhtmlpage.html`, it executes the `myCallBack()` function. + +* **Note:** The second parameter here is simply the function name (but *not* as a string, and without parentheses). ### Callback *with* Arguments @@ -181,22 +186,18 @@ This code example will ***not*** work: $.get( "myhtmlpage.html", myCallBack( param1, param2 ) ); ``` -The reason this fails is that the code executes `myCallBack( param1, param2 )` immediately -and then passes myCallBack's *return value* as the second parameter to `$.get`. -We actually want to pass the function `myCallBack`, not `myCallBack( param1, param2 )`'s return value -(which might or might not be a function). So, how to pass in `myCallBack` *and* include its arguments? +The reason this fails is that the code executes `myCallBack( param1, param2 )` immediately and then passes `myCallBack()`'s *return value* as the second parameter to `$.get()`. We actually want to pass the function `myCallBack()`, not `myCallBack( param1, param2 )`'s return value (which might or might not be a function). So, how to pass in `myCallBack()` *and* include its arguments? #### Right -To defer executing `myCallBack` with its parameters, you can use an anonymous function as a wrapper. -Note the use of `function() {`. The anonymous function does exactly one thing: calls -`myCallBack`, with the values of `param1` and `param2`. +To defer executing `myCallBack()` with its parameters, you can use an anonymous function as a wrapper. Note the use of `function() {`. The anonymous function does exactly one thing: calls `myCallBack()`, with the values of `param1` and `param2`. ``` $.get( "myhtmlpage.html", function() { + myCallBack( param1, param2 ); + }); ``` -When `$.get` finishes getting the page `myhtmlpage.html`, it executes the anonymous function, -which executes `myCallBack( param1, param2 )`. +When `$.get()` finishes getting the page `myhtmlpage.html`, it executes the anonymous function, which executes `myCallBack( param1, param2 )`.