From 68854c1dc2104615b52fdd723047f6ff02aef808 Mon Sep 17 00:00:00 2001 From: Matteo Sisti Sette Date: Sun, 22 Jun 2014 21:02:35 +0200 Subject: [PATCH 001/247] jQuery UI: Fix plugin instance retrieval code The part about retrieving the plugin instance from the dom element using .data() was vague about the key used: it said "the plugin name" without mentioning that the full name is needed, including the namespace and a hyphen as a separator. The code example was plain wrong, using only the bare plugin name, which would not work. Fixes #515 Closes #516 --- page/plugins/stateful-plugins-with-widget-factory.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/page/plugins/stateful-plugins-with-widget-factory.md b/page/plugins/stateful-plugins-with-widget-factory.md index e3e2e3ef..a6b81868 100644 --- a/page/plugins/stateful-plugins-with-widget-factory.md +++ b/page/plugins/stateful-plugins-with-widget-factory.md @@ -229,7 +229,7 @@ bar.progressbar( "option", "value", 100 ); ### The Widget Factory: Under the Hood -When you call `jQuery.widget`, it creates a constructor function for your plugin and sets the object literal that you pass in as the prototype for your plugin instances. All of the functionality that automatically gets added to your plugin comes from a base widget prototype, which is defined as `jQuery.Widget.prototype`. When a plugin instance is created, it is stored on the original DOM element using `jQuery.data`, with the plugin name as the key. +When you call `jQuery.widget`, it creates a constructor function for your plugin and sets the object literal that you pass in as the prototype for your plugin instances. All of the functionality that automatically gets added to your plugin comes from a base widget prototype, which is defined as `jQuery.Widget.prototype`. When a plugin instance is created, it is stored on the original DOM element using `jQuery.data`, with the plugin's full name (the plugin's namespace, plus a hyphen, plus the plugin's name) as the key. For example the jQuery UI dialog widget uses a key of `"ui-dialog"`. Because the plugin instance is directly linked to the DOM element, you can access the plugin instance directly instead of going through the exposed plugin method if you want. This will allow you to call methods directly on the plugin instance instead of passing method names as strings and will also give you direct access to the plugin's properties. @@ -237,7 +237,7 @@ Because the plugin instance is directly linked to the DOM element, you can acces var bar = $( "
") .appendTo( "body" ) .progressbar() - .data( "progressbar" ); + .data( "nmk-progressbar" ); // Call a method directly on the plugin instance. bar.option( "value", 50 ); From daf795981360493ab1f3cafc54ed5741b72219ba Mon Sep 17 00:00:00 2001 From: TJ VanToll Date: Mon, 23 Jun 2014 22:19:24 -0400 Subject: [PATCH 002/247] 0.3.21 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 1dadaf77..f92dd602 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "learn.jquery.com", "title": "jQuery Learning Site", "description": "jQuery Foundation site for learning jQuery and JavaScript", - "version": "0.3.20", + "version": "0.3.21", "homepage": "http://learn.jquery.com", "author": { "name": "jQuery Foundation (http://jquery.org/)" From 8cda04a5ef47efcc0e60aa0212b5ab1223a3731d Mon Sep 17 00:00:00 2001 From: TJ VanToll Date: Thu, 26 Jun 2014 14:19:05 -0400 Subject: [PATCH 003/247] jQuery UI: Removing references to specific version numbers Fixes #519 Closes #520 --- page/jquery-ui/getting-started.md | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/page/jquery-ui/getting-started.md b/page/jquery-ui/getting-started.md index a2c0fe25..66322b53 100644 --- a/page/jquery-ui/getting-started.md +++ b/page/jquery-ui/getting-started.md @@ -32,10 +32,7 @@ You can either choose from the various themes we provide, or you can design your #### Step 3: Choose a Version of jQuery UI -The last step in the Download Builder is to select a version number. This is a very important step because jQuery UI versions are designed to work with specific versions of jQuery. The current versions are: - -* jQuery UI 1.10.2 – Requires jQuery 1.6 or later. -* jQuery UI 1.9.2 – Requires jQuery 1.6 or later. +The last step in the Download Builder is to select a version number. Make sure to check not only what version of jQuery UI you pick, but also the version of jQuery Core that version supports, as different versions of the library support different versions of jQuery. For more information on what's new in each version of jQuery UI, see the project's [upgrade guides](http://jqueryui.com/upgrade-guide/) and [changelogs](http://jqueryui.com/changelog/). #### Click Download! From 10b66c6a4effb6a5e6aa925afc0a37d449a87dd4 Mon Sep 17 00:00:00 2001 From: TJ VanToll Date: Thu, 26 Jun 2014 14:25:52 -0400 Subject: [PATCH 004/247] 0.3.22 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index f92dd602..42c956d6 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "learn.jquery.com", "title": "jQuery Learning Site", "description": "jQuery Foundation site for learning jQuery and JavaScript", - "version": "0.3.21", + "version": "0.3.22", "homepage": "http://learn.jquery.com", "author": { "name": "jQuery Foundation (http://jquery.org/)" From 46f06440b1702c4ceb3a2e1af56a37b0f5d64ac1 Mon Sep 17 00:00:00 2001 From: TJ VanToll Date: Thu, 26 Jun 2014 14:52:00 -0400 Subject: [PATCH 005/247] jQuery UI: Update instructions to reflect file changes in 1.11 --- page/jquery-ui/getting-started.md | 19 +++++-------------- 1 file changed, 5 insertions(+), 14 deletions(-) diff --git a/page/jquery-ui/getting-started.md b/page/jquery-ui/getting-started.md index 66322b53..220d00f9 100644 --- a/page/jquery-ui/getting-started.md +++ b/page/jquery-ui/getting-started.md @@ -38,23 +38,14 @@ The last step in the Download Builder is to select a version number. Make sure t You're finished with the Download Builder! Click the download button and you'll get a customized zip file containing everything you selected. -### After Downloading: Intro to Using jQuery UI - -Once you've downloaded jQuery UI, you'll get a zip containing the following files: - -* `/css/` -* `/development-bundle/` -* `/js/` -* `index.html` - ### Basic Overview: Using jQuery UI on a Web Page -Open up `index.html` in a text editor and you'll see that it links to a few dependencies: your theme, jQuery, and jQuery UI. Generally, you'll need to include these three files on any page to use jQuery UI widgets and interactions: +Next, open up `index.html` from the downloaded zip in a text editor. You'll see that it references your theme, jQuery, and jQuery UI. Generally, you'll need to include these three files on any page to use the jQuery UI widgets and interactions: ```html - - - + + + ``` Once you've included the necessary files, you can add some jQuery widgets to your page. For example, to make a datepicker widget, you'll add a text input element to your page and then call `.datepicker()` on it. Like this: @@ -62,7 +53,7 @@ Once you've included the necessary files, you can add some jQuery widgets to you **HTML:** ```html - + ``` **JavaScript:** From 82cbfa67ca59deff07fc5712483e5662e6cac8a8 Mon Sep 17 00:00:00 2001 From: TJ VanToll Date: Thu, 26 Jun 2014 14:52:26 -0400 Subject: [PATCH 006/247] 0.3.23 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 42c956d6..28a366e6 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "learn.jquery.com", "title": "jQuery Learning Site", "description": "jQuery Foundation site for learning jQuery and JavaScript", - "version": "0.3.22", + "version": "0.3.23", "homepage": "http://learn.jquery.com", "author": { "name": "jQuery Foundation (http://jquery.org/)" From 9ed2dd65e6b0da66b9eefebcb8b85d61339675cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Tue, 27 May 2014 15:25:39 -0400 Subject: [PATCH 007/247] Build: Update license Closes gh-503 --- LICENSE-MIT.txt => LICENSE.txt | 25 +++++++++++++++++++++++-- page/about.md | 2 +- 2 files changed, 24 insertions(+), 3 deletions(-) rename LICENSE-MIT.txt => LICENSE.txt (63%) diff --git a/LICENSE-MIT.txt b/LICENSE.txt similarity index 63% rename from LICENSE-MIT.txt rename to LICENSE.txt index e664703e..2e50ad88 100644 --- a/LICENSE-MIT.txt +++ b/LICENSE.txt @@ -1,8 +1,14 @@ -Copyright (c) 2013 jQuery Foundation, http://jquery.org/ +Copyright 2009, 2014 jQuery Foundation and other contributors, +https://jquery.org/ This software consists of voluntary contributions made by many individuals. For exact contribution history, see the revision history -and logs, available at http://github.com/jquery/learn.jquery.com +available at https://github.com/jquery/learn.jquery.com + +The following license applies to all parts of this software except as +documented below: + +==== Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the @@ -22,3 +28,18 @@ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + +==== + +Copyright and related rights for sample code are waived via CC0. Sample +code is defined as all source code displayed within the prose of the +documentation. + +CC0: http://creativecommons.org/publicdomain/zero/1.0/ + +==== + +All files located in the node_modules directory are externally +maintained libraries used by this software which have their own +licenses; we recommend you read them, as their terms may differ from the +terms above. diff --git a/page/about.md b/page/about.md index c9e1ff25..dc583d53 100644 --- a/page/about.md +++ b/page/about.md @@ -18,7 +18,7 @@ documentation" to our community and serve the following goals: 2. Provide our **contributors** a central, open place to collaborate and provide a dependable, highly sharable resource that will improve our users' support experiences. 3. Foster an environment by which users are encouraged to become contributors and build the skills to help them work on jQuery – or any other open source project! -In order to achieve these goals, all of [this site's content is maintained publicly on GitHub](https://github.com/jquery/learn.jquery.com) and is licensed under the [MIT License](https://github.com/jquery/learn.jquery.com/blob/master/LICENSE-MIT.txt). To learn more about how the site works, take a look at our [contributing guide](/contributing/). +In order to achieve these goals, all of [this site's content is maintained publicly on GitHub](https://github.com/jquery/learn.jquery.com) and is licensed under the [MIT License](https://github.com/jquery/learn.jquery.com/blob/master/LICENSE.txt). To learn more about how the site works, take a look at our [contributing guide](/contributing/). ## History From 81a7fb70ab7f8da1b6c898a54f87fb9ca848c2fc Mon Sep 17 00:00:00 2001 From: TJ VanToll Date: Sun, 29 Jun 2014 14:53:08 -0400 Subject: [PATCH 008/247] jQuery UI: Update Bower article to reflect the final package structure --- page/jquery-ui/environments/bower.md | 37 +++++++++++----------------- 1 file changed, 14 insertions(+), 23 deletions(-) diff --git a/page/jquery-ui/environments/bower.md b/page/jquery-ui/environments/bower.md index 8c094133..9fc0d10b 100644 --- a/page/jquery-ui/environments/bower.md +++ b/page/jquery-ui/environments/bower.md @@ -53,23 +53,16 @@ Libraries are downloaded with Bower using the `bower install` command. To instal │   │   └── src │   └── jquery-ui │   ├── themes -│   │   ├── base +│   │   ├── smoothness │   │   │   ├── jquery-ui.css -│   │   │   ├── accordion.css -│   │   │   ├── ... -│   │   │   └── minified -│   │   │   ├── jquery-ui.min.css -│   │   │   ├── accordion.min.css -│   │   │   └── ... +│   │   │   └── jquery-ui.min.css │   │   └── [The rest of jQuery UI's themes] -│   └── ui -│   ├── jquery-ui.js -│   ├── accordion.js -│   ├── ... -│   └── minified -│   ├── jquery-ui.min.js -│   ├── accordion.min.js -│   └── ... +│   ├── ui +│   │ ├── accordion.js +│   │ ├── autocomplete.js +│   │ └── ... +│   ├── jquery-ui.js +│   └── jquery-ui.min.js └── index.html @@ -89,10 +82,10 @@ We have a few different options for using the files downloaded with Bower. The e jQuery Projects - + - +

jQuery Core

jQuery is a fast, small, and feature-rich JavaScript library...

@@ -101,13 +94,13 @@ We have a few different options for using the files downloaded with Bower. The e

jQuery Mobile

jQuery Mobile is a HTML5-based user interface system...

- + - + - + ``` @@ -122,9 +115,7 @@ Because Bower also downloaded jQuery UI's individual source files, we can altern jQuery Projects - - - + From e0f2a748956c628f0feb099226e2194a2fcaa600 Mon Sep 17 00:00:00 2001 From: TJ VanToll Date: Sun, 29 Jun 2014 14:53:43 -0400 Subject: [PATCH 009/247] 0.3.24 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 28a366e6..707b7faf 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "learn.jquery.com", "title": "jQuery Learning Site", "description": "jQuery Foundation site for learning jQuery and JavaScript", - "version": "0.3.23", + "version": "0.3.24", "homepage": "http://learn.jquery.com", "author": { "name": "jQuery Foundation (http://jquery.org/)" From 03e9df20c9f58dfebb17b90d7d87dc0759d98061 Mon Sep 17 00:00:00 2001 From: Corey Frang Date: Mon, 4 Aug 2014 13:40:30 -0400 Subject: [PATCH 010/247] JavaScript 101 Types: Removed new Object --- page/javascript-101/types.md | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/page/javascript-101/types.md b/page/javascript-101/types.md index 9127cd3b..8d6e02a0 100644 --- a/page/javascript-101/types.md +++ b/page/javascript-101/types.md @@ -73,15 +73,17 @@ Everything else in JavaScript is considered an object. While there are [numerous * Array * Function -The simplest way to create an object is either through the `Object` constructor or the shorthand syntax known as object literal. These simple objects are unordered key/value pairs. The key is formally known as a property and the value can be any valid JavaScript type, even another object. To create or access a property on an object, we use what is known as "dot notation" or "bracket notation." +The simplest way to create an object is the shorthand syntax known as object literal. These simple objects are unordered key and value pairs. The key is formally known as a *property* and the value can be any valid JavaScript type, even another object. To create or access a property on an object, we use what is known as "dot notation" or "bracket notation." ``` -// Creating an object with the constructor: -var person1 = new Object; +// Using an empty object literal +var person1 = {}; +// Assign properties using "dot notation" person1.firstName = "John"; person1.lastName = "Doe"; +// Access properties using "dot notation" alert( person1.firstName + " " + person1.lastName ); // Creating an object with the object literal syntax: @@ -91,20 +93,20 @@ var person2 = { }; alert( person2.firstName + " " + person2.lastName ); -``` -``` -// As mentioned, objects can also have objects as a property. var people = {}; +// Assign properties using "bracket notation" +// As mentioned, objects can also have objects as a property value people[ "person1" ] = person1; people[ "person2" ] = person2; +// Access properties using a mix of both bracket and dot notation alert( people[ "person1" ].firstName ); alert( people[ "person2" ].firstName ); ``` -If a property is accessed that has not been defined, it will return a type of `undefined`. +If a property is accessed that has not been defined, it will have the value `undefined`. ``` // Properties that have not been created are undefined. From b5c8783f5fbbe9b1b5213a991744d05c5ce1d600 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Tue, 19 Aug 2014 16:27:28 -0400 Subject: [PATCH 011/247] Build: Upgrade to js-yaml 3.1.0 Use `.safeLoad()` instead of `.load()`. https://nodesecurity.io/advisories/JS-YAML_Deserialization_Code_Execution --- grunt.js | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/grunt.js b/grunt.js index ce00cd2b..b198da14 100644 --- a/grunt.js +++ b/grunt.js @@ -54,7 +54,7 @@ grunt.registerHelper( "read-order", function( orderFile ) { index = 0; try { - order = yaml.load( grunt.file.read( orderFile ) ); + order = yaml.safeLoad( grunt.file.read( orderFile ) ); } catch( error ) { grunt.warn( "Invalid order file: " + orderFile ); return null; diff --git a/package.json b/package.json index 707b7faf..7d29bddd 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,6 @@ "grunt-wordpress": "1.0.7", "grunt-jquery-content": "0.11.1", "grunt-check-modules": "0.1.0", - "js-yaml": "2.0.1" + "js-yaml": "3.1.0" } } From d9da90f3e656455a2f1f02146211365c1f4a7d9c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Tue, 19 Aug 2014 16:55:18 -0400 Subject: [PATCH 012/247] Build: Upgrade to grunt-jquery-content 0.12.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 7d29bddd..40727ff3 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "grunt-clean": "0.3.0", "grunt-html": "0.1.1", "grunt-wordpress": "1.0.7", - "grunt-jquery-content": "0.11.1", + "grunt-jquery-content": "0.12.0", "grunt-check-modules": "0.1.0", "js-yaml": "3.1.0" } From 34da43c61c297a809908ea8ef6be566bf3dd14eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Tue, 19 Aug 2014 16:55:21 -0400 Subject: [PATCH 013/247] 0.3.25 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 40727ff3..fdc66687 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "learn.jquery.com", "title": "jQuery Learning Site", "description": "jQuery Foundation site for learning jQuery and JavaScript", - "version": "0.3.24", + "version": "0.3.25", "homepage": "http://learn.jquery.com", "author": { "name": "jQuery Foundation (http://jquery.org/)" From 15bf9d93d731525e22317e75e60b31029db37c20 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Sat, 13 Sep 2014 14:35:32 -0500 Subject: [PATCH 014/247] Build: Upgrade to grunt-wordpress 1.1.0 and grunt-jquery-content 0.12.1 --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index fdc66687..7ad27a18 100644 --- a/package.json +++ b/package.json @@ -24,8 +24,8 @@ "grunt": "0.3.17", "grunt-clean": "0.3.0", "grunt-html": "0.1.1", - "grunt-wordpress": "1.0.7", - "grunt-jquery-content": "0.12.0", + "grunt-wordpress": "1.1.0", + "grunt-jquery-content": "0.12.1", "grunt-check-modules": "0.1.0", "js-yaml": "3.1.0" } From 3797df152c18eb153480fc4990699f8c25786c3a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Sat, 13 Sep 2014 16:40:13 -0500 Subject: [PATCH 015/247] 0.3.26 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 7ad27a18..16d67c76 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "learn.jquery.com", "title": "jQuery Learning Site", "description": "jQuery Foundation site for learning jQuery and JavaScript", - "version": "0.3.25", + "version": "0.3.26", "homepage": "http://learn.jquery.com", "author": { "name": "jQuery Foundation (http://jquery.org/)" From a9cc7d4c86b0b98fb03feae38f369626bde0baa9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Tue, 30 Sep 2014 15:08:06 -0400 Subject: [PATCH 016/247] Build: Upgrade to grunt-wordpress 1.2.1 and grunt-jquery-content 0.13.0 --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 16d67c76..449fa0d5 100644 --- a/package.json +++ b/package.json @@ -24,8 +24,8 @@ "grunt": "0.3.17", "grunt-clean": "0.3.0", "grunt-html": "0.1.1", - "grunt-wordpress": "1.1.0", - "grunt-jquery-content": "0.12.1", + "grunt-wordpress": "1.2.1", + "grunt-jquery-content": "0.13.0", "grunt-check-modules": "0.1.0", "js-yaml": "3.1.0" } From 8eb1110bc36e93b9f310cc6bb0abdc5c341f7bbc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Tue, 30 Sep 2014 15:08:09 -0400 Subject: [PATCH 017/247] 0.3.27 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 449fa0d5..55a512c2 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "learn.jquery.com", "title": "jQuery Learning Site", "description": "jQuery Foundation site for learning jQuery and JavaScript", - "version": "0.3.26", + "version": "0.3.27", "homepage": "http://learn.jquery.com", "author": { "name": "jQuery Foundation (http://jquery.org/)" From e5d6b214c462df211790ae341cb8b507cc2354a9 Mon Sep 17 00:00:00 2001 From: Aurelio De Rosa Date: Fri, 3 Oct 2014 01:41:50 +0100 Subject: [PATCH 018/247] Deferreds: Fixed a small typo: The proposal is called Promises/A Closes gh-558 --- page/code-organization/deferreds.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/page/code-organization/deferreds.md b/page/code-organization/deferreds.md index 5317fa53..a1230973 100644 --- a/page/code-organization/deferreds.md +++ b/page/code-organization/deferreds.md @@ -32,7 +32,7 @@ your application may be blocked from running until a result from it is returned. Deferreds provide a better solution to this problem, one which is void of "blocking" effects and completely decoupled. -The [Promise/A](http://wiki.commonjs.org/wiki/Promises/A) proposal +The [Promises/A](http://wiki.commonjs.org/wiki/Promises/A) proposal defines a method called "then" that can be used to register callbacks to a promise and, thus, get the future result when it is available. The pseudo-code for dealing with a third party API that returns a promise From 1f79d82d6af1ae13fc5f6f07a5fdd8dc3e6236f4 Mon Sep 17 00:00:00 2001 From: Ralph Whitbeck Date: Fri, 24 Oct 2014 02:09:19 -0400 Subject: [PATCH 019/247] Ajax: Remove opinionated statements Fixes gh-555 Closes gh-568 --- page/ajax/jquery-ajax-methods.md | 4 +--- page/ajax/key-concepts.md | 5 ++--- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/page/ajax/jquery-ajax-methods.md b/page/ajax/jquery-ajax-methods.md index 5629c93f..096fee62 100644 --- a/page/ajax/jquery-ajax-methods.md +++ b/page/ajax/jquery-ajax-methods.md @@ -10,9 +10,7 @@ While jQuery does offer many Ajax-related convenience methods, the core imperative. We'll review it first, and then touch briefly on the convenience methods. -I generally use the `$.ajax()` method and do not use convenience methods. As -you'll see, it offers features that the convenience methods do not, and its -syntax is more easily understandable, in my opinion. +It's often considered good practice to use the `$.ajax()` method over the jQuery provided [convenience methods](#convenience-methods). As you'll see, it offers features that the convenience methods do not, and its syntax allows for the ease of readability. ### `$.ajax()` diff --git a/page/ajax/key-concepts.md b/page/ajax/key-concepts.md index bf393129..43e59cc6 100644 --- a/page/ajax/key-concepts.md +++ b/page/ajax/key-concepts.md @@ -63,9 +63,8 @@ For transporting JSON data from another domain. For transporting data in a custom XML schema. -I am a strong proponent of using the JSON format in most cases, as it provides -the most flexibility. It is especially useful for sending both HTML and data at -the same time. +Consider using the JSON format in most cases, as it provides +the most flexibility. It is especially useful for sending both HTML and data at the same time. ### A is for Asynchronous From 5a9b29b3023aff13b0cd05afff03acb9f3cb38ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Fri, 24 Oct 2014 08:06:45 -0400 Subject: [PATCH 020/247] History of events: Fix typo Closes gh-539 Closes gh-548 --- page/events/history-of-events.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/page/events/history-of-events.md b/page/events/history-of-events.md index 4a5d443c..b66981e9 100644 --- a/page/events/history-of-events.md +++ b/page/events/history-of-events.md @@ -115,7 +115,7 @@ $( "#list" ).delegate( "li", "click", function( event ) { ### [.on()](http://api.jquery.com/on/) First introduced in jQuery v1.7 -The `on.()` method gives us a semantic approach for creating directly bound events as well as delegated events. It eliminates the need to use the deprecated `.bind()`, `.live()`, and `.delegate()` methods, providing a single API for creating events. +The `.on()` method gives us a semantic approach for creating directly bound events as well as delegated events. It eliminates the need to use the deprecated `.bind()`, `.live()`, and `.delegate()` methods, providing a single API for creating events. ``` $( "#list" ).on( "click", "li", function( event ) { From 2cafec3a4457a9af58b00632eaa9214ed780823c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Fri, 24 Oct 2014 08:33:50 -0400 Subject: [PATCH 021/247] How jQuery Works: Warn the user of mismatching file names Closes gh-510 --- page/about-jquery/how-jquery-works.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/page/about-jquery/how-jquery-works.md b/page/about-jquery/how-jquery-works.md index 5b8dfa00..1710f97e 100644 --- a/page/about-jquery/how-jquery-works.md +++ b/page/about-jquery/how-jquery-works.md @@ -28,6 +28,8 @@ This is a basic tutorial, designed to help you get started using jQuery. If you The `src` attribute in the ` - From 6b1b474bc35ba8540808fdf321f67ed1f77eeb7d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Wed, 5 Nov 2014 14:26:50 -0500 Subject: [PATCH 061/247] Event Basics: Cleanup --- page/events/event-basics.md | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/page/events/event-basics.md b/page/events/event-basics.md index 3c727623..2571bab6 100644 --- a/page/events/event-basics.md +++ b/page/events/event-basics.md @@ -45,11 +45,13 @@ you've set up previously. For example: ``` $( document ).ready(function(){ + // Sets up click behavior on all button elements with the alert class // that exist in the DOM when the instruction was executed $( "button.alert" ).on( "click", function() { console.log( "A button with the alert class was clicked!" ); }); + // Now create a new button element with the alert class. This button // was created after the click listeners were applied above, so it // will not have the same click behavior as its peers @@ -74,7 +76,7 @@ the page display area (not the entire browser window). #### type -The type of the event (e.g. "click"). +The type of the event (e.g., "click"). #### which @@ -88,7 +90,7 @@ Any data that was passed in when the event was bound. For example: // Event setup using the `.on()` method with data $( "input" ).on( "change", - { foo: "bar" }, // associate data with event binding + { foo: "bar" }, // Associate data with event binding function( eventObject ) { console.log("An input value has changed! ", eventObject.data.foo); } @@ -146,7 +148,7 @@ as a space-separated list to `.on()`: ``` // Multiple events, same handler $( "input" ).on( - "click change", // bind listeners for multiple events + "click change", // Bind handlers for multiple events function() { console.log( "An input was clicked or changed!" ) } @@ -175,7 +177,7 @@ that you didn't or couldn't know about. // Namespacing events $( "p" ).on( "click.myNamespace", function() { /* ... */ } ); $( "p" ).off( "click.myNamespace" ); -$( "p" ).off( ".myNamespace" ); // unbind all events in the namespace +$( "p" ).off( ".myNamespace" ); // Unbind all events in the namespace ``` ### Tearing Down Event Listeners @@ -206,11 +208,12 @@ want no handler to run, or you may want a different handler to run. jQuery provides the `.one()` method for this purpose. ``` -// Switching handlers using the `$.fn.one` method +// Switching handlers using the `.one()` method $( "p" ).one( "click", firstClick ); function firstClick() { console.log( "You just clicked this for the first time!" ); + // Now set up the new handler for subsequent clicks; // omit this step if no further click responses are needed $( this ).click( function() { console.log( "You have clicked this before!" ); } ); From 55d6debe54666d9b65c05ca1706805f4ec69235e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Wed, 5 Nov 2014 14:27:53 -0500 Subject: [PATCH 062/247] Event Basics: Remove hard breaks in prose --- page/events/event-basics.md | 63 +++++++++---------------------------- 1 file changed, 14 insertions(+), 49 deletions(-) diff --git a/page/events/event-basics.md b/page/events/event-basics.md index 2571bab6..7b510e88 100644 --- a/page/events/event-basics.md +++ b/page/events/event-basics.md @@ -9,18 +9,9 @@ level: beginner ### Setting Up Event Responses on DOM Elements -jQuery makes it straightforward to set up event-driven responses on page elements. -These events are often triggered by the end user's interaction with the page, -such as when text is entered into a form element or the mouse pointer is moved. -In some cases, such as the page load and unload events, the browser itself will -trigger the event. +jQuery makes it straightforward to set up event-driven responses on page elements. These events are often triggered by the end user's interaction with the page, such as when text is entered into a form element or the mouse pointer is moved. In some cases, such as the page load and unload events, the browser itself will trigger the event. -jQuery offers convenience methods for most native browser events. These methods — -including `.click()`, `.focus()`, `.blur()`, `.change()`, etc. — are shorthand -for jQuery's `.on()` method. The on method is useful for binding the same handler -function to multiple events, when you want to provide data to the event handler, -when you are working with custom events, or when you want to pass an object of -multiple events and handlers. +jQuery offers convenience methods for most native browser events. These methods — including `.click()`, `.focus()`, `.blur()`, `.change()`, etc. — are shorthand for jQuery's `.on()` method. The on method is useful for binding the same handler function to multiple events, when you want to provide data to the event handler, when you are working with custom events, or when you want to pass an object of multiple events and handlers. ``` // Event setup using a convenience method @@ -38,10 +29,7 @@ $( "p" ).on( "click", function() { ### Extending Events to New Page Elements -It is important to note that `.on()` can only create event listeners -on elements that exist *at the time you set up the listeners*. Similar elements created -after the event listeners are established will not automatically pick up event behaviors -you've set up previously. For example: +It is important to note that `.on()` can only create event listeners on elements that exist *at the time you set up the listeners*. Similar elements created after the event listeners are established will not automatically pick up event behaviors you've set up previously. For example: ``` $( document ).ready(function(){ @@ -59,20 +47,15 @@ $( document ).ready(function(){ }); ``` -Consult the article on event delegation to see how to use `.on()` so that -event behaviors will be extended to new elements without having to rebind them. +Consult the article on event delegation to see how to use `.on()` so that event behaviors will be extended to new elements without having to rebind them. ### Inside the Event Handler Function -Every event handling function receives an event object, which contains many -properties and methods. The event object is most commonly used to prevent the -default action of the event via the `.preventDefault()` method. However, the event -object contains a number of other useful properties and methods, including: +Every event handling function receives an event object, which contains many properties and methods. The event object is most commonly used to prevent the default action of the event via the `.preventDefault()` method. However, the event object contains a number of other useful properties and methods, including: #### pageX, pageY -The mouse position at the time the event occurred, relative to the top left corner of -the page display area (not the entire browser window). +The mouse position at the time the event occurred, relative to the top left corner of the page display area (not the entire browser window). #### type @@ -117,10 +100,7 @@ Prevent the default action of the event (e.g. following a link). Stop the event from bubbling up to other elements. -In addition to the event object, the event handling function also has access to -the DOM element that the handler was bound to via the keyword `this`. To turn -the DOM element into a jQuery object that we can use jQuery methods on, we -simply do `$( this )`, often following this idiom: +In addition to the event object, the event handling function also has access to the DOM element that the handler was bound to via the keyword `this`. To turn the DOM element into a jQuery object that we can use jQuery methods on, we simply do `$( this )`, often following this idiom: ``` var element = $( this ); @@ -141,9 +121,7 @@ $( "a" ).click(function( eventObject ) { ### Setting Up Multiple Event Responses -Quite often elements in your application will be bound to multiple events. If -multiple events are to share the same handling function, you can provide the event types -as a space-separated list to `.on()`: +Quite often elements in your application will be bound to multiple events. If multiple events are to share the same handling function, you can provide the event types as a space-separated list to `.on()`: ``` // Multiple events, same handler @@ -155,9 +133,7 @@ $( "input" ).on( ); ``` -When each event has its own handler, you can pass an object into `.on()` with one or -more key/value pairs, with the key being the event name and the value being the function -to handle the event. +When each event has its own handler, you can pass an object into `.on()` with one or more key/value pairs, with the key being the event name and the value being the function to handle the event. ``` // Binding multiple events with different handlers @@ -169,9 +145,7 @@ $( "p" ).on({ ### Namespacing Events -For complex applications and for plugins you share with others, it can be -useful to namespace your events so you don't unintentionally disconnect events -that you didn't or couldn't know about. +For complex applications and for plugins you share with others, it can be useful to namespace your events so you don't unintentionally disconnect events that you didn't or couldn't know about. ``` // Namespacing events @@ -182,10 +156,7 @@ $( "p" ).off( ".myNamespace" ); // Unbind all events in the namespace ### Tearing Down Event Listeners -To remove an event listener, you use the `.off()` method and pass in -the event type to off. If you attached a named function to the event, then -you can isolate the event tear down to just that named function by passing it as the -second argument. +To remove an event listener, you use the `.off()` method and pass in the event type to off. If you attached a named function to the event, then you can isolate the event tear down to just that named function by passing it as the second argument. ``` // Tearing down all click handlers on a selection @@ -203,9 +174,7 @@ $( "p" ).off( "click", bar ); // foo is still bound to the click event ### Setting Up Events to Run Only Once -Sometimes you need a particular handler to run only once — after that, you may -want no handler to run, or you may want a different handler to run. jQuery -provides the `.one()` method for this purpose. +Sometimes you need a particular handler to run only once — after that, you may want no handler to run, or you may want a different handler to run. jQuery provides the `.one()` method for this purpose. ``` // Switching handlers using the `.one()` method @@ -220,9 +189,7 @@ function firstClick() { } ``` -Note that in the code snippet above, the `firstClick` function will be executed for -the first click on *each* paragraph element rather than the function being removed from -*all* paragraphs when *any* paragraph is clicked for the first time. +Note that in the code snippet above, the `firstClick` function will be executed for the first click on *each* paragraph element rather than the function being removed from *all* paragraphs when *any* paragraph is clicked for the first time. `.one()` can also be used to bind multiple events: @@ -235,6 +202,4 @@ function firstEvent( eventObject ) { } ``` -In this case, the `firstEvent` function will be executed once *for each event*. For the snippet above, this means -that once an input element gains focus, the handler function will still execute for the first keydown event on that -element. +In this case, the `firstEvent` function will be executed once *for each event*. For the snippet above, this means that once an input element gains focus, the handler function will still execute for the first keydown event on that element. From 20462df3307f3f14bc4094b7376b33e55d87597a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Wed, 5 Nov 2014 14:29:02 -0500 Subject: [PATCH 063/247] Understanding Event Delegation: Cleanup --- page/events/event-delegation.md | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/page/events/event-delegation.md b/page/events/event-delegation.md index ca3fde5d..d772a4b6 100644 --- a/page/events/event-delegation.md +++ b/page/events/event-delegation.md @@ -31,7 +31,7 @@ For the remainder of the lesson, we will reference the following HTML structure: When an anchor in our `#list` group is clicked, we want to log its text to the console. Normally we could directly bind to the click event of each anchor using the `.on()` method: ``` -// attach a directly bound event +// Attach a directly bound event handler $( "#list a" ).on( "click", function( event ) { event.preventDefault(); console.log( $( this ).text() ); @@ -41,7 +41,7 @@ $( "#list a" ).on( "click", function( event ) { While this works perfectly fine, there are drawbacks. Consider what happens when we add a new anchor after having already bound the above listener: ``` -// add a new element on to our existing list +// Add a new element on to our existing list $( "#list" ).append( "
  • Item #5
  • " ); ``` @@ -61,10 +61,10 @@ Understanding how events propagate is an important factor in being able to lever This means that anytime you click one of our bound anchor tags, you are effectively clicking the entire document body! This is called *event bubbling* or *event propagation*. -Since we know how events bubble, we can create a *delegated* event: +Since we know how events bubble, we can create a *delegated* event: ``` -// attach a delegated event +// Attach a delegated event handler $( "#list" ).on( "click", "a", function( event ) { event.preventDefault(); console.log( $( this ).text() ); @@ -75,10 +75,10 @@ Notice how we have moved the `a` part from the selector to the second parameter ### Using the Triggering Element -What if we wanted to open the link in a new window if that link is an external one (as denoted here by beginning with "http")? +What if we wanted to open the link in a new window if that link is an external one (as denoted here by beginning with "http")? ``` -// attach a delegated event +// Attach a delegated event handler $( "#list" ).on( "click", "a", function( event ) { var elem = $( this ); if ( elem.is( "[href^='http']" ) ) { @@ -92,11 +92,12 @@ This simply passes the `.is()` method a selector to see if the `href` attribute We can actually simplify our code by allowing the selector parameter of `.on()` do our logic for us: ``` -// attach a delegated event with a more refined selector +// Attach a delegated event handler with a more refined selector $( "#list" ).on( "click", "a[href^='http']", function( event ) { $( this ).attr( "target", "_blank" ); }); ``` -##Summary +## Summary + Event delegation refers to the process of using event propagation (bubbling) to handle events at a higher level in the DOM than the element on which the event originated. It allows us to attach a single event listener for elements that exist now or in the future. From 61a57ce80b3ac7ece11da0d2019dd218807d1af2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Wed, 5 Nov 2014 14:30:49 -0500 Subject: [PATCH 064/247] Event Extensions: Cleanup --- page/events/event-extensions.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/page/events/event-extensions.md b/page/events/event-extensions.md index 86241760..b9311c5b 100644 --- a/page/events/event-extensions.md +++ b/page/events/event-extensions.md @@ -2,6 +2,7 @@ title: jQuery Event Extensions level: advanced --- + jQuery offers several ways to extend its event system to provide custom functionality when events are attached to elements. Internally in jQuery, these extensions are primarily used to ensure that standard events such as `submit` and `change` behave consistently across browsers. However, they can also be used to define new events with custom behavior. This document covers the extensions available starting with jQuery 1.7; a sparsely documented subset of this functionality has been available since jQuery 1.3 but the differences in functionality are extensive. For an overview of special events in earlier versions, see [Ben Alman's jQuery Special Events](http://benalman.com/news/2010/03/jquery-special-events/) article. @@ -10,7 +11,7 @@ This document covers the extensions available starting with jQuery 1.7; a sparse ### Events overview and general advice -When writing an event extension, it is essential to understand the flow of events through jQuery's internal event system. For a description of the event system from the API level, including a discussion of event delegation, see the [`.on()`](http://api.jquery.com/on) method. +When writing an event extension, it is essential to understand the flow of events through jQuery's internal event system. For a description of the event system from the API level, including a discussion of event delegation, see the [`.on()`](http://api.jquery.com/on/) method. To simplify event management, jQuery only attaches a single event handler per element per event type (using `addEventListener` on W3C-compliant browsers or `attachEvent` on older IE) and then dispatches to event handlers that are attached via jQuery's APIs. For example, if three "click" event handlers are attached to an element, jQuery attaches its own handler when the first handler is attached and adds the user's event handler to a list to be executed when the event occurs. For subsequent event handlers, jQuery only adds them to its own internal list since it has already called the browser to attach its solitary handler. Conversely, jQuery removes its own event handler from the browser when the final event of a particular type is removed from the element. @@ -122,11 +123,11 @@ elem.on( "pushy", function( event ) { $( "body" ).append( "I am pushy but still a " + event.type + "!" ); }); -elem.trigger( "click" ); // triggers both handlers +elem.trigger( "click" ); // Triggers both handlers elem.off( "click" ); -elem.trigger( "click" ); // still triggers "pushy" +elem.trigger( "click" ); // Still triggers "pushy" elem.off( "pushy" ); ``` From de4856b72540339b419dba8df1328f1b4feecacc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Wed, 5 Nov 2014 14:31:31 -0500 Subject: [PATCH 065/247] Event Helpers: Remove hard breaks in prose --- page/events/event-helpers.md | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/page/events/event-helpers.md b/page/events/event-helpers.md index 2fad9c72..86348f18 100644 --- a/page/events/event-helpers.md +++ b/page/events/event-helpers.md @@ -5,14 +5,12 @@ source: http://jqfundamentals.com/legacy attribution: - jQuery Fundamentals --- + jQuery offers two event-related helper functions that save you a few keystrokes. ### `.hover()` -The [`.hover()`](http://api.jquery.com/hover/) method lets you pass one or two functions to be run when the -`mouseenter` and `mouseleave` events occur on an element. If you pass one -function, it will be run for both events; if you pass two functions, the first -will run for `mouseenter`, and the second will run for `mouseleave`. +The [`.hover()`](http://api.jquery.com/hover/) method lets you pass one or two functions to be run when the `mouseenter` and `mouseleave` events occur on an element. If you pass one function, it will be run for both events; if you pass two functions, the first will run for `mouseenter`, and the second will run for `mouseleave`. **Note:** Prior to jQuery 1.4, the `.hover()` method required two functions. @@ -27,11 +25,7 @@ $( "#menu li" ).hover(function() {
    Note: This method signature was removed in jQuery 1.9. jQuery also provides an animation method named .toggle() that toggles the visibility of elements.
    -The [`.toggle()`](http://api.jquery.com/toggle-event/) method is triggered by the "click" event and accepts two or -more functions. Each time the click event occurs, the next function in the -list is called. Generally, `.toggle()` is used with just two functions; -however, it will accept an unlimited number of functions. Be careful, though: -providing a long list of functions can be difficult to debug. +The [`.toggle()`](http://api.jquery.com/toggle-event/) method is triggered by the "click" event and accepts two or more functions. Each time the click event occurs, the next function in the list is called. Generally, `.toggle()` is used with just two functions; however, it will accept an unlimited number of functions. Be careful, though: providing a long list of functions can be difficult to debug. ``` // The toggle helper function From 107ffef8bf83c8e01c493800f191413875208a5a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Wed, 5 Nov 2014 14:35:58 -0500 Subject: [PATCH 066/247] Handling Events: Cleanup --- page/events/handling-events.md | 28 +++++++++++++++------------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/page/events/handling-events.md b/page/events/handling-events.md index c4267fba..83f7bb36 100644 --- a/page/events/handling-events.md +++ b/page/events/handling-events.md @@ -5,6 +5,7 @@ source: http://jqfundamentals.com/legacy attribution: - jQuery Fundamentals --- + jQuery provides a method `.on()` to respond to any event on the selected elements. This is called an _event binding_. Although `.on()` isn't the only method provided for event binding, it is a best @@ -14,15 +15,16 @@ the evolution of event binding in jQuery](/events/history-of-events). The `.on()` method provides several useful features: - [Bind any event triggered on the selected elements to an event handler](#simple-event-binding) -- [Bind multiple events to one event handler](#multiple-events-one-handler) -- [Bind multiple events and multiple handlers to the selected elements](#multiple-events-multiple-handlers) -- [Use details about the event in the event handler](#event-object) -- [Pass data to the event handler for custom events](#passing-data) -- [Bind events to elements that will be rendered in the future](#event-delegation) +- [Bind multiple events to one event handler](#many-events-but-only-one-event-handler) +- [Bind multiple events and multiple handlers to the selected elements](#many-events-and-handlers) +- [Use details about the event in the event handler](#the-event-object) +- [Pass data to the event handler for custom events](#passing-data-to-the-event-handler) +- [Bind events to elements that will be rendered in the future](#binding-events-to-elements-that-don-39-t-exist-yet) ### Examples -#### Simple event binding +#### Simple event binding + ``` // When any

    tag is clicked, we expect to see '

    was clicked' in the console. $( "p" ).on( "click", function() { @@ -30,21 +32,21 @@ $( "p" ).on( "click", function() { }); ``` -#### Many events, but only one event handler +#### Many events, but only one event handler Suppose you want to trigger the same event whenever the mouse hovers over or leaves the selected elements. The best practice for this is to use "mouseenter mouseleave". Note the difference between this and the next example. ``` -// When a user focuses on or changes any input element, we expect a console message -// bind to multiple events +// When a user focuses on or changes any input element, +// we expect a console message bind to multiple events $( "div" ).on( "mouseenter mouseleave", function() { console.log( "mouse hovered over or left a div" ); }); ``` -#### Many events and handlers +#### Many events and handlers Suppose that instead you want different event handlers for when the mouse enters and leaves an element. This is more common than the previous example. For example, if you @@ -66,7 +68,7 @@ $( "div" ).on({ }); ``` -#### The event object +#### The event object Handling events can be tricky. It's often helpful to use the extra information contained in the event object passed to the event handler for more control. To become familiar with @@ -80,7 +82,7 @@ $( "div" ).on( "click", function( event ) { }); ``` -#### Passing data to the event handler +#### Passing data to the event handler You can pass your own data to the event object. @@ -93,7 +95,7 @@ $( "p" ).on( "click", { ``` -#### Binding events to elements that don't exist yet +#### Binding events to elements that don't exist yet This is called _event delegation_. Here's an example just for completeness, but see the page on [Event Delegation](/events/event-delegation/) for a full explanation. From 1a4d0b5ee8d6d4186c2ab71dd2bb558cf787fee3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Wed, 5 Nov 2014 14:36:48 -0500 Subject: [PATCH 067/247] Handling Events: Remove hard breaks in prose --- page/events/handling-events.md | 42 ++++++++-------------------------- 1 file changed, 10 insertions(+), 32 deletions(-) diff --git a/page/events/handling-events.md b/page/events/handling-events.md index 83f7bb36..87e9274e 100644 --- a/page/events/handling-events.md +++ b/page/events/handling-events.md @@ -6,11 +6,7 @@ attribution: - jQuery Fundamentals --- -jQuery provides a method `.on()` to -respond to any event on the selected elements. This is called an _event binding_. -Although `.on()` isn't the only method provided for event binding, it is a best -practice to use this for jQuery 1.7+. To learn more, [read more about -the evolution of event binding in jQuery](/events/history-of-events). +jQuery provides a method `.on()` to respond to any event on the selected elements. This is called an _event binding_. Although `.on()` isn't the only method provided for event binding, it is a best practice to use this for jQuery 1.7+. To learn more, [read more about the evolution of event binding in jQuery](/events/history-of-events). The `.on()` method provides several useful features: @@ -34,9 +30,7 @@ $( "p" ).on( "click", function() { #### Many events, but only one event handler -Suppose you want to trigger the same event whenever the mouse hovers over or leaves -the selected elements. The best practice for this is to use "mouseenter mouseleave". -Note the difference between this and the next example. +Suppose you want to trigger the same event whenever the mouse hovers over or leaves the selected elements. The best practice for this is to use "mouseenter mouseleave". Note the difference between this and the next example. ``` // When a user focuses on or changes any input element, @@ -48,9 +42,7 @@ $( "div" ).on( "mouseenter mouseleave", function() { #### Many events and handlers -Suppose that instead you want different event handlers for when the mouse enters and -leaves an element. This is more common than the previous example. For example, if you -want to show and hide a tooltip on hover, you would use this. +Suppose that instead you want different event handlers for when the mouse enters and leaves an element. This is more common than the previous example. For example, if you want to show and hide a tooltip on hover, you would use this. `.on()` accepts an object containing multiple events and handlers. @@ -70,10 +62,7 @@ $( "div" ).on({ #### The event object -Handling events can be tricky. It's often helpful to use the extra information contained -in the event object passed to the event handler for more control. To become familiar with -the event object, use this code to inspect it in your browser console after you click on -a `

    ` in the page. For a breakdown of the event object, see [Inside the Event Handling Function](/events/inside-event-handling-function/). +Handling events can be tricky. It's often helpful to use the extra information contained in the event object passed to the event handler for more control. To become familiar with the event object, use this code to inspect it in your browser console after you click on a `
    ` in the page. For a breakdown of the event object, see [Inside the Event Handling Function](/events/inside-event-handling-function/). ``` $( "div" ).on( "click", function( event ) { @@ -97,8 +86,7 @@ $( "p" ).on( "click", { #### Binding events to elements that don't exist yet -This is called _event delegation_. Here's an example just for completeness, but see the -page on [Event Delegation](/events/event-delegation/) for a full explanation. +This is called _event delegation_. Here's an example just for completeness, but see the page on [Event Delegation](/events/event-delegation/) for a full explanation. ``` $( "ul" ).on( "click", "li", function() { @@ -108,9 +96,7 @@ $( "ul" ).on( "click", "li", function() { ### Connecting Events to Run Only Once -Sometimes you need a particular handler to run only once — after that, you may -want no handler to run, or you may want a different handler to run. jQuery -provides the `.one()` method for this purpose. +Sometimes you need a particular handler to run only once — after that, you may want no handler to run, or you may want a different handler to run. jQuery provides the `.one()` method for this purpose. ``` // Switching handlers using the `.one()` method @@ -122,19 +108,13 @@ $( "p" ).one( "click", function() { }); ``` -The `.one()` method is especially useful if you need to do some complicated -setup the first time an element is clicked, but not subsequent times. +The `.one()` method is especially useful if you need to do some complicated setup the first time an element is clicked, but not subsequent times. -`.one()` accepts the same arguments as `.on()` which means it supports multiple events to one -or multiple handlers, passing custom data and event delegation. +`.one()` accepts the same arguments as `.on()` which means it supports multiple events to one or multiple handlers, passing custom data and event delegation. ### Disconnecting Events -Although all the fun of jQuery occurs in the `.on()` method, it's counterpart is just as important -if you want to be a responsible developer. `.off()` cleans up that event -binding when you don't need it anymore. Complex user interfaces with lots of event bindings -can bog down browser performance, so using the `.off()` method diligently is a best practice to -ensure that you only have the event bindings that you need, when you need them. +Although all the fun of jQuery occurs in the `.on()` method, it's counterpart is just as important if you want to be a responsible developer. `.off()` cleans up that event binding when you don't need it anymore. Complex user interfaces with lots of event bindings can bog down browser performance, so using the `.off()` method diligently is a best practice to ensure that you only have the event bindings that you need, when you need them. ``` // Unbinding all click handlers on a selection @@ -159,8 +139,6 @@ $( "p" ).off( "click", bar ); ### Namespacing Events -For complex applications and for plugins you share with others, it can be -useful to namespace your events so you don't unintentionally disconnect events -that you didn't or couldn't know about. For details, see Event Namespacing. +For complex applications and for plugins you share with others, it can be useful to namespace your events so you don't unintentionally disconnect events that you didn't or couldn't know about. For details, see Event Namespacing. From 8c92da71bccb24ab751d8f46bdc502fc1c1714d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Wed, 5 Nov 2014 14:38:00 -0500 Subject: [PATCH 068/247] History of Events: Cleanup --- page/events/history-of-events.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/page/events/history-of-events.md b/page/events/history-of-events.md index b66981e9..fc3cd51e 100644 --- a/page/events/history-of-events.md +++ b/page/events/history-of-events.md @@ -2,6 +2,7 @@ title: History of jQuery Events level: intermediate --- + Throughout the evolution of jQuery the means of event binding has changed for various reasons ranging from performance to semantics. As of jQuery v1.7 the `.on()` method is the accepted means of both directly binding events and creating delegated events. This article aims to explore the history of *event delegation* from jQuery v1.0 to the present and how each version leverages it. Given the following HTML, for our example we want to log the text of the each `
  • ` to console whenever it is clicked. @@ -19,6 +20,7 @@ Given the following HTML, for our example we want to log the text of the each `< ``` ### [.bind()](http://api.jquery.com/bind/) (Deprecated) + Introduced in jQuery v1.0 It is possible to use `.bind()` and attach a handler to every element. @@ -29,6 +31,7 @@ It is possible to use `.bind()` and attach a handler to every element. console.log( elem.text() ); });​​​​​​​​​​​​​​​​​​​​​ ``` + As discussed in the [event delegation](/event/event-delegation) article, this is not optimal. ### liveQuery @@ -36,6 +39,7 @@ As discussed in the [event delegation](/event/event-delegation) article, this is ### [.bind()](http://api.jquery.com/bind/) delegation (Deprecated) + Introduced in jQuery v1.0 Generally we don't associate `.bind()` with *event delegation*, however prior to jQuery v1.3 it was the only means of delegation available to us. @@ -53,6 +57,7 @@ We are able to take advantage of *event bubbling* here by attaching a *click* ev ### [.live()](http://api.jquery.com/live/) (Deprecated) + Introduced in jQuery v1.3 All `.live()` event handlers are bound to the *document* root by default. @@ -76,6 +81,7 @@ The last element to receive the *click* event is *document*, this is where our ` ### [.live()](http://api.jquery.com/live/) w/ context (Deprecated) + Introduced in jQuery v1.4 Passing the *context* as a second optional argument to the `$()` function has been supported since v1.0. However support for using this *context* with the `$.live()` method was not added until v1.4. @@ -101,6 +107,7 @@ $( "li", "#list" ).live( "click", function( event ) { In this instance when an `
  • ` is clicked the event still bubbles all the way up the *document tree* as it did before. However, our event handler is now bound to the parent `
      ` tag, so we do not have to wait for the event to bubble all the way up to the *document* root. ### [.delegate()](http://api.jquery.com/delegate/) (Deprecated) + First introduced in jQuery v1.4.2 The `.delegate()` method provides a clear difference between the *context* of where to attach delegated event handler, and the *selector* to match when the event bubbles up to the delegated element. @@ -113,6 +120,7 @@ $( "#list" ).delegate( "li", "click", function( event ) { ``` ### [.on()](http://api.jquery.com/on/) + First introduced in jQuery v1.7 The `.on()` method gives us a semantic approach for creating directly bound events as well as delegated events. It eliminates the need to use the deprecated `.bind()`, `.live()`, and `.delegate()` methods, providing a single API for creating events. @@ -125,4 +133,5 @@ $( "#list" ).on( "click", "li", function( event ) { ``` ### Summary + All of these ways of *event delegation* were innovative and considered a best practice at the time of their release. Depending on what version of jQuery you have implemented use the appropriate means of *event delegation*. From cee9b3036f1cac41c0334ca6a1602f745b784a79 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Wed, 5 Nov 2014 14:39:38 -0500 Subject: [PATCH 069/247] Inside Event Handling Function: Remove hard breaks in prose --- page/events/inside-event-handling-function.md | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/page/events/inside-event-handling-function.md b/page/events/inside-event-handling-function.md index cab3b000..963055b9 100644 --- a/page/events/inside-event-handling-function.md +++ b/page/events/inside-event-handling-function.md @@ -5,15 +5,12 @@ source: http://jqfundamentals.com/legacy attribution: - jQuery Fundamentals --- -Every event handling function receives an event object, which contains many -properties and methods. The event object is most commonly used to prevent the -default action of the event via the `.preventDefault()` method. However, the event -object contains a number of other useful properties and methods, including: + +Every event handling function receives an event object, which contains many properties and methods. The event object is most commonly used to prevent the default action of the event via the `.preventDefault()` method. However, the event object contains a number of other useful properties and methods, including: #### pageX, pageY -The mouse position at the time the event occurred, relative to the top left of -the page. +The mouse position at the time the event occurred, relative to the top left of the page. #### type @@ -39,10 +36,7 @@ Prevent the default action of the event (e.g. following a link). Stop the event from bubbling up to other elements. -In addition to the event object, the event handling function also has access to -the DOM element that the handler was bound to via the keyword `this`. To turn -the DOM element into a jQuery object that we can use jQuery methods on, we -simply do `$( this )`, often following this idiom: +In addition to the event object, the event handling function also has access to the DOM element that the handler was bound to via the keyword `this`. To turn the DOM element into a jQuery object that we can use jQuery methods on, we simply do `$( this )`, often following this idiom: ``` var elem = $( this ); From 6d244b7f589a394c9ffb9c9efddc31bd13b04bfc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Wed, 5 Nov 2014 14:43:10 -0500 Subject: [PATCH 070/247] Introduction to Custom Events: Cleanup --- page/events/introduction-to-custom-events.md | 47 ++++++++++---------- 1 file changed, 24 insertions(+), 23 deletions(-) diff --git a/page/events/introduction-to-custom-events.md b/page/events/introduction-to-custom-events.md index 7074fa54..292520ee 100644 --- a/page/events/introduction-to-custom-events.md +++ b/page/events/introduction-to-custom-events.md @@ -254,10 +254,11 @@ $.fn.twitterResult = function( settings ) { }, $.fn.twitterResult.events[ ev ] ); }); - // use the class of each action to figure out + // Use the class of each action to figure out // which event it will trigger on the results panel a.find( "li" ).click(function() { - // pass the li that was clicked to the function + + // Pass the li that was clicked to the function // so it can be manipulated if needed results.trigger( $( this ).attr( "class" ), [ $( this ) ] ); }); @@ -265,7 +266,7 @@ $.fn.twitterResult = function( settings ) { }; $.fn.twitterResult.createActions = function() { - return $( "
        " ).append( + return $( "
          " ).append( "
        • Refresh
        • " + "
        • Remove
        • " + "
        • Collapse
        • " @@ -273,15 +274,15 @@ $.fn.twitterResult.createActions = function() { }; $.fn.twitterResult.events = { - refresh: function( e ) { - // indicate that the results are refreshing + + // Indicate that the results are refreshing var elem = $( this ).addClass( "refreshing" ); elem.find( "p.tweet" ).remove(); results.append( "

          Loading...

          " ); - // get the twitter data using jsonp + // Get the twitter data using jsonp $.getJSON( "http://search.twitter.com/search.json?q=" + escape( e.data.term ) + "&rpp=5&callback=?", function( json ) { elem.trigger( "populate", [ json ] ); }); @@ -308,7 +309,7 @@ $.fn.twitterResult.events = { elem.append( tweet ); }); - // indicate that the results are done refreshing + // Indicate that the results are done refreshing elem.removeClass("refreshing"); }, @@ -318,28 +319,27 @@ $.fn.twitterResult.events = { } $( this ).remove(); - // indicate that we no longer have a panel for the term + // Indicate that we no longer have a panel for the term search_terms[ e.data.term ] = 0; }, collapse: function( e ) { $( this ).find( "li.collapse" ) - .removeClass( "collapse" ) - .addClass( "expand" ) - .text( "Expand" ); + .removeClass( "collapse" ) + .addClass( "expand" ) + .text( "Expand" ); $( this ).addClass( "collapsed" ); }, expand: function( e ) { $( this ).find( "li.expand" ) - .removeClass( "expand" ) - .addClass( "collapse" ) - .text( "Collapse" ); + .removeClass( "expand" ) + .addClass( "collapse" ) + .text( "Collapse" ); $( this ).removeClass( "collapsed" ); } - }; ``` @@ -361,21 +361,22 @@ Here's how the Twitter container bindings look: ``` $( "#twitter" ).on( "getResults", function( e, term ) { - // make sure we don't have a box for this term already + + // Make sure we don't have a box for this term already if ( !search_terms[ term ] ) { var elem = $( this ); var template = elem.find( "div.template" ); - // make a copy of the template div + // Make a copy of the template div // and insert it as the first results box results = template.clone() - .removeClass( "template" ) - .insertBefore( elem.find( "div:first" ) ) - .twitterResult({ - "term": term - }); + .removeClass( "template" ) + .insertBefore( elem.find( "div:first" ) ) + .twitterResult({ + "term": term + }); - // load the content using the "refresh" + // Load the content using the "refresh" // custom event that we bound to the results container results.trigger( "refresh" ); From 43486a03d8fdeab1f2b39488be3a8fd0ed4ee635 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Wed, 5 Nov 2014 14:45:39 -0500 Subject: [PATCH 071/247] Introduction to Custom Events: Remove hard breaks in prose --- page/events/introduction-to-custom-events.md | 153 +++++-------------- 1 file changed, 34 insertions(+), 119 deletions(-) diff --git a/page/events/introduction-to-custom-events.md b/page/events/introduction-to-custom-events.md index 292520ee..4602d89c 100644 --- a/page/events/introduction-to-custom-events.md +++ b/page/events/introduction-to-custom-events.md @@ -8,26 +8,15 @@ attribution: ## Custom Events -We're all familiar with the basic events — click, mouseover, focus, blur, -submit, etc. — that we can latch on to as a user interacts with the browser. -Custom events open up a whole new world of event-driven programming. In this -chapter, we'll use jQuery's custom events system to make a simple Twitter -search application. - -It can be difficult at first to understand why you'd want to use custom events, -when the built-in events seem to suit your needs just fine. It turns out that -custom events offer a whole new way of thinking about event-driven JavaScript. -Instead of focusing on the element that triggers an action, custom events put -the spotlight on the element being acted upon. This brings a bevy of benefits, -including: - -- Behaviors of the target element can easily be triggered by different elements using the same code. -- Behaviors can be triggered across multiple, similar, target elements at once. -- Behaviors are more clearly associated with the target element in code, making code easier to read and maintain. - -Why should you care? An example is probably the best way to explain. Suppose -you have a lightbulb in a room in a house. The lightbulb is currently turned -on, and it's controlled by two three-way switches and a clapper: +We're all familiar with the basic events — click, mouseover, focus, blur, submit, etc. — that we can latch on to as a user interacts with the browser. Custom events open up a whole new world of event-driven programming. In this chapter, we'll use jQuery's custom events system to make a simple Twitter search application. + +It can be difficult at first to understand why you'd want to use custom events, when the built-in events seem to suit your needs just fine. It turns out that custom events offer a whole new way of thinking about event-driven JavaScript. Instead of focusing on the element that triggers an action, custom events put the spotlight on the element being acted upon. This brings a bevy of benefits, including: + +* Behaviors of the target element can easily be triggered by different elements using the same code. +* Behaviors can be triggered across multiple, similar, target elements at once. +* Behaviors are more clearly associated with the target element in code, making code easier to read and maintain. + +Why should you care? An example is probably the best way to explain. Suppose you have a lightbulb in a room in a house. The lightbulb is currently turned on, and it's controlled by two three-way switches and a clapper: ```
          @@ -38,9 +27,7 @@ on, and it's controlled by two three-way switches and a clapper:
          ``` -Triggering the clapper or either of the switches will change the state of the -lightbulb. The switches and the clapper don't care what state the lightbulb is -in; they just want to change the state. +Triggering the clapper or either of the switches will change the state of the lightbulb. The switches and the clapper don't care what state the lightbulb is in; they just want to change the state. Without custom events, you might write some code like this: @@ -92,11 +79,7 @@ Let's make our example a little more interesting. We'll add another room to our
          ``` -If there are any lights on in the house, we want the master switch to turn all -the lights off; otherwise, we want it to turn all lights on. To accomplish -this, we'll add two more custom events to the lightbulbs: `turnOn` and -`turnOff`. We'll make use of them in the `changeState` custom event, and use -some logic to decide which one the master switch should trigger: +If there are any lights on in the house, we want the master switch to turn all the lights off; otherwise, we want it to turn all lights on. To accomplish this, we'll add two more custom events to the lightbulbs: `turnOn` and `turnOff`. We'll make use of them in the `changeState` custom event, and use some logic to decide which one the master switch should trigger: ``` $( ".lightbulb" ).on( "changeState", function( e ) { @@ -125,36 +108,19 @@ $( "#master_switch" ).click(function() { }); ``` -Note how the behavior of the master switch is attached to the master switch; -the behavior of a lightbulb belongs to the lightbulbs. +Note how the behavior of the master switch is attached to the master switch; the behavior of a lightbulb belongs to the lightbulbs. -If you're accustomed to object-oriented programming, you may find it useful to -think of custom events as methods of objects. Loosely speaking, the object to -which the method belongs is created via the jQuery selector. Binding the -`changeState` custom event to all `$( ".light" )` elements is akin to having a -class called `Light` with a method of `changeState`, and then instantiating new -`Light` objects for each element with a classname of `light`. +If you're accustomed to object-oriented programming, you may find it useful to think of custom events as methods of objects. Loosely speaking, the object to which the method belongs is created via the jQuery selector. Binding the `changeState` custom event to all `$( ".light" )` elements is akin to having a class called `Light` with a method of `changeState`, and then instantiating new `Light` objects for each element with a classname of `light`. ### Recap: `.on()` and `.trigger()` -In the world of custom events, there are two important jQuery methods: -`.on()` and `.trigger()`. In the [Events](/events/) chapter, we saw how to use these -methods for working with user events; for this chapter, it's important to -remember two things: +In the world of custom events, there are two important jQuery methods: `.on()` and `.trigger()`. In the [Events](/events/) chapter, we saw how to use these methods for working with user events; for this chapter, it's important to remember two things: -- `.on()` method takes an event type and an event handling function as - arguments. Optionally, it can also receive event-related data as its second - argument, pushing the event handling function to the third argument. Any data - that is passed will be available to the event handling function in the `data` - property of the event object. The event handling function always receives the - event object as its first argument. +* `.on()` method takes an event type and an event handling function as arguments. Optionally, it can also receive event-related data as its second argument, pushing the event handling function to the third argument. Any data that is passed will be available to the event handling function in the `data` property of the event object. The event handling function always receives the event object as its first argument. -- `.trigger()` method takes an event type as its argument. Optionally, it can - also take an array of values. These values will be passed to the event - handling function as arguments after the event object. +* `.trigger()` method takes an event type as its argument. Optionally, it can also take an array of values. These values will be passed to the event handling function as arguments after the event object. -Here is an example of the usage of `.on()` and `.trigger()` that uses -custom data in both cases: +Here is an example of the usage of `.on()` and `.trigger()` that uses custom data in both cases: ``` $( document ).on( "myCustomEvent", { @@ -170,15 +136,9 @@ $( document ).trigger( "myCustomEvent", [ "bim", "baz" ] ); ### A Sample Application -To demonstrate the power of custom events, we're going to create a simple tool -for searching Twitter. The tool will offer several ways for a user to add -search terms to the display: by entering a search term in a text box, by -entering multiple search terms in the URL, and by querying Twitter for trending -terms. +To demonstrate the power of custom events, we're going to create a simple tool for searching Twitter. The tool will offer several ways for a user to add search terms to the display: by entering a search term in a text box, by entering multiple search terms in the URL, and by querying Twitter for trending terms. -The results for each term will be shown in a results container; these -containers will be able to be expanded, collapsed, refreshed, and removed, -either individually or all at once. +The results for each term will be shown in a results container; these containers will be able to be expanded, collapsed, refreshed, and removed, either individually or all at once. When we're done, it will look like this: @@ -201,42 +161,23 @@ When we're done, it will look like this:
  • ``` -This gives us a container (`#twitter`) for our widget, a template for our results -containers (hidden via CSS), and a simple form where users can input a search -term. (For the sake of simplicity, we're going to assume that our application -is JavaScript-only and that our users will always have CSS.) +This gives us a container (`#twitter`) for our widget, a template for our results containers (hidden via CSS), and a simple form where users can input a search term. (For the sake of simplicity, we're going to assume that our application is JavaScript-only and that our users will always have CSS.) -There are two types of objects we'll want to act on: the results containers, -and the Twitter container. +There are two types of objects we'll want to act on: the results containers, and the Twitter container. -The results containers are the heart of the application. We'll create a plugin -that will prepare each results container once it's added to the Twitter -container. Among other things, it will bind the custom events for each -container and add the action buttons at the top right of each container. Each -results container will have the following custom events: +The results containers are the heart of the application. We'll create a plugin that will prepare each results container once it's added to the Twitter container. Among other things, it will bind the custom events for each container and add the action buttons at the top right of each container. Each results container will have the following custom events: -- `refresh` — Mark the container as being in the "refreshing" state, and fire - the request to fetch the data for the search term. +* `refresh` — Mark the container as being in the "refreshing" state, and fire the request to fetch the data for the search term. -- `populate` — Receive the returned JSON data and use it to populate the container. +* `populate` — Receive the returned JSON data and use it to populate the container. -- `remove` — Remove the container from the page after the user verifies the - request to do so. Verification can be bypassed by passing `true` as the second - argument to the event handler. The `remove` event also removes the term - associated with the results container from the global object containing the - search terms. +* `remove` — Remove the container from the page after the user verifies the request to do so. Verification can be bypassed by passing `true` as the second argument to the event handler. The `remove` event also removes the term associated with the results container from the global object containing the search terms. -- `collapse` — Add a class of collapsed to the container, which will hide the - results via CSS. It will also turn the container's "Collapse" button into an - "Expand" button. +* `collapse` — Add a class of collapsed to the container, which will hide the results via CSS. It will also turn the container's "Collapse" button into an "Expand" button. -- `expand` — Remove the collapsed class from the container. It will also turn - the container's "Expand" button into a "Collapse" button. +* `expand` — Remove the collapsed class from the container. It will also turn the container's "Expand" button into a "Collapse" button. -The plugin is also responsible for adding the action buttons to the container. -It binds a click event to each action's list item, and uses the list item's -class to determine which custom event will be triggered on the corresponding -results container. +The plugin is also responsible for adding the action buttons to the container. It binds a click event to each action's list item, and uses the list item's class to determine which custom event will be triggered on the corresponding results container. ``` $.fn.twitterResult = function( settings ) { @@ -345,17 +286,9 @@ $.fn.twitterResult.events = { The Twitter container itself will have just two custom events: -- `getResults` — Receives a search term and checks to determine whether there's - already a results container for the term; if not, adds a results container - using the results template, set up the results container using the - `$.fn.twitterResult` plugin discussed above, and then triggers the `refresh` - event on the results container in order to actually load the results. - Finally, it will store the search term so the application knows not to - re-fetch the term. +* `getResults` — Receives a search term and checks to determine whether there's already a results container for the term; if not, adds a results container using the results template, set up the results container using the `$.fn.twitterResult` plugin discussed above, and then triggers the `refresh` event on the results container in order to actually load the results. Finally, it will store the search term so the application knows not to re-fetch the term. -- `getTrends` — Queries Twitter for the top 10 trending terms, then iterates - over them and triggers the `getResults` event for - each of them, thereby adding a results container for each term. +* `getTrends` — Queries Twitter for the top 10 trending terms, then iterates over them and triggers the `getResults` event for each of them, thereby adding a results container for each term. Here's how the Twitter container bindings look: @@ -394,14 +327,9 @@ $( "#twitter" ).on( "getResults", function( e, term ) { }); ``` -So far, we've written a lot of code that does approximately nothing, but that's -OK. By specifying all the behaviors that we want our core objects to have, -we've created a solid framework for rapidly building out the interface. +So far, we've written a lot of code that does approximately nothing, but that's OK. By specifying all the behaviors that we want our core objects to have, we've created a solid framework for rapidly building out the interface. -Let's start by hooking up our text input and the "Load Trending Terms" button. -For the text input, we'll capture the term that was entered in the input and -pass it as we trigger the Twitter container's `getResults` event. Clicking the -"Load Trending Terms" will trigger the Twitter container's `getTrends` event: +Let's start by hooking up our text input and the "Load Trending Terms" button. For the text input, we'll capture the term that was entered in the input and pass it as we trigger the Twitter container's `getResults` event. Clicking the "Load Trending Terms" will trigger the Twitter container's `getTrends` event: ``` $( "form" ).submit(function( event ) { @@ -415,11 +343,7 @@ $( "#get_trends" ).click(function() { }); ``` -By adding a few buttons with the appropriate ID's, we can make it possible to -remove, collapse, expand, and refresh all results containers at once, as shown -below. For the remove button, note how we're passing a value of `true` to the -event handler as its second argument, telling the event handler that we don't -want to verify the removal of individual containers. +By adding a few buttons with the appropriate ID's, we can make it possible to remove, collapse, expand, and refresh all results containers at once, as shown below. For the remove button, note how we're passing a value of `true` to the event handler as its second argument, telling the event handler that we don't want to verify the removal of individual containers. ``` $.each([ "refresh", "expand", "collapse" ], function( i, ev ) { @@ -437,13 +361,4 @@ $( "#remove" ).click(function( e ) { ### Conclusion -Custom events offer a new way of thinking about your code: they put the -emphasis on the target of a behavior, not on the element that triggers it. If -you take the time at the outset to spell out the pieces of your application, as -well as the behaviors those pieces need to exhibit, custom events can provide a -powerful way for you to "talk" to those pieces, either one at a time or en -masse. Once the behaviors of a piece have been described, it becomes trivial to -trigger those behaviors from anywhere, allowing for rapid creation of and -experimentation with interface options. Finally, custom events can enhance code -readability and maintainability, by making clear the relationship between an -element and its behaviors. +Custom events offer a new way of thinking about your code: they put the emphasis on the target of a behavior, not on the element that triggers it. If you take the time at the outset to spell out the pieces of your application, as well as the behaviors those pieces need to exhibit, custom events can provide a powerful way for you to "talk" to those pieces, either one at a time or en masse. Once the behaviors of a piece have been described, it becomes trivial to trigger those behaviors from anywhere, allowing for rapid creation of and experimentation with interface options. Finally, custom events can enhance code readability and maintainability, by making clear the relationship between an element and its behaviors. From 970ad525818ecb97c11d3ca408b1aae18a5bfe1a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Wed, 5 Nov 2014 14:46:29 -0500 Subject: [PATCH 072/247] Introduction to Events: Cleanup --- page/events/introduction-to-events.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/page/events/introduction-to-events.md b/page/events/introduction-to-events.md index 849dede4..5689e6a7 100644 --- a/page/events/introduction-to-events.md +++ b/page/events/introduction-to-events.md @@ -143,7 +143,6 @@ $( "form" ).on( "submit", function( event ) { event.stopPropagation(); // Make an AJAX request to submit the form data - }); ``` @@ -164,6 +163,5 @@ $( "form" ).on( "submit", function( event ) { console.log( event ); // Make an AJAX request to submit the form data - }); ``` From fcd6a10e39588680a97b7a37f6fd3168e07b8e0c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Wed, 5 Nov 2014 14:48:07 -0500 Subject: [PATCH 073/247] Triggering Event Handlers: Remove hard breaks in prose --- page/events/triggering-event-handlers.md | 23 ++++++----------------- 1 file changed, 6 insertions(+), 17 deletions(-) diff --git a/page/events/triggering-event-handlers.md b/page/events/triggering-event-handlers.md index b4a55a0b..2d10c1fd 100644 --- a/page/events/triggering-event-handlers.md +++ b/page/events/triggering-event-handlers.md @@ -6,21 +6,16 @@ attribution: - jQuery Fundamentals --- -jQuery provides a way to trigger the event handlers bound to an element without any user interaction via the -`.trigger()` method. +jQuery provides a way to trigger the event handlers bound to an element without any user interaction via the `.trigger()` method. ## What handlers can be .trigger()'d? -jQuery's event handling system is a layer on top of native browser events. When an event handler is added using -`.on( "click", function() {...} )`, it can be triggered using jQuery's `.trigger( "click" )` because jQuery stores a -reference to that handler when it is originally added. Additionally, it will trigger the JavaScript inside the -`onclick` attribute. The `.trigger()` function cannot be used to mimic native browser events, such as -clicking on a file input box or an anchor tag. This is because, there is no event handler attached using jQuery's -event system that corresponds to these events. +jQuery's event handling system is a layer on top of native browser events. When an event handler is added using `.on( "click", function() {...} )`, it can be triggered using jQuery's `.trigger( "click" )` because jQuery stores a reference to that handler when it is originally added. Additionally, it will trigger the JavaScript inside the `onclick` attribute. The `.trigger()` function cannot be used to mimic native browser events, such as clicking on a file input box or an anchor tag. This is because, there is no event handler attached using jQuery's event system that corresponds to these events. ``` Learn jQuery ``` + ``` // This will not change the current page $( "a" ).trigger( "click" ); @@ -28,8 +23,7 @@ $( "a" ).trigger( "click" ); ## How can I mimic a native browser event, if not `.trigger()`? -In order to trigger a native browser event, you have to use [document.createEventObject](http://msdn.microsoft.com/en-us/library/ie/ms536390%28v=vs.85%29.aspx) for < IE9 and [document.createEvent](https://developer.mozilla.org/en/DOM/document.createEvent) for all other browsers. -Using these two APIs, you can programmatically create an event that behaves exactly as if someone has actually clicked on a file input box. The default action will happen, and the browse file dialog will display. +In order to trigger a native browser event, you have to use [document.createEventObject](http://msdn.microsoft.com/en-us/library/ie/ms536390%28v=vs.85%29.aspx) for < IE9 and [document.createEvent](https://developer.mozilla.org/en/DOM/document.createEvent) for all other browsers. Using these two APIs, you can programmatically create an event that behaves exactly as if someone has actually clicked on a file input box. The default action will happen, and the browse file dialog will display. The jQuery UI Team created [jquery.simulate.js](https://github.com/eduardolundgren/jquery-simulate/blob/master/jquery.simulate.js) in order to simplify triggering a native browser event for use in their automated testing. Its usage is modeled after jQuery's trigger. @@ -54,11 +48,7 @@ For more information see the [triggerHandler documentation](http://api.jquery.co ## Don't use `.trigger()` simply to execute specific functions -While this method has its uses, it should not be used simply to call a function that was bound as a click -handler. Instead, you should store the function you want to call in a -variable, and pass the variable name when you do your binding. Then, you can -call the function itself whenever you want, without the need for -`.trigger()`. +While this method has its uses, it should not be used simply to call a function that was bound as a click handler. Instead, you should store the function you want to call in a variable, and pass the variable name when you do your binding. Then, you can call the function itself whenever you want, without the need for `.trigger()`. ``` // Triggering an event handler the right way @@ -75,5 +65,4 @@ $( "p" ).on( "click", foo ); foo(); // instead of $( "p" ).trigger( "click" ) ``` -A more complex architecture can built on top of trigger using the [publish-subscribe pattern](http://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern) using [jQuery plugins](https://gist.github.com/661855). -With this technique, `.trigger()` can be used to notify other sections of code that an application specific event has happened. +A more complex architecture can built on top of trigger using the [publish-subscribe pattern](http://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern) using [jQuery plugins](https://gist.github.com/661855). With this technique, `.trigger()` can be used to notify other sections of code that an application specific event has happened. From ec2923ee95ce71bcec063c2267135c6ab939ac24 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Wed, 5 Nov 2014 14:48:28 -0500 Subject: [PATCH 074/247] Triggering Event Handlers: Update link for jquery-simulate --- page/events/triggering-event-handlers.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/page/events/triggering-event-handlers.md b/page/events/triggering-event-handlers.md index 2d10c1fd..6aedff43 100644 --- a/page/events/triggering-event-handlers.md +++ b/page/events/triggering-event-handlers.md @@ -25,7 +25,7 @@ $( "a" ).trigger( "click" ); In order to trigger a native browser event, you have to use [document.createEventObject](http://msdn.microsoft.com/en-us/library/ie/ms536390%28v=vs.85%29.aspx) for < IE9 and [document.createEvent](https://developer.mozilla.org/en/DOM/document.createEvent) for all other browsers. Using these two APIs, you can programmatically create an event that behaves exactly as if someone has actually clicked on a file input box. The default action will happen, and the browse file dialog will display. -The jQuery UI Team created [jquery.simulate.js](https://github.com/eduardolundgren/jquery-simulate/blob/master/jquery.simulate.js) in order to simplify triggering a native browser event for use in their automated testing. Its usage is modeled after jQuery's trigger. +The jQuery UI Team created [jquery.simulate.js](https://github.com/jquery/jquery-simulate/) in order to simplify triggering a native browser event for use in their automated testing. Its usage is modeled after jQuery's trigger. ``` // Triggering a native browser event using the simulate plugin From 1f72f19dc233e70be43445c0bd41cd513f4f98f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Wed, 5 Nov 2014 16:37:30 -0500 Subject: [PATCH 075/247] Style Guide: Switch front matter to JSON --- page/style-guide.md | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/page/style-guide.md b/page/style-guide.md index b646cb40..fa9f0934 100644 --- a/page/style-guide.md +++ b/page/style-guide.md @@ -10,28 +10,29 @@ customFields: ## Formatting Conventions -Articles in the learn site are authored with [GitHub Flavored Markdown](http://github.github.com/github-flavored-markdown/), and the beginning of each article contains some [YAML](http://www.yaml.org/) "front matter" that contains metadata used when the article is published. +Articles in the learn site are authored with [GitHub Flavored Markdown](http://github.github.com/github-flavored-markdown/), and the beginning of each article contains some JSON "front matter" that contains metadata used when the article is published. ### Article Header Metadata Each article should have the following header (see below as some metatags are optional): ``` ---- -title:
    -level: [beginner|intermediate|advance] -source: -attribution: - - Ralph Whitbeck - - John Paul ---- + ``` The `source` and `attribution` properties are optional, and should be used primarily if you are importing an article from an outside source where it was published before being donated for inclusion in the learn site. You should **not** include these properties if you are adding a new article or editing an existing one, as your contribution will be acknowledged via the git commit logs. ### Code Blocks -Code blocks should be set off with triple backticks and should **not** be indented. (That is to say, the site prefers the use of "fenced blocks"notation supported by [gfm](http://github.github.com/github-flavored-markdown/).) +Code blocks should be set off with triple backticks and should **not** be indented. (That is to say, the site prefers the use of "fenced blocks" notation supported by [gfm](http://github.github.com/github-flavored-markdown/).) ## Writing Style From 53d313a855f8769882f55a26a067e0fa94bf454b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Wed, 5 Nov 2014 17:46:53 -0500 Subject: [PATCH 076/247] Pages: Use JSON for front matter --- CONTRIBUTING.md | 16 +++++++------ page/about-jquery.md | 18 ++++++++------- page/about-jquery/additional-support.md | 6 ++--- page/about-jquery/how-jquery-works.md | 8 +++---- page/about.md | 16 +++++++------ page/ajax.md | 18 ++++++++------- page/ajax/ajax-and-forms.md | 13 +++++------ page/ajax/ajax-events.md | 13 +++++------ page/ajax/jquery-ajax-methods.md | 13 +++++------ page/ajax/key-concepts.md | 13 +++++------ page/ajax/working-with-jsonp.md | 13 +++++------ page/code-organization.md | 18 ++++++++------- .../beware-anonymous-functions.md | 13 +++++------ page/code-organization/concepts.md | 13 +++++------ page/code-organization/deferreds.md | 19 +++++++-------- page/code-organization/deferreds/examples.md | 19 +++++++-------- .../deferreds/jquery-deferreds.md | 19 +++++++-------- .../code-organization/dont-repeat-yourself.md | 13 +++++------ .../feature-browser-detection.md | 8 +++---- page/effects.md | 18 ++++++++------- page/effects/custom-effects.md | 13 +++++------ page/effects/intro-to-effects.md | 8 +++---- page/effects/queue-and-dequeue-explained.md | 10 ++++---- page/effects/uses-of-queue-and-dequeue.md | 10 ++++---- page/events.md | 18 ++++++++------- page/events/event-basics.md | 11 ++++----- page/events/event-delegation.md | 13 +++++------ page/events/event-extensions.md | 8 +++---- page/events/event-helpers.md | 13 +++++------ page/events/handling-events.md | 13 +++++------ page/events/history-of-events.md | 8 +++---- page/events/inside-event-handling-function.md | 13 +++++------ page/events/introduction-to-custom-events.md | 13 +++++------ page/events/introduction-to-events.md | 13 +++++------ page/events/triggering-event-handlers.md | 13 +++++------ page/javascript-101.md | 23 ++++++++++--------- page/javascript-101/arrays.md | 13 +++++------ page/javascript-101/closures.md | 13 +++++------ page/javascript-101/conditional-code.md | 13 +++++------ page/javascript-101/functions.md | 13 +++++------ page/javascript-101/getting-started.md | 13 +++++------ page/javascript-101/loops.md | 13 +++++------ page/javascript-101/objects.md | 14 +++++------ page/javascript-101/operators.md | 13 +++++------ page/javascript-101/reserved-words.md | 14 +++++------ page/javascript-101/running-code.md | 13 +++++------ page/javascript-101/scope.md | 13 +++++------ page/javascript-101/syntax-basics.md | 13 +++++------ page/javascript-101/testing-type.md | 13 +++++------ page/javascript-101/this-keyword.md | 13 +++++------ page/javascript-101/types.md | 13 +++++------ page/jquery-mobile.md | 16 +++++++------ page/jquery-mobile/getting-started.md | 8 +++---- page/jquery-mobile/theme-roller.md | 8 +++---- page/jquery-ui.md | 16 +++++++------ page/jquery-ui/environments.md | 8 +++---- page/jquery-ui/environments/amd.md | 8 +++---- page/jquery-ui/environments/bower.md | 8 +++---- page/jquery-ui/getting-started.md | 8 +++---- page/jquery-ui/how-jquery-ui-works.md | 8 +++---- page/jquery-ui/theming.md | 8 +++---- page/jquery-ui/theming/api.md | 8 +++---- page/jquery-ui/theming/themeroller.md | 9 ++++---- page/jquery-ui/theming/write-a-theme.md | 8 +++---- page/jquery-ui/widget-factory.md | 8 +++---- .../widget-factory/extending-widgets.md | 8 +++---- .../how-to-use-the-widget-factory.md | 8 +++---- .../why-use-the-widget-factory.md | 8 +++---- .../widget-method-invocation.md | 8 +++---- page/performance.md | 18 ++++++++------- page/performance/append-outside-loop.md | 13 +++++------ page/performance/cache-loop-length.md | 13 +++++------ .../detach-elements-before-work-with-them.md | 13 +++++------ .../dont-act-on-absent-elements.md | 13 +++++------ page/performance/optimize-selectors.md | 13 +++++------ page/performance/read-the-source.md | 13 +++++------ .../use-stylesheets-for-changing-css.md | 13 +++++------ page/plugins.md | 18 ++++++++------- page/plugins/advanced-plugin-concepts.md | 8 +++---- page/plugins/basic-plugin-creation.md | 13 +++++------ page/plugins/finding-evaluating-plugins.md | 13 +++++------ .../stateful-plugins-with-widget-factory.md | 17 +++++++------- page/style-guide.md | 19 +++++++-------- page/using-jquery-core.md | 18 ++++++++------- page/using-jquery-core/attributes.md | 8 +++---- .../avoid-conflicts-other-libraries.md | 14 +++++------ .../css-styling-dimensions.md | 8 +++---- page/using-jquery-core/data-methods.md | 13 +++++------ page/using-jquery-core/document-ready.md | 8 +++---- .../dollar-object-vs-function.md | 13 +++++------ page/using-jquery-core/faq.md | 18 ++++++++------- ...ncheck-a-checkbox-input-or-radio-button.md | 8 +++---- ...etermine-the-state-of-a-toggled-element.md | 8 +++---- .../how-do-i-disable-enable-a-form-element.md | 8 +++---- ...get-the-text-value-of-a-selected-option.md | 8 +++---- ...native-dom-element-from-a-jquery-object.md | 8 +++---- ...m-the-3rd-element-of-a-list-of-10-items.md | 8 +++---- ...hat-has-characters-used-in-css-notation.md | 8 +++---- ...w-do-i-select-an-item-using-class-or-id.md | 8 +++---- ...ments-when-i-already-have-a-dom-element.md | 8 +++---- ...how-do-i-test-whether-an-element-exists.md | 8 +++---- ...ether-an-element-has-a-particular-class.md | 8 +++---- page/using-jquery-core/iterating.md | 6 ++--- page/using-jquery-core/jquery-object.md | 8 +++---- .../manipulating-elements.md | 13 +++++------ page/using-jquery-core/selecting-elements.md | 8 +++---- page/using-jquery-core/traversing.md | 8 +++---- page/using-jquery-core/understanding-index.md | 11 ++++----- page/using-jquery-core/utility-methods.md | 13 +++++------ .../working-with-selections.md | 8 +++---- 110 files changed, 646 insertions(+), 659 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index bdaba76f..0b2fb95f 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,10 +1,12 @@ ---- -title: Contributing -customFields: - - - key: "is_chapter" - value: 0 ---- + Depending on your level of experience with some of the workflows common to many open source projects, e.g. git/GitHub, the command line, and setting up a local development environment, contributing to this site may be a breeze or come with a bit of a learning curve. If you fit into the former group, great! Jump ahead to learn how to get started. diff --git a/page/about-jquery.md b/page/about-jquery.md index 5814541c..412cc1e8 100644 --- a/page/about-jquery.md +++ b/page/about-jquery.md @@ -1,10 +1,12 @@ ---- -title: About jQuery -level: beginner -customFields: - - - key: "icon" - value: "certificate" ---- + Getting started with jQuery can be easy or challenging, depending on your experience with JavaScript, HTML, CSS, and programming concepts in general. In addition to these articles, you can read about the [history of jQuery](https://jquery.org/history/) and the [licensing terms](https://jquery.org/license/) that apply to jQuery projects. You can also [make a donation](https://jquery.org/donate/) to help the [jQuery team](https://jquery.org/team/) continue to improve jQuery. diff --git a/page/about-jquery/additional-support.md b/page/about-jquery/additional-support.md index 4d586e40..a3d3ff0e 100644 --- a/page/about-jquery/additional-support.md +++ b/page/about-jquery/additional-support.md @@ -1,6 +1,6 @@ ---- -title : Additional jQuery Support ---- + While we hope to cover most jQuery-related topics on this site, you may need additional or more immediate support. The following resources can prove useful. diff --git a/page/about-jquery/how-jquery-works.md b/page/about-jquery/how-jquery-works.md index 6ebb85ca..4fbb1eab 100644 --- a/page/about-jquery/how-jquery-works.md +++ b/page/about-jquery/how-jquery-works.md @@ -1,7 +1,7 @@ ---- -title : How jQuery Works -level: beginner ---- + ### jQuery: The Basics diff --git a/page/about.md b/page/about.md index b099dff0..770579a3 100644 --- a/page/about.md +++ b/page/about.md @@ -1,10 +1,12 @@ ---- -title: About This Site -customFields: - - - key: "is_chapter" - value: 0 ---- + Learning how and when to use jQuery is a different process for each and every web developer, depending largely on experience with the primary tools for front-end development (HTML, CSS, and JavaScript) and knowledge of general programming principles. Over the years developers of all stripes have come to rely on our [API documentation](http://api.jquery.com) for help figuring out how to do exactly what they need to do. diff --git a/page/ajax.md b/page/ajax.md index 7f0cab3d..95315bb7 100644 --- a/page/ajax.md +++ b/page/ajax.md @@ -1,11 +1,13 @@ ---- -title: Ajax -level: beginner -customFields: - - - key: "icon" - value: "refresh" ---- + Traditionally webpages required reloading to update their content. For web-based email this meant that users had to manually reload their inbox to check and see if they had new mail. This had huge drawbacks: it was slow and it required user input. When the user reloaded their inbox, the server had to reconstruct the entire web page and resend all of the HTML, CSS, JavaScript, as well as the user's email. This was hugely inefficient. Ideally, the server should only have to send the user's new messages, not the entire page. By 2003, all the major browsers solved this issue by adopting the XMLHttpRequest (XHR) object, allowing browsers to communicate with the server without requiring a page reload. diff --git a/page/ajax/ajax-and-forms.md b/page/ajax/ajax-and-forms.md index cf19b78e..3c3c4d2a 100644 --- a/page/ajax/ajax-and-forms.md +++ b/page/ajax/ajax-and-forms.md @@ -1,10 +1,9 @@ ---- -title: Ajax and Forms -level: beginner -source: http://jqfundamentals.com/legacy -attribution: - - jQuery Fundamentals ---- + jQuery's ajax capabilities can be especially useful when dealing with forms. There are several advantages, which can range from serialization, to simple client-side validation (e.g. "Sorry, that username is taken"), to [prefilters](http://api.jquery.com/jQuery.ajaxPrefilter/) (explained below), and even more! diff --git a/page/ajax/ajax-events.md b/page/ajax/ajax-events.md index 3bc650e4..1c5dbad8 100644 --- a/page/ajax/ajax-events.md +++ b/page/ajax/ajax-events.md @@ -1,10 +1,9 @@ ---- -title : Ajax Events -level: beginner -source: http://jqfundamentals.com/legacy -attribution: - - jQuery Fundamentals ---- + Often, you'll want to perform an operation whenever an Ajax requests starts or stops, such as showing or hiding a loading indicator. Rather than defining this behavior inside every Ajax request, you can bind Ajax events to elements just like you'd bind other events. For a complete list of Ajax events, visit [Ajax Events documentation on docs.jquery.com](http://docs.jquery.com/Ajax_Events). diff --git a/page/ajax/jquery-ajax-methods.md b/page/ajax/jquery-ajax-methods.md index 14b3a4e7..85db7500 100644 --- a/page/ajax/jquery-ajax-methods.md +++ b/page/ajax/jquery-ajax-methods.md @@ -1,10 +1,9 @@ ---- -title : jQuery's Ajax-Related Methods -level: beginner -source: http://jqfundamentals.com/legacy -attribution: - - jQuery Fundamentals ---- + While jQuery does offer many Ajax-related convenience methods, the core `$.ajax()` method is at the heart of all of them, and understanding it is imperative. We'll review it first, and then touch briefly on the convenience methods. diff --git a/page/ajax/key-concepts.md b/page/ajax/key-concepts.md index 2caeafde..bda84ee7 100644 --- a/page/ajax/key-concepts.md +++ b/page/ajax/key-concepts.md @@ -1,10 +1,9 @@ ---- -title : Key Concepts -level: beginner -source: http://jqfundamentals.com/legacy -attribution: - - jQuery Fundamentals ---- + Proper use of Ajax-related jQuery methods requires understanding some key concepts first. diff --git a/page/ajax/working-with-jsonp.md b/page/ajax/working-with-jsonp.md index 950d5476..765be086 100644 --- a/page/ajax/working-with-jsonp.md +++ b/page/ajax/working-with-jsonp.md @@ -1,10 +1,9 @@ ---- -title : Working with JSONP -level: beginner -source: http://jqfundamentals.com/legacy -attribution: - - jQuery Fundamentals ---- + The advent of JSONP — essentially a consensual cross-site scripting hack — has opened the door to powerful mashups of content. Many prominent sites provide JSONP services, allowing you access to their content via a predefined API. A particularly great source of JSONP-formatted data is the [Yahoo! Query Language](http://developer.yahoo.com/yql/console/), which we'll use in the following example to fetch news about cats. diff --git a/page/code-organization.md b/page/code-organization.md index e80ee535..696a78b6 100644 --- a/page/code-organization.md +++ b/page/code-organization.md @@ -1,10 +1,12 @@ ---- -title: Code Organization -level: intermediate -customFields: - - - key: "icon" - value: "sitemap" ---- + Understanding the basic mechanics is one thing, but the essence of building applications is understanding how to organize code so that it is navigable and well-encapsulated instead of a whole slew of global functions. diff --git a/page/code-organization/beware-anonymous-functions.md b/page/code-organization/beware-anonymous-functions.md index 092037cb..31bd9e60 100644 --- a/page/code-organization/beware-anonymous-functions.md +++ b/page/code-organization/beware-anonymous-functions.md @@ -1,10 +1,9 @@ ---- -title: Beware Anonymous Functions -level: beginner -source: http://jqfundamentals.com/legacy -attribution: - - jQuery Fundamentals ---- + Anonymous functions bound everywhere are a pain. They're difficult to debug, maintain, test, or reuse. Instead, use an object literal to organize and name your handlers and callbacks. diff --git a/page/code-organization/concepts.md b/page/code-organization/concepts.md index e1f5db43..ab18fb7c 100644 --- a/page/code-organization/concepts.md +++ b/page/code-organization/concepts.md @@ -1,10 +1,9 @@ ---- -title: Code Organization Concepts -level: beginner -source: http://jqfundamentals.com/legacy -attribution: - - jQuery Fundamentals ---- + When you move beyond adding simple enhancements to your website with jQuery and start developing full-blown client-side applications, you need to consider how to organize your code. In this chapter, we'll take a look at various code organization patterns you can use in your jQuery application and explore the RequireJS dependency management and build system. diff --git a/page/code-organization/deferreds.md b/page/code-organization/deferreds.md index 4afda8b5..1c921b6e 100644 --- a/page/code-organization/deferreds.md +++ b/page/code-organization/deferreds.md @@ -1,12 +1,13 @@ ---- -title: Deferreds -level: advanced -source: http://msdn.microsoft.com/en-us/magazine/gg723713.aspx -attribution: - - Julian Aubourg - - Addy Osmani - - Andree Hansson ---- + At a high-level, deferreds can be thought of as a way to represent asynchronous operations which can take a long time to complete. They're the asynchronous alternative to blocking functions and the general idea is that rather than your application blocking while it awaits some request to complete before returning a result, a deferred object can instead be returned immediately. You can then attach callbacks to the deferred object: they will be called once the request has actually completed. diff --git a/page/code-organization/deferreds/examples.md b/page/code-organization/deferreds/examples.md index dd82de7d..eb1d7aec 100644 --- a/page/code-organization/deferreds/examples.md +++ b/page/code-organization/deferreds/examples.md @@ -1,12 +1,13 @@ ---- -title: Deferred examples -level: advanced -source: http://msdn.microsoft.com/en-us/magazine/gg723713.aspx -attribution: - - Julian Aubourg - - Addy Osmani - - Andree Hansson ---- + ## Further Deferreds examples diff --git a/page/code-organization/deferreds/jquery-deferreds.md b/page/code-organization/deferreds/jquery-deferreds.md index 8e269858..09945b5c 100644 --- a/page/code-organization/deferreds/jquery-deferreds.md +++ b/page/code-organization/deferreds/jquery-deferreds.md @@ -1,12 +1,13 @@ ---- -title: jQuery Deferreds -level: advanced -source: http://msdn.microsoft.com/en-us/magazine/gg723713.aspx -attribution: - - Julian Aubourg - - Addy Osmani - - Andree Hansson ---- + ## jQuery Deferreds diff --git a/page/code-organization/dont-repeat-yourself.md b/page/code-organization/dont-repeat-yourself.md index 67285879..c01a1cab 100644 --- a/page/code-organization/dont-repeat-yourself.md +++ b/page/code-organization/dont-repeat-yourself.md @@ -1,10 +1,9 @@ ---- -title: Keep Things DRY -level: beginner -attribution: -source: http://jqfundamentals.com/legacy - - jQuery Fundamentals ---- + Don't repeat yourself; if you're repeating yourself, you're doing it wrong. diff --git a/page/code-organization/feature-browser-detection.md b/page/code-organization/feature-browser-detection.md index ebf9b26e..490480b5 100644 --- a/page/code-organization/feature-browser-detection.md +++ b/page/code-organization/feature-browser-detection.md @@ -1,7 +1,7 @@ ---- -title: Feature & Browser Detection -level: beginner ---- + ### Can I Use This Browser Feature? diff --git a/page/effects.md b/page/effects.md index c05e8adf..2d32c1ca 100644 --- a/page/effects.md +++ b/page/effects.md @@ -1,11 +1,13 @@ ---- -title: Effects -level: beginner -customFields: - - - key: "icon" - value: "picture" ---- + jQuery makes it trivial to add simple effects to your page. Effects can use the built-in settings, or provide a customized duration. You can also create custom animations of arbitrary CSS properties. diff --git a/page/effects/custom-effects.md b/page/effects/custom-effects.md index a4996723..350a6ce0 100644 --- a/page/effects/custom-effects.md +++ b/page/effects/custom-effects.md @@ -1,10 +1,9 @@ ---- -title : Custom Effects with .animate() -level: beginner -source: http://jqfundamentals.com/legacy -attribution: - - jQuery Fundamentals ---- + jQuery makes it possible to animate arbitrary CSS properties via the `.animate()` method. The `.animate()` method lets you animate to a set value, or to a value relative to the current value. diff --git a/page/effects/intro-to-effects.md b/page/effects/intro-to-effects.md index 66339d9e..abbcfbe1 100644 --- a/page/effects/intro-to-effects.md +++ b/page/effects/intro-to-effects.md @@ -1,7 +1,7 @@ ---- -title: Introduction to Effects -level: beginner ---- + ## Showing and Hiding Content diff --git a/page/effects/queue-and-dequeue-explained.md b/page/effects/queue-and-dequeue-explained.md index 70e24779..c527d75f 100644 --- a/page/effects/queue-and-dequeue-explained.md +++ b/page/effects/queue-and-dequeue-explained.md @@ -1,8 +1,8 @@ ---- -title: Queue & Dequeue Explained -level: advanced -source: http://jqueryfordesigners.com/api-queue-dequeue/ ---- + When you use the `.animate()`, `.show()`, `.hide()`, `.slideUp()`, etc. effect methods, you're adding a job to the effects queue. By default, using `.queue()` and passing a function, will add it to the effects queue. So we're creating our own bespoke animation step: diff --git a/page/effects/uses-of-queue-and-dequeue.md b/page/effects/uses-of-queue-and-dequeue.md index 3a43e5e9..bb3a7679 100644 --- a/page/effects/uses-of-queue-and-dequeue.md +++ b/page/effects/uses-of-queue-and-dequeue.md @@ -1,8 +1,8 @@ ---- -title: The uses of jQuery .queue() and .dequeue() -level: advanced -source: http://gnarf.net/2010/09/30/the-uses-of-jquery-queue-and-dequeue/ ---- + Queues in jQuery are used for animations. You can use them for any purpose you like. They are an array of functions stored on a per element basis, using `jQuery.data()`. They are First In, First Out (FIFO). You can add a function to the queue by calling `.queue()`, and you remove (by calling) the functions using `.dequeue()`. diff --git a/page/events.md b/page/events.md index 1e53ce8a..d59969e6 100644 --- a/page/events.md +++ b/page/events.md @@ -1,11 +1,13 @@ ---- -title: Events -level: beginner -customFields: - - - key: "icon" - value: "tasks" ---- + jQuery provides simple methods for attaching event handlers to selections. When an event occurs, the provided function is executed. Inside the function, `this` refers to the element that was clicked. diff --git a/page/events/event-basics.md b/page/events/event-basics.md index 7b510e88..bc35e5ab 100644 --- a/page/events/event-basics.md +++ b/page/events/event-basics.md @@ -1,9 +1,8 @@ ---- -title: jQuery Event Basics -attribution: - - jQuery Fundamentals -level: beginner ---- + ## jQuery Event Basics diff --git a/page/events/event-delegation.md b/page/events/event-delegation.md index d772a4b6..7dff6ef6 100644 --- a/page/events/event-delegation.md +++ b/page/events/event-delegation.md @@ -1,10 +1,9 @@ ---- -title : Understanding Event Delegation -level: intermediate -source: http://jqfundamentals.com/legacy -attribution: - - jQuery Fundamentals ---- + ## Introduction diff --git a/page/events/event-extensions.md b/page/events/event-extensions.md index b9311c5b..53ab9b00 100644 --- a/page/events/event-extensions.md +++ b/page/events/event-extensions.md @@ -1,7 +1,7 @@ ---- -title: jQuery Event Extensions -level: advanced ---- + jQuery offers several ways to extend its event system to provide custom functionality when events are attached to elements. Internally in jQuery, these extensions are primarily used to ensure that standard events such as `submit` and `change` behave consistently across browsers. However, they can also be used to define new events with custom behavior. diff --git a/page/events/event-helpers.md b/page/events/event-helpers.md index 86348f18..659fbfbd 100644 --- a/page/events/event-helpers.md +++ b/page/events/event-helpers.md @@ -1,10 +1,9 @@ ---- -title: Event Helpers -level: beginner -source: http://jqfundamentals.com/legacy -attribution: - - jQuery Fundamentals ---- + jQuery offers two event-related helper functions that save you a few keystrokes. diff --git a/page/events/handling-events.md b/page/events/handling-events.md index 87e9274e..12c3fc90 100644 --- a/page/events/handling-events.md +++ b/page/events/handling-events.md @@ -1,10 +1,9 @@ ---- -title : Handling Events -level: beginner -source: http://jqfundamentals.com/legacy -attribution: - - jQuery Fundamentals ---- + jQuery provides a method `.on()` to respond to any event on the selected elements. This is called an _event binding_. Although `.on()` isn't the only method provided for event binding, it is a best practice to use this for jQuery 1.7+. To learn more, [read more about the evolution of event binding in jQuery](/events/history-of-events). diff --git a/page/events/history-of-events.md b/page/events/history-of-events.md index fc3cd51e..605e6ced 100644 --- a/page/events/history-of-events.md +++ b/page/events/history-of-events.md @@ -1,7 +1,7 @@ ---- -title: History of jQuery Events -level: intermediate ---- + Throughout the evolution of jQuery the means of event binding has changed for various reasons ranging from performance to semantics. As of jQuery v1.7 the `.on()` method is the accepted means of both directly binding events and creating delegated events. This article aims to explore the history of *event delegation* from jQuery v1.0 to the present and how each version leverages it. diff --git a/page/events/inside-event-handling-function.md b/page/events/inside-event-handling-function.md index 963055b9..0e0f9519 100644 --- a/page/events/inside-event-handling-function.md +++ b/page/events/inside-event-handling-function.md @@ -1,10 +1,9 @@ ---- -title : Inside the Event Handling Function -level: beginner -source: http://jqfundamentals.com/legacy -attribution: - - jQuery Fundamentals ---- + Every event handling function receives an event object, which contains many properties and methods. The event object is most commonly used to prevent the default action of the event via the `.preventDefault()` method. However, the event object contains a number of other useful properties and methods, including: diff --git a/page/events/introduction-to-custom-events.md b/page/events/introduction-to-custom-events.md index 4602d89c..72287e43 100644 --- a/page/events/introduction-to-custom-events.md +++ b/page/events/introduction-to-custom-events.md @@ -1,10 +1,9 @@ ---- -title: Introducing Custom Events -level: intermediate -source: http://jqfundamentals.com/legacy -attribution: - - jQuery Fundamentals ---- + ## Custom Events diff --git a/page/events/introduction-to-events.md b/page/events/introduction-to-events.md index 5689e6a7..0998dcad 100644 --- a/page/events/introduction-to-events.md +++ b/page/events/introduction-to-events.md @@ -1,10 +1,9 @@ ---- -title: Introducing Events -level: beginner -source: http://jqfundamentals.com/legacy -attribution: - - jQuery Fundamentals ---- + ## Introduction diff --git a/page/events/triggering-event-handlers.md b/page/events/triggering-event-handlers.md index 6aedff43..1d4170c6 100644 --- a/page/events/triggering-event-handlers.md +++ b/page/events/triggering-event-handlers.md @@ -1,10 +1,9 @@ ---- -title : Triggering Event Handlers -level: intermediate -source: http://jqfundamentals.com/legacy -attribution: - - jQuery Fundamentals ---- + jQuery provides a way to trigger the event handlers bound to an element without any user interaction via the `.trigger()` method. diff --git a/page/javascript-101.md b/page/javascript-101.md index ba6a4763..abf0f04c 100644 --- a/page/javascript-101.md +++ b/page/javascript-101.md @@ -1,14 +1,15 @@ ---- -title : JavaScript 101 -level: beginner -source: http://jqfundamentals.com/legacy -attribution: - - jQuery Fundamentals -customFields: - - - key: "icon" - value: "pencil" ---- + ## Introduction diff --git a/page/javascript-101/arrays.md b/page/javascript-101/arrays.md index af86d78c..8c995939 100644 --- a/page/javascript-101/arrays.md +++ b/page/javascript-101/arrays.md @@ -1,10 +1,9 @@ ---- -title: Arrays -level: beginner -source: http://jqfundamentals.com/legacy -attribution: - - jQuery Fundamentals ---- + Arrays are zero-indexed, ordered lists of values. They are a handy way to store a set of related items of the same type (such as strings), though in reality, an array can include multiple types of items, including other arrays. diff --git a/page/javascript-101/closures.md b/page/javascript-101/closures.md index 878f66ac..1db5f7bd 100644 --- a/page/javascript-101/closures.md +++ b/page/javascript-101/closures.md @@ -1,10 +1,9 @@ ---- -title: Closures -level: beginner -source: http://jqfundamentals.com/legacy -attribution: - - jQuery Fundamentals ---- + Closures are an extension of the concept of scope. With closures, functions have access to variables that were available in the scope where the function was created. If that seems confusing, don’t worry: closures are generally best understood by example. diff --git a/page/javascript-101/conditional-code.md b/page/javascript-101/conditional-code.md index dcf60d94..a6006d94 100644 --- a/page/javascript-101/conditional-code.md +++ b/page/javascript-101/conditional-code.md @@ -1,10 +1,9 @@ ---- -title: Conditional Code -level: beginner -source: http://jqfundamentals.com/legacy -attribution: - - jQuery Fundamentals ---- + Sometimes a block of code should only be run under certain conditions. Flow control – via `if` and `else` blocks – lets you run code if certain conditions have been met. diff --git a/page/javascript-101/functions.md b/page/javascript-101/functions.md index 2080a68b..0e6884da 100644 --- a/page/javascript-101/functions.md +++ b/page/javascript-101/functions.md @@ -1,10 +1,9 @@ ---- -title: Functions -level: beginner -source: http://jqfundamentals.com/legacy -attribution: - - jQuery Fundamentals ---- + Functions contain blocks of code that need to be executed repeatedly. Functions can take zero or more arguments, and can optionally return a value. diff --git a/page/javascript-101/getting-started.md b/page/javascript-101/getting-started.md index 9c803c76..bb33f704 100644 --- a/page/javascript-101/getting-started.md +++ b/page/javascript-101/getting-started.md @@ -1,10 +1,9 @@ ---- -title: Getting Started -level: Beginner -source: http://jqfundamentals.com/legacy -attribution: - - jQuery Fundamentals ---- + ## Anatomy of a Web Page diff --git a/page/javascript-101/loops.md b/page/javascript-101/loops.md index ba56987c..8a93e268 100644 --- a/page/javascript-101/loops.md +++ b/page/javascript-101/loops.md @@ -1,10 +1,9 @@ ---- -title: Loops -level: beginner -source: http://jqfundamentals.com/legacy -attribution: - - jQuery Fundamentals ---- + Loops let a block of code run a certain number of times: diff --git a/page/javascript-101/objects.md b/page/javascript-101/objects.md index 56f066ce..17ff1b1e 100644 --- a/page/javascript-101/objects.md +++ b/page/javascript-101/objects.md @@ -1,10 +1,10 @@ ---- -title: Objects -level: beginner -source: http://jqfundamentals.com/legacy -attribution: - - jQuery Fundamentals ---- + + Objects contain one or more key-value pairs. The key portion can be any string. The value portion can be any type of value: a number, a string, an array, a function, or even another object. When one of these values is a function, it’s called a method of the object. Otherwise, they are called properties. As it turns out, nearly everything in JavaScript is an object – arrays, functions, numbers, even strings – and they all have properties and methods. diff --git a/page/javascript-101/operators.md b/page/javascript-101/operators.md index e87ad977..e26e5e86 100644 --- a/page/javascript-101/operators.md +++ b/page/javascript-101/operators.md @@ -1,10 +1,9 @@ ---- -title: Operators -level: beginner -source: http://jqfundamentals.com/legacy -attribution: - - jQuery Fundamentals ---- + Basic operators allow you to manipulate values. diff --git a/page/javascript-101/reserved-words.md b/page/javascript-101/reserved-words.md index 38a22e4f..7187d0fe 100644 --- a/page/javascript-101/reserved-words.md +++ b/page/javascript-101/reserved-words.md @@ -1,10 +1,10 @@ ---- -title: Reserved Words -level: beginner -source: http://jqfundamentals.com/legacy -attribution: - - jQuery Fundamentals ---- + + JavaScript has a number of "reserved words," or words that have special meaning in the language. You should avoid using these words in your code except when using them with their intended meaning. - break diff --git a/page/javascript-101/running-code.md b/page/javascript-101/running-code.md index 1f5cebc0..c01b5e5b 100644 --- a/page/javascript-101/running-code.md +++ b/page/javascript-101/running-code.md @@ -1,10 +1,9 @@ ---- -title: Running Code -level: beginner -source: http://jqfundamentals.com/legacy -attribution: - - jQuery Fundamentals ---- + ### External diff --git a/page/javascript-101/scope.md b/page/javascript-101/scope.md index a7963964..814b24a4 100644 --- a/page/javascript-101/scope.md +++ b/page/javascript-101/scope.md @@ -1,10 +1,9 @@ ---- -title: Scope -level: beginner -source: http://jqfundamentals.com/legacy, http://javascriptplayground.com/blog/2012/04/javascript-variable-scope-this -attribution: - - jQuery Fundamentals ---- + "Scope" refers to the variables that are available to a piece of code at a given time. A lack of understanding of scope can lead to frustrating debugging experiences. The idea of scope is that it's where certain functions or variables are accessible from in our code, and the context in which they exist and are executed in. diff --git a/page/javascript-101/syntax-basics.md b/page/javascript-101/syntax-basics.md index 3579f7ca..7768c839 100644 --- a/page/javascript-101/syntax-basics.md +++ b/page/javascript-101/syntax-basics.md @@ -1,10 +1,9 @@ ---- -title: Syntax Basics -level: beginner -source: http://jqfundamentals.com/legacy -attribution: - - jQuery Fundamentals ---- + ### Comments diff --git a/page/javascript-101/testing-type.md b/page/javascript-101/testing-type.md index c6620215..669b4e1d 100644 --- a/page/javascript-101/testing-type.md +++ b/page/javascript-101/testing-type.md @@ -1,10 +1,9 @@ ---- -title: Testing Type -level: beginner -source: http://jqfundamentals.com/legacy -attribution: - - jQuery Fundamentals ---- + JavaScript offers a way to test the type of a variable. However, the result can be confusing – for example, the type of an array is "Object." diff --git a/page/javascript-101/this-keyword.md b/page/javascript-101/this-keyword.md index 53be72ba..b2a81a84 100644 --- a/page/javascript-101/this-keyword.md +++ b/page/javascript-101/this-keyword.md @@ -1,10 +1,9 @@ ---- -title: The "this" Keyword -level: beginner -source: http://jqfundamentals.com/legacy -attribution: - - jQuery Fundamentals ---- + In JavaScript, as in most object-oriented programming languages, `this` is a special keyword that is used in methods to refer to the object on which a method is being invoked. The value of `this` is determined using a simple series of steps: diff --git a/page/javascript-101/types.md b/page/javascript-101/types.md index 8d6e02a0..892fbbd2 100644 --- a/page/javascript-101/types.md +++ b/page/javascript-101/types.md @@ -1,10 +1,9 @@ ---- -title: Types -level: beginner -source: http://jqfundamentals.com/legacy -attribution: - - jQuery Fundamentals ---- + Types in JavaScript fall into two categories: primitives and objects. Primitive types include: diff --git a/page/jquery-mobile.md b/page/jquery-mobile.md index f30e102e..bddba3c2 100644 --- a/page/jquery-mobile.md +++ b/page/jquery-mobile.md @@ -1,9 +1,11 @@ ---- -title: jQuery Mobile -customFields: - - - key: "icon" - value: "th-large" ---- + jQuery Mobile is the easiest way to build sites and apps that are accessible on all popular smartphone, tablet, and desktop devices. This framework provides a set of touch-friendly UI widgets and an AJAX-powered navigation system to support animated page transitions. diff --git a/page/jquery-mobile/getting-started.md b/page/jquery-mobile/getting-started.md index fc5720b6..81287f01 100644 --- a/page/jquery-mobile/getting-started.md +++ b/page/jquery-mobile/getting-started.md @@ -1,7 +1,7 @@ ---- -title: Getting Started with jQuery Mobile -level: Beginner ---- + jQuery Mobile provides a set of touch-friendly UI widgets and an AJAX-powered navigation system to support animated page transitions. This guide will show you how you can build your first jQuery Mobile application. diff --git a/page/jquery-mobile/theme-roller.md b/page/jquery-mobile/theme-roller.md index 4211b31c..c3aa5cf4 100644 --- a/page/jquery-mobile/theme-roller.md +++ b/page/jquery-mobile/theme-roller.md @@ -1,7 +1,7 @@ ---- -title: Creating a Custom Theme with ThemeRoller -level: Beginner ---- + ## Theming Overview diff --git a/page/jquery-ui.md b/page/jquery-ui.md index 79c03ea8..489e7d2e 100644 --- a/page/jquery-ui.md +++ b/page/jquery-ui.md @@ -1,10 +1,12 @@ ---- -title: jQuery UI -customFields: - - - key: "icon" - value: "magnet" ---- + [jQuery UI](http://jqueryui.com) is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice. diff --git a/page/jquery-ui/environments.md b/page/jquery-ui/environments.md index 0243d0d1..11489664 100644 --- a/page/jquery-ui/environments.md +++ b/page/jquery-ui/environments.md @@ -1,6 +1,6 @@ ---- -title: Using jQuery UI -level: intermediate ---- + In addition to being available on [CDN](http://code.jquery.com/)s and [Download Builder](http://jqueryui.com/download/), jQuery UI also integrates into a number of development environments. \ No newline at end of file diff --git a/page/jquery-ui/environments/amd.md b/page/jquery-ui/environments/amd.md index e2baa4ca..6ee2e0e9 100644 --- a/page/jquery-ui/environments/amd.md +++ b/page/jquery-ui/environments/amd.md @@ -1,7 +1,7 @@ ---- -title: Using jQuery UI with AMD -level: intermediate ---- +
    **Note:** This documentation refers to functionality made available in jQuery UI 1.11.
    diff --git a/page/jquery-ui/environments/bower.md b/page/jquery-ui/environments/bower.md index 9fc0d10b..0c07b116 100644 --- a/page/jquery-ui/environments/bower.md +++ b/page/jquery-ui/environments/bower.md @@ -1,7 +1,7 @@ ---- -title: Using jQuery UI with Bower -level: intermediate ---- +
    **Note:** This documentation refers to functionality made available in jQuery UI 1.11.
    diff --git a/page/jquery-ui/getting-started.md b/page/jquery-ui/getting-started.md index 220d00f9..865fc1cb 100644 --- a/page/jquery-ui/getting-started.md +++ b/page/jquery-ui/getting-started.md @@ -1,7 +1,7 @@ ---- -title: Getting Started with jQuery UI -level: beginner ---- + ### What is jQuery UI? diff --git a/page/jquery-ui/how-jquery-ui-works.md b/page/jquery-ui/how-jquery-ui-works.md index f69abcc1..a03196cc 100644 --- a/page/jquery-ui/how-jquery-ui-works.md +++ b/page/jquery-ui/how-jquery-ui-works.md @@ -1,7 +1,7 @@ ---- -title: How jQuery UI Works -level: Beginner ---- + jQuery UI contains many widgets that maintain [state](http://en.wikipedia.org/wiki/State_%28computer_science%29) and therefore may have a slightly different usage pattern than typical jQuery plugins you are already used to. While the initialization is the same as most jQuery plugins, jQuery UI's widgets are built on top of the [Widget Factory](/jquery-ui/widget-factory/) which provides the same general API to all of them. So if you learn how to use one, then you'll know how to use all of them! This document will walk you through the common functionality, using the [progressbar](http://jqueryui.com/progressbar/) widget for the code examples. diff --git a/page/jquery-ui/theming.md b/page/jquery-ui/theming.md index e6795eed..25cd2b35 100644 --- a/page/jquery-ui/theming.md +++ b/page/jquery-ui/theming.md @@ -1,7 +1,7 @@ ---- -title: Theming jQuery UI -level: intermediate ---- + All jQuery UI plugins are designed to allow a developer to seamlessly integrate UI widgets into the look and feel of their site or application. Each plugin is styled with CSS and contains two layers of style information: standard [jQuery UI CSS Framework](/jquery-ui/theming/api/) styles and plugin-specific styles. diff --git a/page/jquery-ui/theming/api.md b/page/jquery-ui/theming/api.md index f59946aa..e2d693c4 100644 --- a/page/jquery-ui/theming/api.md +++ b/page/jquery-ui/theming/api.md @@ -1,7 +1,7 @@ ---- -title: jQuery UI CSS Framework API -level: intermediate ---- + [Back to jQuery UI Theming](/jquery-ui/theming/) diff --git a/page/jquery-ui/theming/themeroller.md b/page/jquery-ui/theming/themeroller.md index c223f4e2..a34702b2 100644 --- a/page/jquery-ui/theming/themeroller.md +++ b/page/jquery-ui/theming/themeroller.md @@ -1,7 +1,8 @@ ---- -title: Using jQuery UI ThemeRoller -level: beginner ---- + + ![ThemeRoller logo](/resources/jquery-ui/themeroller-logo.png) ### About ThemeRoller diff --git a/page/jquery-ui/theming/write-a-theme.md b/page/jquery-ui/theming/write-a-theme.md index 81146a7d..8db89eca 100644 --- a/page/jquery-ui/theming/write-a-theme.md +++ b/page/jquery-ui/theming/write-a-theme.md @@ -1,7 +1,7 @@ ---- -title: How To Write a Theme -level: advanced ---- + ### File Structure diff --git a/page/jquery-ui/widget-factory.md b/page/jquery-ui/widget-factory.md index c25cde4c..6e31bb9f 100644 --- a/page/jquery-ui/widget-factory.md +++ b/page/jquery-ui/widget-factory.md @@ -1,6 +1,6 @@ ---- -title: Widget Factory -level: intermediate ---- + The jQuery UI Widget Factory is an extensible base on which all of jQuery UI's widgets are built. Using the widget factory to build a plugin provides conveniences for state management, as well as conventions for common tasks like exposing plugin methods and changing options after instantiation. diff --git a/page/jquery-ui/widget-factory/extending-widgets.md b/page/jquery-ui/widget-factory/extending-widgets.md index 317ff57c..e16fdd0f 100644 --- a/page/jquery-ui/widget-factory/extending-widgets.md +++ b/page/jquery-ui/widget-factory/extending-widgets.md @@ -1,7 +1,7 @@ ---- -title: Extending Widgets with the Widget Factory -level: advanced ---- + jQuery UI's widget factory makes it easy to build widgets that extend the functionality of existing widgets. Doing so allows you to build powerful widgets on top of an existing base, as well as make small tweaks to an existing widget's functionality. diff --git a/page/jquery-ui/widget-factory/how-to-use-the-widget-factory.md b/page/jquery-ui/widget-factory/how-to-use-the-widget-factory.md index 2841f7b5..228e7e0c 100644 --- a/page/jquery-ui/widget-factory/how-to-use-the-widget-factory.md +++ b/page/jquery-ui/widget-factory/how-to-use-the-widget-factory.md @@ -1,7 +1,7 @@ ---- -title: How To Use the Widget Factory -level: Beginner ---- + To start, we'll create a progress bar that just lets us set the progress once. As we can see below, this is done by calling `jQuery.widget()` with two parameters: the name of the plugin to create, and an object literal containing functions to support our plugin. When our plugin gets called, it will create a new plugin instance and all functions will be executed within the context of that instance. This is different from a standard jQuery plugin in two important ways. First, the context is an object, not a DOM element. Second, the context is always a single object, never a collection. diff --git a/page/jquery-ui/widget-factory/why-use-the-widget-factory.md b/page/jquery-ui/widget-factory/why-use-the-widget-factory.md index 601cb56e..37cb9738 100644 --- a/page/jquery-ui/widget-factory/why-use-the-widget-factory.md +++ b/page/jquery-ui/widget-factory/why-use-the-widget-factory.md @@ -1,7 +1,7 @@ ---- -title: Why Use the Widget Factory? -level: Beginner ---- + Writing jQuery plugins is as simple as adding a method to `jQuery.prototype` (more commonly seen as `$.fn`) and following some simple conventions like returning `this` for chainability. So why does the widget factory exist? And why is it hundreds of lines of code? diff --git a/page/jquery-ui/widget-factory/widget-method-invocation.md b/page/jquery-ui/widget-factory/widget-method-invocation.md index 91e9986b..a381272c 100644 --- a/page/jquery-ui/widget-factory/widget-method-invocation.md +++ b/page/jquery-ui/widget-factory/widget-method-invocation.md @@ -1,7 +1,7 @@ ---- -title: Widget Method Invocation -level: intermediate ---- + Widgets created with [the widget factory](/jquery-ui/widget-factory/) use methods to change their state and perform actions after initialization. There are two ways widget methods can be invoked - through the plugin created by the widget factory, or by invoking the method on the element's instance object. diff --git a/page/performance.md b/page/performance.md index 8c6c4c59..c6828407 100644 --- a/page/performance.md +++ b/page/performance.md @@ -1,8 +1,10 @@ ---- -title: Performance -level: intermediate -customFields: - - - key: "icon" - value: "dashboard" ---- + diff --git a/page/performance/append-outside-loop.md b/page/performance/append-outside-loop.md index 1831d770..d1adfa1c 100644 --- a/page/performance/append-outside-loop.md +++ b/page/performance/append-outside-loop.md @@ -1,10 +1,9 @@ ---- -title: Append Outside of Loops -level: intermediate -source: http://jqfundamentals.com/legacy -attribution: - - jQuery Fundamentals ---- + Touching the DOM comes at a cost. If you're appending a lot of elements to the DOM, you will want to append them all at once, rather than one at a time. This is a common problem when appending elements within a loop. diff --git a/page/performance/cache-loop-length.md b/page/performance/cache-loop-length.md index c9000ff9..05cc6269 100644 --- a/page/performance/cache-loop-length.md +++ b/page/performance/cache-loop-length.md @@ -1,10 +1,9 @@ ---- -title: Cache Length During Loops -level: intermediate -source: http://jqfundamentals.com/legacy -attribution: - - jQuery Fundamentals ---- + In a for loop, don't access the length property of an array every time; cache it beforehand. diff --git a/page/performance/detach-elements-before-work-with-them.md b/page/performance/detach-elements-before-work-with-them.md index 6af2e3d5..6431b27b 100644 --- a/page/performance/detach-elements-before-work-with-them.md +++ b/page/performance/detach-elements-before-work-with-them.md @@ -1,10 +1,9 @@ ---- -title: Detach Elements to Work with Them -level: intermediate -source: http://jqfundamentals.com/legacy -attribution: - - jQuery Fundamentals ---- + The DOM is slow; you want to avoid manipulating it as much as possible. jQuery introduced `detach()` in version 1.4 to help address this issue, allowing you to remove an element from the DOM while you work with it. diff --git a/page/performance/dont-act-on-absent-elements.md b/page/performance/dont-act-on-absent-elements.md index 306ac813..5f6bcdcd 100644 --- a/page/performance/dont-act-on-absent-elements.md +++ b/page/performance/dont-act-on-absent-elements.md @@ -1,10 +1,9 @@ ---- -title: Don't Act on Absent Elements -level: intermediate -source: http://jqfundamentals.com/legacy -attribution: - - jQuery Fundamentals ---- + jQuery won't tell you if you're trying to run a whole lot of code on an empty selection – it will proceed as though nothing's wrong. It's up to you to verify that your selection contains some elements. diff --git a/page/performance/optimize-selectors.md b/page/performance/optimize-selectors.md index 93ad6a0c..c287f208 100644 --- a/page/performance/optimize-selectors.md +++ b/page/performance/optimize-selectors.md @@ -1,10 +1,9 @@ ---- -title: Optimize Selectors -level: intermediate -source: http://jqfundamentals.com/legacy -attribution: - - jQuery Fundamentals ---- + Selector optimization is less important than it used to be, as more browsers implement `document.querySelectorAll()` and the burden of selection shifts from jQuery to the browser. However, there are still some tips to keep in mind. diff --git a/page/performance/read-the-source.md b/page/performance/read-the-source.md index f7fc894e..9f73f3ed 100644 --- a/page/performance/read-the-source.md +++ b/page/performance/read-the-source.md @@ -1,10 +1,9 @@ ---- -title: Don't Treat jQuery as a Black Box -level: intermediate -source: http://jqfundamentals.com/legacy -attribution: - - jQuery Fundamentals ---- + Use the source as your documentation. Bookmark [http://bit.ly/jqsource](http://bit.ly/jqsource) and refer to it often. diff --git a/page/performance/use-stylesheets-for-changing-css.md b/page/performance/use-stylesheets-for-changing-css.md index 5018a62f..7cffe961 100644 --- a/page/performance/use-stylesheets-for-changing-css.md +++ b/page/performance/use-stylesheets-for-changing-css.md @@ -1,10 +1,9 @@ ---- -title: Use Stylesheets for Changing CSS on Many Elements -level: intermediate -source: http://jqfundamentals.com/legacy -attribution: - - jQuery Fundamentals ---- + If you're changing the CSS of more than 20 elements using `.css()`, consider adding a style tag to the page instead for a nearly 60% increase in speed. diff --git a/page/plugins.md b/page/plugins.md index a1075371..299033da 100644 --- a/page/plugins.md +++ b/page/plugins.md @@ -1,11 +1,13 @@ ---- -title: Plugins -level: intermediate -customFields: - - - key: "icon" - value: "bolt" ---- + A jQuery plugin is simply a new method that we use to extend jQuery's prototype object. By extending the prototype object you enable all jQuery objects to inherit any methods that you add. As established, whenever you call `jQuery()` you're creating a new jQuery object, with all of jQuery's methods inherited. diff --git a/page/plugins/advanced-plugin-concepts.md b/page/plugins/advanced-plugin-concepts.md index 2bf990ce..50129fee 100644 --- a/page/plugins/advanced-plugin-concepts.md +++ b/page/plugins/advanced-plugin-concepts.md @@ -1,7 +1,7 @@ ---- -title: Advanced Plugin Concepts -level: intermediate ---- + ### Provide Public Access to Default Plugin Settings diff --git a/page/plugins/basic-plugin-creation.md b/page/plugins/basic-plugin-creation.md index 529e1f22..59e05799 100644 --- a/page/plugins/basic-plugin-creation.md +++ b/page/plugins/basic-plugin-creation.md @@ -1,10 +1,9 @@ ---- -title : How to Create a Basic Plugin -level: intermediate -source: http://jqfundamentals.com/legacy -attribution: - - jQuery Fundamentals ---- + Sometimes you want to make a piece of functionality available throughout your code. For example, perhaps you want a single method you can call on a jQuery selection that performs a series of operations on the selection. Maybe you wrote a really useful utility function that you want to be able to move easily to other projects. In this case, you may want to write a plugin. diff --git a/page/plugins/finding-evaluating-plugins.md b/page/plugins/finding-evaluating-plugins.md index ea1c221a..7d93081e 100644 --- a/page/plugins/finding-evaluating-plugins.md +++ b/page/plugins/finding-evaluating-plugins.md @@ -1,10 +1,9 @@ ---- -title : Finding & Evaluating Plugins -level: intermediate -source: http://jqfundamentals.com/legacy -attribution: - - jQuery Fundamentals ---- + One of the most celebrated aspects of jQuery is its extensive plugin ecosystem. From table sorting to form validation to autocompletion – if there's a need for it, chances are good that someone has written a plugin for it. diff --git a/page/plugins/stateful-plugins-with-widget-factory.md b/page/plugins/stateful-plugins-with-widget-factory.md index a6b81868..3f306d83 100644 --- a/page/plugins/stateful-plugins-with-widget-factory.md +++ b/page/plugins/stateful-plugins-with-widget-factory.md @@ -1,11 +1,12 @@ ---- -title: Writing Stateful Plugins with the jQuery UI Widget Factory -level: intermediate -source: http://jqfundamentals.com/legacy -attribution: - - jQuery Fundamentals - - Scott González ---- + ## Writing Stateful Plugins with the jQuery UI Widget Factory diff --git a/page/style-guide.md b/page/style-guide.md index fa9f0934..b2c2de15 100644 --- a/page/style-guide.md +++ b/page/style-guide.md @@ -1,12 +1,13 @@ ---- -title: Style Guide -attribution: - - jorydotcom -customFields: - - - key: "is_chapter" - value: 0 ---- + ## Formatting Conventions diff --git a/page/using-jquery-core.md b/page/using-jquery-core.md index aa925283..2080731a 100644 --- a/page/using-jquery-core.md +++ b/page/using-jquery-core.md @@ -1,8 +1,10 @@ ---- -title: Using jQuery Core -level: beginner -customFields: - - - key: "icon" - value: "star-empty" ---- + diff --git a/page/using-jquery-core/attributes.md b/page/using-jquery-core/attributes.md index 2b30ddc6..0094e4ac 100644 --- a/page/using-jquery-core/attributes.md +++ b/page/using-jquery-core/attributes.md @@ -1,7 +1,7 @@ ---- -title : Attributes -level : beginner ---- + An element's attributes can contain useful information for your application, so it's important to be able to get and set them. diff --git a/page/using-jquery-core/avoid-conflicts-other-libraries.md b/page/using-jquery-core/avoid-conflicts-other-libraries.md index 73172aff..88408dde 100644 --- a/page/using-jquery-core/avoid-conflicts-other-libraries.md +++ b/page/using-jquery-core/avoid-conflicts-other-libraries.md @@ -1,11 +1,9 @@ ---- -title : Avoiding Conflicts with Other Libraries -attribution: jQuery Fundamentals -level: beginner -source: http://jqfundamentals.com/legacy -attribution: - - jQuery Fundamentals ---- + The jQuery library and virtually all of its plugins are contained within the `jQuery` namespace. As a general rule, global objects are stored inside the jQuery namespace as well, so you shouldn't get a clash between jQuery and any other library (like prototype.js, MooTools, or YUI). diff --git a/page/using-jquery-core/css-styling-dimensions.md b/page/using-jquery-core/css-styling-dimensions.md index 855d2223..7e980694 100644 --- a/page/using-jquery-core/css-styling-dimensions.md +++ b/page/using-jquery-core/css-styling-dimensions.md @@ -1,7 +1,7 @@ ---- -title : CSS, Styling, & Dimensions -level: beginner ---- + jQuery includes a handy way to get and set CSS properties of elements: diff --git a/page/using-jquery-core/data-methods.md b/page/using-jquery-core/data-methods.md index 85cde17a..33500e3d 100644 --- a/page/using-jquery-core/data-methods.md +++ b/page/using-jquery-core/data-methods.md @@ -1,10 +1,9 @@ ---- -title : Data Methods -level: intermediate -source: http://jqfundamentals.com/legacy -attribution: - - jQuery Fundamentals ---- + There's often data about an element you want to store with the element. In plain JavaScript, you might do this by adding a property to the DOM element, but you'd have to deal with memory leaks in some browsers. jQuery offers a straightforward way to store data related to an element, and it manages the memory issues for you. diff --git a/page/using-jquery-core/document-ready.md b/page/using-jquery-core/document-ready.md index b12f898d..db3182a1 100644 --- a/page/using-jquery-core/document-ready.md +++ b/page/using-jquery-core/document-ready.md @@ -1,7 +1,7 @@ ---- -title : $( document ).ready() -level: beginner ---- + A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside `$( document ).ready()` will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside `$( window ).load(function() { ... })` will run once the entire page (images or iframes), not just the DOM, is ready. diff --git a/page/using-jquery-core/dollar-object-vs-function.md b/page/using-jquery-core/dollar-object-vs-function.md index 9a86791a..44763197 100644 --- a/page/using-jquery-core/dollar-object-vs-function.md +++ b/page/using-jquery-core/dollar-object-vs-function.md @@ -1,10 +1,9 @@ ---- -title : $ vs $() -level: beginner -source: http://jqfundamentals.com/legacy -attribution: - - jQuery Fundamentals ---- + Until now, we've been dealing entirely with methods that are called on a jQuery object. For example: diff --git a/page/using-jquery-core/faq.md b/page/using-jquery-core/faq.md index b1b15bff..2e754bd6 100644 --- a/page/using-jquery-core/faq.md +++ b/page/using-jquery-core/faq.md @@ -1,8 +1,10 @@ ---- -title: Frequently Asked Questions -level: beginner -customFields: - - - key: "icon" - value: "question-sign" ---- + diff --git a/page/using-jquery-core/faq/how-do-i-check-uncheck-a-checkbox-input-or-radio-button.md b/page/using-jquery-core/faq/how-do-i-check-uncheck-a-checkbox-input-or-radio-button.md index 067f08c3..a02c0bbf 100644 --- a/page/using-jquery-core/faq/how-do-i-check-uncheck-a-checkbox-input-or-radio-button.md +++ b/page/using-jquery-core/faq/how-do-i-check-uncheck-a-checkbox-input-or-radio-button.md @@ -1,7 +1,7 @@ ---- -title: How do I check/uncheck a checkbox input or radio button? -source: http://docs.jquery.com/Frequently_Asked_Questions ---- + You can check or uncheck a checkbox element or a radio button using the `.prop()` method: diff --git a/page/using-jquery-core/faq/how-do-i-determine-the-state-of-a-toggled-element.md b/page/using-jquery-core/faq/how-do-i-determine-the-state-of-a-toggled-element.md index 31e4cb7d..2dd25f86 100644 --- a/page/using-jquery-core/faq/how-do-i-determine-the-state-of-a-toggled-element.md +++ b/page/using-jquery-core/faq/how-do-i-determine-the-state-of-a-toggled-element.md @@ -1,7 +1,7 @@ ---- -title: How do I determine the state of a toggled element? -source: http://docs.jquery.com/Frequently_Asked_Questions ---- + You can determine whether an element is collapsed or not by using the `:visible` and `:hidden` selectors. diff --git a/page/using-jquery-core/faq/how-do-i-disable-enable-a-form-element.md b/page/using-jquery-core/faq/how-do-i-disable-enable-a-form-element.md index 79cd18ae..955922f8 100644 --- a/page/using-jquery-core/faq/how-do-i-disable-enable-a-form-element.md +++ b/page/using-jquery-core/faq/how-do-i-disable-enable-a-form-element.md @@ -1,7 +1,7 @@ ---- -title: How do I disable/enable a form element? -source: http://docs.jquery.com/Frequently_Asked_Questions ---- + You can enable or disable a form element using the `.prop()` method: diff --git a/page/using-jquery-core/faq/how-do-i-get-the-text-value-of-a-selected-option.md b/page/using-jquery-core/faq/how-do-i-get-the-text-value-of-a-selected-option.md index ad78b54e..b508d7c8 100644 --- a/page/using-jquery-core/faq/how-do-i-get-the-text-value-of-a-selected-option.md +++ b/page/using-jquery-core/faq/how-do-i-get-the-text-value-of-a-selected-option.md @@ -1,7 +1,7 @@ ---- -title: How do I get the text value of a selected option? -source: http://docs.jquery.com/Frequently_Asked_Questions ---- + Select elements typically have two values that you want to access. First there's the value to be sent to the server, which is easy: diff --git a/page/using-jquery-core/faq/how-do-i-pull-a-native-dom-element-from-a-jquery-object.md b/page/using-jquery-core/faq/how-do-i-pull-a-native-dom-element-from-a-jquery-object.md index 4bc00f6b..261e75dd 100644 --- a/page/using-jquery-core/faq/how-do-i-pull-a-native-dom-element-from-a-jquery-object.md +++ b/page/using-jquery-core/faq/how-do-i-pull-a-native-dom-element-from-a-jquery-object.md @@ -1,7 +1,7 @@ ---- -title: How do I pull a native DOM element from a jQuery object? -source: http://docs.jquery.com/Frequently_Asked_Questions ---- + A jQuery object is an array-like wrapper around one or more DOM elements. To get a reference to the actual DOM elements (instead of the jQuery object), you have two options. The first (and fastest) method is to use array notation: diff --git a/page/using-jquery-core/faq/how-do-i-replace-text-from-the-3rd-element-of-a-list-of-10-items.md b/page/using-jquery-core/faq/how-do-i-replace-text-from-the-3rd-element-of-a-list-of-10-items.md index efe3662a..4d611906 100644 --- a/page/using-jquery-core/faq/how-do-i-replace-text-from-the-3rd-element-of-a-list-of-10-items.md +++ b/page/using-jquery-core/faq/how-do-i-replace-text-from-the-3rd-element-of-a-list-of-10-items.md @@ -1,7 +1,7 @@ ---- -title: How do I replace text from the 3rd element of a list of 10 items? -source: http://docs.jquery.com/Frequently_Asked_Questions ---- + Either the `:eq()` selector or the `.eq()` method will allow you to select the proper item. However, to replace the text, you must get the value before you set it: diff --git a/page/using-jquery-core/faq/how-do-i-select-an-element-by-an-id-that-has-characters-used-in-css-notation.md b/page/using-jquery-core/faq/how-do-i-select-an-element-by-an-id-that-has-characters-used-in-css-notation.md index 8a8282cc..cbc46c14 100644 --- a/page/using-jquery-core/faq/how-do-i-select-an-element-by-an-id-that-has-characters-used-in-css-notation.md +++ b/page/using-jquery-core/faq/how-do-i-select-an-element-by-an-id-that-has-characters-used-in-css-notation.md @@ -1,7 +1,7 @@ ---- -title: How do I select an element by an ID that has characters used in CSS notation? -source: http://docs.jquery.com/Frequently_Asked_Questions ---- + Because jQuery uses CSS syntax for selecting elements, some characters are interpreted as CSS notation. For example, ID attributes, after an initial letter (a-z or A-Z), may also use periods and colons, in addition to letters, numbers, hyphens, and underscores (see [W3C Basic HTML Data Types](http://www.w3.org/TR/html4/types.html#type-id)). The colon (":") and period (".") are problematic within the context of a jQuery selector because they indicate a pseudo-class and class, respectively. diff --git a/page/using-jquery-core/faq/how-do-i-select-an-item-using-class-or-id.md b/page/using-jquery-core/faq/how-do-i-select-an-item-using-class-or-id.md index c0818d02..916d37b6 100644 --- a/page/using-jquery-core/faq/how-do-i-select-an-item-using-class-or-id.md +++ b/page/using-jquery-core/faq/how-do-i-select-an-item-using-class-or-id.md @@ -1,7 +1,7 @@ ---- -title: How do I select an item using class or ID? -source: http://docs.jquery.com/Frequently_Asked_Questions ---- + This code selects an element with an ID of "myDivId". Since IDs are unique, this expression always selects either zero or one elements depending upon whether or not an element with the specified ID exists. diff --git a/page/using-jquery-core/faq/how-do-i-select-elements-when-i-already-have-a-dom-element.md b/page/using-jquery-core/faq/how-do-i-select-elements-when-i-already-have-a-dom-element.md index 95adc726..babd7102 100644 --- a/page/using-jquery-core/faq/how-do-i-select-elements-when-i-already-have-a-dom-element.md +++ b/page/using-jquery-core/faq/how-do-i-select-elements-when-i-already-have-a-dom-element.md @@ -1,7 +1,7 @@ ---- -title: How do I select elements when I already have a DOM element? -source: http://docs.jquery.com/Frequently_Asked_Questions ---- + If you have a variable containing a DOM element, and want to select elements related to that DOM element, simply wrap it in a jQuery object. diff --git a/page/using-jquery-core/faq/how-do-i-test-whether-an-element-exists.md b/page/using-jquery-core/faq/how-do-i-test-whether-an-element-exists.md index eb9dee0b..e7b75438 100644 --- a/page/using-jquery-core/faq/how-do-i-test-whether-an-element-exists.md +++ b/page/using-jquery-core/faq/how-do-i-test-whether-an-element-exists.md @@ -1,7 +1,7 @@ ---- -title: How do I test whether an element exists? -source: http://docs.jquery.com/Frequently_Asked_Questions ---- + Use the [.length](http://api.jquery.com/length/) property of the jQuery collection returned by your selector: diff --git a/page/using-jquery-core/faq/how-do-i-test-whether-an-element-has-a-particular-class.md b/page/using-jquery-core/faq/how-do-i-test-whether-an-element-has-a-particular-class.md index bce0bd3b..556ec49f 100644 --- a/page/using-jquery-core/faq/how-do-i-test-whether-an-element-has-a-particular-class.md +++ b/page/using-jquery-core/faq/how-do-i-test-whether-an-element-has-a-particular-class.md @@ -1,7 +1,7 @@ ---- -title: How do I test whether an element has a particular class? -source: http://docs.jquery.com/Frequently_Asked_Questions ---- + [.hasClass()](http://api.jquery.com/hasClass/) (added in version 1.2) handles this common use case: diff --git a/page/using-jquery-core/iterating.md b/page/using-jquery-core/iterating.md index 9db4dd1c..9563753c 100644 --- a/page/using-jquery-core/iterating.md +++ b/page/using-jquery-core/iterating.md @@ -1,6 +1,6 @@ ---- -title : Iterating over jQuery and non-jQuery Objects ---- + jQuery provides an object iterator utility called `$.each()` as well as a jQuery collection iterator: `.each()`. These are not interchangeable. In addition, there are a couple of helpful methods called `$.map()` and `.map()` that can shortcut one of our common iteration use cases. diff --git a/page/using-jquery-core/jquery-object.md b/page/using-jquery-core/jquery-object.md index 00086579..7149b5cd 100644 --- a/page/using-jquery-core/jquery-object.md +++ b/page/using-jquery-core/jquery-object.md @@ -1,7 +1,7 @@ ---- -title : The jQuery Object -level : beginner ---- + When creating new elements (or selecting existing ones), jQuery returns the elements in a collection. Many developers new to jQuery assume that this collection is an array. It has a zero-indexed sequence of DOM elements, some familiar array functions, and a `.length` property, after all. Actually, the jQuery object is more complicated than that. diff --git a/page/using-jquery-core/manipulating-elements.md b/page/using-jquery-core/manipulating-elements.md index 74a0c4c0..c434385f 100644 --- a/page/using-jquery-core/manipulating-elements.md +++ b/page/using-jquery-core/manipulating-elements.md @@ -1,10 +1,9 @@ ---- -title : Manipulating Elements -level: beginner -source: http://jqfundamentals.com/legacy -attribution: - - jQuery Fundamentals ---- + For complete documentation of jQuery manipulation methods, visit the [Manipulation documentation on api.jquery.com](http://api.jquery.com/category/manipulation/). diff --git a/page/using-jquery-core/selecting-elements.md b/page/using-jquery-core/selecting-elements.md index 30714ac1..db9da355 100644 --- a/page/using-jquery-core/selecting-elements.md +++ b/page/using-jquery-core/selecting-elements.md @@ -1,7 +1,7 @@ ---- -title : Selecting Elements -level: beginner ---- + The most basic concept of jQuery is to "select some elements and do something with them." jQuery supports most CSS3 selectors, as well as some non-standard selectors. For a complete selector reference, visit the [Selectors documentation on api.jquery.com](http://api.jquery.com/category/selectors/). diff --git a/page/using-jquery-core/traversing.md b/page/using-jquery-core/traversing.md index 9c887b06..cc112dbb 100644 --- a/page/using-jquery-core/traversing.md +++ b/page/using-jquery-core/traversing.md @@ -1,7 +1,7 @@ ---- -title : Traversing -level: beginner ---- + Once you've made an initial selection with jQuery, you can traverse deeper into what was just selected. Traversing can be broken down into three basic parts: parents, children, and siblings. jQuery has an abundance of easy-to-use methods for all these parts. Notice that each of these methods can optionally be passed string selectors, and some can also take another jQuery object in order to filter your selection down. Pay attention and refer to the [API documentation on traversing](http://api.jquery.com/category/traversing/) to know what variation of arguments you have available. diff --git a/page/using-jquery-core/understanding-index.md b/page/using-jquery-core/understanding-index.md index 842552ec..b4e34a32 100644 --- a/page/using-jquery-core/understanding-index.md +++ b/page/using-jquery-core/understanding-index.md @@ -1,9 +1,8 @@ ---- -title : Using jQuery's .index() Function -level: intermediate -attribution: - - John Paul ---- + `.index()` is a method on jQuery objects that's generally used to search for a given element within the jQuery object that it's called on. This method has four different signatures with different semantics that can be confusing. This article covers details about how to understand the way `.index()` works with each signature. diff --git a/page/using-jquery-core/utility-methods.md b/page/using-jquery-core/utility-methods.md index 97b3e1d4..87f802ec 100644 --- a/page/using-jquery-core/utility-methods.md +++ b/page/using-jquery-core/utility-methods.md @@ -1,10 +1,9 @@ ---- -title : Utility Methods -level: beginner -source: http://jqfundamentals.com/legacy -attribution: - - jQuery Fundamentals ---- + jQuery offers several utility methods in the `$` namespace. These methods are helpful for accomplishing routine programming tasks. For a complete reference on jQuery utility methods, visit the [utilities documentation on api.jquery.com](http://api.jquery.com/category/utilities/). diff --git a/page/using-jquery-core/working-with-selections.md b/page/using-jquery-core/working-with-selections.md index 165217f7..9f5348bc 100644 --- a/page/using-jquery-core/working-with-selections.md +++ b/page/using-jquery-core/working-with-selections.md @@ -1,7 +1,7 @@ ---- -title : Working with Selections -level: beginner ---- + ### Getters & Setters From 08690e17e1e7e5ae4c47b6b98778e9d424a8f604 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Wed, 5 Nov 2014 18:02:09 -0500 Subject: [PATCH 077/247] Build: Remove YAML; convert order to JSON --- grunt.js | 11 ++-- order.json | 159 +++++++++++++++++++++++++++++++++++++++++++++++++++ order.yml | 109 ----------------------------------- package.json | 3 +- 4 files changed, 165 insertions(+), 117 deletions(-) create mode 100644 order.json delete mode 100644 order.yml diff --git a/grunt.js b/grunt.js index b198da14..8db3f5bc 100644 --- a/grunt.js +++ b/grunt.js @@ -1,5 +1,4 @@ -var yaml = require( "js-yaml" ), - config = require("./config.json"); +var config = require( "./config" ); module.exports = function( grunt ) { @@ -41,20 +40,20 @@ grunt.initConfig({ }, wordpress: grunt.utils._.extend({ dir: "dist/wordpress", - order: "order.yml" + order: "order.json" }, grunt.file.readJSON( "config.json" ) ) }); -// Process a YAML order file and return an object of page slugs and their ordinal indices +// Process a JSON order file and return an object of page slugs and their ordinal indices grunt.registerHelper( "read-order", function( orderFile ) { var order, map = {}, index = 0; try { - order = yaml.safeLoad( grunt.file.read( orderFile ) ); + order = JSON.parse( grunt.file.read( orderFile ) ); } catch( error ) { grunt.warn( "Invalid order file: " + orderFile ); return null; @@ -175,7 +174,7 @@ grunt.registerHelper( "contributor-attribution", function( post, fileName, fn ) }); grunt.registerHelper( "build-pages-preprocess", (function() { - var orderMap = grunt.helper( "read-order", "order.yml" ); + var orderMap = grunt.helper( "read-order", "order.json" ); return function( post, fileName, done ) { grunt.utils.async.series([ diff --git a/order.json b/order.json new file mode 100644 index 00000000..090a3957 --- /dev/null +++ b/order.json @@ -0,0 +1,159 @@ +[ + "index", + "about", + "contributing", + { + "about-jquery": [ + "how-jquery-works", + "additional-support" + ] + }, + { + "javascript-101": [ + "getting-started", + "running-code", + "syntax-basics", + "types", + "operators", + "conditional-code", + "loops", + "reserved-words", + "arrays", + "objects", + "functions", + "testing-type", + "this-keyword", + "scope", + "closures" + ] + }, + { + "using-jquery-core": [ + "dollar-object-vs-function", + "document-ready", + "avoid-conflicts-other-libraries", + "attributes", + "selecting-elements", + "working-with-selections", + "manipulating-elements", + "jquery-object", + "traversing", + "css-styling-dimensions", + "data-methods", + "utility-methods", + "iterating", + "understanding-index", + { + "faq": [ + "how-do-i-select-an-item-using-class-or-id", + "how-do-i-select-elements-when-i-already-have-a-dom-element", + "how-do-i-test-whether-an-element-has-a-particular-class", + "how-do-i-test-whether-an-element-exists", + "how-do-i-determine-the-state-of-a-toggled-element", + "how-do-i-select-an-element-by-an-id-that-has-characters-used-in-css-notation", + "how-do-i-disable-enable-a-form-element", + "how-do-i-check-uncheck-a-checkbox-input-or-radio-button", + "how-do-i-get-the-text-value-of-a-selected-option", + "how-do-i-replace-text-from-the-3rd-element-of-a-list-of-10-items", + "how-do-i-pull-a-native-dom-element-from-a-jquery-object" + ] + } + ] + }, + { + "events": [ + "event-basics", + "event-helpers", + "introduction-to-events", + "handling-events", + "inside-event-handling-function", + "event-delegation", + "triggering-event-handlers", + "history-of-events", + "introduction-to-custom-events", + "event-extensions" + ] + }, + { + "effects": [ + "intro-to-effects", + "custom-effects", + "queue-and-dequeue-explained", + "uses-of-queue-and-dequeue" + ] + }, + { + "ajax": [ + "key-concepts", + "jquery-ajax-methods", + "ajax-and-forms", + "working-with-jsonp", + "ajax-events" + ] + }, + { + "plugins": [ + "finding-evaluating-plugins", + "basic-plugin-creation", + "advanced-plugin-concepts", + "stateful-plugins-with-widget-factory" + ] + }, + { + "performance": [ + "append-outside-loop", + "cache-loop-length", + "detach-elements-before-work-with-them", + "dont-act-on-absent-elements", + "optimize-selectors", + "use-stylesheets-for-changing-css", + "read-the-source" + ] + }, + { + "code-organization": [ + "concepts", + "beware-anonymous-functions", + "dont-repeat-yourself", + "feature-browser-detection", + { + "deferreds": [ + "about-deferreds", + "jquery-deferreds", + "examples" + ] + } + ] + }, + { + "jquery-ui": [ + "getting-started", + "how-jquery-ui-works", + { + "theming": [ + "themeroller", + "api", + "write-a-theme" + ] + }, + { + "widget-factory": [ + "why-use-the-widget-factory", + "how-to-use-the-widget-factory" + ] + }, + { + "environments": [ + "amd", + "bower" + ] + } + ] + }, + { + "jquery-mobile": [ + "getting-started", + "theme-roller" + ] + } +] diff --git a/order.yml b/order.yml deleted file mode 100644 index a004754b..00000000 --- a/order.yml +++ /dev/null @@ -1,109 +0,0 @@ -- index -- about -- contributing -- about-jquery: - - how-jquery-works - - additional-support -- javascript-101: - - getting-started - - running-code - - syntax-basics - - types - - operators - - conditional-code - - loops - - reserved-words - - arrays - - objects - - functions - - testing-type - - this-keyword - - scope - - closures -- using-jquery-core: - - dollar-object-vs-function - - document-ready - - avoid-conflicts-other-libraries - - attributes - - selecting-elements - - working-with-selections - - manipulating-elements - - jquery-object - - traversing - - css-styling-dimensions - - data-methods - - utility-methods - - iterating - - understanding-index - - faq: - - how-do-i-select-an-item-using-class-or-id - - how-do-i-select-elements-when-i-already-have-a-dom-element - - how-do-i-test-whether-an-element-has-a-particular-class - - how-do-i-test-whether-an-element-exists - - how-do-i-determine-the-state-of-a-toggled-element - - how-do-i-select-an-element-by-an-id-that-has-characters-used-in-css-notation - - how-do-i-disable-enable-a-form-element - - how-do-i-check-uncheck-a-checkbox-input-or-radio-button - - how-do-i-get-the-text-value-of-a-selected-option - - how-do-i-replace-text-from-the-3rd-element-of-a-list-of-10-items - - how-do-i-pull-a-native-dom-element-from-a-jquery-object -- events: - - event-basics - - event-helpers - - introduction-to-events - - handling-events - - inside-event-handling-function - - event-delegation - - triggering-event-handlers - - history-of-events - - introduction-to-custom-events - - event-extensions -- effects: - - intro-to-effects - - custom-effects - - queue-and-dequeue-explained - - uses-of-queue-and-dequeue -- ajax: - - key-concepts - - jquery-ajax-methods - - ajax-and-forms - - working-with-jsonp - - ajax-events -- plugins: - - finding-evaluating-plugins - - basic-plugin-creation - - advanced-plugin-concepts - - stateful-plugins-with-widget-factory -- performance: - - append-outside-loop - - cache-loop-length - - detach-elements-before-work-with-them - - dont-act-on-absent-elements - - optimize-selectors - - use-stylesheets-for-changing-css - - read-the-source -- code-organization: - - concepts - - beware-anonymous-functions - - dont-repeat-yourself - - feature-browser-detection - - deferreds: - - about-deferreds - - jquery-deferreds - - examples -- jquery-ui: - - getting-started - - how-jquery-ui-works - - theming: - - themeroller - - api - - write-a-theme - - widget-factory: - - why-use-the-widget-factory - - how-to-use-the-widget-factory - - environments: - - amd - - bower -- jquery-mobile: - - getting-started - - theme-roller diff --git a/package.json b/package.json index 4838d9dd..3bdf4181 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,6 @@ "grunt-html": "0.1.1", "grunt-wordpress": "1.2.1", "grunt-jquery-content": "0.13.0", - "grunt-check-modules": "0.1.0", - "js-yaml": "3.1.0" + "grunt-check-modules": "0.1.0" } } From 2f43edf51b85dac2edbbb6975909962616132418 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Wed, 5 Nov 2014 19:43:06 -0500 Subject: [PATCH 078/247] Docs: order.yml -> order.json --- CONTRIBUTING.md | 4 ++-- README.md | 12 ++++++------ 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 0b2fb95f..aeeab8e1 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -24,7 +24,7 @@ Of course, we'll also give you credit for your work! The **Contributors** sectio ### Content -The content in this site is maintained in [this GitHub repository](https://github.com/jquery/learn.jquery.com) as a collection of [Markdown](http://daringfireball.net/projects/markdown/) files in the `page` directory. The order in which chapters and articles are presented is controlled by the [order.yml](https://github.com/jquery/learn.jquery.com/blob/master/order.yml) file. +The content in this site is maintained in [this GitHub repository](https://github.com/jquery/learn.jquery.com) as a collection of [Markdown](http://daringfireball.net/projects/markdown/) files in the `page` directory. The order in which chapters and articles are presented is controlled by the [order.json](https://github.com/jquery/learn.jquery.com/blob/master/order.json) file. ### Design @@ -75,7 +75,7 @@ For more advice on managing your fork and submitting pull requests to the jQuery ### Adding a New Article 1. Add the file to the right folder in the `page` folder. -2. Add the slug name (the filename without the extension) to the desired location in `order.yml` +2. Add the slug name (the filename without the extension) to the desired location in `order.json` 3. Run `grunt` 4. You should now be able to navigate to the file. diff --git a/README.md b/README.md index 868f777a..e0ab24ce 100755 --- a/README.md +++ b/README.md @@ -21,20 +21,20 @@ This site's core content consists of [Markdown](http://daringfireball.net/projec All of the content lives inside of the subdirectories of the `page` directory. Each of these subdirectories is considered a **chapter**, and contains one or more **articles**, and there is also a top level file that corresponds to each chapter, which contains the chapter's human-readable title and an overview, which will appear on the chapter's landing page. -The [`order.yml`](https://github.com/jquery/learn.jquery.com/blob/master/order.yml) file controls the order that chapters and articles appear in the site. +The [`order.json`](https://github.com/jquery/learn.jquery.com/blob/master/order.json) file controls the order that chapters and articles appear in the site. -### YAML Conventions +### Front Matter -Each of the articles on the site has some YAML "Front Matter" that contains metadata. All articles should include the following: +Each of the articles on the site has some JSON "Front Matter" that contains metadata. All articles should include the following: -* `title` - The title of the article as it will appear in the site. If it contains special characters, put the string in quotes. +* `title` - The title of the article as it will appear in the site. -`title: "jQuery Event Extensions"` +`"title": "jQuery Event Extensions"` * `level` - The approximate level of jQuery experience required to find the article useful. Options: `beginner`, `intermediate`, or `advanced`. -`level: advanced` +`"level": "advanced"` ## Building & Working Locally From 1840e5c7520a9f3a4c68fa65c3d9e5f226940a31 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Wed, 5 Nov 2014 19:45:50 -0500 Subject: [PATCH 079/247] Build: Whitespace --- grunt.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/grunt.js b/grunt.js index 8db3f5bc..b0f50413 100644 --- a/grunt.js +++ b/grunt.js @@ -87,7 +87,7 @@ grunt.registerHelper( "read-order", function( orderFile ) { grunt.registerHelper( "contributor-attribution", function( post, fileName, fn ) { var contribs = [], _ = grunt.utils._, - parseRE = /^(.*)<(.*)>$/; // could certainly be better. + parseRE = /^(.*)<(.*)>$/; // could certainly be better. // Read contributors from git file information grunt.utils.spawn({ @@ -107,7 +107,7 @@ grunt.registerHelper( "contributor-attribution", function( post, fileName, fn ) } // make unique. contribs = _.uniq( result.stdout.split( /\r?\n/g ) ); - + // make object { name: 'name', email: 'email@address.com' } contribs.forEach(function(str, idx) { var m = parseRE.exec(str); @@ -125,7 +125,7 @@ grunt.registerHelper( "contributor-attribution", function( post, fileName, fn ) }); // Handle "legacy" content - content authored outside of the learn site - // and attributed with metadata in the file, + // and attributed with metadata in the file, // push those contributors to the front of the list if ( post.attribution ) { post.attribution.forEach(function(str, idx) { @@ -160,7 +160,6 @@ grunt.registerHelper( "contributor-attribution", function( post, fileName, fn ) key: "contributors", value: JSON.stringify( contribs ) }); - } else { post.customFields = [{ key: "contributors", From f933befc1921047f0b23d14de420bcef07359d34 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Wed, 5 Nov 2014 19:46:25 -0500 Subject: [PATCH 080/247] Build: Remove unused config --- grunt.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/grunt.js b/grunt.js index b0f50413..3e4c4e93 100644 --- a/grunt.js +++ b/grunt.js @@ -39,8 +39,7 @@ grunt.initConfig({ all: grunt.file.expandFiles( "resources/**/*" ) }, wordpress: grunt.utils._.extend({ - dir: "dist/wordpress", - order: "order.json" + dir: "dist/wordpress" }, grunt.file.readJSON( "config.json" ) ) }); From cbee33f5c8377eb33b132e2be1b67a586940715f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Tue, 2 Dec 2014 16:21:01 -0500 Subject: [PATCH 081/247] Build: Remove grunt-html --- grunt.js | 4 ---- package.json | 1 - 2 files changed, 5 deletions(-) diff --git a/grunt.js b/grunt.js index 3e4c4e93..ae722346 100644 --- a/grunt.js +++ b/grunt.js @@ -5,7 +5,6 @@ module.exports = function( grunt ) { "use strict"; grunt.loadNpmTasks( "grunt-clean" ); -grunt.loadNpmTasks( "grunt-html" ); grunt.loadNpmTasks( "grunt-wordpress" ); grunt.loadNpmTasks( "grunt-jquery-content" ); grunt.loadNpmTasks( "grunt-check-modules" ); @@ -14,9 +13,6 @@ grunt.initConfig({ clean: { wordpress: "dist/" }, - htmllint: { - resources: "resources/*.html" - }, jshint: { options: { undef: true, diff --git a/package.json b/package.json index 3bdf4181..c51c625a 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,6 @@ "dependencies": { "grunt": "0.3.17", "grunt-clean": "0.3.0", - "grunt-html": "0.1.1", "grunt-wordpress": "1.2.1", "grunt-jquery-content": "0.13.0", "grunt-check-modules": "0.1.0" From 69bdb183ad84b44ed3eac7ec74c89f9fb69927fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Tue, 2 Dec 2014 16:22:13 -0500 Subject: [PATCH 082/247] Build: Replace grunt-clean with rimraf --- grunt.js | 11 +++++------ package.json | 4 ++-- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/grunt.js b/grunt.js index ae722346..f87359f6 100644 --- a/grunt.js +++ b/grunt.js @@ -1,18 +1,15 @@ -var config = require( "./config" ); +var rimraf = require( "rimraf" ), + config = require( "./config" ); module.exports = function( grunt ) { "use strict"; -grunt.loadNpmTasks( "grunt-clean" ); grunt.loadNpmTasks( "grunt-wordpress" ); grunt.loadNpmTasks( "grunt-jquery-content" ); grunt.loadNpmTasks( "grunt-check-modules" ); grunt.initConfig({ - clean: { - wordpress: "dist/" - }, jshint: { options: { undef: true, @@ -39,7 +36,9 @@ grunt.initConfig({ }, grunt.file.readJSON( "config.json" ) ) }); - +grunt.registerTask( "clean", function() { + rimraf.sync( "dist" ); +}); // Process a JSON order file and return an object of page slugs and their ordinal indices grunt.registerHelper( "read-order", function( orderFile ) { diff --git a/package.json b/package.json index c51c625a..12650520 100644 --- a/package.json +++ b/package.json @@ -22,9 +22,9 @@ ], "dependencies": { "grunt": "0.3.17", - "grunt-clean": "0.3.0", "grunt-wordpress": "1.2.1", "grunt-jquery-content": "0.13.0", - "grunt-check-modules": "0.1.0" + "grunt-check-modules": "0.1.0", + "rimraf": "2.2.8" } } From 7ea4588e7a55894750c56e0631775056338ce5ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Tue, 2 Dec 2014 16:23:52 -0500 Subject: [PATCH 083/247] Build: Remove unused tasks --- grunt.js | 32 +++++--------------------------- 1 file changed, 5 insertions(+), 27 deletions(-) diff --git a/grunt.js b/grunt.js index f87359f6..25ffb1b5 100644 --- a/grunt.js +++ b/grunt.js @@ -1,30 +1,12 @@ -var rimraf = require( "rimraf" ), - config = require( "./config" ); +var rimraf = require( "rimraf" ); module.exports = function( grunt ) { -"use strict"; - -grunt.loadNpmTasks( "grunt-wordpress" ); -grunt.loadNpmTasks( "grunt-jquery-content" ); grunt.loadNpmTasks( "grunt-check-modules" ); +grunt.loadNpmTasks( "grunt-jquery-content" ); +grunt.loadNpmTasks( "grunt-wordpress" ); grunt.initConfig({ - jshint: { - options: { - undef: true, - node: true - } - }, - lint: { - grunt: "grunt.js" - }, - watch: { - pages: { - files: "page/**", - tasks: "deploy" - } - }, "build-pages": { all: grunt.file.expandFiles( "page/**" ) }, @@ -187,11 +169,7 @@ grunt.registerHelper( "build-pages-preprocess", (function() { }; })()); -grunt.registerTask( "default", "wordpress-deploy" ); -grunt.registerTask( "build-wordpress", "check-modules clean lint build-pages build-resources"); -grunt.registerTask( "deploy", "wordpress-deploy" ); +grunt.registerTask( "build", "build-pages build-resources" ); +grunt.registerTask( "build-wordpress", "check-modules clean build" ); }; - - - From adddd5d985c46b7554ce7a6d0f6b4d802edf9dd9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Tue, 2 Dec 2014 16:24:05 -0500 Subject: [PATCH 084/247] Build: Remove dates from copyright notice --- LICENSE.txt | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/LICENSE.txt b/LICENSE.txt index 2e50ad88..5bbeec51 100644 --- a/LICENSE.txt +++ b/LICENSE.txt @@ -1,5 +1,4 @@ -Copyright 2009, 2014 jQuery Foundation and other contributors, -https://jquery.org/ +Copyright jQuery Foundation and other contributors, https://jquery.org/ This software consists of voluntary contributions made by many individuals. For exact contribution history, see the revision history From 09bb5844ec9ae587e6cf96a0db7b28794cc6afc0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Tue, 2 Dec 2014 16:26:22 -0500 Subject: [PATCH 085/247] README: Cleanup --- README.md | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index e0ab24ce..60bc2a16 100755 --- a/README.md +++ b/README.md @@ -1,8 +1,5 @@ # The jQuery Learning Site -* Primary Domain: [http://learn.jquery.com](http://learn.jquery.com) -* Staging Domain: [http://stage.learn.jquery.com](http://stage.learn.jquery.com) - ## About The goal of this site is twofold: @@ -17,6 +14,7 @@ Much of the initial content - and spirit - comes from [jQuery Fundamentals](http This site's core content consists of [Markdown](http://daringfireball.net/projects/markdown/) files. The template that controls the site's appearance is a [child theme](https://github.com/jquery/jquery-wp-content/tree/master/themes/learn.jquery.com) of [jquery-wp-content](https://github.com/jquery/jquery-wp-content), and any issues with the presentation should be directed to [that repository](https://github.com/jquery/jquery-wp-content). + ### Site Organization All of the content lives inside of the subdirectories of the `page` directory. Each of these subdirectories is considered a **chapter**, and contains one or more **articles**, and there is also a top level file that corresponds to each chapter, which contains the chapter's human-readable title and an overview, which will appear on the chapter's landing page. @@ -37,14 +35,10 @@ Each of the articles on the site has some JSON "Front Matter" that contains meta `"level": "advanced"` -## Building & Working Locally +## Building and Deploying -As this site is part of the jQuery network of sites, its presentation is controlled by [jquery-wp-content](https://github.com/jquery/jquery-wp-content). To preview the site locally, first follow the [instructions there](https://github.com/jquery/jquery-wp-content) to set up a local version of the jQuery WordPress network. Then, clone this repo and run the following steps (node.js required). +To build and deploy your changes for previewing in a [`jquery-wp-content`](https://github.com/jquery/jquery-wp-content) instance, follow the [workflow instructions](http://contribute.jquery.org/web-sites/#workflow) from our documentation on [contributing to jQuery Foundation web sites](http://contribute.jquery.org/web-sites/). -1. `npm install` -2. `cp config-sample.json config.json` -3. Edit config.json to use the username and password for your local WordPress network -4. `grunt` ## How Can I Help? From 47c2b40c8832547cf46ea0be37a6e73cd250d8ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Wed, 3 Dec 2014 10:10:12 -0500 Subject: [PATCH 086/247] Build: General cleanup and removal of grunt-specific APIs --- grunt.js | 201 +++++++++++++++++++++------------------------------ package.json | 3 +- 2 files changed, 86 insertions(+), 118 deletions(-) diff --git a/grunt.js b/grunt.js index 25ffb1b5..afc3f07c 100644 --- a/grunt.js +++ b/grunt.js @@ -1,4 +1,5 @@ -var rimraf = require( "rimraf" ); +var rimraf = require( "rimraf" ), + spawnback = require( "spawnback" ); module.exports = function( grunt ) { @@ -22,150 +23,116 @@ grunt.registerTask( "clean", function() { rimraf.sync( "dist" ); }); -// Process a JSON order file and return an object of page slugs and their ordinal indices -grunt.registerHelper( "read-order", function( orderFile ) { - var order, - map = {}, +function getOrderMap() { + var map = {}, index = 0; - try { - order = JSON.parse( grunt.file.read( orderFile ) ); - } catch( error ) { - grunt.warn( "Invalid order file: " + orderFile ); - return null; + function walk( items, prefix ) { + items.forEach(function( item ) { + if ( typeof item === "object" ) { + var page = Object.keys( item )[ 0 ]; + map[ prefix + page ] = ++index; + walk( item[ page ], prefix + page + "/" ); + } else { + map[ prefix + item ] = ++index; + } + }); } + walk( require( "./order" ), "" ); - function flatten( item, folder ) { - var title, - path = folder ? [ folder ] : []; - - if ( grunt.utils._.isObject( item ) ) { - title = Object.keys( item )[ 0 ]; - path.push( title ); - path = path.join( "/" ); - map[ path ] = ++index; - - item[ title ].forEach(function( item ) { - flatten( item, path ); - }); - } else { - path.push( item ); - map[ path.join( "/" ) ] = ++index; - } - } - order.forEach(function( item ) { - flatten( item ); - }); return map; -}); +} -grunt.registerHelper( "contributor-attribution", function( post, fileName, fn ) { - var contribs = [], - _ = grunt.utils._, - parseRE = /^(.*)<(.*)>$/; // could certainly be better. +function contributorAttribution( post, fileName, callback ) { + var contribs, + parseRE = /^(.*)<(.*)>$/; // Read contributors from git file information - grunt.utils.spawn({ - cmd: "git", - args: [ - "log", - "--follow", // Trace history through file rename operations - "--diff-filter=AM", // Only consider "Add" and "Modify" operations - "--format=%aN <%aE>", - fileName - ] - }, function( err, result ) { - if ( err ) { - grunt.verbose.error(); - grunt.log.error( err ); - return; + spawnback( "git", [ + "log", + "--follow", // Trace history through file rename operations + "--diff-filter=AM", // Only consider "Add" and "Modify" operations + "--format=%aN <%aE>", + fileName + ], function( error, result ) { + if ( error ) { + return callback( error ); } - // make unique. - contribs = _.uniq( result.stdout.split( /\r?\n/g ) ); - - // make object { name: 'name', email: 'email@address.com' } - contribs.forEach(function(str, idx) { - var m = parseRE.exec(str); - if ( m ) { - contribs[idx] = { name: m[1].trim(), email: m[2] }; - } - else { - contribs[idx] = { name: str }; - } - }); - // Alphabetize by 'last name' (relatively crude) - contribs = _.sortBy( contribs, function(a) { - return a.name.split(' ').pop().toLowerCase(); - }); + contribs = result.trimRight().split( /\r?\n/g ) + + // Reduce to a unique list of contributors + .filter(function( value, index, array ) { + return array.indexOf( value ) === index; + }) + + // Convert to structured objects + .map(function( contributor ) { + var matches = parseRE.exec( contributor ); + return { + name: matches[ 1 ].trim(), + email: matches[ 2 ] + }; + }) + + // Alphabetize by 'last name' (relatively crude) + .sort(function( a, b ) { + return a.name.split( " " ).pop().toLowerCase() < + b.name.split( " " ).pop().toLowerCase() ? + -1 : 1; + }); // Handle "legacy" content - content authored outside of the learn site // and attributed with metadata in the file, // push those contributors to the front of the list if ( post.attribution ) { - post.attribution.forEach(function(str, idx) { - var contrib, m; - - // Handling specifically for articles originally from jQuery Fundamentals - if (str == "jQuery Fundamentals") { - contribs.unshift({ - name: str, - // Use the jQuery Gravatar - email: "github@jquery.com", - source: post.source - }); + post.attribution.forEach(function( contributor ) { + var contrib, matches; + + if ( contributor === "jQuery Fundamentals" ) { + contrib = { + name: "jQuery Fundamentals", + email: "github@jquery.com" + }; } else { - m = parseRE.exec(str); - if ( m ) { - contrib = { name: m[1].trim(), email: m[2] }; - } - else { - contrib = { name: str }; - } - if ( post.source ) { - contrib.source = post.source; - } - contribs.unshift( contrib ); + matches = parseRE.exec( contributor ); + contrib = { + name: matches[ 1 ].trim(), + email: matches[ 2 ] + }; } - }); - } - if ( post.customFields ) { - post.customFields.push({ - key: "contributors", - value: JSON.stringify( contribs ) + if ( post.source ) { + contrib.source = post.source; + } + + contribs.unshift( contrib ); }); - } else { - post.customFields = [{ - key: "contributors", - value: JSON.stringify( contribs ) - }]; } - fn(); - }); + post.customFields = post.customFields || []; + post.customFields.push({ + key: "contributors", + value: JSON.stringify( contribs ) + }); -}); + callback( null ); + }); +} grunt.registerHelper( "build-pages-preprocess", (function() { - var orderMap = grunt.helper( "read-order", "order.json" ); + var orderMap = getOrderMap(); return function( post, fileName, done ) { - grunt.utils.async.series([ - function applyOrder( fn ) { - var slug = fileName.replace( /^.+?\/(.+)\.\w+$/, "$1" ), - menuOrder = orderMap[ slug ]; - if ( menuOrder ) { - post.menuOrder = menuOrder; - } - fn(); - }, + var slug = fileName.replace( /^.+?\/(.+)\.\w+$/, "$1" ), + menuOrder = orderMap[ slug ]; - function applyContribs( fn ) { - grunt.helper( "contributor-attribution", post, fileName, fn ); - } - ], done ); + if ( menuOrder ) { + post.menuOrder = menuOrder; + } + + contributorAttribution( post, fileName, done ); }; })()); diff --git a/package.json b/package.json index 12650520..3c670c53 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "grunt-wordpress": "1.2.1", "grunt-jquery-content": "0.13.0", "grunt-check-modules": "0.1.0", - "rimraf": "2.2.8" + "rimraf": "2.2.8", + "spawnback": "1.0.0" } } From 9ccff1cbba4fe3b22d7353358b00128c9720ded0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Fri, 5 Dec 2014 10:42:25 -0500 Subject: [PATCH 087/247] Build: Upgrade to Grunt 0.4.5 * Upgrade to grunt-check-modules 0.2.0 * Upgrade to grunt-jquery-content 1.0.0 --- .gitignore | 10 +++------- grunt.js => Gruntfile.js | 32 +++++++++++++++++--------------- package.json | 7 +++---- 3 files changed, 23 insertions(+), 26 deletions(-) rename grunt.js => Gruntfile.js (80%) diff --git a/.gitignore b/.gitignore index c8e4ed6f..633f1bde 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,3 @@ -vendor -tmp/* -tmp -config.json -node_modules/ -dist/ -.DS_Store +/dist/ +/node_modules/ +config.js* diff --git a/grunt.js b/Gruntfile.js similarity index 80% rename from grunt.js rename to Gruntfile.js index afc3f07c..5fbc56c9 100644 --- a/grunt.js +++ b/Gruntfile.js @@ -1,22 +1,24 @@ var rimraf = require( "rimraf" ), - spawnback = require( "spawnback" ); + spawnback = require( "spawnback" ), + jqueryContent = require( "grunt-jquery-content" ); module.exports = function( grunt ) { grunt.loadNpmTasks( "grunt-check-modules" ); grunt.loadNpmTasks( "grunt-jquery-content" ); -grunt.loadNpmTasks( "grunt-wordpress" ); grunt.initConfig({ "build-pages": { - all: grunt.file.expandFiles( "page/**" ) + all: "page/**" }, "build-resources": { - all: grunt.file.expandFiles( "resources/**/*" ) + all: "resources/**" }, - wordpress: grunt.utils._.extend({ - dir: "dist/wordpress" - }, grunt.file.readJSON( "config.json" ) ) + wordpress: (function() { + var config = require( "./config" ); + config.dir = "dist/wordpress"; + return config; + })() }); grunt.registerTask( "clean", function() { @@ -117,26 +119,26 @@ function contributorAttribution( post, fileName, callback ) { value: JSON.stringify( contribs ) }); - callback( null ); + callback( null, post ); }); } -grunt.registerHelper( "build-pages-preprocess", (function() { +jqueryContent.preprocessPost = (function() { var orderMap = getOrderMap(); - return function( post, fileName, done ) { - var slug = fileName.replace( /^.+?\/(.+)\.\w+$/, "$1" ), + return function( post, postPath, callback ) { + var slug = postPath.replace( /^.+?\/(.+)\.\w+$/, "$1" ), menuOrder = orderMap[ slug ]; if ( menuOrder ) { post.menuOrder = menuOrder; } - contributorAttribution( post, fileName, done ); + contributorAttribution( post, postPath, callback ); }; -})()); +})(); -grunt.registerTask( "build", "build-pages build-resources" ); -grunt.registerTask( "build-wordpress", "check-modules clean build" ); +grunt.registerTask( "build", [ "build-pages", "build-resources" ] ); +grunt.registerTask( "build-wordpress", [ "check-modules", "clean", "build" ] ); }; diff --git a/package.json b/package.json index 3c670c53..af4e9ac9 100644 --- a/package.json +++ b/package.json @@ -21,10 +21,9 @@ } ], "dependencies": { - "grunt": "0.3.17", - "grunt-wordpress": "1.2.1", - "grunt-jquery-content": "0.13.0", - "grunt-check-modules": "0.1.0", + "grunt": "0.4.5", + "grunt-check-modules": "0.2.0", + "grunt-jquery-content": "1.0.0", "rimraf": "2.2.8", "spawnback": "1.0.0" } From a22a7436ea07c978ba51abda593204a51613fcd1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Fri, 5 Dec 2014 10:44:02 -0500 Subject: [PATCH 088/247] Build: package.json cleanup --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index af4e9ac9..81919270 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "version": "0.3.28", "homepage": "http://learn.jquery.com", "author": { - "name": "jQuery Foundation (http://jquery.org/)" + "name": "jQuery Foundation and other contributors" }, "repository": { "type": "git", @@ -17,7 +17,7 @@ "licenses": [ { "type": "MIT", - "url": "http://www.opensource.org/licenses/MIT" + "url": "https://github.com/jquery/api.jquery.com/blob/master/LICENSE.txt" } ], "dependencies": { From 63e8413dc9a25df72ac2c7b725fe84a16cfd5692 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Fri, 5 Dec 2014 15:31:19 -0500 Subject: [PATCH 089/247] 0.4.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 81919270..6251044a 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "learn.jquery.com", "title": "jQuery Learning Site", "description": "jQuery Foundation site for learning jQuery and JavaScript", - "version": "0.3.28", + "version": "0.4.0", "homepage": "http://learn.jquery.com", "author": { "name": "jQuery Foundation and other contributors" From 6a1511f253c8e595f0a860a7c56c52f668592ec4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Mon, 8 Dec 2014 13:19:46 -0500 Subject: [PATCH 090/247] Build: Upgrade to grunt-jquery-content 2.0.0 --- Gruntfile.js | 17 +++++------------ package.json | 4 +--- 2 files changed, 6 insertions(+), 15 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index 5fbc56c9..0d34de5a 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,15 +1,13 @@ -var rimraf = require( "rimraf" ), - spawnback = require( "spawnback" ), +var spawnback = require( "spawnback" ), jqueryContent = require( "grunt-jquery-content" ); module.exports = function( grunt ) { -grunt.loadNpmTasks( "grunt-check-modules" ); grunt.loadNpmTasks( "grunt-jquery-content" ); grunt.initConfig({ - "build-pages": { - all: "page/**" + "build-posts": { + page: "page/**" }, "build-resources": { all: "resources/**" @@ -21,10 +19,6 @@ grunt.initConfig({ })() }); -grunt.registerTask( "clean", function() { - rimraf.sync( "dist" ); -}); - function getOrderMap() { var map = {}, index = 0; @@ -123,7 +117,7 @@ function contributorAttribution( post, fileName, callback ) { }); } -jqueryContent.preprocessPost = (function() { +jqueryContent.postPreprocessors.page = (function() { var orderMap = getOrderMap(); return function( post, postPath, callback ) { @@ -138,7 +132,6 @@ jqueryContent.preprocessPost = (function() { }; })(); -grunt.registerTask( "build", [ "build-pages", "build-resources" ] ); -grunt.registerTask( "build-wordpress", [ "check-modules", "clean", "build" ] ); +grunt.registerTask( "build", [ "build-posts", "build-resources" ] ); }; diff --git a/package.json b/package.json index 6251044a..d1e8cd39 100644 --- a/package.json +++ b/package.json @@ -22,9 +22,7 @@ ], "dependencies": { "grunt": "0.4.5", - "grunt-check-modules": "0.2.0", - "grunt-jquery-content": "1.0.0", - "rimraf": "2.2.8", + "grunt-jquery-content": "2.0.0", "spawnback": "1.0.0" } } From 91d4a05cd17bb48dc37f8b536df54f5dcf6a4b04 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Mon, 8 Dec 2014 14:01:37 -0500 Subject: [PATCH 091/247] Build: Initial mailmap --- .mailmap | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 .mailmap diff --git a/.mailmap b/.mailmap new file mode 100644 index 00000000..ffb1b476 --- /dev/null +++ b/.mailmap @@ -0,0 +1,16 @@ +Addy Osmani +Clément Partiot +Corey Frang +Douglas Calhoun +Eddie Monge +Eran Weissenstern +Eugene Nikolaev +Garrett Johnson <=> +Herwin Weststrate +John K. Paul +Luís Soares +Radu Oprita +Rebecca Murphey +Scott Murphy +Steven Hauser +Youssef Boulkaid From 8be94057887d41cdb1dd81d338d1c43ca2290c1d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Mon, 8 Dec 2014 14:02:06 -0500 Subject: [PATCH 092/247] 0.4.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index d1e8cd39..3d60aae7 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "learn.jquery.com", "title": "jQuery Learning Site", "description": "jQuery Foundation site for learning jQuery and JavaScript", - "version": "0.4.0", + "version": "0.4.1", "homepage": "http://learn.jquery.com", "author": { "name": "jQuery Foundation and other contributors" From 7646173ff56ac6630c2fba6a3ad62414a34d54e1 Mon Sep 17 00:00:00 2001 From: Arthur Verschaeve Date: Fri, 5 Dec 2014 20:56:15 +0100 Subject: [PATCH 093/247] FAQ: Don't reference `docs.jquery.com` as source Fixes gh-570 Closes gh-579 --- .../how-do-i-check-uncheck-a-checkbox-input-or-radio-button.md | 3 +-- .../faq/how-do-i-determine-the-state-of-a-toggled-element.md | 3 +-- .../faq/how-do-i-disable-enable-a-form-element.md | 3 +-- .../faq/how-do-i-get-the-text-value-of-a-selected-option.md | 3 +-- .../how-do-i-pull-a-native-dom-element-from-a-jquery-object.md | 3 +-- ...-replace-text-from-the-3rd-element-of-a-list-of-10-items.md | 3 +-- ...lement-by-an-id-that-has-characters-used-in-css-notation.md | 3 +-- .../faq/how-do-i-select-an-item-using-class-or-id.md | 3 +-- ...w-do-i-select-elements-when-i-already-have-a-dom-element.md | 3 +-- .../faq/how-do-i-test-whether-an-element-exists.md | 3 +-- .../how-do-i-test-whether-an-element-has-a-particular-class.md | 3 +-- 11 files changed, 11 insertions(+), 22 deletions(-) diff --git a/page/using-jquery-core/faq/how-do-i-check-uncheck-a-checkbox-input-or-radio-button.md b/page/using-jquery-core/faq/how-do-i-check-uncheck-a-checkbox-input-or-radio-button.md index a02c0bbf..e6a6f6b5 100644 --- a/page/using-jquery-core/faq/how-do-i-check-uncheck-a-checkbox-input-or-radio-button.md +++ b/page/using-jquery-core/faq/how-do-i-check-uncheck-a-checkbox-input-or-radio-button.md @@ -1,6 +1,5 @@ You can check or uncheck a checkbox element or a radio button using the `.prop()` method: diff --git a/page/using-jquery-core/faq/how-do-i-determine-the-state-of-a-toggled-element.md b/page/using-jquery-core/faq/how-do-i-determine-the-state-of-a-toggled-element.md index 2dd25f86..718df5e2 100644 --- a/page/using-jquery-core/faq/how-do-i-determine-the-state-of-a-toggled-element.md +++ b/page/using-jquery-core/faq/how-do-i-determine-the-state-of-a-toggled-element.md @@ -1,6 +1,5 @@ You can determine whether an element is collapsed or not by using the `:visible` and `:hidden` selectors. diff --git a/page/using-jquery-core/faq/how-do-i-disable-enable-a-form-element.md b/page/using-jquery-core/faq/how-do-i-disable-enable-a-form-element.md index 955922f8..9ab3afa5 100644 --- a/page/using-jquery-core/faq/how-do-i-disable-enable-a-form-element.md +++ b/page/using-jquery-core/faq/how-do-i-disable-enable-a-form-element.md @@ -1,6 +1,5 @@ You can enable or disable a form element using the `.prop()` method: diff --git a/page/using-jquery-core/faq/how-do-i-get-the-text-value-of-a-selected-option.md b/page/using-jquery-core/faq/how-do-i-get-the-text-value-of-a-selected-option.md index b508d7c8..b98cd07e 100644 --- a/page/using-jquery-core/faq/how-do-i-get-the-text-value-of-a-selected-option.md +++ b/page/using-jquery-core/faq/how-do-i-get-the-text-value-of-a-selected-option.md @@ -1,6 +1,5 @@ Select elements typically have two values that you want to access. First there's the value to be sent to the server, which is easy: diff --git a/page/using-jquery-core/faq/how-do-i-pull-a-native-dom-element-from-a-jquery-object.md b/page/using-jquery-core/faq/how-do-i-pull-a-native-dom-element-from-a-jquery-object.md index 261e75dd..e4ba9e95 100644 --- a/page/using-jquery-core/faq/how-do-i-pull-a-native-dom-element-from-a-jquery-object.md +++ b/page/using-jquery-core/faq/how-do-i-pull-a-native-dom-element-from-a-jquery-object.md @@ -1,6 +1,5 @@ A jQuery object is an array-like wrapper around one or more DOM elements. To get a reference to the actual DOM elements (instead of the jQuery object), you have two options. The first (and fastest) method is to use array notation: diff --git a/page/using-jquery-core/faq/how-do-i-replace-text-from-the-3rd-element-of-a-list-of-10-items.md b/page/using-jquery-core/faq/how-do-i-replace-text-from-the-3rd-element-of-a-list-of-10-items.md index 4d611906..02fe3e92 100644 --- a/page/using-jquery-core/faq/how-do-i-replace-text-from-the-3rd-element-of-a-list-of-10-items.md +++ b/page/using-jquery-core/faq/how-do-i-replace-text-from-the-3rd-element-of-a-list-of-10-items.md @@ -1,6 +1,5 @@ Either the `:eq()` selector or the `.eq()` method will allow you to select the proper item. However, to replace the text, you must get the value before you set it: diff --git a/page/using-jquery-core/faq/how-do-i-select-an-element-by-an-id-that-has-characters-used-in-css-notation.md b/page/using-jquery-core/faq/how-do-i-select-an-element-by-an-id-that-has-characters-used-in-css-notation.md index cbc46c14..8d71ebb6 100644 --- a/page/using-jquery-core/faq/how-do-i-select-an-element-by-an-id-that-has-characters-used-in-css-notation.md +++ b/page/using-jquery-core/faq/how-do-i-select-an-element-by-an-id-that-has-characters-used-in-css-notation.md @@ -1,6 +1,5 @@ Because jQuery uses CSS syntax for selecting elements, some characters are interpreted as CSS notation. For example, ID attributes, after an initial letter (a-z or A-Z), may also use periods and colons, in addition to letters, numbers, hyphens, and underscores (see [W3C Basic HTML Data Types](http://www.w3.org/TR/html4/types.html#type-id)). The colon (":") and period (".") are problematic within the context of a jQuery selector because they indicate a pseudo-class and class, respectively. diff --git a/page/using-jquery-core/faq/how-do-i-select-an-item-using-class-or-id.md b/page/using-jquery-core/faq/how-do-i-select-an-item-using-class-or-id.md index 916d37b6..aad1bb1d 100644 --- a/page/using-jquery-core/faq/how-do-i-select-an-item-using-class-or-id.md +++ b/page/using-jquery-core/faq/how-do-i-select-an-item-using-class-or-id.md @@ -1,6 +1,5 @@ This code selects an element with an ID of "myDivId". Since IDs are unique, this expression always selects either zero or one elements depending upon whether or not an element with the specified ID exists. diff --git a/page/using-jquery-core/faq/how-do-i-select-elements-when-i-already-have-a-dom-element.md b/page/using-jquery-core/faq/how-do-i-select-elements-when-i-already-have-a-dom-element.md index babd7102..10490556 100644 --- a/page/using-jquery-core/faq/how-do-i-select-elements-when-i-already-have-a-dom-element.md +++ b/page/using-jquery-core/faq/how-do-i-select-elements-when-i-already-have-a-dom-element.md @@ -1,6 +1,5 @@ If you have a variable containing a DOM element, and want to select elements related to that DOM element, simply wrap it in a jQuery object. diff --git a/page/using-jquery-core/faq/how-do-i-test-whether-an-element-exists.md b/page/using-jquery-core/faq/how-do-i-test-whether-an-element-exists.md index e7b75438..c6ef018e 100644 --- a/page/using-jquery-core/faq/how-do-i-test-whether-an-element-exists.md +++ b/page/using-jquery-core/faq/how-do-i-test-whether-an-element-exists.md @@ -1,6 +1,5 @@ Use the [.length](http://api.jquery.com/length/) property of the jQuery collection returned by your selector: diff --git a/page/using-jquery-core/faq/how-do-i-test-whether-an-element-has-a-particular-class.md b/page/using-jquery-core/faq/how-do-i-test-whether-an-element-has-a-particular-class.md index 556ec49f..8ebe9e19 100644 --- a/page/using-jquery-core/faq/how-do-i-test-whether-an-element-has-a-particular-class.md +++ b/page/using-jquery-core/faq/how-do-i-test-whether-an-element-has-a-particular-class.md @@ -1,6 +1,5 @@ [.hasClass()](http://api.jquery.com/hasClass/) (added in version 1.2) handles this common use case: From c381a51d771c9b996feba943e34694977bd0ae26 Mon Sep 17 00:00:00 2001 From: Arthur Verschaeve Date: Fri, 5 Dec 2014 20:04:40 +0100 Subject: [PATCH 094/247] Plugin Creation: remove content regarding utility methods Fixes gh-396 Closes gh-577 --- page/plugins/basic-plugin-creation.md | 16 ++-------------- 1 file changed, 2 insertions(+), 14 deletions(-) diff --git a/page/plugins/basic-plugin-creation.md b/page/plugins/basic-plugin-creation.md index 59e05799..c2bed4ca 100644 --- a/page/plugins/basic-plugin-creation.md +++ b/page/plugins/basic-plugin-creation.md @@ -5,9 +5,9 @@ "attribution": [ "jQuery Fundamentals" ] } -Sometimes you want to make a piece of functionality available throughout your code. For example, perhaps you want a single method you can call on a jQuery selection that performs a series of operations on the selection. Maybe you wrote a really useful utility function that you want to be able to move easily to other projects. In this case, you may want to write a plugin. +Sometimes you want to make a piece of functionality available throughout your code. For example, perhaps you want a single method you can call on a jQuery selection that performs a series of operations on the selection. In this case, you may want to write a plugin. -## How jQuery Works 101: jQuery Object Methods and Utility Methods +## How jQuery Works 101: jQuery Object Methods Before we write our own plugins, we must first understand a little about how jQuery works. Take a look at this code: @@ -17,8 +17,6 @@ $( "a" ).css( "color", "red" ); This is some pretty basic jQuery code, but do you know what's happening behind the scenes? Whenever you use the `$` function to select elements, it returns a jQuery object. This object contains all of the methods you've been using (`.css()`, `.click()`, etc.) and all of the elements that fit your selector. The jQuery object gets these methods from the `$.fn` object. This object contains all of the jQuery object methods, and if we want to write our own methods, it will need to contain those as well. -Additionally the jQuery utility method `$.trim()` is used above to remove any leading or trailing empty space characters from the user input. Utility methods are functions that reside directly in the `$` function itself. You may occasionally want to write a utility method plugin when your extension to the jQuery API does not have to do something to a set of DOM elements you've retrieved. - ## Basic Plugin Authoring Let's say we want to create a plugin that makes text within a set of retrieved elements green. All we have to do is add a function called `greenify` to `$.fn` and it will be available just like any other jQuery object method. @@ -46,8 +44,6 @@ $.fn.greenify = function() { $( "a" ).greenify().addClass( "greenified" ); ``` -Note that the notion of chaining is *not* applicable to jQuery utility methods like `$.trim()`. - ## Protecting the $ Alias and Adding Scope The `$` variable is very popular among JavaScript libraries, and if you're using another library with jQuery, you will have to make jQuery not use the `$` with `jQuery.noConflict()`. However, this will break our plugin since it is written with the assumption that `$` is an alias to the `jQuery` function. To work well with other plugins, _and_ still use the jQuery `$` alias, we need to put all of our code inside of an [Immediately Invoked Function Expression](http://stage.learn.jquery.com/javascript-101/functions/#immediately-invoked-function-expression-iife), and then pass the function `jQuery`, and name the parameter `$`: @@ -60,14 +56,6 @@ The `$` variable is very popular among JavaScript libraries, and if you're using return this; }; - $.ltrim = function( str ) { - return str.replace( /^\s+/, "" ); - }; - - $.rtrim = function( str ) { - return str.replace( /\s+$/, "" ); - }; - }( jQuery )); ``` From 8743d0e5643319f1f3ed5cb7967ff9ce7b386b2f Mon Sep 17 00:00:00 2001 From: Anne-Gaelle Colom Date: Thu, 18 Dec 2014 23:01:55 +0000 Subject: [PATCH 095/247] 0.4.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 3d60aae7..e9dc737f 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "learn.jquery.com", "title": "jQuery Learning Site", "description": "jQuery Foundation site for learning jQuery and JavaScript", - "version": "0.4.1", + "version": "0.4.2", "homepage": "http://learn.jquery.com", "author": { "name": "jQuery Foundation and other contributors" From 45babf6beda885757f16669794d1fc0b54649746 Mon Sep 17 00:00:00 2001 From: Arthur Verschaeve Date: Tue, 16 Dec 2014 06:53:00 +0100 Subject: [PATCH 096/247] All: Capitalize 'Ajax' correctly Closes gh-583 --- page/code-organization/deferreds/jquery-deferreds.md | 2 +- page/events/introduction-to-events.md | 4 ++-- page/jquery-mobile/getting-started.md | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/page/code-organization/deferreds/jquery-deferreds.md b/page/code-organization/deferreds/jquery-deferreds.md index 09945b5c..83e02412 100644 --- a/page/code-organization/deferreds/jquery-deferreds.md +++ b/page/code-organization/deferreds/jquery-deferreds.md @@ -11,7 +11,7 @@ ## jQuery Deferreds -Deferreds were added as a part of a large rewrite of the ajax module, led by Julian Aubourg following the CommonJS Promises/A design. Whilst 1.5 and above include deferred capabilities, former versions of jQuery had `jQuery.ajax()` accept callbacks that would be invoked upon completion or error of the request, but suffered from heavy coupling — the same principle that would drive developers using other languages or toolkits to opt for deferred execution. +Deferreds were added as a part of a large rewrite of the Ajax module, led by Julian Aubourg following the CommonJS Promises/A design. Whilst 1.5 and above include deferred capabilities, former versions of jQuery had `jQuery.ajax()` accept callbacks that would be invoked upon completion or error of the request, but suffered from heavy coupling — the same principle that would drive developers using other languages or toolkits to opt for deferred execution. In practice what jQuery's version provides you with are several enhancements to the way callbacks are managed, giving you significantly more flexible ways to provide callbacks that can be invoked whether the original callback dispatch has already fired or not. It is also worth noting that jQuery's Deferred object supports having multiple callbacks bound to the outcome of particular tasks (and not just one) where the task itself can either be synchronous or asynchronous. diff --git a/page/events/introduction-to-events.md b/page/events/introduction-to-events.md index 0998dcad..da162d37 100644 --- a/page/events/introduction-to-events.md +++ b/page/events/introduction-to-events.md @@ -109,7 +109,7 @@ Event delegation works because of the notion of *event bubbling*. For most event The two main pros of event delegation over binding directly to an element (or set of elements) are performance and the aforementioned event bubbling. Imagine having a large table of 1,000 cells and binding to an event for each cell. That's 1,000 separate event handlers that the browser has to attach, even if they're all mapped to the same function. Instead of binding to each individual cell though, we could instead use delegation to listen for events that occur on the parent table and react accordingly. One event would be bound instead of 1,000, resulting in way better performance and memory management. -The event bubbling that occurs affords us the ability to add cells via AJAX for example, without having to bind events directly to those cells since the parent table is listening for clicks and is therefore notified of clicks on its children. If we weren't using delegation, we'd have to constantly bind events for every cell that's added which is not only a performance issue, but could also become a maintenance nightmare. +The event bubbling that occurs affords us the ability to add cells via Ajax for example, without having to bind events directly to those cells since the parent table is listening for clicks and is therefore notified of clicks on its children. If we weren't using delegation, we'd have to constantly bind events for every cell that's added which is not only a performance issue, but could also become a maintenance nightmare. ## The event object @@ -129,7 +129,7 @@ In this slightly different example, we're defining a function called `sayHello` But what about that `event` argument in the `sayHello` function — what is it and why does it matter? In all DOM event callbacks, jQuery passes an *event object* argument which contains information about the event, such as precisely when and where it occurred, what type of event it was, which element the event occurred on, and a plethora of other information. Of course you don't have to call it `event`; you could call it `e` or whatever you want to, but `event` is a pretty common convention. -If the element has default functionality for a specific event (like a link opens a new page, a button in a form submits the form, etc.), that default functionality can be cancelled. This is often useful for AJAX requests. When a user clicks on a button to submit a form via AJAX, we'd want to cancel the button/form's default action (to submit it to the form's `action` attribute), and we would instead do an AJAX request to accomplish the same task for a more seamless experience. To do this, we would utilize the event object and call its `.preventDefault()` method. We can also prevent the event from bubbling up the DOM tree using `.stopPropagation()` so that parent elements aren't notified of its occurrence (in the case that event delegation is being used). +If the element has default functionality for a specific event (like a link opens a new page, a button in a form submits the form, etc.), that default functionality can be cancelled. This is often useful for Ajax requests. When a user clicks on a button to submit a form via Ajax, we'd want to cancel the button/form's default action (to submit it to the form's `action` attribute), and we would instead do an Ajax request to accomplish the same task for a more seamless experience. To do this, we would utilize the event object and call its `.preventDefault()` method. We can also prevent the event from bubbling up the DOM tree using `.stopPropagation()` so that parent elements aren't notified of its occurrence (in the case that event delegation is being used). ``` // Preventing a default action from occurring and stopping the event bubbling diff --git a/page/jquery-mobile/getting-started.md b/page/jquery-mobile/getting-started.md index 81287f01..9fdf1c54 100644 --- a/page/jquery-mobile/getting-started.md +++ b/page/jquery-mobile/getting-started.md @@ -3,7 +3,7 @@ "level": "Beginner" } -jQuery Mobile provides a set of touch-friendly UI widgets and an AJAX-powered navigation system to support animated page transitions. This guide will show you how you can build your first jQuery Mobile application. +jQuery Mobile provides a set of touch-friendly UI widgets and an Ajax-powered navigation system to support animated page transitions. This guide will show you how you can build your first jQuery Mobile application. ## Create a Basic Page Template From e20e3fa93d64439e2a6637775da0e269d8d4306e Mon Sep 17 00:00:00 2001 From: Anne-Gaelle Colom Date: Sun, 21 Dec 2014 18:07:08 +0000 Subject: [PATCH 097/247] 0.4.3 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e9dc737f..cd35799f 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "learn.jquery.com", "title": "jQuery Learning Site", "description": "jQuery Foundation site for learning jQuery and JavaScript", - "version": "0.4.2", + "version": "0.4.3", "homepage": "http://learn.jquery.com", "author": { "name": "jQuery Foundation and other contributors" From b750bb5361d1ab234abf006e7c43c6f706d31805 Mon Sep 17 00:00:00 2001 From: githubshrek Date: Thu, 10 Jul 2014 16:00:02 +0200 Subject: [PATCH 098/247] Events: Added heading Closes gh-532 --- page/events/introduction-to-events.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/page/events/introduction-to-events.md b/page/events/introduction-to-events.md index da162d37..1135eed3 100644 --- a/page/events/introduction-to-events.md +++ b/page/events/introduction-to-events.md @@ -105,6 +105,8 @@ Let's look at the `on` examples from above and discuss their differences. In the In the second `on` example, we're passing an object (denoted by the curly braces `{}`), which has a property of `click` whose value is an anonymous function. The second argument to the `on` method is a jQuery selector string of `button`. While examples 1–3 are functionally equivalent, example 4 is different in that the `body` element is listening for click events that occur on *any* button element, not just `#helloBtn`. The final example above is exactly the same as the one preceding it, but instead of passing an object, we pass an event string, a selector string, and the callback. Both of these are examples of event delegation, a process by which an element higher in the DOM tree listens for events occurring on its children. +## Event delegation + Event delegation works because of the notion of *event bubbling*. For most events, whenever something occurs on a page (like an element is clicked), the event travels from the element it occurred on, up to its parent, then up to the parent's parent, and so on, until it reaches the root element, a.k.a. the `window`. So in our table example, whenever a `td` is clicked, its parent `tr` would also be notified of the click, the parent `table` would be notified, the `body` would be notified, and ultimately the `window` would be notified as well. While event bubbling and delegation work well, the delegating element (in our example, the `table`) should always be as close to the delegatees as possible so the event doesn't have to travel way up the DOM tree before its handler function is called. The two main pros of event delegation over binding directly to an element (or set of elements) are performance and the aforementioned event bubbling. Imagine having a large table of 1,000 cells and binding to an event for each cell. That's 1,000 separate event handlers that the browser has to attach, even if they're all mapped to the same function. Instead of binding to each individual cell though, we could instead use delegation to listen for events that occur on the parent table and react accordingly. One event would be bound instead of 1,000, resulting in way better performance and memory management. From b4c8f2e4464ff7cfe72f1f3fecbf780d5a95e72a Mon Sep 17 00:00:00 2001 From: Aurelio De Rosa Date: Sun, 6 Jul 2014 13:12:10 +0100 Subject: [PATCH 099/247] Update advanced-plugin-concepts.md Comment should be above the code for consistence with other pages. --- page/plugins/advanced-plugin-concepts.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/page/plugins/advanced-plugin-concepts.md b/page/plugins/advanced-plugin-concepts.md index 50129fee..0574a346 100644 --- a/page/plugins/advanced-plugin-concepts.md +++ b/page/plugins/advanced-plugin-concepts.md @@ -249,7 +249,8 @@ var wrapper = $( "
    " ) .attr( settings.wrapperAttrs ) .appendTo( settings.container ); -wrapper.append( "..." ); // Easy to reference later... +// Easy to reference later... +wrapper.append( "..." ); ``` Notice that we've created a reference to the injected wrapper and we're also calling the `.attr()` method to add any specified attributes to the element. So, in our settings it might be handled like this: From 9b3f7593cb09114b80654c29dadaa9ec81c2cd05 Mon Sep 17 00:00:00 2001 From: Anne-Gaelle Colom Date: Mon, 22 Dec 2014 10:36:38 +0000 Subject: [PATCH 100/247] 0.4.4 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index cd35799f..329a47dc 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "learn.jquery.com", "title": "jQuery Learning Site", "description": "jQuery Foundation site for learning jQuery and JavaScript", - "version": "0.4.3", + "version": "0.4.4", "homepage": "http://learn.jquery.com", "author": { "name": "jQuery Foundation and other contributors" From b84e731e068b159ceacaf5eb3a49960bd0abb079 Mon Sep 17 00:00:00 2001 From: Tim Rottmann Date: Fri, 4 Jul 2014 12:36:23 +0200 Subject: [PATCH 101/247] Advanced Plugins Concepts: Fix context meaning `this` in the `showNextImage` function is a reference to `nextButton` and not as stated to the image node Closes gh-525 Fixes gh-514 --- page/plugins/advanced-plugin-concepts.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/page/plugins/advanced-plugin-concepts.md b/page/plugins/advanced-plugin-concepts.md index 0574a346..d193b56e 100644 --- a/page/plugins/advanced-plugin-concepts.md +++ b/page/plugins/advanced-plugin-concepts.md @@ -312,14 +312,17 @@ nextButton.on( "click", showNextImage ); function showNextImage() { + // Returns reference to the next image node + var image = getNextImage(); + // Stuff to show the image here... // Here's the callback: - settings.onImageShow.call( this ); + settings.onImageShow.call( image ); } ``` -Instead of initiating the callback via traditional means (adding parenthesis) we're calling it in the context of `this` which will be a reference to the image node. This means that you have access to the actual image node through the `this` keyword within the callback: +Instead of initiating the callback via traditional means (adding parenthesis) we're calling it in the context of `image` which will be a reference to the image node. This means that you have access to the actual image node through the `this` keyword within the callback: ``` $( "ul.imgs li" ).superGallery({ From 59e510583cd3033bcbb6c05ea37fd0a930321d3a Mon Sep 17 00:00:00 2001 From: Hugh Prior Date: Thu, 10 Jul 2014 15:47:43 +0200 Subject: [PATCH 102/247] Intro to Events: expand MDN MDN is not a well known abbreviation, and therefore in this context should be expanded (at least the first time it is used). Closes gh-531 --- page/events/introduction-to-events.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/page/events/introduction-to-events.md b/page/events/introduction-to-events.md index 1135eed3..25ba1b24 100644 --- a/page/events/introduction-to-events.md +++ b/page/events/introduction-to-events.md @@ -12,7 +12,7 @@ Web pages are all about interaction. Users perform a countless number of actions ## What's a DOM event? -As mentioned, there are a myriad of event types, but perhaps the ones that are easiest to understand are user events, like when someone clicks on an element or types into a form. These types of events occur on an element, meaning that when a user clicks on a button for example, the button has had an event occur on it. While user interactions aren't the only types of DOM events, they're certainly the easiest to understand when starting out. MDN has a good reference of [available DOM events](https://developer.mozilla.org/en/DOM/DOM_event_reference). +As mentioned, there are a myriad of event types, but perhaps the ones that are easiest to understand are user events, like when someone clicks on an element or types into a form. These types of events occur on an element, meaning that when a user clicks on a button for example, the button has had an event occur on it. While user interactions aren't the only types of DOM events, they're certainly the easiest to understand when starting out. Mozilla Developer Network has a good reference of [available DOM events](https://developer.mozilla.org/en/DOM/DOM_event_reference). ## Ways to listen for events From 9ec218b074451880e5fdee8bb811d53895e6792f Mon Sep 17 00:00:00 2001 From: Arthur Verschaeve Date: Mon, 8 Dec 2014 20:14:24 +0100 Subject: [PATCH 103/247] Understanding Index: Add note on <1.9 bug Talk about why we use `.first()` in the examples. Closes gh-582 Fixes gh-276 --- page/using-jquery-core/understanding-index.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/page/using-jquery-core/understanding-index.md b/page/using-jquery-core/understanding-index.md index b4e34a32..beafeb36 100644 --- a/page/using-jquery-core/understanding-index.md +++ b/page/using-jquery-core/understanding-index.md @@ -38,7 +38,8 @@ console.log( "Index: " + div.first().index() ); // 0 In the first example, `.index()` gives the zero-based index of `#foo1` within its parent. Since `#foo1` is the second child of its parent, `index()` returns 1. -When `.index()` is called on a jQuery object that contains more than one element, it calculates the index of the first element. + +__Note__: Before jQuery 1.9, `.index()` only worked reliably on a single element, which is why we've used `.first()` on each of our examples. In jQuery 1.9+ this can be ignored, as the API was updated to define that it operates on the first element only. ## `.index()` with a String Argument From dd6c3bb5e17f739d50db0d030d97abb8dd7f5f5d Mon Sep 17 00:00:00 2001 From: Arthur Verschaeve Date: Sat, 6 Dec 2014 11:38:41 +0100 Subject: [PATCH 104/247] javascript-101/operations: Clarify comment Adding quote around an console.log output clarifies that it's actually a string. In this article this really makes sense. Closes gh-581 Fixes gh-542 --- page/javascript-101/operators.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/page/javascript-101/operators.md b/page/javascript-101/operators.md index e26e5e86..01448827 100644 --- a/page/javascript-101/operators.md +++ b/page/javascript-101/operators.md @@ -43,7 +43,7 @@ In JavaScript, numbers and strings will occasionally behave in unexpected ways. var foo = 1; var bar = "2"; -console.log( foo + bar ); // 12 +console.log( foo + bar ); // "12" ``` ``` From 6d259b4fb0ba6e28a6b718270da2e2b3de4f2b90 Mon Sep 17 00:00:00 2001 From: "hemanth.hm" Date: Tue, 23 Dec 2014 14:02:06 -0500 Subject: [PATCH 105/247] js101/objects: Iterating properties of an Object. Closes gh-371 --- page/javascript-101/objects.md | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/page/javascript-101/objects.md b/page/javascript-101/objects.md index 17ff1b1e..bb9d1dd3 100644 --- a/page/javascript-101/objects.md +++ b/page/javascript-101/objects.md @@ -33,3 +33,26 @@ var myObject = { 99999: 789 }; ``` +## Iterating Over the Enumerable Properties of an Object: + +``` +var myObject = { + validIdentifier: 123, + "some string": 456, + 99999: 789 +}; + +for ( var prop in myObject ) { + // Determine if the property is on the object itself. + // (not on the prototype) + if ( myObject.hasOwnProperty( prop ) ) { + console.log( "Property : " + prop + " ; value : " + myObject[ prop ] ); + } +} + +// Would log the following: +// Please that the order is not guaranteed and may differ. + +// Property : 99999 ; value : 789 +// Property : validIdentifier ; value : 123 +// Property : some string ; value : 456 From 8b33232b46db2424fcf02b1d00cd205c30777e96 Mon Sep 17 00:00:00 2001 From: Arthur Verschaeve Date: Fri, 5 Dec 2014 19:57:05 +0100 Subject: [PATCH 106/247] Code Organization Concepts: Fix syntax error Closes gh-576 Fixes gh-544 --- page/code-organization/concepts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/page/code-organization/concepts.md b/page/code-organization/concepts.md index ab18fb7c..10de3d46 100644 --- a/page/code-organization/concepts.md +++ b/page/code-organization/concepts.md @@ -111,7 +111,7 @@ var myFeature = { }, showItem: function() { - var myFeature.currentItem = $( this ); + myFeature.currentItem = $( this ); myFeature.getContent( myFeature.showContent ); }, From 483e23749afb5b953dc05f431fde0911fac7c8ca Mon Sep 17 00:00:00 2001 From: Arthur Verschaeve Date: Fri, 5 Dec 2014 20:19:44 +0100 Subject: [PATCH 107/247] javascript-101/functions.md: fix wrong comment Closes gh-578 Fixes gh-415 --- page/javascript-101/functions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/page/javascript-101/functions.md b/page/javascript-101/functions.md index 0e6884da..1740ebf3 100644 --- a/page/javascript-101/functions.md +++ b/page/javascript-101/functions.md @@ -18,7 +18,7 @@ function foo() { ``` ``` -// Named function expression. +// Function expression. var foo = function() { // Do something. From ae976c7712903270fc05b5c1e368bd66476fd9a6 Mon Sep 17 00:00:00 2001 From: Bradley Wogsland Date: Wed, 30 Jul 2014 11:36:20 -0500 Subject: [PATCH 108/247] events/event-basics.md: inserted missing semicolon into example code Closes gh-541 --- page/events/event-basics.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/page/events/event-basics.md b/page/events/event-basics.md index bc35e5ab..c6d173d7 100644 --- a/page/events/event-basics.md +++ b/page/events/event-basics.md @@ -127,7 +127,7 @@ Quite often elements in your application will be bound to multiple events. If mu $( "input" ).on( "click change", // Bind handlers for multiple events function() { - console.log( "An input was clicked or changed!" ) + console.log( "An input was clicked or changed!" ); } ); ``` From c6f3c29a5a5fbbf584194b6fab17e3089b411d64 Mon Sep 17 00:00:00 2001 From: Arthur Verschaeve Date: Wed, 24 Dec 2014 08:29:25 +0100 Subject: [PATCH 109/247] events/basics: fix create button DOM element example Closes gh-587 --- page/events/event-basics.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/page/events/event-basics.md b/page/events/event-basics.md index c6d173d7..e0007c8c 100644 --- a/page/events/event-basics.md +++ b/page/events/event-basics.md @@ -42,7 +42,7 @@ $( document ).ready(function(){ // Now create a new button element with the alert class. This button // was created after the click listeners were applied above, so it // will not have the same click behavior as its peers - $( "button" ).addClass( "alert" ).appendTo( document.body ); + $( "" ).appendTo( document.body ); }); ``` From 26b34b10f821b60fa24cf6eb1877ea83a8cf105f Mon Sep 17 00:00:00 2001 From: Bohdan Mel'nyk Date: Fri, 17 Oct 2014 20:51:08 +0300 Subject: [PATCH 110/247] using-jquery-core/selecting-elements.md: ensured consistent teg representation in content. Closes gh-564 Formatted ` elements (for `