From aedb19a8139b43a7d33f14db3730b2b8b48129d6 Mon Sep 17 00:00:00 2001 From: Connor Cartwright Date: Tue, 10 May 2016 23:40:30 +0100 Subject: [PATCH 01/25] Updated order file ready for new files, removed the old 'how-jquery-works' --- order.json | 3 +- page/about-jquery/how-jquery-works.md | 210 -------------------------- 2 files changed, 2 insertions(+), 211 deletions(-) delete mode 100644 page/about-jquery/how-jquery-works.md diff --git a/order.json b/order.json index ee998761..39da7185 100644 --- a/order.json +++ b/order.json @@ -4,7 +4,8 @@ "contributing", { "about-jquery": [ - "how-jquery-works", + "how-to-setup-jquery", + "using-jquery", "additional-support" ] }, diff --git a/page/about-jquery/how-jquery-works.md b/page/about-jquery/how-jquery-works.md deleted file mode 100644 index 33cfb0cb..00000000 --- a/page/about-jquery/how-jquery-works.md +++ /dev/null @@ -1,210 +0,0 @@ - - -### 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: - -``` - - - - - Demo - - - jQuery - - - - -``` - -The `src` attribute in the ` - - - -``` - -### Adding and Removing an HTML Class - -
**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. - -First, add some style information into the `` of the document, like this: - -``` - -``` - -Next, add the [.addClass()](http://api.jquery.com/addClass/) call to the script: - -``` -$( "a" ).addClass( "test" ); -``` - -All `` elements are now bold. - -To remove an existing class, use [.removeClass()](http://api.jquery.com/removeClass/): - -``` -$( "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: - -``` -$( "a" ).click(function( event ) { - - event.preventDefault(); - - $( this ).hide( "slow" ); - -}); -``` - -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. - -To use callbacks, it is important to know how to pass them into their parent function. - -### Callback *without* Arguments - -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:** The second parameter here is simply the function name (but *not* as a string, and without parentheses). - -### Callback *with* Arguments - -Executing callbacks with arguments can be tricky. - -#### Wrong - -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? - -#### 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`. - -``` -$.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 )`. From 5ec5a7e841cc940e6ef5352513a13b3bc5622194 Mon Sep 17 00:00:00 2001 From: Connor Cartwright Date: Tue, 10 May 2016 23:40:48 +0100 Subject: [PATCH 02/25] Added the new setup and using jQuery files --- page/about-jquery/how-to-setup-jquery.md | 88 +++++++++++++ page/about-jquery/using-jquery.md | 160 +++++++++++++++++++++++ 2 files changed, 248 insertions(+) create mode 100644 page/about-jquery/how-to-setup-jquery.md create mode 100644 page/about-jquery/using-jquery.md diff --git a/page/about-jquery/how-to-setup-jquery.md b/page/about-jquery/how-to-setup-jquery.md new file mode 100644 index 00000000..de7010bb --- /dev/null +++ b/page/about-jquery/how-to-setup-jquery.md @@ -0,0 +1,88 @@ + + +### jQuery: Setup + +This is a basic tutorial, designed to help you get started using jQuery. Start by creating the following HTML page named `index.html` and open it in the browser: + +``` + + + + + Demo + + +jQuery + + + + +``` + +The `src` attribute in the first ` + +### jQuery Fundamentals + +This tutorial will help you try out some common uses of jQuery. + +If you haven't setup a demo HTML page that includes a copy of jQuery, see [How To Setup jQuery](http://learn.jquery.com/about-jquery/how-to-setup-jQuery/) for the complete tutorial on how to get started, or simply follow along with the examples below. + +### Adding and Removing an HTML Class + +jQuery is often used to bind events to elements in the DOM, assigning them functionality to be triggered by a user's actions on the page. To demonstrate, let's highlight the menu item a user last clicked by changing its HTML class to "active", and assigning the "active" class a different appearance using CSS. + +First, copy or create the `index.html` file below: + +``` +// index.html + + + + + Demo + + + + + + + + +``` + +The ` From 658f1a2f0e68595f6c87340e6cf7b49a29b02a8e Mon Sep 17 00:00:00 2001 From: Connor Cartwright Date: Fri, 17 Jun 2016 01:08:48 +0100 Subject: [PATCH 06/25] Suggested using CDN as an alternative --- page/about-jquery/how-to-setup-jquery.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/page/about-jquery/how-to-setup-jquery.md b/page/about-jquery/how-to-setup-jquery.md index 1c133237..a4d76faf 100644 --- a/page/about-jquery/how-to-setup-jquery.md +++ b/page/about-jquery/how-to-setup-jquery.md @@ -24,6 +24,8 @@ This is a basic tutorial, designed to help you get started using jQuery. Start b The `src` attribute in the first ` - + ``` From 92711cebe9bb5554accf0253edb150ba236843a6 Mon Sep 17 00:00:00 2001 From: Connor Cartwright Date: Fri, 17 Jun 2016 01:25:58 +0100 Subject: [PATCH 15/25] Moved CSS to head --- page/about-jquery/using-jquery.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/page/about-jquery/using-jquery.md b/page/about-jquery/using-jquery.md index 1069ede7..224c0b53 100644 --- a/page/about-jquery/using-jquery.md +++ b/page/about-jquery/using-jquery.md @@ -22,6 +22,7 @@ First, copy or create the `index.html` file below: Demo + - ``` From 56db1b15439f3dced99b23091e287bf889979295 Mon Sep 17 00:00:00 2001 From: Connor Cartwright Date: Fri, 17 Jun 2016 01:34:08 +0100 Subject: [PATCH 16/25] Corrected description --- page/about-jquery/using-jquery.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/page/about-jquery/using-jquery.md b/page/about-jquery/using-jquery.md index 224c0b53..bec3c21a 100644 --- a/page/about-jquery/using-jquery.md +++ b/page/about-jquery/using-jquery.md @@ -38,7 +38,7 @@ First, copy or create the `index.html` file below: ``` -The ` @@ -40,7 +40,7 @@ First, copy or create the `index.html` file below: The tag references the `main.css` file. The `