From c3cb4c31b2da71db8a15b70e2af168d0178264db Mon Sep 17 00:00:00 2001 From: Markus Amalthea Magnuson Date: Sun, 14 Apr 2013 19:38:03 +0200 Subject: [PATCH 01/12] Unwrap body text. --- page/about-jquery/how-jquery-works.md | 49 +++++++-------------------- 1 file changed, 13 insertions(+), 36 deletions(-) diff --git a/page/about-jquery/how-jquery-works.md b/page/about-jquery/how-jquery-works.md index f21205db..ac2c1cb5 100644 --- a/page/about-jquery/how-jquery-works.md +++ b/page/about-jquery/how-jquery-works.md @@ -2,10 +2,10 @@ 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: ``` @@ -24,14 +24,11 @@ don't have a test page setup yet, start by creating the following HTML page: ``` -The `src` attribute in the ` From 47a19ef60d8d62946407a716c263fb58bef7e9e4 Mon Sep 17 00:00:00 2001 From: Markus Amalthea Magnuson Date: Sun, 14 Apr 2013 19:41:23 +0200 Subject: [PATCH 03/12] Remove (IMO) improper inline code markdown. --- page/about-jquery/how-jquery-works.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/page/about-jquery/how-jquery-works.md b/page/about-jquery/how-jquery-works.md index 54d2751c..21635400 100644 --- a/page/about-jquery/how-jquery-works.md +++ b/page/about-jquery/how-jquery-works.md @@ -38,7 +38,7 @@ window.onload = function() { } ``` -Unfortunately, the code doesn't run until all images are finished downloading, including banner ads. To run code as soon as the `document` is ready to be manipulated, jQuery has a statement known as the [ready event](http://api.jquery.com/ready): +Unfortunately, the code doesn't run until all images are finished downloading, including banner ads. To run code as soon as the document is ready to be manipulated, jQuery has a statement known as the [ready event](http://api.jquery.com/ready): ``` $( document ).ready(function() { From 016ff1052ef5939ddc7cbb9b69246b36da494649 Mon Sep 17 00:00:00 2001 From: Markus Amalthea Magnuson Date: Sun, 14 Apr 2013 19:42:13 +0200 Subject: [PATCH 04/12] Add trailing slashed to avoid extra redirects. --- page/about-jquery/how-jquery-works.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/page/about-jquery/how-jquery-works.md b/page/about-jquery/how-jquery-works.md index 21635400..bd9257c2 100644 --- a/page/about-jquery/how-jquery-works.md +++ b/page/about-jquery/how-jquery-works.md @@ -38,7 +38,7 @@ window.onload = function() { } ``` -Unfortunately, the code doesn't run until all images are finished downloading, including banner ads. To run code as soon as the document is ready to be manipulated, jQuery has a statement known as the [ready event](http://api.jquery.com/ready): +Unfortunately, the code doesn't run until all images are finished downloading, including banner ads. To run code as soon as the document is ready to be manipulated, jQuery has a statement known as the [ready event](http://api.jquery.com/ready/): ``` $( document ).ready(function() { @@ -111,7 +111,7 @@ 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" ); @@ -119,7 +119,7 @@ $( "a" ).addClass( "test" ); All `a` 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" ); From 390e1cbe4a500c35ed88a2252ee5769918e41cc2 Mon Sep 17 00:00:00 2001 From: Markus Amalthea Magnuson Date: Sun, 14 Apr 2013 19:47:41 +0200 Subject: [PATCH 05/12] Space out some code examples. --- page/about-jquery/how-jquery-works.md | 27 ++++++++++++++++++++++++--- 1 file changed, 24 insertions(+), 3 deletions(-) diff --git a/page/about-jquery/how-jquery-works.md b/page/about-jquery/how-jquery-works.md index bd9257c2..b22097bc 100644 --- a/page/about-jquery/how-jquery-works.md +++ b/page/about-jquery/how-jquery-works.md @@ -34,15 +34,20 @@ To ensure that their code runs after the browser finishes loading the document, ``` window.onload = function() { + alert( "welcome" ); + } ``` Unfortunately, the code doesn't run until all images are finished downloading, including banner ads. To run code as soon as the document is ready to be manipulated, jQuery has a statement known as the [ready event](http://api.jquery.com/ready/): ``` + $( document ).ready(function() { - // Your code here + + // Your code here. + }); ``` @@ -50,9 +55,13 @@ For example, inside the `ready` event, you can add a click handler to the link: ``` $( document ).ready(function() { + $( "a" ).click(function( event ) { + alert( "Thanks for visiting!" ); + }); + }); ``` @@ -62,10 +71,15 @@ For `click` and most other [events](http://api.jquery.com/category/events/), you ``` $( document ).ready(function() { + $( "a" ).click(function( event ) { + alert( "As you can see, the link no longer took you to jquery.com" ); + event.preventDefault(); + }); + }); ``` @@ -77,19 +91,21 @@ The following example illustrates the click handling code discussed above, embed - + jQuery @@ -130,9 +146,12 @@ $( "a" ).removeClass( "test" ); 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" ); + }); ``` @@ -174,7 +193,9 @@ To defer executing `myCallBack` with its parameters, you can use an anonymous fu ``` $.get( "myhtmlpage.html", function() { + myCallBack( param1, param2 ); + }); ``` From 43bd00afd61dcafb9dd791e50fa3db35b1ca56a8 Mon Sep 17 00:00:00 2001 From: Markus Amalthea Magnuson Date: Sun, 14 Apr 2013 19:49:16 +0200 Subject: [PATCH 06/12] No need for inline code markdown on "class". --- page/about-jquery/how-jquery-works.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/page/about-jquery/how-jquery-works.md b/page/about-jquery/how-jquery-works.md index b22097bc..ecf82824 100644 --- a/page/about-jquery/how-jquery-works.md +++ b/page/about-jquery/how-jquery-works.md @@ -115,7 +115,7 @@ The following example illustrates the click handling code discussed above, embed **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: From 049c49c199d5d5f8ee4b139fa053a910ca5decc4 Mon Sep 17 00:00:00 2001 From: Markus Amalthea Magnuson Date: Sun, 14 Apr 2013 19:56:10 +0200 Subject: [PATCH 07/12] Fix a few inline code markdowns, and proper method names. --- page/about-jquery/how-jquery-works.md | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/page/about-jquery/how-jquery-works.md b/page/about-jquery/how-jquery-works.md index ecf82824..8c5ea7ec 100644 --- a/page/about-jquery/how-jquery-works.md +++ b/page/about-jquery/how-jquery-works.md @@ -127,7 +127,7 @@ 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" ); @@ -135,7 +135,7 @@ $( "a" ).addClass( "test" ); All `a` 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" ); @@ -171,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 @@ -185,7 +186,7 @@ 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 From ee18e8b00e1e3f035de3eaaf3e18a340324508dc Mon Sep 17 00:00:00 2001 From: Markus Amalthea Magnuson Date: Sun, 14 Apr 2013 19:56:23 +0200 Subject: [PATCH 08/12] `a` -> `` --- page/about-jquery/how-jquery-works.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/page/about-jquery/how-jquery-works.md b/page/about-jquery/how-jquery-works.md index 8c5ea7ec..55812ec7 100644 --- a/page/about-jquery/how-jquery-works.md +++ b/page/about-jquery/how-jquery-works.md @@ -133,7 +133,7 @@ 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/): From b7a95aa52fd2df38a2e029bff83383341721e3dc Mon Sep 17 00:00:00 2001 From: Markus Amalthea Magnuson Date: Sun, 14 Apr 2013 19:56:44 +0200 Subject: [PATCH 09/12] Always initial capital letter, even in continuing sentences. --- page/about-jquery/how-jquery-works.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/page/about-jquery/how-jquery-works.md b/page/about-jquery/how-jquery-works.md index 55812ec7..219fa1d7 100644 --- a/page/about-jquery/how-jquery-works.md +++ b/page/about-jquery/how-jquery-works.md @@ -155,7 +155,7 @@ $( "a" ).click(function( event ) { }); ``` -then the link slowly disappears when clicked. +Then the link slowly disappears when clicked. ## Callbacks and Functions From 9a768dc5995e809ea44b89ed54dbc8b93ff328b3 Mon Sep 17 00:00:00 2001 From: Markus Amalthea Magnuson Date: Sun, 14 Apr 2013 19:56:53 +0200 Subject: [PATCH 10/12] Fix method name. --- page/about-jquery/how-jquery-works.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/page/about-jquery/how-jquery-works.md b/page/about-jquery/how-jquery-works.md index 219fa1d7..6188c3b1 100644 --- a/page/about-jquery/how-jquery-works.md +++ b/page/about-jquery/how-jquery-works.md @@ -200,4 +200,4 @@ $.get( "myhtmlpage.html", function() { }); ``` -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 )`. From 620ff883729f206323af3b83ff1dbf5993f8626e Mon Sep 17 00:00:00 2001 From: Markus Amalthea Magnuson Date: Sun, 14 Apr 2013 19:59:26 +0200 Subject: [PATCH 11/12] Proper function name (include parentheses). --- page/about-jquery/how-jquery-works.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/page/about-jquery/how-jquery-works.md b/page/about-jquery/how-jquery-works.md index 6188c3b1..de8adbb9 100644 --- a/page/about-jquery/how-jquery-works.md +++ b/page/about-jquery/how-jquery-works.md @@ -171,7 +171,7 @@ 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. +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). @@ -186,11 +186,11 @@ 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() { From e09752378ea215d7e4c01ef55a97babafa3c37fa Mon Sep 17 00:00:00 2001 From: Markus Amalthea Magnuson Date: Sun, 14 Apr 2013 19:59:35 +0200 Subject: [PATCH 12/12] Remove some double spaces. --- page/about-jquery/how-jquery-works.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/page/about-jquery/how-jquery-works.md b/page/about-jquery/how-jquery-works.md index de8adbb9..5b8dfa00 100644 --- a/page/about-jquery/how-jquery-works.md +++ b/page/about-jquery/how-jquery-works.md @@ -186,11 +186,11 @@ 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() {