From cb2c81b5816f112368c34090f4214bf613c1b881 Mon Sep 17 00:00:00 2001 From: Thomas Tortorini Date: Wed, 16 Mar 2016 19:30:39 +0100 Subject: [PATCH 01/39] optimize-selectors qSA before Sizzle --- page/performance/optimize-selectors.md | 29 +++++++++++++++++--------- 1 file changed, 19 insertions(+), 10 deletions(-) diff --git a/page/performance/optimize-selectors.md b/page/performance/optimize-selectors.md index 44f3b8e6..fa923974 100644 --- a/page/performance/optimize-selectors.md +++ b/page/performance/optimize-selectors.md @@ -21,6 +21,18 @@ $( "#my-table tr:nth-child(odd)" ); Keep in mind that many jQuery extensions, including `:even` in the above example, do not have exact equivalents in the CSS specification. In some situations the convenience of these extensions could outweigh their performance cost. +## Try to segregate the nonstandard parts of your selection + +When you select elements, jQuery will call `querySelectorAll` with your selection. If `querySelectorAll` throws an error, jQuery will refer to its Sizzle engine. So, if you are using at least one of the nonstandard pseudo-classes such as `:contains()`, `:has`, `:even`, `:submit`, etc. You will not take advantage of the native `querySelectorAll`. + +``` +// A long selection with nonstandard pseudo-classes inside +$( "#global.ready .part .list li a:contains('qwerty'):first" ); + +// A long standard selection with a filter outside (faster): +$( "#global.ready .part .list li a").filter( ":contains('qwerty'):first" ); +``` + ## Avoid Excessive Specificity ``` @@ -32,16 +44,15 @@ $( ".data td.gonzalez" ); A "flatter" DOM also helps improve selector performance, as the selector engine has fewer layers to traverse when looking for an element. -## ID-Based Selectors - -Beginning your selector with an ID is a safe bet. +## Save calls to `querySelectorAll` ``` -// Fast: -$( "#container div.robotarm" ); +// If in your HTML there are 2 .container with 5 div in each, +// this line will call querySelectorAll 13 times (1 + 2 + 2*5). +$( ".container" ).children( "div" ).find( ".robotarm" ); -// Super-fast: -$( "#container" ).find( "div.robotarm" ); +// Against only 1 call with this: +$( ".container div .robotarm" ); ``` With the first approach, jQuery queries the DOM using `document.querySelectorAll()`. With the second, jQuery uses `document.getElementById()`, which is faster, although the speed improvement may be diminished by the subsequent call to `.find()`. @@ -51,6 +62,7 @@ With the first approach, jQuery queries the DOM using `document.querySelectorAll When support for older browsers, such as Internet Explorer 8 and below, is necessary, consider the following tips: ### Specificity + Be specific on the right-hand side of your selector, and less specific on the left. ``` @@ -68,9 +80,6 @@ Use `tag.class` if possible on your right-most selector, and just tag or just `. Selections that specify or imply that a match could be found anywhere can be very slow. ``` -$( ".buttons > *" ); // Extremely expensive. -$( ".buttons" ).children(); // Much better. - $( ":radio" ); // Implied universal selection. $( "*:radio" ); // Same thing, explicit now. $( "input:radio" ); // Much better. From c895d3f2709e7e0faab7e186bcba9fe4426fbe27 Mon Sep 17 00:00:00 2001 From: Thomas Tortorini Date: Thu, 17 Mar 2016 16:56:13 +0100 Subject: [PATCH 02/39] remove another old sentence --- page/performance/optimize-selectors.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/page/performance/optimize-selectors.md b/page/performance/optimize-selectors.md index fa923974..c90aa987 100644 --- a/page/performance/optimize-selectors.md +++ b/page/performance/optimize-selectors.md @@ -55,8 +55,6 @@ $( ".container" ).children( "div" ).find( ".robotarm" ); $( ".container div .robotarm" ); ``` -With the first approach, jQuery queries the DOM using `document.querySelectorAll()`. With the second, jQuery uses `document.getElementById()`, which is faster, although the speed improvement may be diminished by the subsequent call to `.find()`. - ## Tips for Older Browsers When support for older browsers, such as Internet Explorer 8 and below, is necessary, consider the following tips: From 1216af95067d410372ea1ee2e2d648b6b4436da9 Mon Sep 17 00:00:00 2001 From: Thomas Tortorini Date: Sat, 19 Mar 2016 15:41:05 +0100 Subject: [PATCH 03/39] A small introduction for + remove a semi colon --- page/performance/optimize-selectors.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/page/performance/optimize-selectors.md b/page/performance/optimize-selectors.md index c90aa987..45304b9e 100644 --- a/page/performance/optimize-selectors.md +++ b/page/performance/optimize-selectors.md @@ -29,7 +29,7 @@ When you select elements, jQuery will call `querySelectorAll` with your selectio // A long selection with nonstandard pseudo-classes inside $( "#global.ready .part .list li a:contains('qwerty'):first" ); -// A long standard selection with a filter outside (faster): +// A long standard selection with a filter outside (faster) $( "#global.ready .part .list li a").filter( ":contains('qwerty'):first" ); ``` @@ -46,6 +46,8 @@ A "flatter" DOM also helps improve selector performance, as the selector engine ## Save calls to `querySelectorAll` +`querySelectorAll` is already really fast, if you want maintain this speed try to call it the least possible. + ``` // If in your HTML there are 2 .container with 5 div in each, // this line will call querySelectorAll 13 times (1 + 2 + 2*5). From c22de98667b5819e49aaa75c9fc4dae28218dbf0 Mon Sep 17 00:00:00 2001 From: TJ VanToll Date: Sun, 30 Nov 2014 11:33:45 -0500 Subject: [PATCH 04/39] =?UTF-8?q?jQuery=20UI:=20Article=20on=20the=20class?= =?UTF-8?q?es=20option=20=E2=80=94=20new=20to=20jQuery=20UI=201.12?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Closes gh-727 Closes gh-574 --- order.json | 3 +- .../widget-factory/classes-option.md | 87 +++++++++++++++++++ 2 files changed, 89 insertions(+), 1 deletion(-) create mode 100644 page/jquery-ui/widget-factory/classes-option.md diff --git a/order.json b/order.json index ee998761..38e12a24 100644 --- a/order.json +++ b/order.json @@ -116,7 +116,8 @@ "why-use-the-widget-factory", "how-to-use-the-widget-factory", "widget-method-invocation", - "extending-widgets" + "extending-widgets", + "classes-option" ] }, { diff --git a/page/jquery-ui/widget-factory/classes-option.md b/page/jquery-ui/widget-factory/classes-option.md new file mode 100644 index 00000000..f5504f47 --- /dev/null +++ b/page/jquery-ui/widget-factory/classes-option.md @@ -0,0 +1,87 @@ + + +As of the 1.12 release, the jQuery UI widget factory includes a means of managing CSS class names through the [`classes` option](http://api.jqueryui.com/jquery.widget/#option-classes). This article will give you an overview of how the `classes` option works, and discuss what you can do with it. + +## Syntax overview + +The `classes` option is used to map structural class names to theme-related class names that you define. To see what this means let's look at an example. The code below uses the `classes` option to create a red dialog: + +``` + + +``` + +Here, the presentational `custom-red` class name is associated with the structural `ui-dialog` class name. Now, whenever the dialog applies the `ui-dialog` class name, it will also add a `custom-red` class name. However, something other than adding the `custom-red` class has happened here, which isn't immediately obvious. This code also *removes* the existing default value which was `"ui-corner-all"`. You can associate multiple class names by including multiple space-delimited class names in the object's value. For instance the following code creates a dialog that is red and still has rounded corners: + +``` + + +``` + +*Note: To get a full list of the class names you can use with the `classes` option, check the API documentation for the jQuery UI widget you're interested in. For example, here's the list of classes for the dialog width: .* + +The `classes` option works like any other widget factory option, which means all the widget factory option mechanisms still apply. For instance, the following code uses the [`option()` method](http://api.jqueryui.com/jquery.widget/#method-option) to remove all class names currently associated with the `ui-dialog` class name: + +``` +dialog.dialog( "option", "classes.ui-dialog", null ); +``` + +And the following creates a [widget extension](http://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/) that automatically associates the `custom-red` class with the `ui-dialog` class: + +``` + + +``` + +As an added benefit, the widget factory also removes any class names specified in the `classes` option when the widget is destroyed. + +## Theming + +As the previous examples show, the `classes` option provides a quick way to associate theme-related class names with the structural class names used within a widget. This approach works for simple cases, but it can also be used to adapt third-party themes to work with widget-factory-built widgets. For example, if you're using [Bootstrap](http://getbootstrap.com/) and jQuery UI together, you can use the following code to create a jQuery UI dialog that uses Bootstrap's theming: + +``` +$.extend( $.ui.dialog.prototype.options.classes, { + "ui-dialog": "modal-content", + "ui-dialog-titlebar": "modal-header", + "ui-dialog-title": "modal-title", + "ui-dialog-titlebar-close": "close", + "ui-dialog-content": "modal-body", + "ui-dialog-buttonpane": "modal-footer" +}); +``` + +For more examples of this approach, check out [Alexander Schmitz's repo](https://github.com/arschmitz/jqueryui-bootstrap-adapter) that adapts jQuery UI to work with Boostrap using the `classes` option. + +## Conclusion + +The introduction of the `classes` option takes us one step further in the split between structural and theme-related classes, making it easier than ever to make jQuery UI widgets match the look and feel of your existing site. At the same time, this allows jQuery UI to be used alongside other CSS frameworks, just like jQuery can be used alongside other JavaScript frameworks. From 08e3a1364ab14ec87ccd61896b0f59840c850ae2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Thu, 15 Sep 2016 10:30:47 -0400 Subject: [PATCH 05/39] 0.6.23 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 5996c5d8..93b7b8b7 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.6.22", + "version": "0.6.23", "homepage": "http://learn.jquery.com", "author": { "name": "jQuery Foundation and other contributors" From 3ed1f8e5f8de85fe55230507046616e3e9ab2ebb Mon Sep 17 00:00:00 2001 From: Kris Borchers Date: Mon, 10 Oct 2016 15:04:59 -0500 Subject: [PATCH 06/39] 0.6.24 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 93b7b8b7..4dd4af5b 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.6.23", + "version": "0.6.24", "homepage": "http://learn.jquery.com", "author": { "name": "jQuery Foundation and other contributors" From a027005501391797d592e274eb4dce239813b3f8 Mon Sep 17 00:00:00 2001 From: Brian Salomaki Date: Tue, 29 Nov 2016 22:00:45 -0600 Subject: [PATCH 07/39] Replace $(window).load with $(window).on( "load" ) Closes gh-736 --- page/using-jquery-core/document-ready.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/page/using-jquery-core/document-ready.md b/page/using-jquery-core/document-ready.md index da379ebe..90a98ea8 100644 --- a/page/using-jquery-core/document-ready.md +++ b/page/using-jquery-core/document-ready.md @@ -3,7 +3,7 @@ "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. +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 ).on( "load", function() { ... })` will run once the entire page (images or iframes), not just the DOM, is ready. ``` // A $( document ).ready() block. @@ -32,10 +32,10 @@ function readyFn( jQuery ) { $( document ).ready( readyFn ); // or: -$( window ).load( readyFn ); +$( window ).on( "load", readyFn ); ``` -The example below shows `$( document ).ready()` and `$( window ).load()` in action. The code tries to load a website URL in an `