From 10cf092c95163e0967b8098489f88ad58358814d Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Wed, 28 Oct 2015 14:22:20 -0400 Subject: [PATCH 001/135] =?UTF-8?q?Added=20Ajax=20call=20error=20handling?= =?UTF-8?q?=20=F0=9F=99=8C=F0=9F=8F=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 13 ++++++++++++- js/ajax-call-error-handling/snippet.js | 4 ++++ 2 files changed, 16 insertions(+), 1 deletion(-) create mode 100644 js/ajax-call-error-handling/snippet.js diff --git a/README.md b/README.md index 8d5c761..f669b30 100644 --- a/README.md +++ b/README.md @@ -15,6 +15,7 @@ A collection of simple tips to help up your jQuery game. 1. [Open External Links in New Tab/Window](#open-external-links-in-new-tabwindow) 1. [Find Element By Text](#find-element-by-text) 1. [Trigger on Visibility Change](#trigger-on-visibility-change) +1. [Ajax Call Error Handling](#ajax-call-error-handling) ### Back to Top Button @@ -229,4 +230,14 @@ $(document).on('visibilitychange', function (e) { console.log('Tab is now hidden!'); } }); -``` \ No newline at end of file +``` + + +### Ajax Call Error Handling + +When an Ajax call returns a 404 or 500 error the error handler will be executed. If the handler isn't defined, other jQuery code might not work anymore. Define a global Ajax error handler: + +```javascript +$(document).ajaxError(function (e, xhr, settings, error) { + console.log(error); +}); \ No newline at end of file diff --git a/js/ajax-call-error-handling/snippet.js b/js/ajax-call-error-handling/snippet.js new file mode 100644 index 0000000..dc05851 --- /dev/null +++ b/js/ajax-call-error-handling/snippet.js @@ -0,0 +1,4 @@ +// Ajax call error handling +$(document).ajaxError(function (e, xhr, settings, error) { + console.log(error); +}); \ No newline at end of file From 12fb4be8d9c64ed39f4b0592b80906fc02aa4d37 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Thu, 29 Oct 2015 20:18:33 -0400 Subject: [PATCH 002/135] =?UTF-8?q?Added=20chaining=20tip=20=F0=9F=9A=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 35 +++++++++++++++++++++++++++++++- js/chain-plugin-calls/snippet.js | 11 ++++++++++ 2 files changed, 45 insertions(+), 1 deletion(-) create mode 100644 js/chain-plugin-calls/snippet.js diff --git a/README.md b/README.md index f669b30..958c4fb 100644 --- a/README.md +++ b/README.md @@ -16,6 +16,7 @@ A collection of simple tips to help up your jQuery game. 1. [Find Element By Text](#find-element-by-text) 1. [Trigger on Visibility Change](#trigger-on-visibility-change) 1. [Ajax Call Error Handling](#ajax-call-error-handling) +1. [Chain Plugin Calls](#chain-plugin-calls) ### Back to Top Button @@ -240,4 +241,36 @@ When an Ajax call returns a 404 or 500 error the error handler will be executed. ```javascript $(document).ajaxError(function (e, xhr, settings, error) { console.log(error); -}); \ No newline at end of file +}); +``` + + +### Chain Plugin Calls + +jQuery allows for the "chaining" of plugin method calls to mitigate the process of repeatedly querying the DOM and creating multiple jQuery objects. Let's say the following snippet represents your plugin method calls: + +```javascript +$('#elem').show(); +$('#elem').html('bla'); +$('#elem').otherStuff(); +``` + +This could be vastly improved by using chaining: + +```javascript +$('#elem') + .show() + .html('bla') + .otherStuff(); +``` + +An alternative is to cache the element in a variable (prefixed with `$`): + +```javascript +var $elem = $('#elem'); +$elem.hide(); +$elem.html('bla'); +$elem.otherStuff(); +``` + +Both chaining and caching methods in jQuery are best practices that lead to shorter and faster code. \ No newline at end of file diff --git a/js/chain-plugin-calls/snippet.js b/js/chain-plugin-calls/snippet.js new file mode 100644 index 0000000..e0fe7c4 --- /dev/null +++ b/js/chain-plugin-calls/snippet.js @@ -0,0 +1,11 @@ +// Chain plugin calls +$('#elem') + .show() + .html('bla') + .otherStuff(); + +// Cache element in a variable +var $elem = $('#elem'); +$elem.hide(); +$elem.html('bla'); +$elem.otherStuff(); \ No newline at end of file From a137ebcb3e0b700ee83d7a76dfa2427d10c11169 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Wed, 4 Nov 2015 21:48:17 -0500 Subject: [PATCH 003/135] =?UTF-8?q?Updated=20tip=20=F0=9F=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 4 +++- js/fix-broken-images-automatically/snippet.js | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 958c4fb..dcd06ed 100644 --- a/README.md +++ b/README.md @@ -73,7 +73,9 @@ If you happen to find broken image links on your site replacing them one by one ```javascript $('img').on('error', function () { - $(this).prop('src', 'img/broken.png'); + if(!$(this).hasClass('broken-image')) { + $(this).prop('src', 'img/broken.png').addClass('broken-image'); + } }); ``` diff --git a/js/fix-broken-images-automatically/snippet.js b/js/fix-broken-images-automatically/snippet.js index c44b0e1..900c810 100644 --- a/js/fix-broken-images-automatically/snippet.js +++ b/js/fix-broken-images-automatically/snippet.js @@ -1,4 +1,6 @@ // Fix broken images automatically $('img').on('error', function () { - $(this).prop('src', 'img/broken.png'); + if(!$(this).hasClass('broken-image')) { + $(this).prop('src', 'img/broken.png').addClass('broken-image'); + } }); \ No newline at end of file From bbec1d5a4fb0cb1ad59c6e15160e0fb5574daf49 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Mon, 9 Nov 2015 20:45:14 -0500 Subject: [PATCH 004/135] =?UTF-8?q?Revised=20tip,=20added=20note=20RE=20`s?= =?UTF-8?q?crollTop`=20bug=20=F0=9F=90=9E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 6 ++++-- js/back-to-top-button/snippet.js | 2 +- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index dcd06ed..6709f68 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,7 @@ By using the `animate` and `scrollTop` methods in jQuery you don't need a plugin // Back to top $('a.top').click(function (e) { e.preventDefault(); - $(document.body).animate({scrollTop: 0}, 800); + $('html, body').animate({scrollTop: 0}, 800); }); ``` @@ -38,6 +38,8 @@ $('a.top').click(function (e) { Changing the `scrollTop` value changes where you wants the scrollbar to land. All you're really doing is animating the body of the document throughout the course of 800 milliseconds until it scrolls to the top of the document. +**Note:** Watch for some [buggy behavior](https://github.com/jquery/api.jquery.com/issues/417) with `scrollTop`. + ### Preload Images @@ -102,7 +104,7 @@ $('.btn').hover(function () { }); ``` -**Note**: CSS may be a faster solution in this case but it's still worthwhile to know this. +**Note:** CSS may be a faster solution in this case but it's still worthwhile to know this. ### Disabling Input Fields diff --git a/js/back-to-top-button/snippet.js b/js/back-to-top-button/snippet.js index 6f139b9..78a46c6 100644 --- a/js/back-to-top-button/snippet.js +++ b/js/back-to-top-button/snippet.js @@ -1,5 +1,5 @@ // Back to top button $('a.top').click(function (e) { e.preventDefault(); - $(document.body).animate({scrollTop: 0}, 800); + $('html, body').animate({scrollTop: 0}, 800); }); \ No newline at end of file From 6398fd8d7dc55b7cf068ec1329fb263676063f89 Mon Sep 17 00:00:00 2001 From: Colin O'Dell Date: Fri, 13 Nov 2015 17:20:51 -0500 Subject: [PATCH 005/135] Fix over-qualified selector --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 6709f68..7a9ef06 100644 --- a/README.md +++ b/README.md @@ -25,7 +25,7 @@ By using the `animate` and `scrollTop` methods in jQuery you don't need a plugin ```javascript // Back to top -$('a.top').click(function (e) { +$('.top').click(function (e) { e.preventDefault(); $('html, body').animate({scrollTop: 0}, 800); }); @@ -277,4 +277,4 @@ $elem.html('bla'); $elem.otherStuff(); ``` -Both chaining and caching methods in jQuery are best practices that lead to shorter and faster code. \ No newline at end of file +Both chaining and caching methods in jQuery are best practices that lead to shorter and faster code. From a1294f7114c7bde1fd87c010f13fbd734ce5fad0 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Fri, 13 Nov 2015 18:40:51 -0500 Subject: [PATCH 006/135] =?UTF-8?q?Fix=20over-qualified=20selector=20?= =?UTF-8?q?=F0=9F=91=8D=F0=9F=8F=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/back-to-top-button/snippet.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/back-to-top-button/snippet.js b/js/back-to-top-button/snippet.js index 78a46c6..1329e03 100644 --- a/js/back-to-top-button/snippet.js +++ b/js/back-to-top-button/snippet.js @@ -1,5 +1,5 @@ // Back to top button -$('a.top').click(function (e) { +$('.top').click(function (e) { e.preventDefault(); $('html, body').animate({scrollTop: 0}, 800); }); \ No newline at end of file From d17d50b22cfe779018e3a713e1b7066ffe123942 Mon Sep 17 00:00:00 2001 From: mattjared Date: Fri, 20 Nov 2015 22:08:09 -0600 Subject: [PATCH 007/135] Adding new tip --- README.md | 15 +++++++++++++++ js/checking-if-jquery-loaded/snippet.js | 8 ++++++++ 2 files changed, 23 insertions(+) create mode 100644 js/checking-if-jquery-loaded/snippet.js diff --git a/README.md b/README.md index 7a9ef06..72952a6 100644 --- a/README.md +++ b/README.md @@ -17,6 +17,7 @@ A collection of simple tips to help up your jQuery game. 1. [Trigger on Visibility Change](#trigger-on-visibility-change) 1. [Ajax Call Error Handling](#ajax-call-error-handling) 1. [Chain Plugin Calls](#chain-plugin-calls) +1. [Checking If jQuery Loaded](#check-if-loaded) ### Back to Top Button @@ -278,3 +279,17 @@ $elem.otherStuff(); ``` Both chaining and caching methods in jQuery are best practices that lead to shorter and faster code. + +### Checking If jQuery Loaded + +Sometimes when starting up a project it's easy to skip through adding the necessary files. Also, when learning it's easy to write a line of jQuery and not know if your code is bad or if jQuery isn't loaded at all. Furthermore, if your CDN-ing to a jQuery verion it might be nice to know your internet connection works and the CDN file is live: + +```javascript +if (typeof jQuery == undefined) { + // jQuery isn't here + // Enter helpful alert() or console.log() message here +} +else { + // jQuery is here +} +``` \ No newline at end of file diff --git a/js/checking-if-jquery-loaded/snippet.js b/js/checking-if-jquery-loaded/snippet.js new file mode 100644 index 0000000..2c8380f --- /dev/null +++ b/js/checking-if-jquery-loaded/snippet.js @@ -0,0 +1,8 @@ +// Checking If jQuery Loaded +if (typeof jQuery == undefined) { + // jQuery isn't here + // Enter helpful alert() or console.log() message here +} +else { + // jQuery is here +} \ No newline at end of file From 1eb990e6bfe599d92749635d29b4a8536a168ffc Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Sat, 21 Nov 2015 08:50:36 -0500 Subject: [PATCH 008/135] =?UTF-8?q?Linted=20syntax=20=F0=9F=94=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/check-if-jquery-loaded/snippet.js | 6 ++++++ js/checking-if-jquery-loaded/snippet.js | 8 -------- 2 files changed, 6 insertions(+), 8 deletions(-) create mode 100644 js/check-if-jquery-loaded/snippet.js delete mode 100644 js/checking-if-jquery-loaded/snippet.js diff --git a/js/check-if-jquery-loaded/snippet.js b/js/check-if-jquery-loaded/snippet.js new file mode 100644 index 0000000..b256981 --- /dev/null +++ b/js/check-if-jquery-loaded/snippet.js @@ -0,0 +1,6 @@ +// Check If jQuery Loaded +if (typeof jQuery == undefined) { + // jQuery hasn't loaded +} else { + // jQuery has loaded +} \ No newline at end of file diff --git a/js/checking-if-jquery-loaded/snippet.js b/js/checking-if-jquery-loaded/snippet.js deleted file mode 100644 index 2c8380f..0000000 --- a/js/checking-if-jquery-loaded/snippet.js +++ /dev/null @@ -1,8 +0,0 @@ -// Checking If jQuery Loaded -if (typeof jQuery == undefined) { - // jQuery isn't here - // Enter helpful alert() or console.log() message here -} -else { - // jQuery is here -} \ No newline at end of file From acc24806c7bcc81dc02adabe2fe7181ac4e2b4de Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Sat, 21 Nov 2015 08:51:19 -0500 Subject: [PATCH 009/135] =?UTF-8?q?Edited=20tip=20=F0=9F=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 31 +++++++++++++++---------------- 1 file changed, 15 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 72952a6..42b79eb 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,7 @@ A collection of simple tips to help up your jQuery game. +1. [Check If jQuery Loaded](#check-if-jquery-loaded) 1. [Back to Top Button](#back-to-top-button) 1. [Preload Images](#preload-images) 1. [Checking If Images Are Loaded](#checking-if-images-are-loaded) @@ -17,7 +18,19 @@ A collection of simple tips to help up your jQuery game. 1. [Trigger on Visibility Change](#trigger-on-visibility-change) 1. [Ajax Call Error Handling](#ajax-call-error-handling) 1. [Chain Plugin Calls](#chain-plugin-calls) -1. [Checking If jQuery Loaded](#check-if-loaded) + + +### Check If jQuery Loaded + +Before you can do anything with jQuery you first need to make certain it has loaded: + +```javascript +if (typeof jQuery == undefined) { + // jQuery hasn't loaded +} else { + // jQuery has loaded +} +``` ### Back to Top Button @@ -278,18 +291,4 @@ $elem.html('bla'); $elem.otherStuff(); ``` -Both chaining and caching methods in jQuery are best practices that lead to shorter and faster code. - -### Checking If jQuery Loaded - -Sometimes when starting up a project it's easy to skip through adding the necessary files. Also, when learning it's easy to write a line of jQuery and not know if your code is bad or if jQuery isn't loaded at all. Furthermore, if your CDN-ing to a jQuery verion it might be nice to know your internet connection works and the CDN file is live: - -```javascript -if (typeof jQuery == undefined) { - // jQuery isn't here - // Enter helpful alert() or console.log() message here -} -else { - // jQuery is here -} -``` \ No newline at end of file +Both chaining and caching methods in jQuery are best practices that lead to shorter and faster code. \ No newline at end of file From c5d6bf62d780c71c84801a270c5b66cf75561b58 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Sat, 21 Nov 2015 09:51:26 -0500 Subject: [PATCH 010/135] =?UTF-8?q?Linting=20=F0=9F=94=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../snippet.js | 0 js/trigger-on-visibility-change/snippet.js | 4 ++-- 2 files changed, 2 insertions(+), 2 deletions(-) rename js/{check-if-jquery-loaded => checking-if-jquery-loaded}/snippet.js (100%) diff --git a/js/check-if-jquery-loaded/snippet.js b/js/checking-if-jquery-loaded/snippet.js similarity index 100% rename from js/check-if-jquery-loaded/snippet.js rename to js/checking-if-jquery-loaded/snippet.js diff --git a/js/trigger-on-visibility-change/snippet.js b/js/trigger-on-visibility-change/snippet.js index c0d8e9b..1ef4e68 100644 --- a/js/trigger-on-visibility-change/snippet.js +++ b/js/trigger-on-visibility-change/snippet.js @@ -1,8 +1,8 @@ // Trigger on visibility change $(document).on('visibilitychange', function (e) { - if (e.target.visibilityState === "visible") { + if (e.target.visibilityState === 'visible') { console.log('Tab is now in view!'); - } else if (e.target.visibilityState === "hidden") { + } else if (e.target.visibilityState === 'hidden') { console.log('Tab is now hidden!'); } }); \ No newline at end of file From 7384e6d3dcf5207cc4c5dc3ac3edbbb62a5ef13d Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Sat, 21 Nov 2015 09:53:28 -0500 Subject: [PATCH 011/135] =?UTF-8?q?Edited=20tip=20title=20=E2=9C=8F?= =?UTF-8?q?=EF=B8=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 42b79eb..08d93d6 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ A collection of simple tips to help up your jQuery game. -1. [Check If jQuery Loaded](#check-if-jquery-loaded) +1. [Checking If jQuery Loaded](#checking-if-jquery-loaded) 1. [Back to Top Button](#back-to-top-button) 1. [Preload Images](#preload-images) 1. [Checking If Images Are Loaded](#checking-if-images-are-loaded) @@ -20,7 +20,7 @@ A collection of simple tips to help up your jQuery game. 1. [Chain Plugin Calls](#chain-plugin-calls) -### Check If jQuery Loaded +### Checking If jQuery Loaded Before you can do anything with jQuery you first need to make certain it has loaded: @@ -243,9 +243,9 @@ Trigger JavaScript when the user is no longer focusing on a tab, or refocuses on ```javascript $(document).on('visibilitychange', function (e) { - if (e.target.visibilityState === "visible") { + if (e.target.visibilityState === 'visible') { console.log('Tab is now in view!'); - } else if (e.target.visibilityState === "hidden") { + } else if (e.target.visibilityState === 'hidden') { console.log('Tab is now hidden!'); } }); From 9633c29f7d1e539434d54235698794d47169992d Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Sat, 21 Nov 2015 22:34:31 -0500 Subject: [PATCH 012/135] Refactored tip for consistency --- README.md | 4 ++-- js/checking-if-jquery-loaded/snippet.js | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 08d93d6..ced3ef3 100644 --- a/README.md +++ b/README.md @@ -26,9 +26,9 @@ Before you can do anything with jQuery you first need to make certain it has loa ```javascript if (typeof jQuery == undefined) { - // jQuery hasn't loaded + console.log('jQuery hasn\'t loaded'); } else { - // jQuery has loaded + console.log('jQuery has loaded'); } ``` diff --git a/js/checking-if-jquery-loaded/snippet.js b/js/checking-if-jquery-loaded/snippet.js index b256981..ad41654 100644 --- a/js/checking-if-jquery-loaded/snippet.js +++ b/js/checking-if-jquery-loaded/snippet.js @@ -1,6 +1,6 @@ -// Check If jQuery Loaded +// Checking If jQuery Loaded if (typeof jQuery == undefined) { - // jQuery hasn't loaded + console.log('jQuery hasn\'t loaded'); } else { - // jQuery has loaded + console.log('jQuery has loaded'); } \ No newline at end of file From 7ff95f2d092f92782bcfa03726b2f53f6ed55df9 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Thu, 26 Nov 2015 20:09:08 -0500 Subject: [PATCH 013/135] =?UTF-8?q?Updated=20syntax=20requirement=20?= =?UTF-8?q?=F0=9F=A4=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CONTRIBUTING.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index b703561..99a9778 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -6,8 +6,8 @@ Please ensure your pull requests adhere to the following guidelines: * Only submit jQuery tips that you think would be useful to others. This implies each tip has enough succinct content to describe why it's useful. * Add your tip at the bottom of the [README](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/blob/master/README.md) document. Add a link to your tip at the bottom of the table of contents. * Use [title-casing](http://titlecapitalization.com). -* Code formatting should follow standard [JSLint](http://www.jslint.com/) default settings. -* PR's should include a .js snippet file added to the `js` folder. +* Code formatting should follow standard [JSLint](http://www.jslint.com/) default settings, use single quotes, and indent with two spaces. +* PR's should include a snippet .js file added to the `js` folder. * Snippet folders should be named identical to the tip being added in the [README](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/blob/master/README.md) document using the following convention: `make-two-divs-the-same-height`. * Snippets should begin with a comment that matches the name of the tip, e.g., `// Make two divs the same height`. * Make sure your text editor is set to remove trailing whitespace. From d3a19a3bbdba3a95f02849aba3bd6fac2aa21282 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Fri, 27 Nov 2015 09:54:07 -0500 Subject: [PATCH 014/135] =?UTF-8?q?Fixed=20syntax=20=F0=9F=94=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- js/checking-if-jquery-loaded/snippet.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index ced3ef3..e77d62e 100644 --- a/README.md +++ b/README.md @@ -25,7 +25,7 @@ A collection of simple tips to help up your jQuery game. Before you can do anything with jQuery you first need to make certain it has loaded: ```javascript -if (typeof jQuery == undefined) { +if (typeof jQuery == 'undefined') { console.log('jQuery hasn\'t loaded'); } else { console.log('jQuery has loaded'); diff --git a/js/checking-if-jquery-loaded/snippet.js b/js/checking-if-jquery-loaded/snippet.js index ad41654..584d6a5 100644 --- a/js/checking-if-jquery-loaded/snippet.js +++ b/js/checking-if-jquery-loaded/snippet.js @@ -1,5 +1,5 @@ // Checking If jQuery Loaded -if (typeof jQuery == undefined) { +if (typeof jQuery == 'undefined') { console.log('jQuery hasn\'t loaded'); } else { console.log('jQuery has loaded'); From fa58b09f854843b29f28f5f2522ca9b44375e10a Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Sun, 29 Nov 2015 20:12:30 -0500 Subject: [PATCH 015/135] =?UTF-8?q?Added=20selector=20caching=20tip=20?= =?UTF-8?q?=F0=9F=9A=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 26 +++++++++++++++++++++++++- js/cache-jquery-selectors/snippet.js | 10 ++++++++++ 2 files changed, 35 insertions(+), 1 deletion(-) create mode 100644 js/cache-jquery-selectors/snippet.js diff --git a/README.md b/README.md index e77d62e..bb14b5f 100644 --- a/README.md +++ b/README.md @@ -10,6 +10,7 @@ A collection of simple tips to help up your jQuery game. 1. [Toggle Classes on Hover](#toggle-classes-on-hover) 1. [Disabling Input Fields](#disabling-input-fields) 1. [Stop the Loading of Links](#stop-the-loading-of-links) +1. [Cache jQuery Selectors](#cache-jquery-selectors) 1. [Toggle Fade/Slide](#toggle-fadeslide) 1. [Simple Accordion](#simple-accordion) 1. [Make Two Divs the Same Height](#make-two-divs-the-same-height) @@ -147,6 +148,29 @@ $('a.no-link').click(function (e) { ``` +### Cache jQuery Selectors + +Think of how many times you write the same selector over and over again in any project. Every `$('.element')` selector has to search the entire DOM each time, regardless if that selector had previously run. Instead, run the selector once and store the results in a variable: + +```javascript +var blocks = $('#blocks').find('li'); +``` + +Now you can use the `blocks` variable wherever you want without having to search the DOM every time: + +```javascript +$('#hideBlocks').click(function () { + blocks.fadeOut(); +}); + +$('#showBlocks').click(function () { + blocks.fadeIn(); +}); +``` + +Caching jQuery selectors are an easy performance gain. + + ### Toggle Fade/Slide Slideing and fading are something we use plenty in our animations with jQuery. You might just want to show an element when a user clicks something, which makes the `fadeIn` and `slideDown` methods perfect. But if you want that element to appear on the first click and then disappear on the second this will work just fine: @@ -291,4 +315,4 @@ $elem.html('bla'); $elem.otherStuff(); ``` -Both chaining and caching methods in jQuery are best practices that lead to shorter and faster code. \ No newline at end of file +Both chaining and [caching](#cache-jquery-selectors) methods in jQuery are best practices that lead to shorter and faster code. \ No newline at end of file diff --git a/js/cache-jquery-selectors/snippet.js b/js/cache-jquery-selectors/snippet.js new file mode 100644 index 0000000..9e9ac76 --- /dev/null +++ b/js/cache-jquery-selectors/snippet.js @@ -0,0 +1,10 @@ +// Cache jQuery selectors +var blocks = $('#blocks').find('li'); + +$('#hideBlocks').click(function () { + blocks.fadeOut(); +}); + +$('#showBlocks').click(function () { + blocks.fadeIn(); +}); \ No newline at end of file From 1c17272e0fc7b1d772c166705842c8b24190a5d8 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Fri, 1 Jan 2016 11:28:22 -0500 Subject: [PATCH 016/135] Updated (c) 2016 --- LICENSE | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/LICENSE b/LICENSE index 1bcc01b..baaf391 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2015 Matt Smith +Copyright (c) 2016 Matt Smith Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal From 8cac4cd6498d8e5d47cdff7c28ce846bf1d8ce51 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Wed, 6 Jan 2016 20:51:20 -0500 Subject: [PATCH 017/135] Added logo --- media/logo.svg | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 media/logo.svg diff --git a/media/logo.svg b/media/logo.svg new file mode 100644 index 0000000..4a53585 --- /dev/null +++ b/media/logo.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file From 37c4b8662d3fe7c0fd26d171935311cf4e0b03fe Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Fri, 12 Feb 2016 22:28:44 -0500 Subject: [PATCH 018/135] =?UTF-8?q?Minor=20edit=20=E2=9C=8F=EF=B8=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index bb14b5f..ecea509 100644 --- a/README.md +++ b/README.md @@ -173,7 +173,7 @@ Caching jQuery selectors are an easy performance gain. ### Toggle Fade/Slide -Slideing and fading are something we use plenty in our animations with jQuery. You might just want to show an element when a user clicks something, which makes the `fadeIn` and `slideDown` methods perfect. But if you want that element to appear on the first click and then disappear on the second this will work just fine: +Sliding and fading are something we use plenty in our animations with jQuery. You might just want to show an element when a user clicks something, which makes the `fadeIn` and `slideDown` methods perfect. But if you want that element to appear on the first click and then disappear on the second this will work just fine: ```javascript // Fade From 292a669fe37dbc65179c9fd176714cce7129f849 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Sat, 13 Feb 2016 10:10:45 -0500 Subject: [PATCH 019/135] =?UTF-8?q?Added=20list=20sorting=20tip=20?= =?UTF-8?q?=F0=9F=9A=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 22 ++++++++++++++++++- .../sort-list-items-alphabetically.js | 8 +++++++ 2 files changed, 29 insertions(+), 1 deletion(-) create mode 100644 js/sort-list-items-alphabetically/sort-list-items-alphabetically.js diff --git a/README.md b/README.md index ecea509..d9e092a 100644 --- a/README.md +++ b/README.md @@ -19,6 +19,7 @@ A collection of simple tips to help up your jQuery game. 1. [Trigger on Visibility Change](#trigger-on-visibility-change) 1. [Ajax Call Error Handling](#ajax-call-error-handling) 1. [Chain Plugin Calls](#chain-plugin-calls) +1. [Sort List Items Alphabetically](#sort-list-items-alphabetically) ### Checking If jQuery Loaded @@ -33,6 +34,7 @@ if (typeof jQuery == 'undefined') { } ``` +Now you're off... ### Back to Top Button @@ -315,4 +317,22 @@ $elem.html('bla'); $elem.otherStuff(); ``` -Both chaining and [caching](#cache-jquery-selectors) methods in jQuery are best practices that lead to shorter and faster code. \ No newline at end of file +Both chaining and [caching](#cache-jquery-selectors) methods in jQuery are best practices that lead to shorter and faster code. + + +### Sort List Items Alphabetically + +Let's say you end up with too many items in a list. Maybe the content is produced by a CMS and you want to order them alphabetically: + +```javascript +var ul = $('#list'), +lis = $('li', ul).get(); + +lis.sort(function (a, b) { + return ($(a).text().toUpperCase() < $(b).text().toUpperCase()) ? -1 : 1; +}); + +ul.append(lis); +``` + +There you go! \ No newline at end of file diff --git a/js/sort-list-items-alphabetically/sort-list-items-alphabetically.js b/js/sort-list-items-alphabetically/sort-list-items-alphabetically.js new file mode 100644 index 0000000..a9f1bb3 --- /dev/null +++ b/js/sort-list-items-alphabetically/sort-list-items-alphabetically.js @@ -0,0 +1,8 @@ +var ul = $('#list'), + lis = $('li', ul).get(); + +lis.sort(function (a, b) { + return ($(a).text().toUpperCase() < $(b).text().toUpperCase()) ? -1 : 1; +}); + +ul.append(lis); \ No newline at end of file From d2f09910eb8e6127572249234d77ec6046b9517b Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Sat, 20 Feb 2016 09:57:50 -0500 Subject: [PATCH 020/135] =?UTF-8?q?Reformatted=20section=20=F0=9F=8F=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CONTRIBUTING.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 99a9778..12b9028 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -6,7 +6,9 @@ Please ensure your pull requests adhere to the following guidelines: * Only submit jQuery tips that you think would be useful to others. This implies each tip has enough succinct content to describe why it's useful. * Add your tip at the bottom of the [README](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/blob/master/README.md) document. Add a link to your tip at the bottom of the table of contents. * Use [title-casing](http://titlecapitalization.com). -* Code formatting should follow standard [JSLint](http://www.jslint.com/) default settings, use single quotes, and indent with two spaces. +* Code formatting should follow standard [JSLint](http://www.jslint.com/) default settings, including: + * Indent with two spaces + * Use single quotes, e.g., `$.preloadImages('img/hover-on.png');` * PR's should include a snippet .js file added to the `js` folder. * Snippet folders should be named identical to the tip being added in the [README](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/blob/master/README.md) document using the following convention: `make-two-divs-the-same-height`. * Snippets should begin with a comment that matches the name of the tip, e.g., `// Make two divs the same height`. From 2ef632c43f19ff0692ecf02cbe6932d52aa1f0b5 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Mon, 22 Feb 2016 09:53:41 -0500 Subject: [PATCH 021/135] =?UTF-8?q?Added=20code=20of=20conduct=20?= =?UTF-8?q?=F0=9F=91=8D=F0=9F=8F=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CODE-OF-CONDUCT.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 CODE-OF-CONDUCT.md diff --git a/CODE-OF-CONDUCT.md b/CODE-OF-CONDUCT.md new file mode 100644 index 0000000..1dca52b --- /dev/null +++ b/CODE-OF-CONDUCT.md @@ -0,0 +1,24 @@ +# Contributor Code of Conduct + +As contributors and maintainers of this project, and in the interest of fostering an open and welcoming community, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities. + +We are committed to making participation in this project a harassment-free experience for everyone, regardless of level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, ethnicity, age, religion, or nationality. + +Examples of unacceptable behavior by participants include: + +* The use of sexualized language or imagery +* Personal attacks +* Trolling or insulting/derogatory comments +* Public or private harassment +* Publishing other's private information, such as physical or electronic addresses, without explicit permission +* Other unethical or unprofessional conduct + +Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. + +By adopting this Code of Conduct, project maintainers commit themselves to fairly and consistently applying these principles to every aspect of managing this project. Project maintainers who do not follow or enforce the Code of Conduct may be permanently removed from the project team. + +This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. + +Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting a project maintainer at mjsmithme@gmail.com. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. Maintainers are obligated to maintain confidentiality with regard to the reporter of an incident. + +This Code of Conduct is adapted from the [Contributor Covenant](http://contributor-covenant.org), version 1.3.0, available at [http://contributor-covenant.org/version/1/3/0/](http://contributor-covenant.org/version/1/3/0/). \ No newline at end of file From 4b10f6c513b7221bf0e487b3a026626e668a1472 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Mon, 22 Feb 2016 09:54:37 -0500 Subject: [PATCH 022/135] =?UTF-8?q?Expanded=20guidelines=20=E2=9B=B5?= =?UTF-8?q?=EF=B8=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CONTRIBUTING.md | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 12b9028..e28b563 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,6 +1,17 @@ # Contribution Guidelines -Please ensure your pull requests adhere to the following guidelines: +Please note that this project is released with a [Contributor Code of Conduct](CODE-OF-CONDUCT.md). By participating in this project you agree to abide by its terms. + + +## Table of Contents + +- [Adding to This List](#adding-to-this-list) +- [Updating Your Pull Request](#updating-your-pull-request) + + +## Adding to This List + +Please ensure your pull request adheres to the following guidelines: * Search open and closed PR's to avoid duplicate suggestions. * Only submit jQuery tips that you think would be useful to others. This implies each tip has enough succinct content to describe why it's useful. @@ -16,4 +27,9 @@ Please ensure your pull requests adhere to the following guidelines: * Check your spelling and grammar. * The PR should have a useful title. -Thank you for your suggestions! \ No newline at end of file +Thank you for your suggestions! + + +## Updating Your Pull Request + +Sometimes a maintainer will ask you to edit your pull request before it's included. This is normally due to spelling errors or because your PR didn't match the above guidlines guidelines. [This write-up](https://github.com/RichardLitt/docs/blob/master/amending-a-commit-guide.md) covers the different ways you can change a pull request. \ No newline at end of file From 98dae8c1f0fd2763cb0b4006b286d5dd9d779163 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Tue, 23 Feb 2016 07:13:47 -0500 Subject: [PATCH 023/135] =?UTF-8?q?Added=20link=20to=20contribution=20guid?= =?UTF-8?q?elines=20=E2=9B=B7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/README.md b/README.md index d9e092a..cad35b1 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,11 @@ A collection of simple tips to help up your jQuery game. +* [Contribution Guidelines](CONTRIBUTING.md) + +- + + 1. [Checking If jQuery Loaded](#checking-if-jquery-loaded) 1. [Back to Top Button](#back-to-top-button) 1. [Preload Images](#preload-images) From aff62ec0cba4af2a2e34ddd658bd560878285ebd Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Tue, 23 Feb 2016 07:22:06 -0500 Subject: [PATCH 024/135] =?UTF-8?q?Added=20browser=20support=20?= =?UTF-8?q?=F0=9F=8F=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index cad35b1..714a189 100644 --- a/README.md +++ b/README.md @@ -340,4 +340,9 @@ lis.sort(function (a, b) { ul.append(lis); ``` -There you go! \ No newline at end of file +There you go! + + +### Support + +Current versions of Chrome, Firefox, Safari, Opera, Edge, and IE11. From e8ab70921904c707aa6f8e747242ff1fbe9e63b2 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Wed, 24 Feb 2016 10:25:44 -0500 Subject: [PATCH 025/135] =?UTF-8?q?Added=20table=20of=20contents=20?= =?UTF-8?q?=F0=9F=91=B7=F0=9F=8F=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 714a189..40549bd 100644 --- a/README.md +++ b/README.md @@ -2,10 +2,15 @@ A collection of simple tips to help up your jQuery game. + +## Table of Contents + +* [Tips](#tips) +* [Support](#support) * [Contribution Guidelines](CONTRIBUTING.md) -- +## Tips 1. [Checking If jQuery Loaded](#checking-if-jquery-loaded) 1. [Back to Top Button](#back-to-top-button) @@ -343,6 +348,6 @@ ul.append(lis); There you go! -### Support +## Support Current versions of Chrome, Firefox, Safari, Opera, Edge, and IE11. From 696e17f82e71942c69b28199e84658eed114ddd6 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Sun, 28 Feb 2016 09:07:24 -0500 Subject: [PATCH 026/135] =?UTF-8?q?Refactored=20tips=20into=20the=20root?= =?UTF-8?q?=20folder=20=F0=9F=9A=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../snippet.js => ajax-call-error-handling.js} | 0 js/{back-to-top-button/snippet.js => back-to-top.js} | 0 .../snippet.js => cache-jquery-selectors.js} | 0 js/{chain-plugin-calls/snippet.js => chain-plugin-calls.js} | 0 .../snippet.js => checking-if-images-are-loaded.js} | 0 .../snippet.js => checking-if-jquery-loaded.js} | 0 .../snippet.js => disabling-input-fields.js} | 0 js/{find-element-by-text/snippet.js => find-element-by-text.js} | 0 .../snippet.js => fix-broken-images-automatically.js} | 0 .../snippet.js => make-two-divs-the-same-height.js} | 0 .../snippet.js => open-external-links-in-new-tab-window.js} | 0 js/{preload-images/snippet.js => preload-images.js} | 0 js/{simple-accordion/snippet.js => simple-accordion.js} | 0 .../sort-list-items-alphabetically.js | 0 .../snippet.js => stop-the-loading-of-links.js} | 0 .../snippet.js => toggle-classes-on-hover.js} | 0 js/{toggle-fade-slide/snippet.js => toggle-fade-slide.js} | 0 .../snippet.js => trigger-on-visibility-change.js} | 0 18 files changed, 0 insertions(+), 0 deletions(-) rename js/{ajax-call-error-handling/snippet.js => ajax-call-error-handling.js} (100%) rename js/{back-to-top-button/snippet.js => back-to-top.js} (100%) rename js/{cache-jquery-selectors/snippet.js => cache-jquery-selectors.js} (100%) rename js/{chain-plugin-calls/snippet.js => chain-plugin-calls.js} (100%) rename js/{checking-if-images-are-loaded/snippet.js => checking-if-images-are-loaded.js} (100%) rename js/{checking-if-jquery-loaded/snippet.js => checking-if-jquery-loaded.js} (100%) rename js/{disabling-input-fields/snippet.js => disabling-input-fields.js} (100%) rename js/{find-element-by-text/snippet.js => find-element-by-text.js} (100%) rename js/{fix-broken-images-automatically/snippet.js => fix-broken-images-automatically.js} (100%) rename js/{make-two-divs-the-same-height/snippet.js => make-two-divs-the-same-height.js} (100%) rename js/{open-external-links-in-new-tab-window/snippet.js => open-external-links-in-new-tab-window.js} (100%) rename js/{preload-images/snippet.js => preload-images.js} (100%) rename js/{simple-accordion/snippet.js => simple-accordion.js} (100%) rename js/{sort-list-items-alphabetically => }/sort-list-items-alphabetically.js (100%) rename js/{stop-the-loading-of-links/snippet.js => stop-the-loading-of-links.js} (100%) rename js/{toggle-classes-on-hover/snippet.js => toggle-classes-on-hover.js} (100%) rename js/{toggle-fade-slide/snippet.js => toggle-fade-slide.js} (100%) rename js/{trigger-on-visibility-change/snippet.js => trigger-on-visibility-change.js} (100%) diff --git a/js/ajax-call-error-handling/snippet.js b/js/ajax-call-error-handling.js similarity index 100% rename from js/ajax-call-error-handling/snippet.js rename to js/ajax-call-error-handling.js diff --git a/js/back-to-top-button/snippet.js b/js/back-to-top.js similarity index 100% rename from js/back-to-top-button/snippet.js rename to js/back-to-top.js diff --git a/js/cache-jquery-selectors/snippet.js b/js/cache-jquery-selectors.js similarity index 100% rename from js/cache-jquery-selectors/snippet.js rename to js/cache-jquery-selectors.js diff --git a/js/chain-plugin-calls/snippet.js b/js/chain-plugin-calls.js similarity index 100% rename from js/chain-plugin-calls/snippet.js rename to js/chain-plugin-calls.js diff --git a/js/checking-if-images-are-loaded/snippet.js b/js/checking-if-images-are-loaded.js similarity index 100% rename from js/checking-if-images-are-loaded/snippet.js rename to js/checking-if-images-are-loaded.js diff --git a/js/checking-if-jquery-loaded/snippet.js b/js/checking-if-jquery-loaded.js similarity index 100% rename from js/checking-if-jquery-loaded/snippet.js rename to js/checking-if-jquery-loaded.js diff --git a/js/disabling-input-fields/snippet.js b/js/disabling-input-fields.js similarity index 100% rename from js/disabling-input-fields/snippet.js rename to js/disabling-input-fields.js diff --git a/js/find-element-by-text/snippet.js b/js/find-element-by-text.js similarity index 100% rename from js/find-element-by-text/snippet.js rename to js/find-element-by-text.js diff --git a/js/fix-broken-images-automatically/snippet.js b/js/fix-broken-images-automatically.js similarity index 100% rename from js/fix-broken-images-automatically/snippet.js rename to js/fix-broken-images-automatically.js diff --git a/js/make-two-divs-the-same-height/snippet.js b/js/make-two-divs-the-same-height.js similarity index 100% rename from js/make-two-divs-the-same-height/snippet.js rename to js/make-two-divs-the-same-height.js diff --git a/js/open-external-links-in-new-tab-window/snippet.js b/js/open-external-links-in-new-tab-window.js similarity index 100% rename from js/open-external-links-in-new-tab-window/snippet.js rename to js/open-external-links-in-new-tab-window.js diff --git a/js/preload-images/snippet.js b/js/preload-images.js similarity index 100% rename from js/preload-images/snippet.js rename to js/preload-images.js diff --git a/js/simple-accordion/snippet.js b/js/simple-accordion.js similarity index 100% rename from js/simple-accordion/snippet.js rename to js/simple-accordion.js diff --git a/js/sort-list-items-alphabetically/sort-list-items-alphabetically.js b/js/sort-list-items-alphabetically.js similarity index 100% rename from js/sort-list-items-alphabetically/sort-list-items-alphabetically.js rename to js/sort-list-items-alphabetically.js diff --git a/js/stop-the-loading-of-links/snippet.js b/js/stop-the-loading-of-links.js similarity index 100% rename from js/stop-the-loading-of-links/snippet.js rename to js/stop-the-loading-of-links.js diff --git a/js/toggle-classes-on-hover/snippet.js b/js/toggle-classes-on-hover.js similarity index 100% rename from js/toggle-classes-on-hover/snippet.js rename to js/toggle-classes-on-hover.js diff --git a/js/toggle-fade-slide/snippet.js b/js/toggle-fade-slide.js similarity index 100% rename from js/toggle-fade-slide/snippet.js rename to js/toggle-fade-slide.js diff --git a/js/trigger-on-visibility-change/snippet.js b/js/trigger-on-visibility-change.js similarity index 100% rename from js/trigger-on-visibility-change/snippet.js rename to js/trigger-on-visibility-change.js From c025d861bd08419cfce851a4fb3daae7c7108359 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Sat, 5 Mar 2016 00:23:46 -0500 Subject: [PATCH 027/135] =?UTF-8?q?Revised=20guidelines=20=E2=9B=B5?= =?UTF-8?q?=EF=B8=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CONTRIBUTING.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index e28b563..763c104 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -20,8 +20,7 @@ Please ensure your pull request adheres to the following guidelines: * Code formatting should follow standard [JSLint](http://www.jslint.com/) default settings, including: * Indent with two spaces * Use single quotes, e.g., `$.preloadImages('img/hover-on.png');` -* PR's should include a snippet .js file added to the `js` folder. -* Snippet folders should be named identical to the tip being added in the [README](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/blob/master/README.md) document using the following convention: `make-two-divs-the-same-height`. +* PR's should include a .js file with the same name as the tip being added in the [README](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/blob/master/README.md) document, e.g., `make-two-divs-the-same-height.js`. * Snippets should begin with a comment that matches the name of the tip, e.g., `// Make two divs the same height`. * Make sure your text editor is set to remove trailing whitespace. * Check your spelling and grammar. From 310e7ff4bd5e84adc691434f5d24ef0e01dcdd53 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Sun, 6 Mar 2016 00:34:38 -0500 Subject: [PATCH 028/135] =?UTF-8?q?Clarified=20PR=20requirements=20?= =?UTF-8?q?=E2=9B=B7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CONTRIBUTING.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 763c104..58e467f 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -20,7 +20,7 @@ Please ensure your pull request adheres to the following guidelines: * Code formatting should follow standard [JSLint](http://www.jslint.com/) default settings, including: * Indent with two spaces * Use single quotes, e.g., `$.preloadImages('img/hover-on.png');` -* PR's should include a .js file with the same name as the tip being added in the [README](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/blob/master/README.md) document, e.g., `make-two-divs-the-same-height.js`. +* PR's should include a .js file with the same name as the tip being added in the [README](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/blob/master/README.md) document, e.g., `make-two-divs-the-same-height.js` and added to the `js` folder. * Snippets should begin with a comment that matches the name of the tip, e.g., `// Make two divs the same height`. * Make sure your text editor is set to remove trailing whitespace. * Check your spelling and grammar. From 51fbaeeecca71c54385724e6a9d7462a0dc0f7da Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Thu, 10 Mar 2016 07:49:26 -0500 Subject: [PATCH 029/135] Updated to CC0 1.0 --- LICENSE | 128 ++++++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 111 insertions(+), 17 deletions(-) diff --git a/LICENSE b/LICENSE index baaf391..3bbbc1e 100644 --- a/LICENSE +++ b/LICENSE @@ -1,22 +1,116 @@ -The MIT License (MIT) +CC0 1.0 Universal -Copyright (c) 2016 Matt Smith +Statement of Purpose -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: +The laws of most jurisdictions throughout the world automatically confer +exclusive Copyright and Related Rights (defined below) upon the creator and +subsequent owner(s) (each and all, an "owner") of an original work of +authorship and/or a database (each, a "Work"). -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. +Certain owners wish to permanently relinquish those rights to a Work for the +purpose of contributing to a commons of creative, cultural and scientific +works ("Commons") that the public can reliably and without fear of later +claims of infringement build upon, modify, incorporate in other works, reuse +and redistribute as freely as possible in any form whatsoever and for any +purposes, including without limitation commercial purposes. These owners may +contribute to the Commons to promote the ideal of a free culture and the +further production of creative, cultural and scientific works, or to gain +reputation or greater distribution for their Work in part through the use and +efforts of others. -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND 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. +For these and/or other purposes and motivations, and without any expectation +of additional consideration or compensation, the person associating CC0 with a +Work (the "Affirmer"), to the extent that he or she is an owner of Copyright +and Related Rights in the Work, voluntarily elects to apply CC0 to the Work +and publicly distribute the Work under its terms, with knowledge of his or her +Copyright and Related Rights in the Work and the meaning and intended legal +effect of CC0 on those rights. +1. Copyright and Related Rights. A Work made available under CC0 may be +protected by copyright and related or neighboring rights ("Copyright and +Related Rights"). Copyright and Related Rights include, but are not limited +to, the following: + + i. the right to reproduce, adapt, distribute, perform, display, communicate, + and translate a Work; + + ii. moral rights retained by the original author(s) and/or performer(s); + + iii. publicity and privacy rights pertaining to a person's image or likeness + depicted in a Work; + + iv. rights protecting against unfair competition in regards to a Work, + subject to the limitations in paragraph 4(a), below; + + v. rights protecting the extraction, dissemination, use and reuse of data in + a Work; + + vi. database rights (such as those arising under Directive 96/9/EC of the + European Parliament and of the Council of 11 March 1996 on the legal + protection of databases, and under any national implementation thereof, + including any amended or successor version of such directive); and + + vii. other similar, equivalent or corresponding rights throughout the world + based on applicable law or treaty, and any national implementations thereof. + +2. Waiver. To the greatest extent permitted by, but not in contravention of, +applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and +unconditionally waives, abandons, and surrenders all of Affirmer's Copyright +and Related Rights and associated claims and causes of action, whether now +known or unknown (including existing as well as future claims and causes of +action), in the Work (i) in all territories worldwide, (ii) for the maximum +duration provided by applicable law or treaty (including future time +extensions), (iii) in any current or future medium and for any number of +copies, and (iv) for any purpose whatsoever, including without limitation +commercial, advertising or promotional purposes (the "Waiver"). Affirmer makes +the Waiver for the benefit of each member of the public at large and to the +detriment of Affirmer's heirs and successors, fully intending that such Waiver +shall not be subject to revocation, rescission, cancellation, termination, or +any other legal or equitable action to disrupt the quiet enjoyment of the Work +by the public as contemplated by Affirmer's express Statement of Purpose. + +3. Public License Fallback. Should any part of the Waiver for any reason be +judged legally invalid or ineffective under applicable law, then the Waiver +shall be preserved to the maximum extent permitted taking into account +Affirmer's express Statement of Purpose. In addition, to the extent the Waiver +is so judged Affirmer hereby grants to each affected person a royalty-free, +non transferable, non sublicensable, non exclusive, irrevocable and +unconditional license to exercise Affirmer's Copyright and Related Rights in +the Work (i) in all territories worldwide, (ii) for the maximum duration +provided by applicable law or treaty (including future time extensions), (iii) +in any current or future medium and for any number of copies, and (iv) for any +purpose whatsoever, including without limitation commercial, advertising or +promotional purposes (the "License"). The License shall be deemed effective as +of the date CC0 was applied by Affirmer to the Work. Should any part of the +License for any reason be judged legally invalid or ineffective under +applicable law, such partial invalidity or ineffectiveness shall not +invalidate the remainder of the License, and in such case Affirmer hereby +affirms that he or she will not (i) exercise any of his or her remaining +Copyright and Related Rights in the Work or (ii) assert any associated claims +and causes of action with respect to the Work, in either case contrary to +Affirmer's express Statement of Purpose. + +4. Limitations and Disclaimers. + + a. No trademark or patent rights held by Affirmer are waived, abandoned, + surrendered, licensed or otherwise affected by this document. + + b. Affirmer offers the Work as-is and makes no representations or warranties + of any kind concerning the Work, express, implied, statutory or otherwise, + including without limitation warranties of title, merchantability, fitness + for a particular purpose, non infringement, or the absence of latent or + other defects, accuracy, or the present or absence of errors, whether or not + discoverable, all to the greatest extent permissible under applicable law. + + c. Affirmer disclaims responsibility for clearing rights of other persons + that may apply to the Work or any use thereof, including without limitation + any person's Copyright and Related Rights in the Work. Further, Affirmer + disclaims responsibility for obtaining any necessary consents, permissions + or other rights required for any use of the Work. + + d. Affirmer understands and acknowledges that Creative Commons is not a + party to this document and has no duty or obligation with respect to this + CC0 or use of the Work. + +For more information, please see + \ No newline at end of file From 15bf23e9a155b86d38fe8ee5a910b11285e16b94 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Thu, 10 Mar 2016 07:49:45 -0500 Subject: [PATCH 030/135] Added @sindresorhus's awesome badge --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 40549bd..7556d39 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,9 @@ -# jQuery Tips Everyone Should Know +# jQuery Tips Everyone Should Know [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) A collection of simple tips to help up your jQuery game. +> For other great lists check out [@sindresorhus](https://github.com/sindresorhus/)'s curated list of [awesome lists](https://github.com/sindresorhus/awesome/). + ## Table of Contents From ff32b0024970a52418ed932e5a830cfa1f3c18ac Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Mon, 25 Apr 2016 09:35:52 -0400 Subject: [PATCH 031/135] =?UTF-8?q?Added=20Spanish=20translation=20?= =?UTF-8?q?=F0=9F=91=8D=F0=9F=8F=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- translations/es-ES/README.md | 376 +++++++++++++++++++++++++++++++++++ 1 file changed, 376 insertions(+) create mode 100644 translations/es-ES/README.md diff --git a/translations/es-ES/README.md b/translations/es-ES/README.md new file mode 100644 index 0000000..0e4edb9 --- /dev/null +++ b/translations/es-ES/README.md @@ -0,0 +1,376 @@ +# Consejos jQuery cada uno debe saber [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) + +Una colección de consejos simples para ayudar a su juego jQuery. + +> Para otros grandes listas echa un vistazo a [@sindresorhus](https://github.com/sindresorhus/)'s lista curada de [listas impresionantes](https://github.com/sindresorhus/awesome/). + + +## Tabla de contenido + +* [Tips](#consejos) +* [Apoyo](#apoyo) +* [Pautas de contribución](../../CONTRIBUTING.md) + + +## Consejos + +1. [Verificando jQuery Cargado](#checking-if-jquery-loaded) +1. [Volver al botón de inicio](#back-to-top-button) +1. [Carga previa de imágenes](#preload-images) +1. [comprobando si las imágenes se cargan](#checking-if-images-are-loaded) +1. [corregir imágenes automáticamente rotas](#fix-broken-images-automatically) +1. [Las clases de palanca en la libración](#toggle-classes-on-hover) +1. [Desactivar la acción de campos](#disabling-input-fields) +1. [Detener la carga de Enlaces](#stop-the-loading-of-links) +1. [de caché de jQuery selectores](#cache-jquery-selectors) +1. [De palanca de fundido / Slide](#toggle-fadeslide) +1. [Acordeón simple](#simple-accordion) +1. [Haga dos Divs la misma altura](#make-two-divs-the-same-height) +1. [Abrir enlaces externos en una nueva pestaña / ventana](#open-external-links-in-new-tabwindow) +1. [Buscar elemento Por Texto](#find-element-by-text) +1. [Visibilidad gatillo de Cambio](#trigger-on-visibility-change) +1. [Control de errores de llamada Ajax](#ajax-call-error-handling) +1. [Llamadas Plugin Cadena](#chain-plugin-calls) +1. [Ordenar la lista de elementos alfabéticamente](#sort-list-items-alphabetically) + + +
+### Verificando jQuery Cargado + +Antes de que pueda hacer cualquier cosa con jQuery primero tiene que asegurarse de que se ha cargado: + +```javascript +if (typeof jQuery == 'undefined') { + console.log('jQuery hasn\'t loaded'); +} else { + console.log('jQuery has loaded'); +} +``` + +Ahora que estás fuera... + + +
+### Volver al botón de inicio + +Mediante el uso de la `animate` y métodos `scrollTop` en jQuery que no es necesario un plugin para crear una animación simple-scroll-a arriba: + +```javascript +// Back to top +$('.top').click(function (e) { + e.preventDefault(); + $('html, body').animate({scrollTop: 0}, 800); +}); +``` + +```html + +Back to top +``` + +El cambio de los cambios de valor `scrollTop` donde se quiere que la barra de desplazamiento a la tierra. Todo lo que realmente está haciendo es animar el cuerpo del documento a lo largo de 800 milisegundos hasta que se desplaza a la parte superior del documento. + +** Nota: ** ve por alguna [comportamiento incorrecto](https://github.com/jquery/api.jquery.com/issues/417) con `scrollTop`. + + +
+### Carga previa de imágenes + +Si su página web utiliza una gran cantidad de imágenes que no son visibles inicialmente (por ejemplo, en vuelo estacionario) que tiene sentido para precargar ellos: + +```javascript +$.preloadImages = function () { + for (var i = 0; i < arguments.length; i++) { + $('').attr('src', arguments[i]); + } +}; + +$.preloadImages('img/hover-on.png', 'img/hover-off.png'); +``` + + +
+### Comprobación Si las imágenes se cargan + +A veces puede que tenga que comprobar si las imágenes han cargado completamente con el fin de continuar con las secuencias de comandos: + +```javascript +$('img').load(function () { + console.log('image load successful'); +}); +``` + +También puede comprobar si una imagen en particular se ha cargado mediante la sustitución de la etiqueta `` con un ID o clase. + + +
+### Corregir imágenes automáticamente rotas + +Si por casualidad usted encuentra enlaces de imagen rotos en su sitio de la sustitución de uno por uno puede ser un dolor. Esta sencilla pieza de código puede ahorrar muchos dolores de cabeza: + +```javascript +$('img').on('error', function () { + if(!$(this).hasClass('broken-image')) { + $(this).prop('src', 'img/broken.png').addClass('broken-image'); + } +}); +``` + +Incluso si usted no tiene ningún enlaces rotos, añadiendo que esto no hará ningún daño. + + +
+### Alternar clases en la libración + +Digamos que usted quiere cambiar la visual de un elemento se puede hacer clic en la página cuando un usuario se desplaza sobre él. Usted puede agregar una clase a su elemento cuando el usuario está flotando; cuando el usuario deja flotando elimina la clase: + +```javascript +$('.btn').hover(function () { + $(this).addClass('hover'); +}, function () { + $(this).removeClass('hover'); +}); +``` + +Sólo tiene que añadir el CSS necesario. Si desea una manera aún _simpler_ utilizar el método `toggleClass`: + +```javascript +$('.btn').hover(function () { + $(this).toggleClass('hover'); +}); +``` +`` ` + +**Nota:** CSS puede ser una solución más rápida en este caso, pero es todavía vale la pena saber esto. + + +
+### Desactivación de campos de entrada + +A veces es posible que desee el botón de envío de un formulario o una de sus entradas de texto debe ser inhabilitado hasta que el usuario ha realizado una acción determinada (por ejemplo, control de la "He leído los términos" casilla de verificación). Añadir el atributo `disabled` a la entrada para que pueda activarlo cuando se quiere: + +```javascript +$('input[type="submit"]').prop('disabled', true); +``` + +Todo lo que necesita hacer es ejecutar el método `prop` otra vez en la entrada, pero establecer el valor de `disabled` a `false`: + +```javascript +$('input[type="submit"]').prop('disabled', false); +``` + + +div> +### Detener la carga de Enlaces + +A veces no desea vínculos para ir a una determinada página web, ni volver a cargar la página; es posible que desee que hagan otra cosa, como disparador de otro guión. Esto va a hacer el truco de la prevención de la acción por defecto: + +```javascript +$('a.no-link').click(function (e) { + e.preventDefault(); +}); +``` + + +
+### de caché de jQuery selectores + +Piense en cuántas veces se escribe el mismo selector una y otra vez en cualquier proyecto. Cada `$('.element')` selector tiene que buscar en todo el DOM cada vez, independientemente de si dicho selector había ejecutado anteriormente. En lugar de ello, ejecute el selector de una vez y almacenar los resultados en una variable: + +```javascript +var blocks = $('#blocks').find('li'); +``` + + +Ahora se puede utilizar la variable `blocks` donde quieras sin tener que buscar el DOM en cada ocasión: + +```javascript +$('#hideBlocks').click(function () { + blocks.fadeOut(); +}); + +$('#showBlocks').click(function () { + blocks.fadeIn(); +}); +``` + +El almacenamiento en caché selectores de jQuery son una ganancia de rendimiento fácil. + + +
+### De palanca de fundido / Slide + +Deslizante y la decoloración son algo que usamos un montón en nuestras animaciones con jQuery. Es posible que sólo quieren mostrar un elemento cuando un usuario hace clic en algo, lo que hace que los `fadeIn` y métodos de `slideDown` perfecta. Pero si desea que el elemento que aparezca en la primera posición y luego desaparecen en el segundo esto va a funcionar muy bien: + +```javascript +// Fade +$('.btn').click(function () { + $('.element').fadeToggle('slow'); +}); + +// Toggle +$('.btn').click(function () { + $('.element').slideToggle('slow'); +}); +``` + + +
+### Acordeón simple + +Este es un método simple para un acordeón rápida: + +```javascript +// Close all panels +$('#accordion').find('.content').hide(); + +// Accordion +$('#accordion').find('.accordion-header').click(function () { + var next = $(this).next(); + next.slideToggle('fast'); + $('.content').not(next).slideUp('fast'); + return false; +}); +``` + +Mediante la adición de este script lo único que tiene que hacer en su página web es el HTML necesario ir a buscar este trabajo. + + +
+### Haga dos Divs la misma altura + +A veces, usted querrá dos divs tener la misma altura no importa qué contenido tienen en ellos: + +```javascript +$('.div').css('min-height', $('.main-div').height()); +``` + +Este ejemplo establece el `min-height` característica que significa que puede ser más grande que el div principal pero nunca más pequeña. Sin embargo, un método más flexible sería la de bucle sobre un conjunto de elementos y ajustar la altura a la altura del elemento más alto: + +```javascript +var $columns = $('.column'); +var height = 0; +$columns.each(function () { + if ($(this).height() > height) { + height = $(this).height(); + } +}); +$columns.height(height); +``` + +Si desea _todas_ columnas tengan la misma altura: + +```javascript +var $rows = $('.same-height-columns'); +$rows.each(function () { + $(this).find('.column').height($(this).height()); +}); +``` + + + +### Abrir enlaces externos en una nueva pestaña / ventana + +Abrir enlaces externos en una nueva pestaña o ventana del navegador y garantizar enlaces en el mismo origen abierta en la misma pestaña o ventana: + +```javascript +$('a[href^="http"]').attr('target', '_blank'); +$('a[href^="//"]').attr('target', '_blank'); +$('a[href^="' + window.location.origin + '"]').attr('target', '_self'); +``` + +**Nota:** `window.location.origin` no funciona en IE10. [Esta corrección](http://tosbourn.com/a-fix-for-window-location-origin-in-internet-explorer/) se ocupa de la cuestión. + + +
+### Buscar elemento Por Texto + +Mediante el uso de la selector `contains()` en jQuery se puede encontrar texto en el contenido de un elemento. Si no existe texto, ese elemento se ocultará: + +```javascript +var search = $('#search').val(); +$('div:not(:contains("' + search + '"))').hide(); +``` + +
+### Visibilidad gatillo de Cambio + +Gatillo JavaScript cuando el usuario ya no se centra en una pestaña, o vuelve a centrar en una pestaña: + +```javascript +$(document).on('visibilitychange', function (e) { + if (e.target.visibilityState === 'visible') { + console.log('Tab is now in view!'); + } else if (e.target.visibilityState === 'hidden') { + console.log('Tab is now hidden!'); + } +}); +``` + +
+### Control de errores de llamada Ajax + +Cuando una llamada Ajax devuelve un error 404 o 500 se ejecutará el gestor de errores. Si no se define el controlador, otro código jQuery podría no funcionar. Definir un controlador global de error de Ajax: + +```javascript +$(document).ajaxError(function (e, xhr, settings, error) { + console.log(error); +}); +``` + + +
+### llamadas Plugin Cadena + +jQuery permite el "encadenamiento" plug-in de llamadas a métodos para mitigar el proceso de consulta en repetidas ocasiones el DOM y la creación de varios objetos jQuery. Digamos que el siguiente fragmento representa sus llamadas a métodos plugin: + +```javascript +$('#elem').show(); +$('#elem').html('bla'); +$('#elem').otherStuff(); +``` + +Esto podría mejorarse enormemente mediante el uso de encadenamiento: + +```javascript +$('#elem') + .show() + .html('bla') + .otherStuff(); +``` + +Una alternativa es almacenar en caché el elemento en una variable (con el prefijo `$`): + +```javascript +var $elem = $('#elem'); +$elem.hide(); +$elem.html('bla'); +$elem.otherStuff(); +``` + + +Ambos métodos [almacenamiento en caché](#cache-jquery-selectors) en el encadenamiento y son las mejores prácticas que conducen al código corto y más rápido. + + +
+### ordenar la lista de elementos alfabéticamente + +Digamos que usted termina con demasiados elementos en una lista. Tal vez el contenido es producido por un CMS y desea ordenar por orden alfabético: + +```javascript +var ul = $('#list'), +lis = $('li', ul).get(); + +lis.sort(function (a, b) { + return ($(a).text().toUpperCase() < $(b).text().toUpperCase()) ? -1 : 1; +}); + +ul.append(lis); +``` + +Hay que ir! + + +## Apoyo + +Las versiones actuales de Chrome, Firefox, Safari, Opera, Edge y EI11. \ No newline at end of file From aef7e28163bfc9bca6659adafa7f45f5ca11571c Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Mon, 25 Apr 2016 09:36:29 -0400 Subject: [PATCH 032/135] =?UTF-8?q?Added=20language=20translation=20guidel?= =?UTF-8?q?ines=20=F0=9F=8F=84=F0=9F=8F=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CONTRIBUTING.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 58e467f..80a3f5c 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -29,6 +29,16 @@ Please ensure your pull request adheres to the following guidelines: Thank you for your suggestions! +### Language Translations + +If you fluently speak another language and want to contribute by translating this list into that language, please submit a PR using the following guidelines: + +* Add a new folder to the `translations` folder +* The new folder should be labeled the language culture name, e.g, `es-ES`, `ru-RU`, `zh-CN`, etc. + +Additionally, feel free to review already translated content for accuracy. + + ## Updating Your Pull Request Sometimes a maintainer will ask you to edit your pull request before it's included. This is normally due to spelling errors or because your PR didn't match the above guidlines guidelines. [This write-up](https://github.com/RichardLitt/docs/blob/master/amending-a-commit-guide.md) covers the different ways you can change a pull request. \ No newline at end of file From 7c9906bc23ce8263d99c3372e1e9d3ea6b7568b2 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Wed, 27 Apr 2016 09:39:25 -0400 Subject: [PATCH 033/135] =?UTF-8?q?Added=20French=20translation=20?= =?UTF-8?q?=F0=9F=8F=84=F0=9F=8F=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- translations/fr-FR/README.md | 374 +++++++++++++++++++++++++++++++++++ 1 file changed, 374 insertions(+) create mode 100644 translations/fr-FR/README.md diff --git a/translations/fr-FR/README.md b/translations/fr-FR/README.md new file mode 100644 index 0000000..bdb54a0 --- /dev/null +++ b/translations/fr-FR/README.md @@ -0,0 +1,374 @@ +# JQuery Conseils Tout le monde devrait savoir [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) + +Une collection de conseils simples pour aider votre jeu jQuery. + +> Pour les autres grandes listes vérifier [@sindresorhus](https://github.com/sindresorhus/) de la liste curated des [listes impressionnantes](https://github.com/sindresorhus/awesome/). + + +## Table des matières + +* [Conseils](#conseils) +* [Soutien](#soutien) +* [Lignes directrices des contributions](../../CONTRIBUTING.md) + + +## Conseils + +1. [Vérification Si jQuery Loaded](#checking-if-jquery-loaded)) +1. [Haut de la page Bouton](#back-to-top-button) +1. [Précharger Images](#preload-images) +1. [Vérification Si les images sont chargées](#checking-if-images-are-loaded) +1. [Fix Broken Images automatiquement](#fix-broken-images-automatically) +1. [Basculer Classes sur Hover](#toggle-classes-on-hover) +1. [Entrée Désactivation champs](#disabling-input-fields) +1. [Arrêter le chargement des Liens](#stop-the-loading-of-links) +1. [Cache jQuery sélecteurs](#cache-jquery-selectors) +1. [Basculer Fade / Slide](#toggle-fadeslide) +1. [Accordéon Simple](#simple-accordion) +1. [Faire deux Divs la même hauteur](#make-two-divs-the-same-height) +1. [Ouvrir Liens externes dans un nouvel onglet / fenêtre](#open-external-links-in-new-tabwindow) +1. [Trouver Élément Par texte](#find-element-by-text) +1. [Déclenchement de la visibilité Change](#trigger-on-visibility-change) +1. [Gestion des erreurs Ajax Appel](#ajax-call-error-handling) +1. [Appels de Plugin Chain](#chain-plugin-calls) +1. [Trier Liste des articles par ordre alphabétique](#sort-list-items-alphabetically) + + +
+### Vérification Si jQuery Loaded + +Avant de pouvoir faire quoi que ce soit avec jQuery vous devez d'abord vous assurer qu'il a été chargé: + +```javascript +if (typeof jQuery == 'undefined') { + console.log('jQuery hasn\'t loaded'); +} else { + console.log('jQuery has loaded'); +} +``` + +Maintenant, vous êtes hors ... + + +
+### Haut de la page Bouton + +En utilisant le `animate` et méthodes `scrollTop` dans jQuery vous ne pas besoin d'un plug-in pour créer une animation simple défilement-to-top: + +```javascript +// Back to top +$('.top').click(function (e) { + e.preventDefault(); + $('html, body').animate({scrollTop: 0}, 800); +}); +``` + +```html + +Back to top +``` + +Modification des valeur change `scrollTop` où vous veut le scrollbar à la terre. Tout ce que vous faites vraiment est d'animer le corps du document tout au long de 800 millisecondes jusqu'à ce qu'elle défile vers le haut du document. + +** Note: ** Surveillez certains [comportement bogué](https://github.com/jquery/api.jquery.com/issues/417) avec `scrollTop`. + + +
+### Précharger Images + +Si votre page Web utilise beaucoup d'images qui ne sont pas visibles initialement (par exemple, sur le vol stationnaire), il est logique de les précharger: + +```javascript +$.preloadImages = function () { + for (var i = 0; i < arguments.length; i++) { + $('').attr('src', arguments[i]); + } +}; + +$.preloadImages('img/hover-on.png', 'img/hover-off.png'); +``` + + +
+### Vérification Si les images sont chargées + +Parfois, vous pourriez avoir besoin de vérifier si vos images sont entièrement chargées, afin de continuer avec vos scripts: + +```javascript +$('img').load(function () { + console.log('image load successful'); +}); +``` + +Vous pouvez également vérifier si une image particulière a été chargé par le remplacement du `` tag avec un ID ou classe. + + +
+### Fix Broken Images automatiquement + +Si vous arrive de trouver des liens d'image cassés sur votre site pour les remplacer un par un peut être une douleur. Ce simple morceau de code permet d'économiser beaucoup de maux de tête: + +```javascript +$('img').on('error', function () { + if(!$(this).hasClass('broken-image')) { + $(this).prop('src', 'img/broken.png').addClass('broken-image'); + } +}); +``` + +Même si vous n'avez pas de liens brisés, ajoutant cela ne fera pas de mal. + + +
+### Basculer Classes sur Hover + +Disons que vous voulez changer le visuel d'un élément cliquable sur votre page quand un utilisateur survole. Vous pouvez ajouter une classe à votre élément lorsque l'utilisateur est en vol stationnaire; lorsque l'utilisateur arrête planant supprime la classe: + +```javascript +$('.btn').hover(function () { + $(this).addClass('hover'); +}, function () { + $(this).removeClass('hover'); +}); +``` + +Vous avez juste besoin d'ajouter le CSS nécessaire. Si vous voulez une manière encore _simpler_ utiliser la méthode `toggleClass`: + +```javascript +$('.btn').hover(function () { + $(this).toggleClass('hover'); +}); +``` + +**Note:** CSS peut être une solution plus rapide dans ce cas, mais il est toujours intéressant de savoir. + + +
+### Désactivation de champs d'entrée + +Parfois, vous voudrez peut-être le bouton d'envoi d'un formulaire ou une de ses entrées de texte est désactivé jusqu'à ce que l'utilisateur a effectué une certaine action (par exemple, la vérification du «Je l'ai lu les termes« case à cocher). Ajouter l'attribut `disabled` à votre entrée de sorte que vous pouvez l'activer quand vous voulez: + +```javascript +$('input[type="submit"]').prop('disabled', true); +``` + +Tout ce que vous devez faire est de lancer la méthode `prop` à nouveau sur l'entrée, mais définissez la valeur de `disabled` à `false`: + +```javascript +$('input[type="submit"]').prop('disabled', false); +``` + + + +### Arrêter le chargement des Liens + +Parfois, vous ne voulez pas de liens pour aller à une certaine page Web, ni recharger la page; vous voudrez peut-être qu'ils fassent d'autre comme déclencheur d'un autre script quelque chose. Cela fera l'affaire d'empêcher l'action par défaut: + +```javascript +$('a.no-link').click(function (e) { + e.preventDefault(); +}); +``` + + +
+### Cache jQuery sélecteurs + +Pensez à combien de fois vous écrivez le même sélecteur maintes et maintes fois dans tout projet. Chaque `$ ( '. Élément')` sélecteur doit rechercher l'ensemble DOM chaque fois, peu importe si ce sélecteur avait précédemment terme. Au lieu de cela, exécutez le sélecteur une fois et stocker les résultats dans une variable: + +```javascript +var blocks = $('#blocks').find('li'); +``` + +Maintenant, vous pouvez utiliser la variable `blocks` où vous voulez sans avoir à chercher les DOM à chaque fois: + +```javascript +$('#hideBlocks').click(function () { + blocks.fadeOut(); +}); + +$('#showBlocks').click(function () { + blocks.fadeIn(); +}); +``` + +sélecteurs Caching jQuery sont un gain de performance facile. + + +
+### Basculer Fade / Slide + +Coulissantes et à la décoloration sont quelque chose que nous utilisons beaucoup dans nos animations avec jQuery. Vous voudrez peut-être juste pour montrer un élément lorsqu'un utilisateur clique sur quelque chose, ce qui rend les méthodes `slideDown` et `fadeIn` parfait. Mais si vous voulez que l'élément à apparaître sur le premier clic et puis disparaissent sur le second cela fonctionne très bien: + +```javascript +// Fade +$('.btn').click(function () { + $('.element').fadeToggle('slow'); +}); + +// Toggle +$('.btn').click(function () { + $('.element').slideToggle('slow'); +}); +``` + + +
+### Accordéon Simple + +Ceci est une méthode simple pour un accordéon rapide: + +```javascript +// Close all panels +$('#accordion').find('.content').hide(); + +// Accordion +$('#accordion').find('.accordion-header').click(function () { + var next = $(this).next(); + next.slideToggle('fast'); + $('.content').not(next).slideUp('fast'); + return false; +}); +``` + +En ajoutant ce script tout ce que vous a vraiment besoin de le faire sur votre page Web est le HTML nécessaire aller chercher ce travail. + + +
+### Faire deux Divs la même hauteur + +Parfois, vous aurez envie deux divs d'avoir la même hauteur, peu importe le contenu qu'ils ont en eux: + +```javascript +$('.div').css('min-height', $('.main-div').height()); +``` + +Cet exemple définit la `min-height` ce qui signifie qu'il peut être plus grande que la div principale, mais jamais plus petit. Cependant, une méthode plus souple serait de boucler sur un ensemble d'éléments et de régler la hauteur à la hauteur de l'élément le plus haut: + +```javascript +var $columns = $('.column'); +var height = 0; +$columns.each(function () { + if ($(this).height() > height) { + height = $(this).height(); + } +}); +$columns.height(height); +``` + +Si vous voulez _all_ colonnes ont la même hauteur: + +```javascript +var $rows = $('.same-height-columns'); +$rows.each(function () { + $(this).find('.column').height($(this).height()); +}); +``` + + + +### Ouvrez Liens externes dans un nouvel onglet / fenêtre + +Ouvrir des liens externes dans un nouvel onglet du navigateur ou la fenêtre et assurer des liens sur la même origine ouvert dans le même onglet ou une fenêtre: + +```javascript +$('a[href^="http"]').attr('target', '_blank'); +$('a[href^="//"]').attr('target', '_blank'); +$('a[href^="' + window.location.origin + '"]').attr('target', '_self'); +``` + +** Note:** `window.location.origin` ne fonctionne pas dans IE10. [Ce correctif](http://tosbourn.com/a-fix-for-window-location-origin-in-internet-explorer/) prend soin de la question. + + +
+### Trouver Élément Par texte + +En utilisant le `contains()` sélecteur jQuery vous pouvez rechercher du texte dans le contenu d'un élément. Si le texte n'existe pas, cet élément sera caché: + +```javascript +var search = $('#search').val(); +$('div:not(:contains("' + search + '"))').hide(); +``` + +
+### Déclenchement de la visibilité Change + +Trigger JavaScript lorsque l'utilisateur est plus axé sur un onglet, ou réoriente sur un onglet: + +```javascript +$(document).on('visibilitychange', function (e) { + if (e.target.visibilityState === 'visible') { + console.log('Tab is now in view!'); + } else if (e.target.visibilityState === 'hidden') { + console.log('Tab is now hidden!'); + } +}); +``` + + +
+### Gestion des erreurs Ajax Appel + +Lorsqu'un appel Ajax renvoie une erreur 404 ou 500 le gestionnaire d'erreur sera exécutée. Si le gestionnaire ne se définit pas, un autre code jQuery ne fonctionneront plus. Définir un gestionnaire global d'erreur Ajax: + +```javascript +$(document).ajaxError(function (e, xhr, settings, error) { + console.log(error); +}); +``` + + +
+### appels Plugin Chain + +jQuery permet le "chaînage" du plug-in méthode appelle pour atténuer le processus d'interrogation à plusieurs reprises le DOM et la création de plusieurs objets jQuery. Disons que l'extrait suivant représente vos appels de méthode plugin: + +```javascript +$('#elem').show(); +$('#elem').html('bla'); +$('#elem').otherStuff(); +``` + +Cela pourrait être grandement améliorée en utilisant le chaînage: + +```javascript +$('#elem') + .show() + .html('bla') + .otherStuff(); +``` + +Une alternative consiste à mettre en cache l'élément dans une variable (avec le préfixe `` $): + +```javascript +var $elem = $('#elem'); +$elem.hide(); +$elem.html('bla'); +$elem.otherStuff(); +``` + +Les deux chaînage et [cache](#jquery-sélecteurs cache-) méthodes jQuery sont les meilleures pratiques qui conduisent à un code plus court et plus rapide. + + +
+### Trier Liste Articles alphabétiquement + +Disons que vous vous retrouvez avec trop d'éléments dans une liste. Peut-être que le contenu est produit par un CMS et que vous souhaitez les commander par ordre alphabétique: + +```javascript +var ul = $('#list'), +lis = $('li', ul).get(); + +lis.sort(function (a, b) { + return ($(a).text().toUpperCase() < $(b).text().toUpperCase()) ? -1 : 1; +}); + +ul.append(lis); +``` + +Voilà! + + +## Soutien + +Les versions actuelles de Chrome, Firefox, Safari, Opera, Edge, et IE11. \ No newline at end of file From 3cfbb703c77e0ea1716ec33ae7e21860252de47b Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Wed, 27 Apr 2016 09:39:39 -0400 Subject: [PATCH 034/135] =?UTF-8?q?Added=20Chinese=20translation=20?= =?UTF-8?q?=F0=9F=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- translations/zh-CN/README.md | 376 +++++++++++++++++++++++++++++++++++ 1 file changed, 376 insertions(+) create mode 100644 translations/zh-CN/README.md diff --git a/translations/zh-CN/README.md b/translations/zh-CN/README.md new file mode 100644 index 0000000..96bef74 --- /dev/null +++ b/translations/zh-CN/README.md @@ -0,0 +1,376 @@ +# jQuery的提示大家应该知道 [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) + +简单的窍门的集合，以帮助您的jQuery的游戏。 + +> 对于其他大名单退房 [@sindresorhus](https://github.com/sindresorhus/)的策展的名单 [真棒名单](https://github.com/sindresorhus/awesome/). + + +## 目录 + +* [温馨提示](＃提示) +* [支持](＃support) +* [贡献指引](../../CONTRIBUTING.md) + + +
+## 提示 + +1. [检查是否加载的jQuery](＃checking-if-jquery-loaded) +1. [返回顶部按钮](#back-to-top-button) +1. [预先载入图像](#preload-images) +1. [检查，如果图像加载](#checking-if-images-are-loaded) +1. [自动修复破碎的形象](#fix-broken-images-automatically) +1. [悬停切换类](#toggle-classes-on-hover) +1. [禁用输入字段](#disabling-input-fields) +1. [停止路径的负载](#stop-the-loading-of-links) +1. [缓存jquery选择](#cache-jquery-selectors) +1. [淡入淡出切换/幻灯片](#toggle-fadeslide) +1. [简单手风琴(#simple-accordion) +1. [让两个div相同的高度](#make-two-divs-the-same-height) +1. [打开外部链接在新标签/窗口](#open-external-links-in-new-tabwindow) +1. [查找元素通过短信](#find-element-by-text) +1. [可见性改变触发器](#trigger-on-visibility-change) +1. [Ajax调用错误处理(#ajax-call-error-handling) +1. [连锁插件调用(#chain-plugin-calls) +1. [排序列表项按字母顺序(#sort-list-items-alphabetically) + + +
+### 检查如果加载的jQuery + +之前，你可以使用jQuery做任何事情，你首先需要确保它加载： + +```javascript +if (typeof jQuery == 'undefined') { + console.log('jQuery hasn\'t loaded'); +} else { + console.log('jQuery has loaded'); +} +``` + +现在你是关闭... + + +
+### 返回顶部按钮 + +通过使用jQuery中的`animate`和`scrollTop`方法，你并不需要一个插件来创建一个简单的滚动到顶部动画： + +```javascript +// Back to top +$('.top').click(function (e) { + e.preventDefault(); + $('html, body').animate({scrollTop: 0}, 800); +}); +``` + +```html + +Back to top +``` + +改变，你想要滚动降落`scrollTop`价值的变化。所有你真的做的是动画文件的全身各处的800毫秒的过程中，直到它滚动到文档的顶部。 + +**注：** 观看一些 [错误行为](https://github.com/jquery/api.jquery.com/issues/417) 用 `scrollTop`。 + + +
+### 预先载入图像 + +如果你的网页使用了大量不可见的开始（例如，悬停）图像是有意义的预加载它们： + +```javascript +$.preloadImages = function () { + for (var i = 0; i < arguments.length; i++) { + $('').attr('src', arguments[i]); + } +}; + +$.preloadImages('img/hover-on.png', 'img/hover-off.png'); +``` + + +
+### 检查如果图像加载 + +有时你可能需要检查，如果您的影像出现，以便继续与脚本满载： + +```javascript +$('img').load(function () { + console.log('image load successful'); +}); +``` + +您也可以检查，如果一个特定的形象已被用一个ID或类替换``标签加载。 + + +
+### 自动修复破碎的形象 + +如果你碰巧发现网站上的残缺的图像链接一个取代他们可以是一个痛苦。这一段简单的代码可以节省很多麻烦： + +```javascript +$('img').on('error', function () { + if(!$(this).hasClass('broken-image')) { + $(this).prop('src', 'img/broken.png').addClass('broken-image'); + } +}); +``` + +即使你没有任何断开的链接，这将不会做任何伤害。 + + +
+### 切换悬停类 + +比方说，你想改变视觉可点击元素的页面上，当用户将鼠标悬停在它。您可以将类添加到你的元素，当用户徘徊;用户停止徘徊时删除类： + +```javascript +$('.btn').hover(function () { + $(this).addClass('hover'); +}, function () { + $(this).removeClass('hover'); +}); +``` + +你只需要添加必要的CSS。如果你想要一个更_simpler_方式使用`toggleClass`方法： + +```javascript +$('.btn').hover(function () { + $(this).toggleClass('hover'); +}); +``` + +**注：** CSS可能在这种情况下，更快的解决方案，但它仍然是值得的知道这一点。 + + +
+### 禁用输入字段 + +有时你可能要直到用户执行特定操作（例如，勾选“我已阅读条款”复选框）提交被禁用的形式或它的文本输入中的一个按钮。在`disabled`属性添加到您的输入，所以你可以在需要时启用它： + +```javascript +$('input[type="submit"]').prop('disabled', true); +``` + +所有你需要做的是在输入再次运行`prop`方法，但`disabled`的值设置为`false`： + +```javascript +$('input[type="submit"]').prop('disabled', false); +``` + + + +### 停止路径的负载 + +有时候，你不想链接到特定网页，也没有重新加载页面;你可能希望他们做别的事情一样触发一些其他的脚本。这将做防止默认操作的技巧： + +```javascript +$('a.no-link').click(function (e) { + e.preventDefault(); +}); +``` + + +
+### 高速缓存jquery选择 + +想想有多少次你一遍又一遍地在任何项目中再次写入相同的选择。每个`$('.element')`选择有每次搜索整个DOM，如果不管选择以前有运行。相反，运行一次选择器和存储在变量的结果： + +```javascript +var blocks = $('#blocks').find('li'); +``` + +现在你可以使用任何你想要的`blocks`变量，而不必每次搜索DOM： + +```javascript +$('#hideBlocks').click(function () { + blocks.fadeOut(); +}); + +$('#showBlocks').click(function () { + blocks.fadeIn(); +}); +``` + +缓存jQuery选择器是一种简单的性能增益。 + + +
+### 切换淡入/幻灯片 + +滑动和衰落都是我们用很多东西在我们使用jQuery的动画。你可能只是想表明一个元素，当用户点击的东西，这使得`fadeIn`和`slideDown`方法完善。但是，如果你想要的元素出现在第一次点击，然后消失在第二本会工作得很好： + +```javascript +// Fade +$('.btn').click(function () { + $('.element').fadeToggle('slow'); +}); + +// Toggle +$('.btn').click(function () { + $('.element').slideToggle('slow'); +}); +``` + + +
+### 简单手风琴 + +这是一个快速手风琴一个简单的方法： + +```javascript +// Close all panels +$('#accordion').find('.content').hide(); + +// Accordion +$('#accordion').find('.accordion-header').click(function () { + var next = $(this).next(); + next.slideToggle('fast'); + $('.content').not(next).slideUp('fast'); + return false; +}); +``` + +通过添加这个脚本你真正需要在网页上做的是必要的HTML去得到这个工作。 + + +
+### 让两个div相同的高度 + +有时候，你会想两个div具有相同的高度，无论他们有他们什么内容： + +```javascript +$('.div').css('min-height', $('.main-div').height()); +``` + +本示例设置了`min-height`这意味着它可以比主分区越大，但从来没有变小。然而，更灵活的方法是循环在一组的元素，并设置高度最高的元件的高度： + +```javascript +var $columns = $('.column'); +var height = 0; +$columns.each(function () { + if ($(this).height() > height) { + height = $(this).height(); + } +}); +$columns.height(height); +``` + +如果希望_all_列具有相同的高度： + +```javascript +var $rows = $('.same-height-columns'); +$rows.each(function () { + $(this).find('.column').height($(this).height()); +}); +``` + + + +### 在新标签中打开外部链接/窗 + +打开外部链接在新的浏览器标签或窗口，并确保在同一起源于同一个标签或窗口打开链接： + +```javascript +$('a[href^="http"]').attr('target', '_blank'); +$('a[href^="//"]').attr('target', '_blank'); +$('a[href^="' + window.location.origin + '"]').attr('target', '_self'); +``` + +**注：** `window.location.origin`不IE10工作。 [此修复程序](http://tosbourn.com/a-fix-for-window-location-origin-in-internet-explorer/) 主罚问题的照顾。 + + +
+### 查找元素通过短信 + +通过jQuery中使用`contains()`选择，你可以找到在元素内容的文字。如果文本不存在，该元素将被隐藏： + +```javascript +var search = $('#search').val(); +$('div:not(:contains("' + search + '"))').hide(); +``` + +
+### 上触发能见度变化 + +触发JavaScript的用户不再集中在选项卡上，或重新调整选项卡上： + +```javascript +$(document).on('visibilitychange', function (e) { + if (e.target.visibilityState === 'visible') { + console.log('Tab is now in view!'); + } else if (e.target.visibilityState === 'hidden') { + console.log('Tab is now hidden!'); + } +}); +``` + + +
+### AJAX调用错误处理 + +当Ajax调用返回404或500错误的错误处理程序将被执行。如果没有定义的处理程序，其他的jQuery代码可能就失效了。定义一个全局的Ajax错误处理程序： + +```javascript +$(document).ajaxError(function (e, xhr, settings, error) { + console.log(error); +}); +``` + + +
+### 连锁插件调用 + +jQuery的允许“链接”插件的方法调用，以减轻反复查询DOM并创建多个jQuery的对象的过程。比方说，下面的代码片段代表了你的插件方法调用： + +```javascript +$('#elem').show(); +$('#elem').html('bla'); +$('#elem').otherStuff(); +``` + +这可以通过链接可以大大提高： + +```javascript +$('#elem') + .show() + .html('bla') + .otherStuff(); +``` + +另一种方法是缓存元素的变量（用 `$` 前缀）： + + +```javascript +var $elem = $('#elem'); +$elem.hide(); +$elem.html('bla'); +$elem.otherStuff(); +``` + +无论链接和jQuery的[缓存](#缓存的jQuery选择器)方法是导致更短，更快的代码的最佳实践。 + + +
+### 排序列表项按字母顺序 + +比方说，你结束了在列表中的项目太多。也许内容是由CMS生成并希望他们字母顺序： + +```javascript +var ul = $('#list'), +lis = $('li', ul).get(); + +lis.sort(function (a, b) { + return ($(a).text().toUpperCase() < $(b).text().toUpperCase()) ? -1 : 1; +}); + +ul.append(lis); +``` + +你去那里！ + + +## 支持 + +当前版本的Chrome，火狐，Safari，歌剧，EDGE和IE11的。 \ No newline at end of file From b2031f9fae2f41a0fbbba688e3dbc38c09711fa0 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Wed, 27 Apr 2016 17:11:37 -0400 Subject: [PATCH 035/135] =?UTF-8?q?Fixed=20links=20=F0=9F=91=B7?= =?UTF-8?q?=F0=9F=8F=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- translations/zh-CN/README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/translations/zh-CN/README.md b/translations/zh-CN/README.md index 96bef74..5cdcc6c 100644 --- a/translations/zh-CN/README.md +++ b/translations/zh-CN/README.md @@ -25,14 +25,14 @@ 1. [停止路径的负载](#stop-the-loading-of-links) 1. [缓存jquery选择](#cache-jquery-selectors) 1. [淡入淡出切换/幻灯片](#toggle-fadeslide) -1. [简单手风琴(#simple-accordion) +1. [简单手风琴](#simple-accordion) 1. [让两个div相同的高度](#make-two-divs-the-same-height) 1. [打开外部链接在新标签/窗口](#open-external-links-in-new-tabwindow) 1. [查找元素通过短信](#find-element-by-text) 1. [可见性改变触发器](#trigger-on-visibility-change) -1. [Ajax调用错误处理(#ajax-call-error-handling) -1. [连锁插件调用(#chain-plugin-calls) -1. [排序列表项按字母顺序(#sort-list-items-alphabetically) +1. [Ajax调用错误处理](#ajax-call-error-handling) +1. [连锁插件调用](#chain-plugin-calls) +1. [排序列表项按字母顺序](#sort-list-items-alphabetically)
From d4d07a699c62a526f9ffc9915f0b583053b1d5df Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Sat, 30 Apr 2016 19:40:14 -0400 Subject: [PATCH 036/135] =?UTF-8?q?Added=20translations=20to=20table=20of?= =?UTF-8?q?=20contents=20=F0=9F=8F=84=F0=9F=8F=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/README.md b/README.md index 7556d39..9057e7e 100644 --- a/README.md +++ b/README.md @@ -9,6 +9,7 @@ A collection of simple tips to help up your jQuery game. * [Tips](#tips) * [Support](#support) +* [Translations](#translations) * [Contribution Guidelines](CONTRIBUTING.md) @@ -353,3 +354,10 @@ There you go! ## Support Current versions of Chrome, Firefox, Safari, Opera, Edge, and IE11. + + +## Translations + +* [Español](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/es-ES) +* [Français](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/fr-FR) +* [简体中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-CN) From 67b91997aac848fc4d03e5d0c6e312b5d32a9715 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Mon, 2 May 2016 16:46:33 -0400 Subject: [PATCH 037/135] =?UTF-8?q?Added=20links=20back=20to=20ToC=20?= =?UTF-8?q?=F0=9F=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 38 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/README.md b/README.md index 9057e7e..6603232 100644 --- a/README.md +++ b/README.md @@ -49,6 +49,9 @@ if (typeof jQuery == 'undefined') { Now you're off... +[back to table of contents](#table-of-contents) + + ### Back to Top Button By using the `animate` and `scrollTop` methods in jQuery you don't need a plugin to create a simple scroll-to-top animation: @@ -70,6 +73,8 @@ Changing the `scrollTop` value changes where you wants the scrollbar to land. Al **Note:** Watch for some [buggy behavior](https://github.com/jquery/api.jquery.com/issues/417) with `scrollTop`. +[back to table of contents](#table-of-contents) + ### Preload Images @@ -85,6 +90,8 @@ $.preloadImages = function () { $.preloadImages('img/hover-on.png', 'img/hover-off.png'); ``` +[back to table of contents](#table-of-contents) + ### Checking If Images Are Loaded @@ -98,6 +105,8 @@ $('img').load(function () { You can also check if one particular image has loaded by replacing the `` tag with an ID or class. +[back to table of contents](#table-of-contents) + ### Fix Broken Images Automatically @@ -113,6 +122,8 @@ $('img').on('error', function () { Even if you don't have any broken links, adding this won't do any harm. +[back to table of contents](#table-of-contents) + ### Toggle Classes on Hover @@ -136,6 +147,8 @@ $('.btn').hover(function () { **Note:** CSS may be a faster solution in this case but it's still worthwhile to know this. +[back to table of contents](#table-of-contents) + ### Disabling Input Fields @@ -151,6 +164,8 @@ All you need to do is run the `prop` method again on the input, but set the valu $('input[type="submit"]').prop('disabled', false); ``` +[back to table of contents](#table-of-contents) + ### Stop the Loading of Links @@ -162,6 +177,8 @@ $('a.no-link').click(function (e) { }); ``` +[back to table of contents](#table-of-contents) + ### Cache jQuery Selectors @@ -185,6 +202,8 @@ $('#showBlocks').click(function () { Caching jQuery selectors are an easy performance gain. +[back to table of contents](#table-of-contents) + ### Toggle Fade/Slide @@ -202,6 +221,8 @@ $('.btn').click(function () { }); ``` +[back to table of contents](#table-of-contents) + ### Simple Accordion @@ -222,6 +243,8 @@ $('#accordion').find('.accordion-header').click(function () { By adding this script all you really needs to do on your web page is the necessary HTML go get this working. +[back to table of contents](#table-of-contents) + ### Make Two Divs the Same Height @@ -253,6 +276,8 @@ $rows.each(function () { }); ``` +[back to table of contents](#table-of-contents) + ### Open External Links in New Tab/Window @@ -266,6 +291,8 @@ $('a[href^="' + window.location.origin + '"]').attr('target', '_self'); **Note:** `window.location.origin` doesn't work in IE10. [This fix](http://tosbourn.com/a-fix-for-window-location-origin-in-internet-explorer/) takes care of the issue. +[back to table of contents](#table-of-contents) + ### Find Element By Text @@ -276,6 +303,9 @@ var search = $('#search').val(); $('div:not(:contains("' + search + '"))').hide(); ``` +[back to table of contents](#table-of-contents) + + ### Trigger on Visibility Change Trigger JavaScript when the user is no longer focusing on a tab, or refocuses on a tab: @@ -290,6 +320,8 @@ $(document).on('visibilitychange', function (e) { }); ``` +[back to table of contents](#table-of-contents) + ### Ajax Call Error Handling @@ -301,6 +333,8 @@ $(document).ajaxError(function (e, xhr, settings, error) { }); ``` +[back to table of contents](#table-of-contents) + ### Chain Plugin Calls @@ -332,6 +366,8 @@ $elem.otherStuff(); Both chaining and [caching](#cache-jquery-selectors) methods in jQuery are best practices that lead to shorter and faster code. +[back to table of contents](#table-of-contents) + ### Sort List Items Alphabetically @@ -350,6 +386,8 @@ ul.append(lis); There you go! +[back to table of contents](#table-of-contents) + ## Support From e1185d27d5c31812e752170ff8a6eb25f34b4ef0 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Mon, 2 May 2016 17:12:13 -0400 Subject: [PATCH 038/135] =?UTF-8?q?Added=20links=20to=20ToC=20=F0=9F=9A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- translations/es-ES/README.md | 47 ++++++++++++++++++++++++++++++++---- translations/fr-FR/README.md | 46 ++++++++++++++++++++++++++++++++--- translations/zh-CN/README.md | 38 +++++++++++++++++++++++++++++ 3 files changed, 122 insertions(+), 9 deletions(-) diff --git a/translations/es-ES/README.md b/translations/es-ES/README.md index 0e4edb9..574e60c 100644 --- a/translations/es-ES/README.md +++ b/translations/es-ES/README.md @@ -5,6 +5,7 @@ Una colección de consejos simples para ayudar a su juego jQuery. > Para otros grandes listas echa un vistazo a [@sindresorhus](https://github.com/sindresorhus/)'s lista curada de [listas impresionantes](https://github.com/sindresorhus/awesome/). +
## Tabla de contenido * [Tips](#consejos) @@ -49,8 +50,10 @@ if (typeof jQuery == 'undefined') { Ahora que estás fuera... +[volver al índice de contenidos](#table-of-contents) -
+ +
### Volver al botón de inicio Mediante el uso de la `animate` y métodos `scrollTop` en jQuery que no es necesario un plugin para crear una animación simple-scroll-a arriba: @@ -70,7 +73,9 @@ $('.top').click(function (e) { El cambio de los cambios de valor `scrollTop` donde se quiere que la barra de desplazamiento a la tierra. Todo lo que realmente está haciendo es animar el cuerpo del documento a lo largo de 800 milisegundos hasta que se desplaza a la parte superior del documento. -** Nota: ** ve por alguna [comportamiento incorrecto](https://github.com/jquery/api.jquery.com/issues/417) con `scrollTop`. +**Nota:** ve por alguna [comportamiento incorrecto](https://github.com/jquery/api.jquery.com/issues/417) con `scrollTop`. + +[volver al índice de contenidos](#table-of-contents)
@@ -88,6 +93,8 @@ $.preloadImages = function () { $.preloadImages('img/hover-on.png', 'img/hover-off.png'); ``` +[volver al índice de contenidos](#table-of-contents) +
### Comprobación Si las imágenes se cargan @@ -102,6 +109,8 @@ $('img').load(function () { También puede comprobar si una imagen en particular se ha cargado mediante la sustitución de la etiqueta `` con un ID o clase. +[volver al índice de contenidos](#table-of-contents) +
### Corregir imágenes automáticamente rotas @@ -118,6 +127,8 @@ $('img').on('error', function () { Incluso si usted no tiene ningún enlaces rotos, añadiendo que esto no hará ningún daño. +[volver al índice de contenidos](#table-of-contents) +
### Alternar clases en la libración @@ -139,10 +150,12 @@ $('.btn').hover(function () { $(this).toggleClass('hover'); }); ``` -`` ` +``` **Nota:** CSS puede ser una solución más rápida en este caso, pero es todavía vale la pena saber esto. +[volver al índice de contenidos](#table-of-contents) +
### Desactivación de campos de entrada @@ -159,6 +172,8 @@ Todo lo que necesita hacer es ejecutar el método `prop` otra vez en la entrada, $('input[type="submit"]').prop('disabled', false); ``` +[volver al índice de contenidos](#table-of-contents) + div> ### Detener la carga de Enlaces @@ -171,6 +186,8 @@ $('a.no-link').click(function (e) { }); ``` +[volver al índice de contenidos](#table-of-contents) +
### de caché de jQuery selectores @@ -181,7 +198,6 @@ Piense en cuántas veces se escribe el mismo selector una y otra vez en cualquie var blocks = $('#blocks').find('li'); ``` - Ahora se puede utilizar la variable `blocks` donde quieras sin tener que buscar el DOM en cada ocasión: ```javascript @@ -196,6 +212,8 @@ $('#showBlocks').click(function () { El almacenamiento en caché selectores de jQuery son una ganancia de rendimiento fácil. +[volver al índice de contenidos](#table-of-contents) +
### De palanca de fundido / Slide @@ -214,6 +232,8 @@ $('.btn').click(function () { }); ``` +[volver al índice de contenidos](#table-of-contents) +
### Acordeón simple @@ -235,6 +255,8 @@ $('#accordion').find('.accordion-header').click(function () { Mediante la adición de este script lo único que tiene que hacer en su página web es el HTML necesario ir a buscar este trabajo. +[volver al índice de contenidos](#table-of-contents) +
### Haga dos Divs la misma altura @@ -267,6 +289,8 @@ $rows.each(function () { }); ``` +[volver al índice de contenidos](#table-of-contents) + ### Abrir enlaces externos en una nueva pestaña / ventana @@ -281,6 +305,8 @@ $('a[href^="' + window.location.origin + '"]').attr('target', '_self'); **Nota:** `window.location.origin` no funciona en IE10. [Esta corrección](http://tosbourn.com/a-fix-for-window-location-origin-in-internet-explorer/) se ocupa de la cuestión. +[volver al índice de contenidos](#table-of-contents) +
### Buscar elemento Por Texto @@ -292,6 +318,9 @@ var search = $('#search').val(); $('div:not(:contains("' + search + '"))').hide(); ``` +[volver al índice de contenidos](#table-of-contents) + +
### Visibilidad gatillo de Cambio @@ -307,6 +336,9 @@ $(document).on('visibilitychange', function (e) { }); ``` +[volver al índice de contenidos](#table-of-contents) + +
### Control de errores de llamada Ajax @@ -318,6 +350,8 @@ $(document).ajaxError(function (e, xhr, settings, error) { }); ``` +[volver al índice de contenidos](#table-of-contents) +
### llamadas Plugin Cadena @@ -348,9 +382,10 @@ $elem.html('bla'); $elem.otherStuff(); ``` - Ambos métodos [almacenamiento en caché](#cache-jquery-selectors) en el encadenamiento y son las mejores prácticas que conducen al código corto y más rápido. +[volver al índice de contenidos](#table-of-contents) +
### ordenar la lista de elementos alfabéticamente @@ -370,6 +405,8 @@ ul.append(lis); Hay que ir! +[volver al índice de contenidos](#table-of-contents) + ## Apoyo diff --git a/translations/fr-FR/README.md b/translations/fr-FR/README.md index bdb54a0..6ff3f51 100644 --- a/translations/fr-FR/README.md +++ b/translations/fr-FR/README.md @@ -5,6 +5,7 @@ Une collection de conseils simples pour aider votre jeu jQuery. > Pour les autres grandes listes vérifier [@sindresorhus](https://github.com/sindresorhus/) de la liste curated des [listes impressionnantes](https://github.com/sindresorhus/awesome/). +
## Table des matières * [Conseils](#conseils) @@ -49,6 +50,8 @@ if (typeof jQuery == 'undefined') { Maintenant, vous êtes hors ... +[retour à la table des matières](#table-of-contents) +
### Haut de la page Bouton @@ -70,7 +73,9 @@ $('.top').click(function (e) { Modification des valeur change `scrollTop` où vous veut le scrollbar à la terre. Tout ce que vous faites vraiment est d'animer le corps du document tout au long de 800 millisecondes jusqu'à ce qu'elle défile vers le haut du document. -** Note: ** Surveillez certains [comportement bogué](https://github.com/jquery/api.jquery.com/issues/417) avec `scrollTop`. +**Remarque:** Surveillez certains [comportement bogué](https://github.com/jquery/api.jquery.com/issues/417) avec `scrollTop`. + +[retour à la table des matières](#table-of-contents)
@@ -88,6 +93,8 @@ $.preloadImages = function () { $.preloadImages('img/hover-on.png', 'img/hover-off.png'); ``` +[retour à la table des matières](#table-of-contents) +
### Vérification Si les images sont chargées @@ -102,6 +109,8 @@ $('img').load(function () { Vous pouvez également vérifier si une image particulière a été chargé par le remplacement du `` tag avec un ID ou classe. +[retour à la table des matières](#table-of-contents) +
### Fix Broken Images automatiquement @@ -118,6 +127,8 @@ $('img').on('error', function () { Même si vous n'avez pas de liens brisés, ajoutant cela ne fera pas de mal. +[retour à la table des matières](#table-of-contents) +
### Basculer Classes sur Hover @@ -140,7 +151,9 @@ $('.btn').hover(function () { }); ``` -**Note:** CSS peut être une solution plus rapide dans ce cas, mais il est toujours intéressant de savoir. +**Remarque:** CSS peut être une solution plus rapide dans ce cas, mais il est toujours intéressant de savoir. + +[retour à la table des matières](#table-of-contents)
@@ -158,6 +171,8 @@ Tout ce que vous devez faire est de lancer la méthode `prop` à nouveau sur l'e $('input[type="submit"]').prop('disabled', false); ``` +[retour à la table des matières](#table-of-contents) + ### Arrêter le chargement des Liens @@ -170,6 +185,8 @@ $('a.no-link').click(function (e) { }); ``` +[retour à la table des matières](#table-of-contents) +
### Cache jQuery sélecteurs @@ -194,8 +211,10 @@ $('#showBlocks').click(function () { sélecteurs Caching jQuery sont un gain de performance facile. +[retour à la table des matières](#table-of-contents) -
+ +
### Basculer Fade / Slide Coulissantes et à la décoloration sont quelque chose que nous utilisons beaucoup dans nos animations avec jQuery. Vous voudrez peut-être juste pour montrer un élément lorsqu'un utilisateur clique sur quelque chose, ce qui rend les méthodes `slideDown` et `fadeIn` parfait. Mais si vous voulez que l'élément à apparaître sur le premier clic et puis disparaissent sur le second cela fonctionne très bien: @@ -212,6 +231,8 @@ $('.btn').click(function () { }); ``` +[retour à la table des matières](#table-of-contents) +
### Accordéon Simple @@ -233,6 +254,8 @@ $('#accordion').find('.accordion-header').click(function () { En ajoutant ce script tout ce que vous a vraiment besoin de le faire sur votre page Web est le HTML nécessaire aller chercher ce travail. +[retour à la table des matières](#table-of-contents) +
### Faire deux Divs la même hauteur @@ -265,6 +288,8 @@ $rows.each(function () { }); ``` +[retour à la table des matières](#table-of-contents) + ### Ouvrez Liens externes dans un nouvel onglet / fenêtre @@ -277,7 +302,9 @@ $('a[href^="//"]').attr('target', '_blank'); $('a[href^="' + window.location.origin + '"]').attr('target', '_self'); ``` -** Note:** `window.location.origin` ne fonctionne pas dans IE10. [Ce correctif](http://tosbourn.com/a-fix-for-window-location-origin-in-internet-explorer/) prend soin de la question. +**Remarque:** `window.location.origin` ne fonctionne pas dans IE10. [Ce correctif](http://tosbourn.com/a-fix-for-window-location-origin-in-internet-explorer/) prend soin de la question. + +[retour à la table des matières](#table-of-contents)
@@ -290,6 +317,9 @@ var search = $('#search').val(); $('div:not(:contains("' + search + '"))').hide(); ``` +[retour à la table des matières](#table-of-contents) + +
### Déclenchement de la visibilité Change @@ -305,6 +335,8 @@ $(document).on('visibilitychange', function (e) { }); ``` +[retour à la table des matières](#table-of-contents) +
### Gestion des erreurs Ajax Appel @@ -317,6 +349,8 @@ $(document).ajaxError(function (e, xhr, settings, error) { }); ``` +[retour à la table des matières](#table-of-contents) +
### appels Plugin Chain @@ -349,6 +383,8 @@ $elem.otherStuff(); Les deux chaînage et [cache](#jquery-sélecteurs cache-) méthodes jQuery sont les meilleures pratiques qui conduisent à un code plus court et plus rapide. +[retour à la table des matières](#table-of-contents) +
### Trier Liste Articles alphabétiquement @@ -368,6 +404,8 @@ ul.append(lis); Voilà! +[retour à la table des matières](#table-of-contents) + ## Soutien diff --git a/translations/zh-CN/README.md b/translations/zh-CN/README.md index 5cdcc6c..d95c85c 100644 --- a/translations/zh-CN/README.md +++ b/translations/zh-CN/README.md @@ -5,6 +5,7 @@ > 对于其他大名单退房 [@sindresorhus](https://github.com/sindresorhus/)的策展的名单 [真棒名单](https://github.com/sindresorhus/awesome/). +
## 目录 * [温馨提示](＃提示) @@ -50,6 +51,8 @@ if (typeof jQuery == 'undefined') { 现在你是关闭... +[回目录](#table-of-contents) +
### 返回顶部按钮 @@ -73,6 +76,8 @@ $('.top').click(function (e) { **注：** 观看一些 [错误行为](https://github.com/jquery/api.jquery.com/issues/417) 用 `scrollTop`。 +[回目录](#table-of-contents) +
### 预先载入图像 @@ -89,6 +94,8 @@ $.preloadImages = function () { $.preloadImages('img/hover-on.png', 'img/hover-off.png'); ``` +[回目录](#table-of-contents) +
### 检查如果图像加载 @@ -103,6 +110,8 @@ $('img').load(function () { 您也可以检查，如果一个特定的形象已被用一个ID或类替换``标签加载。 +[回目录](#table-of-contents) +
### 自动修复破碎的形象 @@ -119,6 +128,8 @@ $('img').on('error', function () { 即使你没有任何断开的链接，这将不会做任何伤害。 +[回目录](#table-of-contents) +
### 切换悬停类 @@ -143,6 +154,8 @@ $('.btn').hover(function () { **注：** CSS可能在这种情况下，更快的解决方案，但它仍然是值得的知道这一点。 +[回目录](#table-of-contents) +
### 禁用输入字段 @@ -159,6 +172,8 @@ $('input[type="submit"]').prop('disabled', true); $('input[type="submit"]').prop('disabled', false); ``` +[回目录](#table-of-contents) + ### 停止路径的负载 @@ -171,6 +186,8 @@ $('a.no-link').click(function (e) { }); ``` +[回目录](#table-of-contents) +
### 高速缓存jquery选择 @@ -195,6 +212,8 @@ $('#showBlocks').click(function () { 缓存jQuery选择器是一种简单的性能增益。 +[回目录](#table-of-contents) +
### 切换淡入/幻灯片 @@ -213,6 +232,8 @@ $('.btn').click(function () { }); ``` +[回目录](#table-of-contents) +
### 简单手风琴 @@ -234,6 +255,8 @@ $('#accordion').find('.accordion-header').click(function () { 通过添加这个脚本你真正需要在网页上做的是必要的HTML去得到这个工作。 +[回目录](#table-of-contents) +
### 让两个div相同的高度 @@ -266,6 +289,8 @@ $rows.each(function () { }); ``` +[回目录](#table-of-contents) + ### 在新标签中打开外部链接/窗 @@ -280,6 +305,8 @@ $('a[href^="' + window.location.origin + '"]').attr('target', '_self'); **注：** `window.location.origin`不IE10工作。 [此修复程序](http://tosbourn.com/a-fix-for-window-location-origin-in-internet-explorer/) 主罚问题的照顾。 +[回目录](#table-of-contents) +
### 查找元素通过短信 @@ -291,6 +318,9 @@ var search = $('#search').val(); $('div:not(:contains("' + search + '"))').hide(); ``` +[回目录](#table-of-contents) + +
### 上触发能见度变化 @@ -306,6 +336,8 @@ $(document).on('visibilitychange', function (e) { }); ``` +[回目录](#table-of-contents) +
### AJAX调用错误处理 @@ -318,6 +350,8 @@ $(document).ajaxError(function (e, xhr, settings, error) { }); ``` +[回目录](#table-of-contents) +
### 连锁插件调用 @@ -351,6 +385,8 @@ $elem.otherStuff(); 无论链接和jQuery的[缓存](#缓存的jQuery选择器)方法是导致更短，更快的代码的最佳实践。 +[回目录](#table-of-contents) +
### 排序列表项按字母顺序 @@ -370,6 +406,8 @@ ul.append(lis); 你去那里！ +[回目录](#table-of-contents) + ## 支持 From c4ea065645b2c1204a723f03a0d7b5d762157ee7 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Tue, 3 May 2016 11:15:23 -0400 Subject: [PATCH 039/135] =?UTF-8?q?Added=20Russian=20translation=20?= =?UTF-8?q?=F0=9F=87=B7=F0=9F=87=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- translations/ru-RU/README.md | 412 +++++++++++++++++++++++++++++++++++ 1 file changed, 412 insertions(+) create mode 100644 translations/ru-RU/README.md diff --git a/translations/ru-RU/README.md b/translations/ru-RU/README.md new file mode 100644 index 0000000..1ade4d6 --- /dev/null +++ b/translations/ru-RU/README.md @@ -0,0 +1,412 @@ +# jQuery Советы должен знать каждый[![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) + +Коллекция простых советов, чтобы помочь вашей игре jQuery. + +> Для других больших списков проверить [@sindresorhus](https://github.com/sindresorhus/~~HEAD=dobj) в Куратор список [удивительных списков](https://github.com/sindresorhus/awesome/). + + +
+## Содержание + +* [Советы](#советы) +* [Поддержка](#поддержка) +* [Вклад Руководство](../../CONTRIBUTING.md) + + +## Советы + +1. [Проверка Если jQuery Loaded](#checking-if-jquery-loaded) +1. [Вернуться к началу Button](#back-to-top-button) +1. [Предварительная загрузка изображений](#preload-images) +1. [Проверка Если изображения загружаются](#checking-if-images-are-loaded) +1. [Автоматически исправлять сломанные изображения](#fix-broken-images-automatically) +1. [Переключение Классы по наведению](#toggle-classes-on-hover) +1. [Отключение поля ввода](#disabling-input-fields) +1. [Прервать загрузку Ссылки](#stop-the-loading-of-links) +1. [Кэш jQuery селекторы](#cache-jquery-selectors) +1. [Переключить увядать / Слайд](#toggle-fadeslide) +1. [Простой Аккордеон](#simple-accordion) +1. [Сделайте два Divs той же высоте](#make-two-divs-the-same-height) +1. [Открытые внешние ссылки в новой вкладке / окне](#open-external-links-in-new-tabwindow) +1. [Найти элемент По тексту](#find-element-by-text) +1. [Запуск по изменению видимости](#trigger-on-visibility-change) +1. [Ajax вызовов Обработка ошибок](#ajax-call-error-handling) +1. [Сеть плагин Вызовы](#chain-plugin-calls) +1. [Сортировка элементов списка по алфавиту](#sort-list-items-alphabetically) + + +
+### Проверка Если jQuery Loaded + +Перед тем, как можно сделать что-нибудь с jQuery в первую очередь необходимо убедиться в том, что загружен: + +```javascript +if (typeof jQuery == 'undefined') { + console.log('jQuery hasn\'t loaded'); +} else { + console.log('jQuery has loaded'); +} +``` + +Теперь вы с ... + +[вернуться к оглавлению](#table-of-contents) + + +
+### Вернуться к началу Button + +С помощью `animate` и методы `scrollTop` в jQuery вам не нужен плагин, чтобы создать простую анимацию прокрутки-вверх: + +```javascript +// Back to top +$('.top').click(function (e) { + e.preventDefault(); + $('html, body').animate({scrollTop: 0}, 800); +}); +``` + +```html + +Back to top +``` + +Изменение изменения значений `scrollTop` где хочет полоса прокрутки на землю. Все, что вы действительно делаете, оживляющий тело документа на протяжении 800 миллисекунд, пока не прокручивается в верхней части документа. + +**Примечание:** Часы для некоторого [поведение багги](https://github.com/jquery/api.jquery.com/issues/417) с `scrollTop`. + +[вернуться к оглавлению](#table-of-contents) + + +
+### Предварительная загрузка изображений + +Если ваш веб-страница использует много изображений, которые не видны изначально (например, при наведении курсора мыши), имеет смысл предварительно загрузить их: + +```javascript +$.preloadImages = function () { + for (var i = 0; i < arguments.length; i++) { + $('').attr('src', arguments[i]); + } +}; + +$.preloadImages('img/hover-on.png', 'img/hover-off.png'); +``` + +[вернуться к оглавлению](#table-of-contents) + + +
+### Проверка Если изображения загружаются + +Иногда вам может понадобиться, чтобы проверить, если ваши изображения будут полностью загружены, чтобы продолжить с вашими сценариями: + +```javascript +$('img').load(function () { + console.log('image load successful'); +}); +``` + +Вы также можете проверить, если один конкретный образ загружен, заменив `` тег с идентификатором или класса. + +[вернуться к оглавлению](#table-of-contents) + + +
+### Автоматически исправлять сломанные изображения + +Если вам посчастливилось найти неработающие ссылки изображение на вашем сайте заменяя их один за другим может быть боль. Этот простой фрагмент кода может сэкономить много головной боли: + +```javascript +$('img').on('error', function () { + if(!$(this).hasClass('broken-image')) { + $(this).prop('src', 'img/broken.png').addClass('broken-image'); + } +}); +``` + +Даже если у вас нет каких-либо неработающие ссылки, добавив, что это не будет никакого вреда. + +[вернуться к оглавлению](#table-of-contents) + + +
+### Переключение Классы по наведению + +Допустим, вы хотите изменить визуальный интерактивными элемент на странице, когда пользователь парит над ним. Вы можете добавить класс к вашему элементу, когда пользователь парит; когда пользователь прекращает зависания удаляет класс: + +```javascript +$('.btn').hover(function () { + $(this).addClass('hover'); +}, function () { + $(this).removeClass('hover'); +}); +``` + +Вам просто нужно добавить необходимые CSS. Если вы хотите еще _simpler_ способ использовать метод `toggleClass`: + +```javascript +$('.btn').hover(function () { + $(this).toggleClass('hover'); +}); +``` + +**Примечание:** CSS может быть более быстрым решением в этом случае, но она по-прежнему стоит знать об этом. + +[вернуться к оглавлению](#table-of-contents) + + +
+### Отключение поля ввода + +Иногда вы можете захотеть кнопку отправки формы или одного из его текстовых материалов, которые будут отключены до тех пор, пока пользователь не выполнил определенное действие (например, проверка "Я прочитал термины" флажок). Добавьте атрибут `disabled` на ваш вход, так что вы можете включить его, когда вы хотите: + +```javascript +$('input[type="submit"]').prop('disabled', true); +``` + +Все, что вам нужно сделать, это запустить метод `prop` снова на входе, но установите значение `disabled` к `false`: + +```javascript +$('input[type="submit"]').prop('disabled', false); +``` + +[вернуться к оглавлению](#table-of-contents) + + + +### Прервать загрузку Ссылки + +Иногда вы не хотите, чтобы ссылки перехода на определенную веб-страницу и не перезагрузите страницу; Вы могли бы хотеть, чтобы они делали что-то еще, как спусковой крючок какой-либо другой сценарий. Это будет делать трюк предотвращения действия по умолчанию: + +```javascript +$('a.no-link').click(function (e) { + e.preventDefault(); +}); +``` + +[вернуться к оглавлению](#table-of-contents) + + +
+### Кэш jQuery селекторы + +Подумайте, сколько раз вы пишете один и тот же селектор снова и снова в любом проекте. Каждый `$('.element')` селектор имеет для поиска по всему DOM каждый раз, независимо от того, что селектор ранее бежать. Вместо этого запустите селектор один раз и сохранить результаты в переменной: + +```javascript +var blocks = $('#blocks').find('li'); +``` + +Теперь вы можете использовать `blocks` переменную туда, куда вы хотите, без необходимости искать DOM-каждый раз, когда: + +```javascript +$('#hideBlocks').click(function () { + blocks.fadeOut(); +}); + +$('#showBlocks').click(function () { + blocks.fadeIn(); +}); +``` + +Кэширование jQuery селекторы легкий выигрыш в производительности. + +[вернуться к оглавлению](#table-of-contents) + + +
+### Переключить увядать / Слайд + +Раздвижные и замирания являются чем-то мы используем много в нашей анимации с jQuery. Вы можете просто хотите, чтобы показать элемент, когда пользователь нажимает что-то, что делает `fadeIn` и методы `slideDown` совершенным. Но если вы хотите этот элемент, чтобы появиться на первый щелчок, а затем исчезают на второй это будет работать просто отлично: + +```javascript +// Fade +$('.btn').click(function () { + $('.element').fadeToggle('slow'); +}); + +// Toggle +$('.btn').click(function () { + $('.element').slideToggle('slow'); +}); +``` + +[вернуться к оглавлению](#table-of-contents) + + +
+### Простой Аккордеон + +Это простой метод для быстрого аккордеона: + +```javascript +// Close all panels +$('#accordion').find('.content').hide(); + +// Accordion +$('#accordion').find('.accordion-header').click(function () { + var next = $(this).next(); + next.slideToggle('fast'); + $('.content').not(next).slideUp('fast'); + return false; +}); +``` + +Добавив этот сценарий все, что вам действительно нужно сделать на вашей веб-странице необходимый HTML пойти получить эту работу. + +[вернуться к оглавлению](#table-of-contents) + + +
+### Сделайте два Divs той же высоте + +Иногда вы будете хотеть две дивы, чтобы иметь такую же высоту, независимо от того, какое содержание они имеют в них: + +```javascript +$('.div').css('min-height', $('.main-div').height()); +``` + +В этом примере задается `min-height`, что означает, что она может быть больше, чем основной DIV, но никогда меньше. Тем не менее, более гибкий метод должен был бы петлю над множеством элементов и установить высоту до высоты самого высокого элемента: + +```javascript +var $columns = $('.column'); +var height = 0; +$columns.each(function () { + if ($(this).height() > height) { + height = $(this).height(); + } +}); +$columns.height(height); +``` + +Если вы хотите _все_ столбцы имеют одинаковую высоту: + +```javascript +var $rows = $('.same-height-columns'); +$rows.each(function () { + $(this).find('.column').height($(this).height()); +}); +``` + +[вернуться к оглавлению](#table-of-contents) + + + +### Открытые внешние ссылки в новой вкладке / окне + +Открыть внешние ссылки в новой вкладке браузера или окна и обеспечить ссылки на того же происхождения, открытой в той же вкладке или окне: + +```javascript +$('a[href^="http"]').attr('target', '_blank'); +$('a[href^="//"]').attr('target', '_blank'); +$('a[href^="' + window.location.origin + '"]').attr('target', '_self'); +``` + +**Примечание:** `window.location.origin` не работает в IE10. [Это исправление](http://tosbourn.com/a-fix-for-window-location-origin-in-internet-explorer/) заботится о выпуске. + +[вернуться к оглавлению](#table-of-contents) + + +
+### Найти элемент По тексту + +При использовании `contains()` селектор в jQuery вы можете найти текст в содержимом элемента. Если текст не существует, то этот элемент будет скрыт: + +```javascript +var search = $('#search').val(); +$('div:not(:contains("' + search + '"))').hide(); +``` + +[вернуться к оглавлению](#table-of-contents) + + +
+### Запуск по изменению видимости + +Запуск JavaScript, когда пользователь больше не фокусируясь на вкладке или перефокусирует на вкладке: + +```javascript +$(document).on('visibilitychange', function (e) { + if (e.target.visibilityState === 'visible') { + console.log('Tab is now in view!'); + } else if (e.target.visibilityState === 'hidden') { + console.log('Tab is now hidden!'); + } +}); +``` + +[вернуться к оглавлению](#table-of-contents) + + +
+### Ajax вызовов Обработка ошибок + +Когда вызов Ajax возвращает ошибку 404 или 500 обработчик ошибок будет выполняться. Если обработчик не определен, другой код jQuery может не работать больше. Определить глобальный обработчик ошибок Ajax: + +```javascript +$(document).ajaxError(function (e, xhr, settings, error) { + console.log(error); +}); +``` + +[вернуться к оглавлению](#table-of-contents) + + +
+### Сеть плагин Вызовы + +jQuery позволяет "сцеплению" плагина метод вызывает смягчить процесс неоднократно запрашивая DOM и создания нескольких объектов jQuery. Скажем, следующий фрагмент кода представляет ваш метод плагин вызовов: + +```javascript +$('#elem').show(); +$('#elem').html('bla'); +$('#elem').otherStuff(); +``` + +Это может быть значительно улучшена с помощью цепочки: + +```javascript +$('#elem') + .show() + .html('bla') + .otherStuff(); +``` + +Альтернативой является кэшировать элемент в переменной (с приставкой `$`): + +```javascript +var $elem = $('#elem'); +$elem.hide(); +$elem.html('bla'); +$elem.otherStuff(); +``` + +Обе цепочки и [кэширования](#cache-jquery-selectors) методы в jQuery являются лучшие практики, которые приводят к более коротким и более быстрый код. + +[вернуться к оглавлению](#table-of-contents) + + +
+### Сортировка элементов списка по алфавиту + +Допустим, вы в конечном итоге с слишком много элементов в списке. Может быть, содержание производится с помощью CMS и вы хотите заказать их в алфавитном порядке: + +```javascript +var ul = $('#list'), +lis = $('li', ul).get(); + +lis.sort(function (a, b) { + return ($(a).text().toUpperCase() < $(b).text().toUpperCase()) ? -1 : 1; +}); + +ul.append(lis); +``` + +Там вы идете! + +[вернуться к оглавлению](#table-of-contents) + + +## Support + +Текущие версии Chrome, Firefox, Safari, Opera, Edge, и IE11. \ No newline at end of file From 48e7cdfde3e57baef39e4bb7103c39ff7bb30c73 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Tue, 3 May 2016 11:16:32 -0400 Subject: [PATCH 040/135] =?UTF-8?q?Added=20link=20to=20Russian=20translati?= =?UTF-8?q?on=20=F0=9F=9A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 6603232..1ee934e 100644 --- a/README.md +++ b/README.md @@ -398,4 +398,5 @@ Current versions of Chrome, Firefox, Safari, Opera, Edge, and IE11. * [Español](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/es-ES) * [Français](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/fr-FR) +* [русский](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/ru-RU) * [简体中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-CN) From 2a85c7a0043c39d61e21cccb568104bf17faba68 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Tue, 3 May 2016 15:36:20 -0400 Subject: [PATCH 041/135] =?UTF-8?q?Minor=20edit=20=E2=9C=8F=EF=B8=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- translations/ru-RU/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/translations/ru-RU/README.md b/translations/ru-RU/README.md index 1ade4d6..1f6d6b7 100644 --- a/translations/ru-RU/README.md +++ b/translations/ru-RU/README.md @@ -1,4 +1,4 @@ -# jQuery Советы должен знать каждый[![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) +# jQuery Советы должен знать каждый [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) Коллекция простых советов, чтобы помочь вашей игре jQuery. From ba341688b086e3b0cb8727ebc570390532a3158e Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Wed, 1 Jun 2016 00:06:50 -0400 Subject: [PATCH 042/135] =?UTF-8?q?Added=20hot=20drama=20=F0=9F=94=A5?= =?UTF-8?q?=F0=9F=98=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 ++ translations/es-ES/README.md | 2 ++ translations/fr-FR/README.md | 2 ++ translations/ru-RU/README.md | 2 ++ translations/zh-CN/README.md | 2 ++ 5 files changed, 10 insertions(+) diff --git a/README.md b/README.md index 1ee934e..ca7102a 100644 --- a/README.md +++ b/README.md @@ -276,6 +276,8 @@ $rows.each(function () { }); ``` +**Note:** This can be done several ways [in CSS](http://codepen.io/AllThingsSmitty/pen/KMPqoO) but depending on what your needs are, knowing how to do this in jQuery is still worthwhile. + [back to table of contents](#table-of-contents) diff --git a/translations/es-ES/README.md b/translations/es-ES/README.md index 574e60c..eb4d35e 100644 --- a/translations/es-ES/README.md +++ b/translations/es-ES/README.md @@ -289,6 +289,8 @@ $rows.each(function () { }); ``` +**Nota:** Esto se puede hacer de varias maneras [en CSS](http://codepen.io/AllThingsSmitty/pen/KMPqoO) pero dependiendo de cuáles son sus necesidades, saber cómo hacer esto en jQuery es todavía vale la pena. + [volver al índice de contenidos](#table-of-contents) diff --git a/translations/fr-FR/README.md b/translations/fr-FR/README.md index 6ff3f51..edc96a5 100644 --- a/translations/fr-FR/README.md +++ b/translations/fr-FR/README.md @@ -288,6 +288,8 @@ $rows.each(function () { }); ``` +**Remarque:** Cela peut se faire de plusieurs façons [CSS](http://codepen.io/AllThingsSmitty/pen/KMPqoO), mais en fonction de vos besoins, de savoir comment faire cela dans jQuery est toujours valable. + [retour à la table des matières](#table-of-contents) diff --git a/translations/ru-RU/README.md b/translations/ru-RU/README.md index 1f6d6b7..778d097 100644 --- a/translations/ru-RU/README.md +++ b/translations/ru-RU/README.md @@ -288,6 +288,8 @@ $rows.each(function () { }); ``` +**Примечание:** Это можно сделать несколькими способами [в CSS](http://codepen.io/AllThingsSmitty/pen/KMPqoO), но в зависимости от того, что ваши потребности, зная, как сделать это в JQuery еще стоит. + [вернуться к оглавлению](#table-of-contents) diff --git a/translations/zh-CN/README.md b/translations/zh-CN/README.md index d95c85c..7982ab0 100644 --- a/translations/zh-CN/README.md +++ b/translations/zh-CN/README.md @@ -289,6 +289,8 @@ $rows.each(function () { }); ``` +**注：**这是可以做到几个方面[在CSS](http://codepen.io/AllThingsSmitty/pen/KMPqoO)，但根据您的需要是什么，知道如何在jQuery中做到这一点还是值得的。 + [回目录](#table-of-contents) From bbe7bb477cd2baf0141efe2084fd6e92d9ea8ff2 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Wed, 1 Jun 2016 09:39:05 -0400 Subject: [PATCH 043/135] =?UTF-8?q?Added=20.on()=20tip=20=F0=9F=9A=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 48 +++++++++++++++++++++++++++--------- translations/es-ES/README.md | 43 ++++++++++++++++++++++++-------- translations/fr-FR/README.md | 45 ++++++++++++++++++++++++--------- translations/ru-RU/README.md | 43 ++++++++++++++++++++++++-------- translations/zh-CN/README.md | 43 ++++++++++++++++++++++++-------- 5 files changed, 169 insertions(+), 53 deletions(-) diff --git a/README.md b/README.md index ca7102a..33b84e8 100644 --- a/README.md +++ b/README.md @@ -16,6 +16,7 @@ A collection of simple tips to help up your jQuery game. ## Tips 1. [Checking If jQuery Loaded](#checking-if-jquery-loaded) +1. [Use `.on()` Binding Instead of `.click()`](#use-on-binding-instead-of-click) 1. [Back to Top Button](#back-to-top-button) 1. [Preload Images](#preload-images) 1. [Checking If Images Are Loaded](#checking-if-images-are-loaded) @@ -52,13 +53,34 @@ Now you're off... [back to table of contents](#table-of-contents) +### Use `.on()` Binding Instead of `.click()` + +Using `.on()` gives you several advantages over using `.click()`, such as the ability to add multiple events... + +```javascript +.on('click tap hover') +``` + +...a binding applies to dynamically created elements, as well (there's no need to manually bind every single element dynamically added to a DOM element)... + +...and the possibility to set a namespace: + +```javascript +.on('click.menuOpening') +``` + +Namespaces give you the power to unbind a specific event (`.off('click.menuOpening')`). + +[back to table of contents](#table-of-contents) + + ### Back to Top Button By using the `animate` and `scrollTop` methods in jQuery you don't need a plugin to create a simple scroll-to-top animation: ```javascript // Back to top -$('.top').click(function (e) { +$('.container').on('click', '.back-to-top', function (e) { e.preventDefault(); $('html, body').animate({scrollTop: 0}, 800); }); @@ -66,7 +88,9 @@ $('.top').click(function (e) { ```html -Back to top +
+ Back to top +
``` Changing the `scrollTop` value changes where you wants the scrollbar to land. All you're really doing is animating the body of the document throughout the course of 800 milliseconds until it scrolls to the top of the document. @@ -98,7 +122,7 @@ $.preloadImages('img/hover-on.png', 'img/hover-off.png'); Sometimes you might need to check if your images have fully loaded in order to continue on with your scripts: ```javascript -$('img').load(function () { +$('img').on('load', function () { console.log('image load successful'); }); ``` @@ -130,7 +154,7 @@ Even if you don't have any broken links, adding this won't do any harm. Let's say you want to change the visual of a clickable element on your page when a user hovers over it. You can add a class to your element when the user is hovering; when the user stops hovering removes the class: ```javascript -$('.btn').hover(function () { +$('.btn').on('hover', function () { $(this).addClass('hover'); }, function () { $(this).removeClass('hover'); @@ -140,7 +164,7 @@ $('.btn').hover(function () { You just need to add the necessary CSS. If you want an even _simpler_ way use the `toggleClass` method: ```javascript -$('.btn').hover(function () { +$('.btn').on('hover', function () { $(this).toggleClass('hover'); }); ``` @@ -172,7 +196,7 @@ $('input[type="submit"]').prop('disabled', false); Sometimes you don't want links to go to a certain web page nor reload the page; you might want them to do something else like trigger some other script. This will do the trick of preventing the default action: ```javascript -$('a.no-link').click(function (e) { +$('a.no-link').on('click', function (e) { e.preventDefault(); }); ``` @@ -191,11 +215,11 @@ var blocks = $('#blocks').find('li'); Now you can use the `blocks` variable wherever you want without having to search the DOM every time: ```javascript -$('#hideBlocks').click(function () { +$('#hideBlocks').on('click', function () { blocks.fadeOut(); }); -$('#showBlocks').click(function () { +$('#showBlocks').on('click', function () { blocks.fadeIn(); }); ``` @@ -211,12 +235,12 @@ Sliding and fading are something we use plenty in our animations with jQuery. Yo ```javascript // Fade -$('.btn').click(function () { +$('.btn').on('click', function () { $('.element').fadeToggle('slow'); }); // Toggle -$('.btn').click(function () { +$('.btn').on('click', function () { $('.element').slideToggle('slow'); }); ``` @@ -233,7 +257,7 @@ This is a simple method for a quick accordion: $('#accordion').find('.content').hide(); // Accordion -$('#accordion').find('.accordion-header').click(function () { +$('#accordion').find('.accordion-header').on('click', function () { var next = $(this).next(); next.slideToggle('fast'); $('.content').not(next).slideUp('fast'); @@ -330,7 +354,7 @@ $(document).on('visibilitychange', function (e) { When an Ajax call returns a 404 or 500 error the error handler will be executed. If the handler isn't defined, other jQuery code might not work anymore. Define a global Ajax error handler: ```javascript -$(document).ajaxError(function (e, xhr, settings, error) { +$(document).on('ajaxError', function (e, xhr, settings, error) { console.log(error); }); ``` diff --git a/translations/es-ES/README.md b/translations/es-ES/README.md index eb4d35e..05cf68f 100644 --- a/translations/es-ES/README.md +++ b/translations/es-ES/README.md @@ -16,6 +16,7 @@ Una colección de consejos simples para ayudar a su juego jQuery. ## Consejos 1. [Verificando jQuery Cargado](#checking-if-jquery-loaded) +1. [Utilice `.on ()` En lugar de unión `.click ()`](#use-on-binding-instead-of-click) 1. [Volver al botón de inicio](#back-to-top-button) 1. [Carga previa de imágenes](#preload-images) 1. [comprobando si las imágenes se cargan](#checking-if-images-are-loaded) @@ -53,6 +54,28 @@ Ahora que estás fuera... [volver al índice de contenidos](#table-of-contents) +
+### Utilice `.on ()` En lugar de unión `.click ()` + +.en El uso de `()` le da varias ventajas sobre el uso de `.click ()`, tales como la capacidad de agregar varios eventos... + +``javascript +.on ('click tap hover) +``` + +...Una unión se aplica a los elementos creados de forma dinámica, así (no hay necesidad de obligar manualmente cada elemento añadido dinámicamente a un elemento DOM) ... + +...Y la posibilidad de configurar un espacio de nombres: + +```javascript +.on('click.menuOpening') +``` + +Los espacios de nombres te dan el poder para desenlazar un evento específico ( `.off('click.menuOpening')`). + +[volver al índice de contenidos](#table-of-contents) + +
### Volver al botón de inicio @@ -60,7 +83,7 @@ Mediante el uso de la `animate` y métodos `scrollTop` en jQuery que no es neces ```javascript // Back to top -$('.top').click(function (e) { +$('.container').on('click', '.back-to-top', function (e) { e.preventDefault(); $('html, body').animate({scrollTop: 0}, 800); }); @@ -102,7 +125,7 @@ $.preloadImages('img/hover-on.png', 'img/hover-off.png'); A veces puede que tenga que comprobar si las imágenes han cargado completamente con el fin de continuar con las secuencias de comandos: ```javascript -$('img').load(function () { +$('img').on('load', function () { console.log('image load successful'); }); ``` @@ -136,7 +159,7 @@ Incluso si usted no tiene ningún enlaces rotos, añadiendo que esto no hará ni Digamos que usted quiere cambiar la visual de un elemento se puede hacer clic en la página cuando un usuario se desplaza sobre él. Usted puede agregar una clase a su elemento cuando el usuario está flotando; cuando el usuario deja flotando elimina la clase: ```javascript -$('.btn').hover(function () { +$('.btn').on('hover', function () { $(this).addClass('hover'); }, function () { $(this).removeClass('hover'); @@ -181,7 +204,7 @@ $('input[type="submit"]').prop('disabled', false); A veces no desea vínculos para ir a una determinada página web, ni volver a cargar la página; es posible que desee que hagan otra cosa, como disparador de otro guión. Esto va a hacer el truco de la prevención de la acción por defecto: ```javascript -$('a.no-link').click(function (e) { +$('a.no-link').on('click', function (e) { e.preventDefault(); }); ``` @@ -201,11 +224,11 @@ var blocks = $('#blocks').find('li'); Ahora se puede utilizar la variable `blocks` donde quieras sin tener que buscar el DOM en cada ocasión: ```javascript -$('#hideBlocks').click(function () { +$('#hideBlocks').on('click', function () { blocks.fadeOut(); }); -$('#showBlocks').click(function () { +$('#showBlocks').on('click', function () { blocks.fadeIn(); }); ``` @@ -222,12 +245,12 @@ Deslizante y la decoloración son algo que usamos un montón en nuestras animaci ```javascript // Fade -$('.btn').click(function () { +$('.btn').on('click', function () { $('.element').fadeToggle('slow'); }); // Toggle -$('.btn').click(function () { +$('.btn').on('click', function () { $('.element').slideToggle('slow'); }); ``` @@ -245,7 +268,7 @@ Este es un método simple para un acordeón rápida: $('#accordion').find('.content').hide(); // Accordion -$('#accordion').find('.accordion-header').click(function () { +$('#accordion').find('.accordion-header').on('click', function () { var next = $(this).next(); next.slideToggle('fast'); $('.content').not(next).slideUp('fast'); @@ -347,7 +370,7 @@ $(document).on('visibilitychange', function (e) { Cuando una llamada Ajax devuelve un error 404 o 500 se ejecutará el gestor de errores. Si no se define el controlador, otro código jQuery podría no funcionar. Definir un controlador global de error de Ajax: ```javascript -$(document).ajaxError(function (e, xhr, settings, error) { +$(document).on('ajaxError', function (e, xhr, settings, error) { console.log(error); }); ``` diff --git a/translations/fr-FR/README.md b/translations/fr-FR/README.md index edc96a5..c921bf6 100644 --- a/translations/fr-FR/README.md +++ b/translations/fr-FR/README.md @@ -15,7 +15,8 @@ Une collection de conseils simples pour aider votre jeu jQuery. ## Conseils -1. [Vérification Si jQuery Loaded](#checking-if-jquery-loaded)) +1. [Vérification Si jQuery Loaded](#checking-if-jquery-loaded) +1. [Utilisez `.on()` Binding Au lieu de `.click()`](#use-on-binding-instead-of-click) 1. [Haut de la page Bouton](#back-to-top-button) 1. [Précharger Images](#preload-images) 1. [Vérification Si les images sont chargées](#checking-if-images-are-loaded) @@ -53,6 +54,28 @@ Maintenant, vous êtes hors ... [retour à la table des matières](#table-of-contents) +
+### Utilisez `.on()` Binding Au lieu de `.click()` + +Utiliser `.on()` vous donne plusieurs avantages par rapport `.click()`, comme la possibilité d'ajouter plusieurs événements... + +```javascript +.on ('click tap hover') +``` + +...Une liaison s'applique à des éléments créés dynamiquement, ainsi (il n'y a pas besoin de se lier manuellement chaque élément dynamiquement ajouté à un élément DOM)... + +...Et la possibilité de définir un espace de noms: + +```javascript +.on ('click.menuOpening') +``` + +Namespaces vous donnent le pouvoir de délier un événement spécifique (`.off('click.menuOpening')`). + +[retour à la table des matières](#table-of-contents) + +
### Haut de la page Bouton @@ -60,7 +83,7 @@ En utilisant le `animate` et méthodes `scrollTop` dans jQuery vous ne pas besoi ```javascript // Back to top -$('.top').click(function (e) { +$('.container').on('click', '.back-to-top', function (e) { e.preventDefault(); $('html, body').animate({scrollTop: 0}, 800); }); @@ -102,7 +125,7 @@ $.preloadImages('img/hover-on.png', 'img/hover-off.png'); Parfois, vous pourriez avoir besoin de vérifier si vos images sont entièrement chargées, afin de continuer avec vos scripts: ```javascript -$('img').load(function () { +$('img').on('load', function () { console.log('image load successful'); }); ``` @@ -136,7 +159,7 @@ Même si vous n'avez pas de liens brisés, ajoutant cela ne fera pas de mal. Disons que vous voulez changer le visuel d'un élément cliquable sur votre page quand un utilisateur survole. Vous pouvez ajouter une classe à votre élément lorsque l'utilisateur est en vol stationnaire; lorsque l'utilisateur arrête planant supprime la classe: ```javascript -$('.btn').hover(function () { +$('.btn').on('hover', function () { $(this).addClass('hover'); }, function () { $(this).removeClass('hover'); @@ -180,7 +203,7 @@ $('input[type="submit"]').prop('disabled', false); Parfois, vous ne voulez pas de liens pour aller à une certaine page Web, ni recharger la page; vous voudrez peut-être qu'ils fassent d'autre comme déclencheur d'un autre script quelque chose. Cela fera l'affaire d'empêcher l'action par défaut: ```javascript -$('a.no-link').click(function (e) { +$('a.no-link').on('click', function (e) { e.preventDefault(); }); ``` @@ -200,11 +223,11 @@ var blocks = $('#blocks').find('li'); Maintenant, vous pouvez utiliser la variable `blocks` où vous voulez sans avoir à chercher les DOM à chaque fois: ```javascript -$('#hideBlocks').click(function () { +$('#hideBlocks').on('click', function () { blocks.fadeOut(); }); -$('#showBlocks').click(function () { +$('#showBlocks').on('click', function () { blocks.fadeIn(); }); ``` @@ -221,12 +244,12 @@ Coulissantes et à la décoloration sont quelque chose que nous utilisons beauco ```javascript // Fade -$('.btn').click(function () { +$('.btn').on('click', function () { $('.element').fadeToggle('slow'); }); // Toggle -$('.btn').click(function () { +$('.btn').on('click', function () { $('.element').slideToggle('slow'); }); ``` @@ -244,7 +267,7 @@ Ceci est une méthode simple pour un accordéon rapide: $('#accordion').find('.content').hide(); // Accordion -$('#accordion').find('.accordion-header').click(function () { +$('#accordion').find('.accordion-header').on('click', function () { var next = $(this).next(); next.slideToggle('fast'); $('.content').not(next).slideUp('fast'); @@ -346,7 +369,7 @@ $(document).on('visibilitychange', function (e) { Lorsqu'un appel Ajax renvoie une erreur 404 ou 500 le gestionnaire d'erreur sera exécutée. Si le gestionnaire ne se définit pas, un autre code jQuery ne fonctionneront plus. Définir un gestionnaire global d'erreur Ajax: ```javascript -$(document).ajaxError(function (e, xhr, settings, error) { +$(document).on('ajaxError', function (e, xhr, settings, error) { console.log(error); }); ``` diff --git a/translations/ru-RU/README.md b/translations/ru-RU/README.md index 778d097..352ca91 100644 --- a/translations/ru-RU/README.md +++ b/translations/ru-RU/README.md @@ -16,6 +16,7 @@ ## Советы 1. [Проверка Если jQuery Loaded](#checking-if-jquery-loaded) +1. [Используйте `.on()` Binding Вместо `.click()`](#use-on-binding-instead-of-click) 1. [Вернуться к началу Button](#back-to-top-button) 1. [Предварительная загрузка изображений](#preload-images) 1. [Проверка Если изображения загружаются](#checking-if-images-are-loaded) @@ -53,6 +54,28 @@ if (typeof jQuery == 'undefined') { [вернуться к оглавлению](#table-of-contents) +
+### Используйте `.on()` Binding Вместо `.click()` + +Используя `.on()` дает ряд преимуществ по сравнению с использованием `.click()`, например, возможность добавлять несколько событий... + +```javascript +.on('click tap hover') +``` + +...Привязка применяется к динамически создаваемые элементы, а также (нет необходимости вручную связывать каждый отдельный элемент динамически добавленный к элементу DOM)... + +...И возможность установить пространство имен: + +```javascript +.on('click.menuOpening') +``` + +Пространства имен дают вам возможность синхронизироваться конкретное событие (`.off('click.menuOpening')`). + +[вернуться к оглавлению](#table-of-contents) + +
### Вернуться к началу Button @@ -60,7 +83,7 @@ if (typeof jQuery == 'undefined') { ```javascript // Back to top -$('.top').click(function (e) { +$('.container').on('click', '.back-to-top', function (e) { e.preventDefault(); $('html, body').animate({scrollTop: 0}, 800); }); @@ -102,7 +125,7 @@ $.preloadImages('img/hover-on.png', 'img/hover-off.png'); Иногда вам может понадобиться, чтобы проверить, если ваши изображения будут полностью загружены, чтобы продолжить с вашими сценариями: ```javascript -$('img').load(function () { +$('img').on('load', function () { console.log('image load successful'); }); ``` @@ -136,7 +159,7 @@ $('img').on('error', function () { Допустим, вы хотите изменить визуальный интерактивными элемент на странице, когда пользователь парит над ним. Вы можете добавить класс к вашему элементу, когда пользователь парит; когда пользователь прекращает зависания удаляет класс: ```javascript -$('.btn').hover(function () { +$('.btn').on('hover', function () { $(this).addClass('hover'); }, function () { $(this).removeClass('hover'); @@ -180,7 +203,7 @@ $('input[type="submit"]').prop('disabled', false); Иногда вы не хотите, чтобы ссылки перехода на определенную веб-страницу и не перезагрузите страницу; Вы могли бы хотеть, чтобы они делали что-то еще, как спусковой крючок какой-либо другой сценарий. Это будет делать трюк предотвращения действия по умолчанию: ```javascript -$('a.no-link').click(function (e) { +$('a.no-link').on('click', function (e) { e.preventDefault(); }); ``` @@ -200,11 +223,11 @@ var blocks = $('#blocks').find('li'); Теперь вы можете использовать `blocks` переменную туда, куда вы хотите, без необходимости искать DOM-каждый раз, когда: ```javascript -$('#hideBlocks').click(function () { +$('#hideBlocks').on('click', function () { blocks.fadeOut(); }); -$('#showBlocks').click(function () { +$('#showBlocks').on('click', function () { blocks.fadeIn(); }); ``` @@ -221,12 +244,12 @@ $('#showBlocks').click(function () { ```javascript // Fade -$('.btn').click(function () { +$('.btn').on('click', function () { $('.element').fadeToggle('slow'); }); // Toggle -$('.btn').click(function () { +$('.btn').on('click', function () { $('.element').slideToggle('slow'); }); ``` @@ -244,7 +267,7 @@ $('.btn').click(function () { $('#accordion').find('.content').hide(); // Accordion -$('#accordion').find('.accordion-header').click(function () { +$('#accordion').find('.accordion-header').on('click', function () { var next = $(this).next(); next.slideToggle('fast'); $('.content').not(next).slideUp('fast'); @@ -346,7 +369,7 @@ $(document).on('visibilitychange', function (e) { Когда вызов Ajax возвращает ошибку 404 или 500 обработчик ошибок будет выполняться. Если обработчик не определен, другой код jQuery может не работать больше. Определить глобальный обработчик ошибок Ajax: ```javascript -$(document).ajaxError(function (e, xhr, settings, error) { +$(document).on('ajaxError', function (e, xhr, settings, error) { console.log(error); }); ``` diff --git a/translations/zh-CN/README.md b/translations/zh-CN/README.md index 7982ab0..33c05a8 100644 --- a/translations/zh-CN/README.md +++ b/translations/zh-CN/README.md @@ -17,6 +17,7 @@ ## 提示 1. [检查是否加载的jQuery](＃checking-if-jquery-loaded) +1. [使用`.on()`绑定`.click()`代替](#use-on-binding-instead-of-click) 1. [返回顶部按钮](#back-to-top-button) 1. [预先载入图像](#preload-images) 1. [检查，如果图像加载](#checking-if-images-are-loaded) @@ -54,6 +55,28 @@ if (typeof jQuery == 'undefined') { [回目录](#table-of-contents) +
+### 使用`.on()`绑定`.click()`代替 + +使用`.on()`给你几个优点比使用`.click()`，如添加多个事件的能力... + +```javascript +.on('click tap hover') +``` + +...绑定适用于动态创建的元素，以及（有没有必要动态添加到DOM元素每一个元素手动绑定）... + +...和可能性来设置一个命名空间: + +```javascript +.on('click.menuOpening') +``` + +命名空间给你解除对特定事件(`.off('click.menuOpening')`)的权力。 + +[回目录](#table-of-contents) + +
### 返回顶部按钮 @@ -61,7 +84,7 @@ if (typeof jQuery == 'undefined') { ```javascript // Back to top -$('.top').click(function (e) { +$('.container').on('click', '.back-to-top', function (e) { e.preventDefault(); $('html, body').animate({scrollTop: 0}, 800); }); @@ -103,7 +126,7 @@ $.preloadImages('img/hover-on.png', 'img/hover-off.png'); 有时你可能需要检查，如果您的影像出现，以便继续与脚本满载： ```javascript -$('img').load(function () { +$('img').on('load', function () { console.log('image load successful'); }); ``` @@ -137,7 +160,7 @@ $('img').on('error', function () { 比方说，你想改变视觉可点击元素的页面上，当用户将鼠标悬停在它。您可以将类添加到你的元素，当用户徘徊;用户停止徘徊时删除类： ```javascript -$('.btn').hover(function () { +$('.btn').on('hover', function () { $(this).addClass('hover'); }, function () { $(this).removeClass('hover'); @@ -181,7 +204,7 @@ $('input[type="submit"]').prop('disabled', false); 有时候，你不想链接到特定网页，也没有重新加载页面;你可能希望他们做别的事情一样触发一些其他的脚本。这将做防止默认操作的技巧： ```javascript -$('a.no-link').click(function (e) { +$('a.no-link').on('click', function (e) { e.preventDefault(); }); ``` @@ -201,11 +224,11 @@ var blocks = $('#blocks').find('li'); 现在你可以使用任何你想要的`blocks`变量，而不必每次搜索DOM： ```javascript -$('#hideBlocks').click(function () { +$('#hideBlocks').on('click', function () { blocks.fadeOut(); }); -$('#showBlocks').click(function () { +$('#showBlocks').on('click', function () { blocks.fadeIn(); }); ``` @@ -222,12 +245,12 @@ $('#showBlocks').click(function () { ```javascript // Fade -$('.btn').click(function () { +$('.btn').on('click', function () { $('.element').fadeToggle('slow'); }); // Toggle -$('.btn').click(function () { +$('.btn').on('click', function () { $('.element').slideToggle('slow'); }); ``` @@ -245,7 +268,7 @@ $('.btn').click(function () { $('#accordion').find('.content').hide(); // Accordion -$('#accordion').find('.accordion-header').click(function () { +$('#accordion').find('.accordion-header').on('click', function () { var next = $(this).next(); next.slideToggle('fast'); $('.content').not(next).slideUp('fast'); @@ -347,7 +370,7 @@ $(document).on('visibilitychange', function (e) { 当Ajax调用返回404或500错误的错误处理程序将被执行。如果没有定义的处理程序，其他的jQuery代码可能就失效了。定义一个全局的Ajax错误处理程序： ```javascript -$(document).ajaxError(function (e, xhr, settings, error) { +$(document).on('ajaxError', function (e, xhr, settings, error) { console.log(error); }); ``` From 10f870b09566231f28c30c3355660038d5fb379b Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Wed, 1 Jun 2016 09:40:25 -0400 Subject: [PATCH 044/135] =?UTF-8?q?Updated=20code=20=F0=9F=91=B7?= =?UTF-8?q?=F0=9F=8F=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/ajax-call-error-handling.js | 2 +- js/back-to-top.js | 4 ++-- js/back-to-top.min.js | 1 + js/cache-jquery-selectors.js | 4 ++-- js/checking-if-images-are-loaded.js | 2 +- js/simple-accordion.js | 2 +- js/stop-the-loading-of-links.js | 2 +- js/toggle-classes-on-hover.js | 2 +- js/toggle-fade-slide.js | 4 ++-- 9 files changed, 12 insertions(+), 11 deletions(-) create mode 100644 js/back-to-top.min.js diff --git a/js/ajax-call-error-handling.js b/js/ajax-call-error-handling.js index dc05851..e5efd24 100644 --- a/js/ajax-call-error-handling.js +++ b/js/ajax-call-error-handling.js @@ -1,4 +1,4 @@ // Ajax call error handling -$(document).ajaxError(function (e, xhr, settings, error) { +$(document).on('ajaxError', function (e, xhr, settings, error) { console.log(error); }); \ No newline at end of file diff --git a/js/back-to-top.js b/js/back-to-top.js index 1329e03..bbcde67 100644 --- a/js/back-to-top.js +++ b/js/back-to-top.js @@ -1,5 +1,5 @@ -// Back to top button -$('.top').click(function (e) { +// Back to top +$('.container').on('click', '.back-to-top', function (e) { e.preventDefault(); $('html, body').animate({scrollTop: 0}, 800); }); \ No newline at end of file diff --git a/js/back-to-top.min.js b/js/back-to-top.min.js new file mode 100644 index 0000000..44f3dcc --- /dev/null +++ b/js/back-to-top.min.js @@ -0,0 +1 @@ +$(".container").on("click",".back-to-top",function(o){o.preventDefault(),$("html, body").animate({scrollTop:0},800)}); \ No newline at end of file diff --git a/js/cache-jquery-selectors.js b/js/cache-jquery-selectors.js index 9e9ac76..73c98b7 100644 --- a/js/cache-jquery-selectors.js +++ b/js/cache-jquery-selectors.js @@ -1,10 +1,10 @@ // Cache jQuery selectors var blocks = $('#blocks').find('li'); -$('#hideBlocks').click(function () { +$('#hideBlocks').on('click', function () { blocks.fadeOut(); }); -$('#showBlocks').click(function () { +$('#showBlocks').on('click', function () { blocks.fadeIn(); }); \ No newline at end of file diff --git a/js/checking-if-images-are-loaded.js b/js/checking-if-images-are-loaded.js index 448fa96..81f120c 100644 --- a/js/checking-if-images-are-loaded.js +++ b/js/checking-if-images-are-loaded.js @@ -1,4 +1,4 @@ // Checking if images are loaded -$('img').load(function () { +$('img').on('load', function () { console.log('image load successful'); }); \ No newline at end of file diff --git a/js/simple-accordion.js b/js/simple-accordion.js index 9af4daa..1044cfa 100644 --- a/js/simple-accordion.js +++ b/js/simple-accordion.js @@ -4,7 +4,7 @@ $('#accordion').find('.content').hide(); // Accordion -$('#accordion').find('.accordion-header').click(function () { +$('#accordion').find('.accordion-header').on('click', function () { var next = $(this).next(); next.slideToggle('fast'); $('.content').not(next).slideUp('fast'); diff --git a/js/stop-the-loading-of-links.js b/js/stop-the-loading-of-links.js index 10acab9..91a40c4 100644 --- a/js/stop-the-loading-of-links.js +++ b/js/stop-the-loading-of-links.js @@ -1,4 +1,4 @@ // Stop the loading of links -$('a.no-link').click(function (e) { +$('a.no-link').on('click', function (e) { e.preventDefault(); }); \ No newline at end of file diff --git a/js/toggle-classes-on-hover.js b/js/toggle-classes-on-hover.js index a3964ac..f5482f9 100644 --- a/js/toggle-classes-on-hover.js +++ b/js/toggle-classes-on-hover.js @@ -1,5 +1,5 @@ // Toggle classes on hover -$('.btn').hover(function () { +$('.btn').on('hover', function () { $(this).addClass('hover'); }, function () { $(this).removeClass('hover'); diff --git a/js/toggle-fade-slide.js b/js/toggle-fade-slide.js index bda4494..c3da3bc 100644 --- a/js/toggle-fade-slide.js +++ b/js/toggle-fade-slide.js @@ -1,11 +1,11 @@ // Toggle fade/slide // Fade -$('.btn').click(function () { +$('.btn').on('click', function () { $('.element').fadeToggle('slow'); }); // Toggle -$('.btn').click(function () { +$('.btn').on('click', function () { $('.element').slideToggle('slow'); }); \ No newline at end of file From 120567eea8b437ef9cf68b1b26f6d8c7b3ee92dc Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Wed, 1 Jun 2016 19:19:45 -0400 Subject: [PATCH 045/135] =?UTF-8?q?Correct=20markdown=20syntax=20?= =?UTF-8?q?=F0=9F=91=B7=F0=9F=8F=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- translations/es-ES/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/translations/es-ES/README.md b/translations/es-ES/README.md index 05cf68f..534ab4b 100644 --- a/translations/es-ES/README.md +++ b/translations/es-ES/README.md @@ -59,7 +59,7 @@ Ahora que estás fuera... .en El uso de `()` le da varias ventajas sobre el uso de `.click ()`, tales como la capacidad de agregar varios eventos... -``javascript +```javascript .on ('click tap hover) ``` @@ -71,7 +71,7 @@ Ahora que estás fuera... .on('click.menuOpening') ``` -Los espacios de nombres te dan el poder para desenlazar un evento específico ( `.off('click.menuOpening')`). +Los espacios de nombres te dan el poder para desenlazar un evento específico (por ejemplo,`.off('click.menuOpening')`). [volver al índice de contenidos](#table-of-contents) From 513ab402d1bb6abde6dc02b4c41cbb097a9c0e14 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Wed, 1 Jun 2016 19:20:18 -0400 Subject: [PATCH 046/135] =?UTF-8?q?Minor=20edit=20=F0=9F=90=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- translations/fr-FR/README.md | 2 +- translations/ru-RU/README.md | 2 +- translations/zh-CN/README.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 33b84e8..70b7223 100644 --- a/README.md +++ b/README.md @@ -69,7 +69,7 @@ Using `.on()` gives you several advantages over using `.click()`, such as the ab .on('click.menuOpening') ``` -Namespaces give you the power to unbind a specific event (`.off('click.menuOpening')`). +Namespaces give you the power to unbind a specific event (e.g., `.off('click.menuOpening')`). [back to table of contents](#table-of-contents) diff --git a/translations/fr-FR/README.md b/translations/fr-FR/README.md index c921bf6..41c496c 100644 --- a/translations/fr-FR/README.md +++ b/translations/fr-FR/README.md @@ -71,7 +71,7 @@ Utiliser `.on()` vous donne plusieurs avantages par rapport `.click()`, comme la .on ('click.menuOpening') ``` -Namespaces vous donnent le pouvoir de délier un événement spécifique (`.off('click.menuOpening')`). +Namespaces vous donnent le pouvoir de délier un événement spécifique (par exemple, `.off('click.menuOpening')`). [retour à la table des matières](#table-of-contents) diff --git a/translations/ru-RU/README.md b/translations/ru-RU/README.md index 352ca91..2fbba9d 100644 --- a/translations/ru-RU/README.md +++ b/translations/ru-RU/README.md @@ -71,7 +71,7 @@ if (typeof jQuery == 'undefined') { .on('click.menuOpening') ``` -Пространства имен дают вам возможность синхронизироваться конкретное событие (`.off('click.menuOpening')`). +Пространства имен дают вам возможность синхронизироваться конкретное событие (например, `.off('click.menuOpening')`). [вернуться к оглавлению](#table-of-contents) diff --git a/translations/zh-CN/README.md b/translations/zh-CN/README.md index 33c05a8..5868c0e 100644 --- a/translations/zh-CN/README.md +++ b/translations/zh-CN/README.md @@ -72,7 +72,7 @@ if (typeof jQuery == 'undefined') { .on('click.menuOpening') ``` -命名空间给你解除对特定事件(`.off('click.menuOpening')`)的权力。 +命名空间给你解除对特定事件（例如，`.off（'click.menuOpening'）`）的权力。 [回目录](#table-of-contents) From e8425a0d111a2f5218d8a3d1a68ce85d89b95279 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Wed, 1 Jun 2016 19:21:25 -0400 Subject: [PATCH 047/135] =?UTF-8?q?Corrected=20markdown=20syntax=20?= =?UTF-8?q?=F0=9F=9A=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- translations/es-ES/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/translations/es-ES/README.md b/translations/es-ES/README.md index 534ab4b..c6afda1 100644 --- a/translations/es-ES/README.md +++ b/translations/es-ES/README.md @@ -60,7 +60,7 @@ Ahora que estás fuera... .en El uso de `()` le da varias ventajas sobre el uso de `.click ()`, tales como la capacidad de agregar varios eventos... ```javascript -.on ('click tap hover) +.on ('click tap hover') ``` ...Una unión se aplica a los elementos creados de forma dinámica, así (no hay necesidad de obligar manualmente cada elemento añadido dinámicamente a un elemento DOM) ... From 3f36a73351e4833e0678a6949f812308314537bf Mon Sep 17 00:00:00 2001 From: SamSSY Date: Sat, 11 Jun 2016 08:27:57 +0800 Subject: [PATCH 048/135] first commit --- translations/zh-TW/README.md | 429 +++++++++++++++++++++++++++++++++++ 1 file changed, 429 insertions(+) create mode 100644 translations/zh-TW/README.md diff --git a/translations/zh-TW/README.md b/translations/zh-TW/README.md new file mode 100644 index 0000000..9907d5b --- /dev/null +++ b/translations/zh-TW/README.md @@ -0,0 +1,429 @@ +# 大家都應該知道的jQuery小技巧 [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) + +一些簡單的小技巧讓您對JQuery更得心應手。 + +> 也可以看看由 [@sindresorhus](https://github.com/sindresorhus/) 整理，一些其他很不錯的清單集合： [awesome lists](https://github.com/sindresorhus/awesome/). + + +## 目錄 + +* [技巧](#tips) +* [瀏覽器支援](#support) +* [翻譯](#translations) +* [貢獻守則](CONTRIBUTING.md) + + +## 技巧 + +1. [檢查jQuery是否成功載入](#checking-if-jquery-loaded) +1. [使用 `.on()` 做Binding，而不要使用 `.click()`](#use-on-binding-instead-of-click) +1. [返回最頂端的按鈕](#back-to-top-button) +1. [預先載入圖片](#preload-images) +1. [檢查圖片是否成功載入](#checking-if-images-are-loaded) +1. [自動修復壞掉的圖片](#fix-broken-images-automatically) +1. [透過Hover切換Class](#toggle-classes-on-hover) +1. [讓 inupt field 無法輸入](#disabling-input-fields) +1. [停止載入連結](#stop-the-loading-of-links) +1. [Cache jQuery 選擇器](#cache-jquery-selectors) +1. [切換 Fade/Slide](#toggle-fadeslide) +1. [簡單可收放元件（accordion）](#simple-accordion) +1. [使兩個Div一樣高](#make-two-divs-the-same-height) +1. [在新分頁/視窗開啟外部連結](#open-external-links-in-new-tabwindow) +1. [利用文字找到元素](#find-element-by-text) +1. [觸發 Visibility 改變](#trigger-on-visibility-change) +1. [Ajax 程序的錯誤處理](#ajax-call-error-handling) +1. [串連 Plugin 的呼叫](#chain-plugin-calls) +1. [照字母順序排清單元素（list）](#sort-list-items-alphabetically) + + +### 檢查jQuery是否成功載入 + +在你使用JQuery做任何事情之前，你應該先確定其是否成功載入： + +```javascript +if (typeof jQuery == 'undefined') { + console.log('jQuery hasn\'t loaded'); +} else { + console.log('jQuery has loaded'); +} +``` + + +[回到目錄](#table-of-contents) + + +### 使用 `.on()` 做Binding，而不要使用 `.click()` + +使用 `.on()` 比起使用 `.click()` 多了一些好處，像是可以加上數個 events... + +```javascript +.on('click tap hover') +``` + +...這樣的連結（binding）也會對動態產生的元素產生效用（不需要每產生一個DOM element就做一次連結)... + +...還能夠使用命名空間（namespace）: + +```javascript +.on('click.menuOpening') +``` + +命名空間讓你能取消對特定event的連結（例如： `.off('click.menuOpening')`）。 + +[回到目錄](#table-of-contents) + + +### 返回最頂端的按鈕 + +利用JQuery中 `animate` 以及 `scrollTop` 的函式， 你不需要外加特別的插件來完成「返回最頂端」的功能： + +```javascript +// Back to top +$('.container').on('click', '.back-to-top', function (e) { + e.preventDefault(); + $('html, body').animate({scrollTop: 0}, 800); +}); +``` + +```html + +
+ Back to top +
+``` + +改變 `scrollTop` 的數值可以改變你希望捲軸停在哪裡， 你正在做的事情是將文件捲動到頂端的動作使用`Animate()`變成使用800毫秒完成的過程。 + +**注意:** 看看一些使用 `scrollTop` 而導致的[奇怪行為](https://github.com/jquery/api.jquery.com/issues/417) 。 + +[回到目錄](#table-of-contents) + + +### 預先載入圖片 + +如果你的網頁有很多圖片並非一開始就是看得到的（例如：hover才會看到），讓這些圖片預先載入是很合理的： + +```javascript +$.preloadImages = function () { + for (var i = 0; i < arguments.length; i++) { + $('').attr('src', arguments[i]); + } +}; + +$.preloadImages('img/hover-on.png', 'img/hover-off.png'); +``` + +[回到目錄](#table-of-contents) + + +### 檢查圖片是否成功載入 + +有時候你會想要確定圖片是否成功載入後再執行接下來的動作： + +```javascript +$('img').on('load', function () { + console.log('image load successful'); +}); +``` + +你也可以透過替換 `` 成其他 ID 或 class 來檢查特定圖片。 + +[回到目錄](#table-of-contents) + + +### 自動修復壞掉的圖片 + +如果你覺得一個一個替換掉壞掉的圖片連結很痛苦，這段程式碼可以讓你不會這麼頭痛： + +```javascript +$('img').on('error', function () { + if(!$(this).hasClass('broken-image')) { + $(this).prop('src', 'img/broken.png').addClass('broken-image'); + } +}); +``` + +甚至你沒有任何壞掉的圖片連結，這段程式碼也不會帶來什麼壞影響。 + +[回到目錄](#table-of-contents) + + +### 透過Hover切換Class + +如果說你想要在一個可點擊元件的外貌被hover過的時候改變他的外貌，你可以在使用者在Hover時加上一個class，當使用者停止Hover時就移除該class： + +```javascript +$('.btn').on('hover', function () { + $(this).addClass('hover'); +}, function () { + $(this).removeClass('hover'); +}); +``` + +你只要加上必要的CSS即可。如果你想要使用更簡單的方法，使用`toggleClass`函式： + +```javascript +$('.btn').on('hover', function () { + $(this).toggleClass('hover'); +}); +``` + +**注意:** 使用CSS可能是更快的解決方法，但是這個方法還是值得我們學習。 + +[回到目錄](#table-of-contents) + + +### 讓 inupt field 無法輸入 + +常常你會希望在使用者進行一些特定動作前， input field 是無法輸入，或是一個 form 的 submit 按鈕是無法點擊的。（例如：點選「我已經閱讀條約。」的checkbox），在 input 加上`disabled`的屬性你就能夠在你想要時開啟權限： + +```javascript +$('input[type="submit"]').prop('disabled', true); +``` + +你只需要再執行一次`prop`函式，不過是將`disabled` 的數值設成 `false`： + +```javascript +$('input[type="submit"]').prop('disabled', false); +``` + +[回到目錄](#table-of-contents) + + +### 停止載入連結 + +有時候你不想讓連結連至特定網站或是重新載入頁面，你可能想要讓他們做一些其他行為，例如：觸發其他程序，以下將會避免預設的行為發生： + +```javascript +$('a.no-link').on('click', function (e) { + e.preventDefault(); +}); +``` + +[回到目錄](#table-of-contents) + + +### Cache jQuery 選擇器 + +想想看你在同一個專案中寫了多少次樣的選擇器，每一個`$('.element')`選擇器每一次都會搜尋整個DOM，不管該選擇器是否在之前執行過。因此，執行一次選擇器並且將結果存在變數中： + +```javascript +var blocks = $('#blocks').find('li'); +``` + +現在你能夠在任何地方使用`blocks`變數而不用每一次都搜尋整個DOM： + +```javascript +$('#hideBlocks').on('click', function () { + blocks.fadeOut(); +}); + +$('#showBlocks').on('click', function () { + blocks.fadeIn(); +}); +``` + +Caching jQuery selectors 是能夠簡單增進效能的行為。 + +[回到目錄](#table-of-contents) + + +### 切換 Fade/Slide + +Sliding 以及 fading 是我們經常使用JQuery來完成的動畫效果。你可能只是想要在使用者點擊某個東西時秀出一個元件，此時 `fadeIn` 以及 `slideDown` 就是你的最佳選擇。如果你想要讓元件在第一次點擊時現身，並且在第二次點擊時消失，以下也可以很好地實現： + + +```javascript +// Fade +$('.btn').on('click', function () { + $('.element').fadeToggle('slow'); +}); + +// Toggle +$('.btn').on('click', function () { + $('.element').slideToggle('slow'); +}); +``` + +[回到目錄](#table-of-contents) + + +### 簡單可收放元件（accordion） + +這是一個簡單實現可收放元件（accordion）的做法： + +```javascript +// Close all panels +$('#accordion').find('.content').hide(); + +// Accordion +$('#accordion').find('.accordion-header').on('click', function () { + var next = $(this).next(); + next.slideToggle('fast'); + $('.content').not(next).slideUp('fast'); + return false; +}); +``` + +加上這段程式碼後，你要做的只剩下加上必要的HTML即可。 + +[回到目錄](#table-of-contents) + + +### Make Two Divs the Same Height + +Sometimes you'll want two divs to have the same height no matter what content they have in them: + +```javascript +$('.div').css('min-height', $('.main-div').height()); +``` + +This example sets the `min-height` which means that it can be bigger than the main div but never smaller. However, a more flexible method would be to loop over a set of elements and set the height to the height of the tallest element: + +```javascript +var $columns = $('.column'); +var height = 0; +$columns.each(function () { + if ($(this).height() > height) { + height = $(this).height(); + } +}); +$columns.height(height); +``` + +If you want _all_ columns to have the same height: + +```javascript +var $rows = $('.same-height-columns'); +$rows.each(function () { + $(this).find('.column').height($(this).height()); +}); +``` + +**Note:** This can be done several ways [in CSS](http://codepen.io/AllThingsSmitty/pen/KMPqoO) but depending on what your needs are, knowing how to do this in jQuery is still worthwhile. + +[back to table of contents](#table-of-contents) + + +### Open External Links in New Tab/Window + +Open external links in a new browser tab or window and ensure links on the same origin open in the same tab or window: + +```javascript +$('a[href^="http"]').attr('target', '_blank'); +$('a[href^="//"]').attr('target', '_blank'); +$('a[href^="' + window.location.origin + '"]').attr('target', '_self'); +``` + +**Note:** `window.location.origin` doesn't work in IE10. [This fix](http://tosbourn.com/a-fix-for-window-location-origin-in-internet-explorer/) takes care of the issue. + +[back to table of contents](#table-of-contents) + + +### Find Element By Text + +By using the `contains()` selector in jQuery you can find text in content of an element. If text doesn't exists, that element will be hidden: + +```javascript +var search = $('#search').val(); +$('div:not(:contains("' + search + '"))').hide(); +``` + +[back to table of contents](#table-of-contents) + + +### Trigger on Visibility Change + +Trigger JavaScript when the user is no longer focusing on a tab, or refocuses on a tab: + +```javascript +$(document).on('visibilitychange', function (e) { + if (e.target.visibilityState === 'visible') { + console.log('Tab is now in view!'); + } else if (e.target.visibilityState === 'hidden') { + console.log('Tab is now hidden!'); + } +}); +``` + +[back to table of contents](#table-of-contents) + + +### Ajax Call Error Handling + +When an Ajax call returns a 404 or 500 error the error handler will be executed. If the handler isn't defined, other jQuery code might not work anymore. Define a global Ajax error handler: + +```javascript +$(document).on('ajaxError', function (e, xhr, settings, error) { + console.log(error); +}); +``` + +[back to table of contents](#table-of-contents) + + +### Chain Plugin Calls + +jQuery allows for the "chaining" of plugin method calls to mitigate the process of repeatedly querying the DOM and creating multiple jQuery objects. Let's say the following snippet represents your plugin method calls: + +```javascript +$('#elem').show(); +$('#elem').html('bla'); +$('#elem').otherStuff(); +``` + +This could be vastly improved by using chaining: + +```javascript +$('#elem') + .show() + .html('bla') + .otherStuff(); +``` + +An alternative is to cache the element in a variable (prefixed with `$`): + +```javascript +var $elem = $('#elem'); +$elem.hide(); +$elem.html('bla'); +$elem.otherStuff(); +``` + +Both chaining and [caching](#cache-jquery-selectors) methods in jQuery are best practices that lead to shorter and faster code. + +[back to table of contents](#table-of-contents) + + +### Sort List Items Alphabetically + +Let's say you end up with too many items in a list. Maybe the content is produced by a CMS and you want to order them alphabetically: + +```javascript +var ul = $('#list'), +lis = $('li', ul).get(); + +lis.sort(function (a, b) { + return ($(a).text().toUpperCase() < $(b).text().toUpperCase()) ? -1 : 1; +}); + +ul.append(lis); +``` + +There you go! + +[back to table of contents](#table-of-contents) + + +## 瀏覽器支援 + +Current versions of Chrome, Firefox, Safari, Opera, Edge, and IE11. + + +## 翻譯 + +* [Español](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/es-ES) +* [Français](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/fr-FR) +* [русский](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/ru-RU) +* [简体中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-CN) +* [繁體中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-TW) From 585abf0a7313a4b68f0b20000ca33ca03ebba7f7 Mon Sep 17 00:00:00 2001 From: Roman Gusev Date: Sun, 12 Jun 2016 15:06:30 +0600 Subject: [PATCH 049/135] Start proofreading, fix first part --- translations/ru-RU/README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/translations/ru-RU/README.md b/translations/ru-RU/README.md index 2fbba9d..b494961 100644 --- a/translations/ru-RU/README.md +++ b/translations/ru-RU/README.md @@ -1,8 +1,8 @@ -# jQuery Советы должен знать каждый [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) +# Советы по jQuery которые должен знать каждый [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) -Коллекция простых советов, чтобы помочь вашей игре jQuery. +Коллекция простых советов, чтобы помочь вашей работе с jQuery. -> Для других больших списков проверить [@sindresorhus](https://github.com/sindresorhus/~~HEAD=dobj) в Куратор список [удивительных списков](https://github.com/sindresorhus/awesome/). +> Другие прекрасные списки, за которыми следит [@sindresorhus](https://github.com/sindresorhus/~~HEAD=dobj), можно увидеть [здесь](https://github.com/sindresorhus/awesome/).
@@ -434,4 +434,4 @@ ul.append(lis); ## Support -Текущие версии Chrome, Firefox, Safari, Opera, Edge, и IE11. \ No newline at end of file +Текущие версии Chrome, Firefox, Safari, Opera, Edge, и IE11. From 483002eea97ac62f3f5fc72ce81169cac7a19366 Mon Sep 17 00:00:00 2001 From: Roman Gusev Date: Sun, 12 Jun 2016 15:10:35 +0600 Subject: [PATCH 050/135] checking-if-jquery-loaded proofreading --- translations/ru-RU/README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/translations/ru-RU/README.md b/translations/ru-RU/README.md index b494961..3214f7f 100644 --- a/translations/ru-RU/README.md +++ b/translations/ru-RU/README.md @@ -15,7 +15,7 @@ ## Советы -1. [Проверка Если jQuery Loaded](#checking-if-jquery-loaded) +1. [Проверка готовности jQuery](#checking-if-jquery-loaded) 1. [Используйте `.on()` Binding Вместо `.click()`](#use-on-binding-instead-of-click) 1. [Вернуться к началу Button](#back-to-top-button) 1. [Предварительная загрузка изображений](#preload-images) @@ -37,9 +37,9 @@
-### Проверка Если jQuery Loaded +### Проверка готовности jQuery -Перед тем, как можно сделать что-нибудь с jQuery в первую очередь необходимо убедиться в том, что загружен: +Перед тем, как сделать что-нибудь с помощью jQuery, необходимо убедиться в том, что он загружен: ```javascript if (typeof jQuery == 'undefined') { @@ -49,7 +49,7 @@ if (typeof jQuery == 'undefined') { } ``` -Теперь вы с ... +Теперь вы можете продолжать ... [вернуться к оглавлению](#table-of-contents) From 0c2c3580ae132601ca70fdf80120351784806a99 Mon Sep 17 00:00:00 2001 From: Roman Gusev Date: Sun, 12 Jun 2016 15:13:45 +0600 Subject: [PATCH 051/135] use-on-binding-instead-of-click proofreading --- translations/ru-RU/README.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/translations/ru-RU/README.md b/translations/ru-RU/README.md index 3214f7f..8f60825 100644 --- a/translations/ru-RU/README.md +++ b/translations/ru-RU/README.md @@ -16,7 +16,7 @@ ## Советы 1. [Проверка готовности jQuery](#checking-if-jquery-loaded) -1. [Используйте `.on()` Binding Вместо `.click()`](#use-on-binding-instead-of-click) +1. [Используйте `.on()` вместо `.click()`](#use-on-binding-instead-of-click) 1. [Вернуться к началу Button](#back-to-top-button) 1. [Предварительная загрузка изображений](#preload-images) 1. [Проверка Если изображения загружаются](#checking-if-images-are-loaded) @@ -55,23 +55,23 @@ if (typeof jQuery == 'undefined') {
-### Используйте `.on()` Binding Вместо `.click()` +### Используйте `.on()` вместо `.click()` -Используя `.on()` дает ряд преимуществ по сравнению с использованием `.click()`, например, возможность добавлять несколько событий... +Использование `.on()` дает ряд преимуществ по сравнению с использованием `.click()`, например, возможность добавлять несколько событий... ```javascript .on('click tap hover') ``` -...Привязка применяется к динамически создаваемые элементы, а также (нет необходимости вручную связывать каждый отдельный элемент динамически добавленный к элементу DOM)... +...привязка применяется к динамически создаваемым элементам (нет необходимости вручную связывать каждый отдельный элемент, динамически добавленный к DOM)... -...И возможность установить пространство имен: +...и возможность установить пространство имен: ```javascript .on('click.menuOpening') ``` -Пространства имен дают вам возможность синхронизироваться конкретное событие (например, `.off('click.menuOpening')`). +Пространства имен дают вам возможность отключать привязку к конкретному событию (например, `.off('click.menuOpening')`). [вернуться к оглавлению](#table-of-contents) From 8ddc59a2d321cd90fe094a465264f00cdee02ca9 Mon Sep 17 00:00:00 2001 From: Roman Gusev Date: Sun, 12 Jun 2016 15:32:53 +0600 Subject: [PATCH 052/135] Table of contents and headers proofreading --- translations/ru-RU/README.md | 60 ++++++++++++++++++------------------ 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/translations/ru-RU/README.md b/translations/ru-RU/README.md index 8f60825..9e5eea2 100644 --- a/translations/ru-RU/README.md +++ b/translations/ru-RU/README.md @@ -10,29 +10,29 @@ * [Советы](#советы) * [Поддержка](#поддержка) -* [Вклад Руководство](../../CONTRIBUTING.md) +* [Как сделать вклад](../../CONTRIBUTING.md) ## Советы 1. [Проверка готовности jQuery](#checking-if-jquery-loaded) 1. [Используйте `.on()` вместо `.click()`](#use-on-binding-instead-of-click) -1. [Вернуться к началу Button](#back-to-top-button) +1. [Кнопка "вернуться к началу"](#back-to-top-button) 1. [Предварительная загрузка изображений](#preload-images) -1. [Проверка Если изображения загружаются](#checking-if-images-are-loaded) -1. [Автоматически исправлять сломанные изображения](#fix-broken-images-automatically) -1. [Переключение Классы по наведению](#toggle-classes-on-hover) +1. [Проверка, загружаются ли изображения](#checking-if-images-are-loaded) +1. [Автоматическое исправление сломанных изображений](#fix-broken-images-automatically) +1. [Переключение классов по наведению](#toggle-classes-on-hover) 1. [Отключение поля ввода](#disabling-input-fields) -1. [Прервать загрузку Ссылки](#stop-the-loading-of-links) -1. [Кэш jQuery селекторы](#cache-jquery-selectors) -1. [Переключить увядать / Слайд](#toggle-fadeslide) -1. [Простой Аккордеон](#simple-accordion) -1. [Сделайте два Divs той же высоте](#make-two-divs-the-same-height) -1. [Открытые внешние ссылки в новой вкладке / окне](#open-external-links-in-new-tabwindow) -1. [Найти элемент По тексту](#find-element-by-text) +1. [Прерывание загрузки ссылки](#stop-the-loading-of-links) +1. [Кэширование селекторов jQuery](#cache-jquery-selectors) +1. [Переключение fade/slide](#toggle-fadeslide) +1. [Простой аккордеон](#simple-accordion) +1. [Сделать два элемента div одинаковой высотой](#make-two-divs-the-same-height) +1. [Открывать внешние ссылки в новой вкладке или новом окне](#open-external-links-in-new-tabwindow) +1. [Найти элемент по тексту](#find-element-by-text) 1. [Запуск по изменению видимости](#trigger-on-visibility-change) -1. [Ajax вызовов Обработка ошибок](#ajax-call-error-handling) -1. [Сеть плагин Вызовы](#chain-plugin-calls) +1. [Обработка ошибок в AJAX-запросах](#ajax-call-error-handling) +1. [Цепочка вызовов плагинов](#chain-plugin-calls) 1. [Сортировка элементов списка по алфавиту](#sort-list-items-alphabetically) @@ -77,12 +77,12 @@ if (typeof jQuery == 'undefined') {
-### Вернуться к началу Button +### Кнопка "вернуться к началу" -С помощью `animate` и методы `scrollTop` в jQuery вам не нужен плагин, чтобы создать простую анимацию прокрутки-вверх: +С помощью методов `animate` и `scrollTop` в jQuery вам не нужен плагин, чтобы создать простую анимацию прокрутки вверх: ```javascript -// Back to top +// Вернуться к началу $('.container').on('click', '.back-to-top', function (e) { e.preventDefault(); $('html, body').animate({scrollTop: 0}, 800); @@ -120,7 +120,7 @@ $.preloadImages('img/hover-on.png', 'img/hover-off.png');
-### Проверка Если изображения загружаются +### Проверка, загружаются ли изображения Иногда вам может понадобиться, чтобы проверить, если ваши изображения будут полностью загружены, чтобы продолжить с вашими сценариями: @@ -136,7 +136,7 @@ $('img').on('load', function () {
-### Автоматически исправлять сломанные изображения +### Автоматическое исправление сломанных изображений Если вам посчастливилось найти неработающие ссылки изображение на вашем сайте заменяя их один за другим может быть боль. Этот простой фрагмент кода может сэкономить много головной боли: @@ -154,7 +154,7 @@ $('img').on('error', function () {
-### Переключение Классы по наведению +### Переключение классов по наведению Допустим, вы хотите изменить визуальный интерактивными элемент на странице, когда пользователь парит над ним. Вы можете добавить класс к вашему элементу, когда пользователь парит; когда пользователь прекращает зависания удаляет класс: @@ -198,7 +198,7 @@ $('input[type="submit"]').prop('disabled', false); -### Прервать загрузку Ссылки +### Прерывание загрузки ссылки Иногда вы не хотите, чтобы ссылки перехода на определенную веб-страницу и не перезагрузите страницу; Вы могли бы хотеть, чтобы они делали что-то еще, как спусковой крючок какой-либо другой сценарий. Это будет делать трюк предотвращения действия по умолчанию: @@ -212,7 +212,7 @@ $('a.no-link').on('click', function (e) {
-### Кэш jQuery селекторы +### Кэширование селекторов jQuery Подумайте, сколько раз вы пишете один и тот же селектор снова и снова в любом проекте. Каждый `$('.element')` селектор имеет для поиска по всему DOM каждый раз, независимо от того, что селектор ранее бежать. Вместо этого запустите селектор один раз и сохранить результаты в переменной: @@ -238,7 +238,7 @@ $('#showBlocks').on('click', function () {
-### Переключить увядать / Слайд +### Переключение fade/slide Раздвижные и замирания являются чем-то мы используем много в нашей анимации с jQuery. Вы можете просто хотите, чтобы показать элемент, когда пользователь нажимает что-то, что делает `fadeIn` и методы `slideDown` совершенным. Но если вы хотите этот элемент, чтобы появиться на первый щелчок, а затем исчезают на второй это будет работать просто отлично: @@ -258,7 +258,7 @@ $('.btn').on('click', function () {
-### Простой Аккордеон +### Простой аккордеон Это простой метод для быстрого аккордеона: @@ -281,7 +281,7 @@ $('#accordion').find('.accordion-header').on('click', function () {
-### Сделайте два Divs той же высоте +### Сделать два элемента div одинаковой высотой Иногда вы будете хотеть две дивы, чтобы иметь такую же высоту, независимо от того, какое содержание они имеют в них: @@ -317,7 +317,7 @@ $rows.each(function () { -### Открытые внешние ссылки в новой вкладке / окне +### Открывать внешние ссылки в новой вкладке или новом окне Открыть внешние ссылки в новой вкладке браузера или окна и обеспечить ссылки на того же происхождения, открытой в той же вкладке или окне: @@ -333,7 +333,7 @@ $('a[href^="' + window.location.origin + '"]').attr('target', '_self');
-### Найти элемент По тексту +### Найти элемент по тексту При использовании `contains()` селектор в jQuery вы можете найти текст в содержимом элемента. Если текст не существует, то этот элемент будет скрыт: @@ -364,7 +364,7 @@ $(document).on('visibilitychange', function (e) {
-### Ajax вызовов Обработка ошибок +### Обработка ошибок в AJAX-запросах Когда вызов Ajax возвращает ошибку 404 или 500 обработчик ошибок будет выполняться. Если обработчик не определен, другой код jQuery может не работать больше. Определить глобальный обработчик ошибок Ajax: @@ -378,7 +378,7 @@ $(document).on('ajaxError', function (e, xhr, settings, error) {
-### Сеть плагин Вызовы +### Цепочка вызовов плагинов jQuery позволяет "сцеплению" плагина метод вызывает смягчить процесс неоднократно запрашивая DOM и создания нескольких объектов jQuery. Скажем, следующий фрагмент кода представляет ваш метод плагин вызовов: @@ -432,6 +432,6 @@ ul.append(lis); [вернуться к оглавлению](#table-of-contents) -## Support +## Поддержка Текущие версии Chrome, Firefox, Safari, Opera, Edge, и IE11. From b4b63d1ad1597bd4a31407c3a5985c5985408c56 Mon Sep 17 00:00:00 2001 From: Roman Gusev Date: Sun, 12 Jun 2016 16:18:33 +0600 Subject: [PATCH 053/135] Proofread rest of russian translation --- translations/ru-RU/README.md | 76 ++++++++++++++++++------------------ 1 file changed, 38 insertions(+), 38 deletions(-) diff --git a/translations/ru-RU/README.md b/translations/ru-RU/README.md index 9e5eea2..ecbd78e 100644 --- a/translations/ru-RU/README.md +++ b/translations/ru-RU/README.md @@ -1,4 +1,4 @@ -# Советы по jQuery которые должен знать каждый [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) +# Советы по jQuery, которые должен знать каждый [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) Коллекция простых советов, чтобы помочь вашей работе с jQuery. @@ -90,13 +90,13 @@ $('.container').on('click', '.back-to-top', function (e) { ``` ```html - + Back to top ``` -Изменение изменения значений `scrollTop` где хочет полоса прокрутки на землю. Все, что вы действительно делаете, оживляющий тело документа на протяжении 800 миллисекунд, пока не прокручивается в верхней части документа. +Изменение значения `scrollTop` изменяет место, на котором прокрутка остановится. Все, что вы действительно делаете, это прокрутка документа на протяжении 800 миллисекунд, пока мы не окажемся в верхней части документа. -**Примечание:** Часы для некоторого [поведение багги](https://github.com/jquery/api.jquery.com/issues/417) с `scrollTop`. +**Примечание:** Обратите внимание на некоторое [неправильное поведение](https://github.com/jquery/api.jquery.com/issues/417) `scrollTop`. [вернуться к оглавлению](#table-of-contents) @@ -104,7 +104,7 @@ $('.container').on('click', '.back-to-top', function (e) {
### Предварительная загрузка изображений -Если ваш веб-страница использует много изображений, которые не видны изначально (например, при наведении курсора мыши), имеет смысл предварительно загрузить их: +Если ваш веб-страница использует много изображений, которые не видны изначально (например, появлюятся при наведении курсора мыши), имеет смысл предварительно загрузить их: ```javascript $.preloadImages = function () { @@ -122,7 +122,7 @@ $.preloadImages('img/hover-on.png', 'img/hover-off.png');
### Проверка, загружаются ли изображения -Иногда вам может понадобиться, чтобы проверить, если ваши изображения будут полностью загружены, чтобы продолжить с вашими сценариями: +Иногда вам может понадобиться проверка того, что ваши изображения полностью загружены, перед тем как вы продолжите работу своего скрипта: ```javascript $('img').on('load', function () { @@ -130,7 +130,7 @@ $('img').on('load', function () { }); ``` -Вы также можете проверить, если один конкретный образ загружен, заменив `` тег с идентификатором или класса. +Вы также можете проверить, если одно конкретное изображение загружено, заменив тег `` на идентификатор или класс. [вернуться к оглавлению](#table-of-contents) @@ -138,7 +138,7 @@ $('img').on('load', function () {
### Автоматическое исправление сломанных изображений -Если вам посчастливилось найти неработающие ссылки изображение на вашем сайте заменяя их один за другим может быть боль. Этот простой фрагмент кода может сэкономить много головной боли: +Если вам посчастливилось найти неработающие ссылки на изображения на вашем сайте, замена их по одной может утомить. Этот простой фрагмент кода поможет избежать этой головной боли: ```javascript $('img').on('error', function () { @@ -148,7 +148,7 @@ $('img').on('error', function () { }); ``` -Даже если у вас нет каких-либо неработающие ссылки, добавив, что это не будет никакого вреда. +Даже если у вас нет неработающих ссылок, добавление этого скрипта не принесет никакого вреда. [вернуться к оглавлению](#table-of-contents) @@ -156,7 +156,7 @@ $('img').on('error', function () {
### Переключение классов по наведению -Допустим, вы хотите изменить визуальный интерактивными элемент на странице, когда пользователь парит над ним. Вы можете добавить класс к вашему элементу, когда пользователь парит; когда пользователь прекращает зависания удаляет класс: +Допустим, вы хотите изменить визуальный интерактивный элемент на странице, когда пользователь наводит курсор над ним. Вы можете добавить класс к вашему элементу, когда пользователь навел курсор; когда пользователь уводит курсор, класс удаляется: ```javascript $('.btn').on('hover', function () { @@ -166,7 +166,7 @@ $('.btn').on('hover', function () { }); ``` -Вам просто нужно добавить необходимые CSS. Если вы хотите еще _simpler_ способ использовать метод `toggleClass`: +Вам просто нужно добавить необходимые стили CSS. Если вы хотите _упростить_ логику, используйте метод `toggleClass`: ```javascript $('.btn').hover(function () { @@ -174,7 +174,7 @@ $('.btn').hover(function () { }); ``` -**Примечание:** CSS может быть более быстрым решением в этом случае, но она по-прежнему стоит знать об этом. +**Примечание:** CSS может быть более быстрым решением в этом случае, но вам по-прежнему стоит знать об этом. [вернуться к оглавлению](#table-of-contents) @@ -182,13 +182,13 @@ $('.btn').hover(function () {
### Отключение поля ввода -Иногда вы можете захотеть кнопку отправки формы или одного из его текстовых материалов, которые будут отключены до тех пор, пока пользователь не выполнил определенное действие (например, проверка "Я прочитал термины" флажок). Добавьте атрибут `disabled` на ваш вход, так что вы можете включить его, когда вы хотите: +Иногда вы можете захотеть отключить кнопку отправки формы или одно из его текстовых полей, до тех пор, пока пользователь не выполнил определенное действие (например, не отметил флаг "я прочитал условия"). Добавьте атрибут `disabled` на ваше поле ввода, отключив его, когда вы хотите: ```javascript $('input[type="submit"]').prop('disabled', true); ``` -Все, что вам нужно сделать, это запустить метод `prop` снова на входе, но установите значение `disabled` к `false`: +Все, что вам нужно сделать, чтобы включить поле обратно, это запустить метод `prop` на том же поле ввода, но установить значение `disabled` к `false`: ```javascript $('input[type="submit"]').prop('disabled', false); @@ -200,7 +200,7 @@ $('input[type="submit"]').prop('disabled', false); ### Прерывание загрузки ссылки -Иногда вы не хотите, чтобы ссылки перехода на определенную веб-страницу и не перезагрузите страницу; Вы могли бы хотеть, чтобы они делали что-то еще, как спусковой крючок какой-либо другой сценарий. Это будет делать трюк предотвращения действия по умолчанию: +Иногда вы не хотите, чтобы ссылки переводили пользователя на определенную веб-страницу или перезагружали страницу; Вы можете хотеть, чтобы они делали что-то еще, как спусковой крючок для какой-либо другого сценария. Этот скрипт предотвратит действие по умолчанию: ```javascript $('a.no-link').on('click', function (e) { @@ -214,13 +214,13 @@ $('a.no-link').on('click', function (e) {
### Кэширование селекторов jQuery -Подумайте, сколько раз вы пишете один и тот же селектор снова и снова в любом проекте. Каждый `$('.element')` селектор имеет для поиска по всему DOM каждый раз, независимо от того, что селектор ранее бежать. Вместо этого запустите селектор один раз и сохранить результаты в переменной: +Подумайте, сколько раз вы пишете один и тот же селектор снова и снова в любом проекте. Каждый `$('.element')` селектор ищет по всему DOM каждый раз, независимо от того, был ли он использован раньше. Вместо этого запустите селектор один раз и сохраните его результаты в переменной: ```javascript var blocks = $('#blocks').find('li'); ``` -Теперь вы можете использовать `blocks` переменную туда, куда вы хотите, без необходимости искать DOM-каждый раз, когда: +Теперь вы можете использовать `blocks` переменную там, где вы хотите, без необходимости выполнять поиск по DOM каждый раз: ```javascript $('#hideBlocks').on('click', function () { @@ -232,7 +232,7 @@ $('#showBlocks').on('click', function () { }); ``` -Кэширование jQuery селекторы легкий выигрыш в производительности. +Кэширование jQuery селекторов позволяет получить выигрыш в производительности. [вернуться к оглавлению](#table-of-contents) @@ -240,7 +240,7 @@ $('#showBlocks').on('click', function () {
### Переключение fade/slide -Раздвижные и замирания являются чем-то мы используем много в нашей анимации с jQuery. Вы можете просто хотите, чтобы показать элемент, когда пользователь нажимает что-то, что делает `fadeIn` и методы `slideDown` совершенным. Но если вы хотите этот элемент, чтобы появиться на первый щелчок, а затем исчезают на второй это будет работать просто отлично: +Slide и fade являются часто используемыми действиями в анимации с jQuery. Вы можете захотить, показать элемент, когда пользователь нажимает что-то, что делает методы `fadeIn` и `slideDown` хорошо подходящими. Но если вы хотите, чтобы этот элемент, появился на первый щелчок, а затем исчез на второй, то этот скрипт будет работать просто отлично: ```javascript // Fade @@ -260,13 +260,13 @@ $('.btn').on('click', function () {
### Простой аккордеон -Это простой метод для быстрого аккордеона: +Метод для создания простого аккордеона: ```javascript -// Close all panels +// Закрываем все панели $('#accordion').find('.content').hide(); -// Accordion +// Аккордеон $('#accordion').find('.accordion-header').on('click', function () { var next = $(this).next(); next.slideToggle('fast'); @@ -275,7 +275,7 @@ $('#accordion').find('.accordion-header').on('click', function () { }); ``` -Добавив этот сценарий все, что вам действительно нужно сделать на вашей веб-странице необходимый HTML пойти получить эту работу. +Добавив этот скрипт все, что вам нужно сделать на вашей веб-странице, это найти необходимый HTML и поручить ему эту работу. [вернуться к оглавлению](#table-of-contents) @@ -283,13 +283,13 @@ $('#accordion').find('.accordion-header').on('click', function () {
### Сделать два элемента div одинаковой высотой -Иногда вы будете хотеть две дивы, чтобы иметь такую же высоту, независимо от того, какое содержание они имеют в них: +Иногда вы будете хотеть две элемента div, которые имеют одинаковую высоту, независимо от содержания: ```javascript $('.div').css('min-height', $('.main-div').height()); ``` -В этом примере задается `min-height`, что означает, что она может быть больше, чем основной DIV, но никогда меньше. Тем не менее, более гибкий метод должен был бы петлю над множеством элементов и установить высоту до высоты самого высокого элемента: +В этом примере задается `min-height`, что означает, что она может быть больше, чем основной DIV, но никогда меньше. Тем не менее, более гибкий метод должен был бы пройтись циклом по множеству элементов и установить высоту самого высокого элемента: ```javascript var $columns = $('.column'); @@ -302,7 +302,7 @@ $columns.each(function () { $columns.height(height); ``` -Если вы хотите _все_ столбцы имеют одинаковую высоту: +Если вы хотите, чтобы _все_ столбцы имели одинаковую высоту: ```javascript var $rows = $('.same-height-columns'); @@ -311,7 +311,7 @@ $rows.each(function () { }); ``` -**Примечание:** Это можно сделать несколькими способами [в CSS](http://codepen.io/AllThingsSmitty/pen/KMPqoO), но в зависимости от того, что ваши потребности, зная, как сделать это в JQuery еще стоит. +**Примечание:** Это можно сделать несколькими способами [в CSS](http://codepen.io/AllThingsSmitty/pen/KMPqoO), но в зависимости от ваших потребностей, стоит знать, как это сделать с помощью jQuery. [вернуться к оглавлению](#table-of-contents) @@ -319,7 +319,7 @@ $rows.each(function () { ### Открывать внешние ссылки в новой вкладке или новом окне -Открыть внешние ссылки в новой вкладке браузера или окна и обеспечить ссылки на того же происхождения, открытой в той же вкладке или окне: +Открыть внешние ссылки в новой вкладке браузера или новом окне, и открывать внутренние ссылки в той же вкладке или окне: ```javascript $('a[href^="http"]').attr('target', '_blank'); @@ -327,7 +327,7 @@ $('a[href^="//"]').attr('target', '_blank'); $('a[href^="' + window.location.origin + '"]').attr('target', '_self'); ``` -**Примечание:** `window.location.origin` не работает в IE10. [Это исправление](http://tosbourn.com/a-fix-for-window-location-origin-in-internet-explorer/) заботится о выпуске. +**Примечание:** `window.location.origin` не работает в IE10. [Это исправление](http://tosbourn.com/a-fix-for-window-location-origin-in-internet-explorer/) решает проблему. [вернуться к оглавлению](#table-of-contents) @@ -335,7 +335,7 @@ $('a[href^="' + window.location.origin + '"]').attr('target', '_self');
### Найти элемент по тексту -При использовании `contains()` селектор в jQuery вы можете найти текст в содержимом элемента. Если текст не существует, то этот элемент будет скрыт: +При использовании `contains()` селектора в jQuery вы можете найти текст в содержимом элемента. Если текст не существует, то этот элемент будет скрыт: ```javascript var search = $('#search').val(); @@ -348,7 +348,7 @@ $('div:not(:contains("' + search + '"))').hide();
### Запуск по изменению видимости -Запуск JavaScript, когда пользователь больше не фокусируясь на вкладке или перефокусирует на вкладке: +Запуск скрипта, когда пользователь больше не фокусируется на вкладке или перефокусируется на вкладке: ```javascript $(document).on('visibilitychange', function (e) { @@ -366,7 +366,7 @@ $(document).on('visibilitychange', function (e) {
### Обработка ошибок в AJAX-запросах -Когда вызов Ajax возвращает ошибку 404 или 500 обработчик ошибок будет выполняться. Если обработчик не определен, другой код jQuery может не работать больше. Определить глобальный обработчик ошибок Ajax: +Когда AJAX-запрос возвращает ошибку 404 или 500, будет выполняться обработчик ошибок. Если обработчик не определен, другой код jQuery может не работать после этого. Определить глобальный обработчик ошибок AJAX-запросов можно следующим образом: ```javascript $(document).on('ajaxError', function (e, xhr, settings, error) { @@ -380,7 +380,7 @@ $(document).on('ajaxError', function (e, xhr, settings, error) {
### Цепочка вызовов плагинов -jQuery позволяет "сцеплению" плагина метод вызывает смягчить процесс неоднократно запрашивая DOM и создания нескольких объектов jQuery. Скажем, следующий фрагмент кода представляет ваш метод плагин вызовов: +jQuery позволяет выполнять "цепочки" методов, что упрощает процесс, однократно запрашивая DOM и не создавая несколько объектов jQuery. Скажем, следующий фрагмент кода представляет ваш метод: ```javascript $('#elem').show(); @@ -388,7 +388,7 @@ $('#elem').html('bla'); $('#elem').otherStuff(); ``` -Это может быть значительно улучшена с помощью цепочки: +Он может быть значительно улучшен с помощью цепочки: ```javascript $('#elem') @@ -397,7 +397,7 @@ $('#elem') .otherStuff(); ``` -Альтернативой является кэшировать элемент в переменной (с приставкой `$`): +Альтернативой является кэширование элемента в переменной (с приставкой `$`): ```javascript var $elem = $('#elem'); @@ -406,7 +406,7 @@ $elem.html('bla'); $elem.otherStuff(); ``` -Обе цепочки и [кэширования](#cache-jquery-selectors) методы в jQuery являются лучшие практики, которые приводят к более коротким и более быстрый код. +И цепочки и [кэширование](#cache-jquery-selectors) в jQuery являются лучшими практиками, которые приводят к более короткому и быстрому код. [вернуться к оглавлению](#table-of-contents) @@ -414,7 +414,7 @@ $elem.otherStuff();
### Сортировка элементов списка по алфавиту -Допустим, вы в конечном итоге с слишком много элементов в списке. Может быть, содержание производится с помощью CMS и вы хотите заказать их в алфавитном порядке: +Допустим, в списке слишком много элементов. Возможно, содержание производится с помощью CMS, а вы хотите показать их в алфавитном порядке: ```javascript var ul = $('#list'), @@ -427,7 +427,7 @@ lis.sort(function (a, b) { ul.append(lis); ``` -Там вы идете! +Такие дела! [вернуться к оглавлению](#table-of-contents) From e62479efcb98af46db079f6804a14208ab825bdd Mon Sep 17 00:00:00 2001 From: SamSSY Date: Mon, 13 Jun 2016 17:48:53 +0800 Subject: [PATCH 054/135] translation complete --- translations/zh-TW/README.md | 61 ++++++++++++++++++------------------ 1 file changed, 30 insertions(+), 31 deletions(-) diff --git a/translations/zh-TW/README.md b/translations/zh-TW/README.md index 9907d5b..c7f5902 100644 --- a/translations/zh-TW/README.md +++ b/translations/zh-TW/README.md @@ -270,15 +270,15 @@ $('#accordion').find('.accordion-header').on('click', function () { [回到目錄](#table-of-contents) -### Make Two Divs the Same Height +### 使兩個Div一樣高 -Sometimes you'll want two divs to have the same height no matter what content they have in them: +有時候不論兩個Div裡面的內容為何，你會希望他們有同樣的高度： ```javascript $('.div').css('min-height', $('.main-div').height()); ``` -This example sets the `min-height` which means that it can be bigger than the main div but never smaller. However, a more flexible method would be to loop over a set of elements and set the height to the height of the tallest element: +這個例子設定 `min-height`，表示其只能比 main div 的 `height` 大，永遠不會比它小。然而，在一組元素中循環並將各元素之 `height` 調整至最高的元素高度為另一種更彈性的方法： ```javascript var $columns = $('.column'); @@ -291,7 +291,7 @@ $columns.each(function () { $columns.height(height); ``` -If you want _all_ columns to have the same height: +如果你希望每一行都有同樣高度： ```javascript var $rows = $('.same-height-columns'); @@ -300,14 +300,14 @@ $rows.each(function () { }); ``` -**Note:** This can be done several ways [in CSS](http://codepen.io/AllThingsSmitty/pen/KMPqoO) but depending on what your needs are, knowing how to do this in jQuery is still worthwhile. +**注意:** 這件事可以使用幾種方法完成，[使用CSS](http://codepen.io/AllThingsSmitty/pen/KMPqoO) 這跟你的需求有關，但也值得知道如何使用JQuery完成。 -[back to table of contents](#table-of-contents) +[回到目錄](#table-of-contents) -### Open External Links in New Tab/Window +### 在新分頁/視窗開啟外部連結 -Open external links in a new browser tab or window and ensure links on the same origin open in the same tab or window: +在瀏覽器新的分頁或視窗中開啟新的外部連結，並且確定同樣源頭的連結會在同樣的分頁或視窗開啟： ```javascript $('a[href^="http"]').attr('target', '_blank'); @@ -315,26 +315,26 @@ $('a[href^="//"]').attr('target', '_blank'); $('a[href^="' + window.location.origin + '"]').attr('target', '_self'); ``` -**Note:** `window.location.origin` doesn't work in IE10. [This fix](http://tosbourn.com/a-fix-for-window-location-origin-in-internet-explorer/) takes care of the issue. +**注意:** `window.location.origin` 在IE10中無效。[這個方法](http://tosbourn.com/a-fix-for-window-location-origin-in-internet-explorer/) 可以解決這個問題。 -[back to table of contents](#table-of-contents) +[回到目錄](#table-of-contents) -### Find Element By Text +### 利用文字找到元素 -By using the `contains()` selector in jQuery you can find text in content of an element. If text doesn't exists, that element will be hidden: +利用JQuery中 `contains()` 選擇器，你可以找到元素內容中的文字。如果沒有文字，該元素會被隱藏： ```javascript var search = $('#search').val(); $('div:not(:contains("' + search + '"))').hide(); ``` -[back to table of contents](#table-of-contents) +[回到目錄](#table-of-contents) -### Trigger on Visibility Change +### 觸發 Visibility 改變 -Trigger JavaScript when the user is no longer focusing on a tab, or refocuses on a tab: +當使用者不再停留在某分頁，或是重新停留在某分頁，觸發JavaScript： ```javascript $(document).on('visibilitychange', function (e) { @@ -346,12 +346,12 @@ $(document).on('visibilitychange', function (e) { }); ``` -[back to table of contents](#table-of-contents) +[回到目錄](#table-of-contents) -### Ajax Call Error Handling +### Ajax 程序的錯誤處理 -When an Ajax call returns a 404 or 500 error the error handler will be executed. If the handler isn't defined, other jQuery code might not work anymore. Define a global Ajax error handler: +當一個Ajax 程序呼叫後回傳 404 或是 500 錯誤，錯誤處理程序將會被執行。如果沒有定義錯誤處理程序，其他JQuery的程式碼可能不會運作。定義一個全域Ajax錯誤處理程序： ```javascript $(document).on('ajaxError', function (e, xhr, settings, error) { @@ -359,12 +359,12 @@ $(document).on('ajaxError', function (e, xhr, settings, error) { }); ``` -[back to table of contents](#table-of-contents) +[回到目錄](#table-of-contents) -### Chain Plugin Calls +### 串連 Plugin 的呼叫 -jQuery allows for the "chaining" of plugin method calls to mitigate the process of repeatedly querying the DOM and creating multiple jQuery objects. Let's say the following snippet represents your plugin method calls: +JQuery 允許「串連」plugin 函式的呼叫來緩和重複查找 DOM 以及重複產生 JQuery 物件。以下的程式碼展示了 plugin 函式的呼叫： ```javascript $('#elem').show(); @@ -372,7 +372,7 @@ $('#elem').html('bla'); $('#elem').otherStuff(); ``` -This could be vastly improved by using chaining: +可以利用串連來改進： ```javascript $('#elem') @@ -381,7 +381,7 @@ $('#elem') .otherStuff(); ``` -An alternative is to cache the element in a variable (prefixed with `$`): +另外一種方法是利用一個變數來 cache 一個元素（在前面加上 `$`）： ```javascript var $elem = $('#elem'); @@ -390,14 +390,14 @@ $elem.html('bla'); $elem.otherStuff(); ``` -Both chaining and [caching](#cache-jquery-selectors) methods in jQuery are best practices that lead to shorter and faster code. +JQuery 中串連以及[caching](#cache-jquery-selectors)的方法是最簡潔最快速的實作方式。 -[back to table of contents](#table-of-contents) +[回到目錄](#table-of-contents) -### Sort List Items Alphabetically +### 照字母順序排清單元素（list） -Let's say you end up with too many items in a list. Maybe the content is produced by a CMS and you want to order them alphabetically: +如果在清單中有太多元素，或許其內容是被ㄧ CMS 所製造的且你希望照字母順序來排序： ```javascript var ul = $('#list'), @@ -410,15 +410,14 @@ lis.sort(function (a, b) { ul.append(lis); ``` -There you go! +就是這樣！ -[back to table of contents](#table-of-contents) +[回到目錄](#table-of-contents) ## 瀏覽器支援 -Current versions of Chrome, Firefox, Safari, Opera, Edge, and IE11. - +現今版本的Chrome，Firefox，Safari，Opera，Edge 以及 IE11。 ## 翻譯 From 0319ccdc345b20e4c49d80aded255e84bdfd89f0 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Mon, 13 Jun 2016 07:32:53 -0400 Subject: [PATCH 055/135] =?UTF-8?q?Added=20Taiwanese=20translation=20?= =?UTF-8?q?=F0=9F=9A=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 70b7223..e278831 100644 --- a/README.md +++ b/README.md @@ -426,3 +426,4 @@ Current versions of Chrome, Firefox, Safari, Opera, Edge, and IE11. * [Français](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/fr-FR) * [русский](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/ru-RU) * [简体中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-CN) +* [正體中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-TW) From 8a33c4d9afaa31ac9ab1694476c7e4b9d82d6fa9 Mon Sep 17 00:00:00 2001 From: lockys Date: Mon, 13 Jun 2016 21:03:20 +0800 Subject: [PATCH 056/135] fix typo and some description. --- README.md | 4 +- translations/zh-TW/README.md | 108 +++++++++++++++++------------------ 2 files changed, 56 insertions(+), 56 deletions(-) diff --git a/README.md b/README.md index e278831..b8dff6e 100644 --- a/README.md +++ b/README.md @@ -69,7 +69,7 @@ Using `.on()` gives you several advantages over using `.click()`, such as the ab .on('click.menuOpening') ``` -Namespaces give you the power to unbind a specific event (e.g., `.off('click.menuOpening')`). +Namespaces give you the power to unbind a specific event (e.g., `.off('click.menuOpening')`). [back to table of contents](#table-of-contents) @@ -426,4 +426,4 @@ Current versions of Chrome, Firefox, Safari, Opera, Edge, and IE11. * [Français](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/fr-FR) * [русский](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/ru-RU) * [简体中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-CN) -* [正體中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-TW) +* [繁體中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-TW) diff --git a/translations/zh-TW/README.md b/translations/zh-TW/README.md index c7f5902..a31dc59 100644 --- a/translations/zh-TW/README.md +++ b/translations/zh-TW/README.md @@ -1,6 +1,6 @@ -# 大家都應該知道的jQuery小技巧 [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) +# 大家都應該知道的 jQuery 小技巧 [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) -一些簡單的小技巧讓您對JQuery更得心應手。 +一些簡單的小技巧讓您對 jQuery 更得心應手。 > 也可以看看由 [@sindresorhus](https://github.com/sindresorhus/) 整理，一些其他很不錯的清單集合： [awesome lists](https://github.com/sindresorhus/awesome/). @@ -15,30 +15,30 @@ ## 技巧 -1. [檢查jQuery是否成功載入](#checking-if-jquery-loaded) -1. [使用 `.on()` 做Binding，而不要使用 `.click()`](#use-on-binding-instead-of-click) +1. [檢查 jQuery 是否成功載入](#checking-if-jquery-loaded) +1. [使用 `.on()` 做 Binding，而不要使用 `.click()`](#use-on-binding-instead-of-click) 1. [返回最頂端的按鈕](#back-to-top-button) 1. [預先載入圖片](#preload-images) 1. [檢查圖片是否成功載入](#checking-if-images-are-loaded) -1. [自動修復壞掉的圖片](#fix-broken-images-automatically) -1. [透過Hover切換Class](#toggle-classes-on-hover) -1. [讓 inupt field 無法輸入](#disabling-input-fields) +1. [自動修復載入失敗的圖片](#fix-broken-images-automatically) +1. [透過 Hover 切換 Class](#toggle-classes-on-hover) +1. [讓 input field 無法輸入](#disabling-input-fields) 1. [停止載入連結](#stop-the-loading-of-links) -1. [Cache jQuery 選擇器](#cache-jquery-selectors) +1. [快取 jQuery 選擇器](#cache-jquery-selectors) 1. [切換 Fade/Slide](#toggle-fadeslide) -1. [簡單可收放元件（accordion）](#simple-accordion) -1. [使兩個Div一樣高](#make-two-divs-the-same-height) +1. [簡單可收放元件(Accordion)](#simple-accordion) +1. [使兩個 Div 一樣高](#make-two-divs-the-same-height) 1. [在新分頁/視窗開啟外部連結](#open-external-links-in-new-tabwindow) 1. [利用文字找到元素](#find-element-by-text) -1. [觸發 Visibility 改變](#trigger-on-visibility-change) +1. [Visibility 改變時觸發事件](#trigger-on-visibility-change) 1. [Ajax 程序的錯誤處理](#ajax-call-error-handling) -1. [串連 Plugin 的呼叫](#chain-plugin-calls) -1. [照字母順序排清單元素（list）](#sort-list-items-alphabetically) +1. [串連 Plugin 的函式呼叫](#chain-plugin-calls) +1. [照字母順序排序清單元素（list）](#sort-list-items-alphabetically) -### 檢查jQuery是否成功載入 +### 檢查 jQuery 是否成功載入 -在你使用JQuery做任何事情之前，你應該先確定其是否成功載入： +在你使用 jQuery 做任何事情之前，你應該先確定其是否成功載入： ```javascript if (typeof jQuery == 'undefined') { @@ -52,15 +52,15 @@ if (typeof jQuery == 'undefined') { [回到目錄](#table-of-contents) -### 使用 `.on()` 做Binding，而不要使用 `.click()` +### 使用 `.on()` 做 Binding，而不要使用 `.click()` -使用 `.on()` 比起使用 `.click()` 多了一些好處，像是可以加上數個 events... +使用 `.on()` 比起使用 `.click()` 多了一些好處，像是可以加上多個事件(events)... ```javascript .on('click tap hover') ``` -...這樣的連結（binding）也會對動態產生的元素產生效用（不需要每產生一個DOM element就做一次連結)... +...這樣的連結（binding）也會對動態產生的元素產生效用（不需要每產生一個 DOM element 就做一次連結)... ...還能夠使用命名空間（namespace）: @@ -68,14 +68,14 @@ if (typeof jQuery == 'undefined') { .on('click.menuOpening') ``` -命名空間讓你能取消對特定event的連結（例如： `.off('click.menuOpening')`）。 +命名空間讓你能取消對特定事件(event)的連結（例如： `.off('click.menuOpening')`）。 [回到目錄](#table-of-contents) ### 返回最頂端的按鈕 -利用JQuery中 `animate` 以及 `scrollTop` 的函式， 你不需要外加特別的插件來完成「返回最頂端」的功能： +利用 jQuery 中 `animate` 以及 `scrollTop` 的函式， 你不需要外加特別的插件來完成「返回最頂端」的功能： ```javascript // Back to top @@ -92,7 +92,7 @@ $('.container').on('click', '.back-to-top', function (e) {
``` -改變 `scrollTop` 的數值可以改變你希望捲軸停在哪裡， 你正在做的事情是將文件捲動到頂端的動作使用`Animate()`變成使用800毫秒完成的過程。 +改變 `scrollTop` 的數值可以改變你希望捲軸停在哪裡，而你實際上是使用 `animate()` 函式以動畫的方式並花費 800 毫秒的時間滾動到文件的頂端。 **注意:** 看看一些使用 `scrollTop` 而導致的[奇怪行為](https://github.com/jquery/api.jquery.com/issues/417) 。 @@ -101,7 +101,7 @@ $('.container').on('click', '.back-to-top', function (e) { ### 預先載入圖片 -如果你的網頁有很多圖片並非一開始就是看得到的（例如：hover才會看到），讓這些圖片預先載入是很合理的： +如果你的網頁有很多圖片並非一開始就是看得到的（例如：hover 才會看到），讓這些圖片預先載入是很合理的： ```javascript $.preloadImages = function () { @@ -131,9 +131,9 @@ $('img').on('load', function () { [回到目錄](#table-of-contents) -### 自動修復壞掉的圖片 +### 自動修復載入失敗的圖片 -如果你覺得一個一個替換掉壞掉的圖片連結很痛苦，這段程式碼可以讓你不會這麼頭痛： +如果你覺得一個一個替換掉載入失敗的圖片連結很痛苦，這段程式碼可以讓你不會這麼頭痛： ```javascript $('img').on('error', function () { @@ -148,9 +148,9 @@ $('img').on('error', function () { [回到目錄](#table-of-contents) -### 透過Hover切換Class +### 透過 Hover 切換 Class -如果說你想要在一個可點擊元件的外貌被hover過的時候改變他的外貌，你可以在使用者在Hover時加上一個class，當使用者停止Hover時就移除該class： +如果說你想要在一個可點擊元件的外貌被 hover 過的時候改變他的外貌，你可以在使用者 hover 時加上一個 class，當使用者停止 hover 時就移除該 class： ```javascript $('.btn').on('hover', function () { @@ -160,7 +160,7 @@ $('.btn').on('hover', function () { }); ``` -你只要加上必要的CSS即可。如果你想要使用更簡單的方法，使用`toggleClass`函式： +你只要加上必要的 CSS 即可。如果你想要使用更簡單的方法，可以使用 `toggleClass` 函式： ```javascript $('.btn').on('hover', function () { @@ -168,20 +168,20 @@ $('.btn').on('hover', function () { }); ``` -**注意:** 使用CSS可能是更快的解決方法，但是這個方法還是值得我們學習。 +**注意:** 使用 CSS 可能是更快的解決方法，但是這個方法還是值得我們學習。 [回到目錄](#table-of-contents) -### 讓 inupt field 無法輸入 +### 讓 input field 無法輸入 -常常你會希望在使用者進行一些特定動作前， input field 是無法輸入，或是一個 form 的 submit 按鈕是無法點擊的。（例如：點選「我已經閱讀條約。」的checkbox），在 input 加上`disabled`的屬性你就能夠在你想要時開啟權限： +常常你會希望在使用者進行一些特定動作前， input field 是無法輸入，或是一個 form 的 submit 按鈕是無法點擊的。（例如：點選「我已經閱讀條約。」的checkbox），在 input 加上 `disabled` 的屬性你就能夠在你想要時開啟權限： ```javascript $('input[type="submit"]').prop('disabled', true); ``` -你只需要再執行一次`prop`函式，不過是將`disabled` 的數值設成 `false`： +你只需要再執行一次 `prop` 函式，不過是將 `disabled` 的數值設成 `false`： ```javascript $('input[type="submit"]').prop('disabled', false); @@ -192,7 +192,7 @@ $('input[type="submit"]').prop('disabled', false); ### 停止載入連結 -有時候你不想讓連結連至特定網站或是重新載入頁面，你可能想要讓他們做一些其他行為，例如：觸發其他程序，以下將會避免預設的行為發生： +有時候你不想讓連結連至特定網站或是重新載入頁面，你可能想要讓他們做一些其他行為，例如：觸發其他程式，以下將會避免預設的行為發生： ```javascript $('a.no-link').on('click', function (e) { @@ -203,15 +203,15 @@ $('a.no-link').on('click', function (e) { [回到目錄](#table-of-contents) -### Cache jQuery 選擇器 +### 快取 jQuery 選擇器 -想想看你在同一個專案中寫了多少次樣的選擇器，每一個`$('.element')`選擇器每一次都會搜尋整個DOM，不管該選擇器是否在之前執行過。因此，執行一次選擇器並且將結果存在變數中： +想想看你在同一個專案中寫了多少次樣的選擇器，每一個 `$('.element')` 選擇器每一次都會搜尋整個 DOM，不管該選擇器是否在之前執行過。因此，執行一次選擇器並且將結果存在變數中： ```javascript var blocks = $('#blocks').find('li'); ``` -現在你能夠在任何地方使用`blocks`變數而不用每一次都搜尋整個DOM： +現在你能夠在任何地方使用 `blocks` 變數而不用每一次都搜尋整個DOM： ```javascript $('#hideBlocks').on('click', function () { @@ -223,14 +223,14 @@ $('#showBlocks').on('click', function () { }); ``` -Caching jQuery selectors 是能夠簡單增進效能的行為。 +快取 jQuery 選擇器是能夠簡單又能增進效能的小技巧。 [回到目錄](#table-of-contents) ### 切換 Fade/Slide -Sliding 以及 fading 是我們經常使用JQuery來完成的動畫效果。你可能只是想要在使用者點擊某個東西時秀出一個元件，此時 `fadeIn` 以及 `slideDown` 就是你的最佳選擇。如果你想要讓元件在第一次點擊時現身，並且在第二次點擊時消失，以下也可以很好地實現： +Sliding 以及 fading 是我們經常使用 jQuery 來完成的動畫效果。你可能只是想要在使用者點擊某個東西時秀出一個元件，此時 `fadeIn` 以及 `slideDown` 就是你的最佳選擇。如果你想要讓元件在第一次點擊時現身，並且在第二次點擊時消失，以下程式碼也可以很好地實現這個效果： ```javascript @@ -248,7 +248,7 @@ $('.btn').on('click', function () { [回到目錄](#table-of-contents) -### 簡單可收放元件（accordion） +### 簡單可收放元件(Accordion) 這是一個簡單實現可收放元件（accordion）的做法： @@ -265,20 +265,20 @@ $('#accordion').find('.accordion-header').on('click', function () { }); ``` -加上這段程式碼後，你要做的只剩下加上必要的HTML即可。 +加上這段程式碼後，你要做的只剩下加上必要的 HTML 即可。 [回到目錄](#table-of-contents) -### 使兩個Div一樣高 +### 使兩個 Div 一樣高 -有時候不論兩個Div裡面的內容為何，你會希望他們有同樣的高度： +有時候不論兩個 Div 裡面的內容為何，你會希望他們有同樣的高度： ```javascript $('.div').css('min-height', $('.main-div').height()); ``` -這個例子設定 `min-height`，表示其只能比 main div 的 `height` 大，永遠不會比它小。然而，在一組元素中循環並將各元素之 `height` 調整至最高的元素高度為另一種更彈性的方法： +這個例子設定 `min-height`，表示其只能比 `.main-div` 的 `height` 大，永遠不會比它小。然而，在一組元素中循環並將各元素之 `height` 調整至最高的元素高度為另一種更彈性的方法： ```javascript var $columns = $('.column'); @@ -300,14 +300,14 @@ $rows.each(function () { }); ``` -**注意:** 這件事可以使用幾種方法完成，[使用CSS](http://codepen.io/AllThingsSmitty/pen/KMPqoO) 這跟你的需求有關，但也值得知道如何使用JQuery完成。 +**注意:** 這件事可以使用幾種方法完成，[使用 CSS](http://codepen.io/AllThingsSmitty/pen/KMPqoO) 這跟你的需求有關，但也值得知道如何使用 jQuery完成。 [回到目錄](#table-of-contents) ### 在新分頁/視窗開啟外部連結 -在瀏覽器新的分頁或視窗中開啟新的外部連結，並且確定同樣源頭的連結會在同樣的分頁或視窗開啟： +在瀏覽器新的分頁或視窗中開啟新的外部連結，並且確定同樣 host 的連結會在同樣的分頁或視窗開啟： ```javascript $('a[href^="http"]').attr('target', '_blank'); @@ -315,14 +315,14 @@ $('a[href^="//"]').attr('target', '_blank'); $('a[href^="' + window.location.origin + '"]').attr('target', '_self'); ``` -**注意:** `window.location.origin` 在IE10中無效。[這個方法](http://tosbourn.com/a-fix-for-window-location-origin-in-internet-explorer/) 可以解決這個問題。 +**注意:** `window.location.origin` 在 IE 10 中無效。[這個方法](http://tosbourn.com/a-fix-for-window-location-origin-in-internet-explorer/) 可以解決這個問題。 [回到目錄](#table-of-contents) ### 利用文字找到元素 -利用JQuery中 `contains()` 選擇器，你可以找到元素內容中的文字。如果沒有文字，該元素會被隱藏： +利用 jQuery 中 `contains()` 選擇器，你可以找到元素內容中的文字。如果沒有文字，該元素會被隱藏： ```javascript var search = $('#search').val(); @@ -332,9 +332,9 @@ $('div:not(:contains("' + search + '"))').hide(); [回到目錄](#table-of-contents) -### 觸發 Visibility 改變 +### Visibility 改變時觸發事件 -當使用者不再停留在某分頁，或是重新停留在某分頁，觸發JavaScript： +當使用者不再停留在某分頁，或是重新停留在某分頁，觸發 JavaScript： ```javascript $(document).on('visibilitychange', function (e) { @@ -351,7 +351,7 @@ $(document).on('visibilitychange', function (e) { ### Ajax 程序的錯誤處理 -當一個Ajax 程序呼叫後回傳 404 或是 500 錯誤，錯誤處理程序將會被執行。如果沒有定義錯誤處理程序，其他JQuery的程式碼可能不會運作。定義一個全域Ajax錯誤處理程序： +當一個 Ajax 程序呼叫後回傳 404 或是 500 錯誤，錯誤處理程序將會被執行。如果沒有定義錯誤處理程序，其他 jQuery 的程式碼可能不會運作。定義一個全域 Ajax 錯誤處理程序： ```javascript $(document).on('ajaxError', function (e, xhr, settings, error) { @@ -362,9 +362,9 @@ $(document).on('ajaxError', function (e, xhr, settings, error) { [回到目錄](#table-of-contents) -### 串連 Plugin 的呼叫 +### 串連 Plugin 的函式呼叫 -JQuery 允許「串連」plugin 函式的呼叫來緩和重複查找 DOM 以及重複產生 JQuery 物件。以下的程式碼展示了 plugin 函式的呼叫： +jQuery 允許「串連」 plugin 函式的呼叫來減少重複搜尋 DOM 以及產生多個 jQuery 物件。以下的程式碼展示了 plugin 函式的呼叫： ```javascript $('#elem').show(); @@ -381,7 +381,7 @@ $('#elem') .otherStuff(); ``` -另外一種方法是利用一個變數來 cache 一個元素（在前面加上 `$`）： +另外一種方法是利用一個變數來快取(cache)一個元素（在變數前面加上 `$`）： ```javascript var $elem = $('#elem'); @@ -390,7 +390,7 @@ $elem.html('bla'); $elem.otherStuff(); ``` -JQuery 中串連以及[caching](#cache-jquery-selectors)的方法是最簡潔最快速的實作方式。 +jQuery 中串連以及[快取](#cache-jquery-selectors)的方法是最簡潔且最快速的實作方式。 [回到目錄](#table-of-contents) @@ -417,7 +417,7 @@ ul.append(lis); ## 瀏覽器支援 -現今版本的Chrome，Firefox，Safari，Opera，Edge 以及 IE11。 +現今版本的 Chrome，Firefox，Safari，Opera，Edge 以及 IE11。 ## 翻譯 From 5f027a2e43a7a185fda8a3e790844f44b0637538 Mon Sep 17 00:00:00 2001 From: lockys Date: Mon, 13 Jun 2016 21:10:19 +0800 Subject: [PATCH 057/135] fix anchor. --- translations/zh-TW/README.md | 38 ++++++++++++++++++------------------ 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/translations/zh-TW/README.md b/translations/zh-TW/README.md index a31dc59..2c4abbe 100644 --- a/translations/zh-TW/README.md +++ b/translations/zh-TW/README.md @@ -15,25 +15,25 @@ ## 技巧 -1. [檢查 jQuery 是否成功載入](#checking-if-jquery-loaded) -1. [使用 `.on()` 做 Binding，而不要使用 `.click()`](#use-on-binding-instead-of-click) -1. [返回最頂端的按鈕](#back-to-top-button) -1. [預先載入圖片](#preload-images) -1. [檢查圖片是否成功載入](#checking-if-images-are-loaded) -1. [自動修復載入失敗的圖片](#fix-broken-images-automatically) -1. [透過 Hover 切換 Class](#toggle-classes-on-hover) -1. [讓 input field 無法輸入](#disabling-input-fields) -1. [停止載入連結](#stop-the-loading-of-links) -1. [快取 jQuery 選擇器](#cache-jquery-selectors) -1. [切換 Fade/Slide](#toggle-fadeslide) -1. [簡單可收放元件(Accordion)](#simple-accordion) -1. [使兩個 Div 一樣高](#make-two-divs-the-same-height) -1. [在新分頁/視窗開啟外部連結](#open-external-links-in-new-tabwindow) -1. [利用文字找到元素](#find-element-by-text) -1. [Visibility 改變時觸發事件](#trigger-on-visibility-change) -1. [Ajax 程序的錯誤處理](#ajax-call-error-handling) -1. [串連 Plugin 的函式呼叫](#chain-plugin-calls) -1. [照字母順序排序清單元素（list）](#sort-list-items-alphabetically) +1. [檢查 jQuery 是否成功載入](#檢查-jquery-是否成功載入) +1. [使用 `.on()` 做 Binding，而不要使用 `.click()`](#使用-on-做-binding而不要使用-click) +1. [返回最頂端的按鈕](#返回最頂端的按鈕) +1. [預先載入圖片](#預先載入圖片) +1. [檢查圖片是否成功載入](#檢查圖片是否成功載入) +1. [自動修復載入失敗的圖片](#自動修復載入失敗的圖片) +1. [透過 Hover 切換 Class](#透過-hover-切換-class) +1. [讓 input field 無法輸入](#讓-input-field-無法輸入) +1. [停止載入連結](#停止載入連結) +1. [快取 jQuery 選擇器](#快取-jquery-選擇器) +1. [切換 Fade/Slide](#切換-fadeslide) +1. [簡單可收放元件(Accordion)](#簡單可收放元件accordion) +1. [使兩個 Div 一樣高](#使兩個-div-一樣高) +1. [在新分頁/視窗開啟外部連結](#在新分頁視窗開啟外部連結) +1. [利用文字找到元素](#利用文字找到元素) +1. [Visibility 改變時觸發事件](#visibility-改變時觸發事件) +1. [Ajax 程序的錯誤處理](#ajax-程序的錯誤處理) +1. [串連 Plugin 的函式呼叫](#串連-plugin-的函式呼叫) +1. [照字母順序排序清單元素（list）](#照字母順序排清單元素list) ### 檢查 jQuery 是否成功載入 From af14180d9f2c033ec7f8ff9b147303206d4d6654 Mon Sep 17 00:00:00 2001 From: lockys Date: Mon, 13 Jun 2016 21:12:14 +0800 Subject: [PATCH 058/135] fix broken links and anchor. --- translations/zh-TW/README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/translations/zh-TW/README.md b/translations/zh-TW/README.md index 2c4abbe..c3c82a7 100644 --- a/translations/zh-TW/README.md +++ b/translations/zh-TW/README.md @@ -7,10 +7,10 @@ ## 目錄 -* [技巧](#tips) -* [瀏覽器支援](#support) -* [翻譯](#translations) -* [貢獻守則](CONTRIBUTING.md) +* [技巧](#技巧) +* [瀏覽器支援](#瀏覽器支援) +* [翻譯](#翻譯) +* [貢獻守則](../../CONTRIBUTING.md) ## 技巧 From db9dce2f563557ac3eca04e69e43b4b4100e3194 Mon Sep 17 00:00:00 2001 From: lockys Date: Mon, 13 Jun 2016 21:13:30 +0800 Subject: [PATCH 059/135] fix anchor. --- translations/zh-TW/README.md | 38 ++++++++++++++++++------------------ 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/translations/zh-TW/README.md b/translations/zh-TW/README.md index c3c82a7..bd28e7f 100644 --- a/translations/zh-TW/README.md +++ b/translations/zh-TW/README.md @@ -49,7 +49,7 @@ if (typeof jQuery == 'undefined') { ``` -[回到目錄](#table-of-contents) +[回到目錄](#目錄) ### 使用 `.on()` 做 Binding，而不要使用 `.click()` @@ -70,7 +70,7 @@ if (typeof jQuery == 'undefined') { 命名空間讓你能取消對特定事件(event)的連結（例如： `.off('click.menuOpening')`）。 -[回到目錄](#table-of-contents) +[回到目錄](#目錄) ### 返回最頂端的按鈕 @@ -96,7 +96,7 @@ $('.container').on('click', '.back-to-top', function (e) { **注意:** 看看一些使用 `scrollTop` 而導致的[奇怪行為](https://github.com/jquery/api.jquery.com/issues/417) 。 -[回到目錄](#table-of-contents) +[回到目錄](#目錄) ### 預先載入圖片 @@ -113,7 +113,7 @@ $.preloadImages = function () { $.preloadImages('img/hover-on.png', 'img/hover-off.png'); ``` -[回到目錄](#table-of-contents) +[回到目錄](#目錄) ### 檢查圖片是否成功載入 @@ -128,7 +128,7 @@ $('img').on('load', function () { 你也可以透過替換 `` 成其他 ID 或 class 來檢查特定圖片。 -[回到目錄](#table-of-contents) +[回到目錄](#目錄) ### 自動修復載入失敗的圖片 @@ -145,7 +145,7 @@ $('img').on('error', function () { 甚至你沒有任何壞掉的圖片連結，這段程式碼也不會帶來什麼壞影響。 -[回到目錄](#table-of-contents) +[回到目錄](#目錄) ### 透過 Hover 切換 Class @@ -170,7 +170,7 @@ $('.btn').on('hover', function () { **注意:** 使用 CSS 可能是更快的解決方法，但是這個方法還是值得我們學習。 -[回到目錄](#table-of-contents) +[回到目錄](#目錄) ### 讓 input field 無法輸入 @@ -187,7 +187,7 @@ $('input[type="submit"]').prop('disabled', true); $('input[type="submit"]').prop('disabled', false); ``` -[回到目錄](#table-of-contents) +[回到目錄](#目錄) ### 停止載入連結 @@ -200,7 +200,7 @@ $('a.no-link').on('click', function (e) { }); ``` -[回到目錄](#table-of-contents) +[回到目錄](#目錄) ### 快取 jQuery 選擇器 @@ -225,7 +225,7 @@ $('#showBlocks').on('click', function () { 快取 jQuery 選擇器是能夠簡單又能增進效能的小技巧。 -[回到目錄](#table-of-contents) +[回到目錄](#目錄) ### 切換 Fade/Slide @@ -245,7 +245,7 @@ $('.btn').on('click', function () { }); ``` -[回到目錄](#table-of-contents) +[回到目錄](#目錄) ### 簡單可收放元件(Accordion) @@ -267,7 +267,7 @@ $('#accordion').find('.accordion-header').on('click', function () { 加上這段程式碼後，你要做的只剩下加上必要的 HTML 即可。 -[回到目錄](#table-of-contents) +[回到目錄](#目錄) ### 使兩個 Div 一樣高 @@ -302,7 +302,7 @@ $rows.each(function () { **注意:** 這件事可以使用幾種方法完成，[使用 CSS](http://codepen.io/AllThingsSmitty/pen/KMPqoO) 這跟你的需求有關，但也值得知道如何使用 jQuery完成。 -[回到目錄](#table-of-contents) +[回到目錄](#目錄) ### 在新分頁/視窗開啟外部連結 @@ -317,7 +317,7 @@ $('a[href^="' + window.location.origin + '"]').attr('target', '_self'); **注意:** `window.location.origin` 在 IE 10 中無效。[這個方法](http://tosbourn.com/a-fix-for-window-location-origin-in-internet-explorer/) 可以解決這個問題。 -[回到目錄](#table-of-contents) +[回到目錄](#目錄) ### 利用文字找到元素 @@ -329,7 +329,7 @@ var search = $('#search').val(); $('div:not(:contains("' + search + '"))').hide(); ``` -[回到目錄](#table-of-contents) +[回到目錄](#目錄) ### Visibility 改變時觸發事件 @@ -346,7 +346,7 @@ $(document).on('visibilitychange', function (e) { }); ``` -[回到目錄](#table-of-contents) +[回到目錄](#目錄) ### Ajax 程序的錯誤處理 @@ -359,7 +359,7 @@ $(document).on('ajaxError', function (e, xhr, settings, error) { }); ``` -[回到目錄](#table-of-contents) +[回到目錄](#目錄) ### 串連 Plugin 的函式呼叫 @@ -392,7 +392,7 @@ $elem.otherStuff(); jQuery 中串連以及[快取](#cache-jquery-selectors)的方法是最簡潔且最快速的實作方式。 -[回到目錄](#table-of-contents) +[回到目錄](#目錄) ### 照字母順序排清單元素（list） @@ -412,7 +412,7 @@ ul.append(lis); 就是這樣！ -[回到目錄](#table-of-contents) +[回到目錄](#目錄) ## 瀏覽器支援 From a2421be0c810db61002cb18a2d2057bb90902cbc Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Mon, 13 Jun 2016 20:48:30 -0400 Subject: [PATCH 060/135] =?UTF-8?q?Minor=20edit=20=E2=9C=8F=EF=B8=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index b8dff6e..da4a837 100644 --- a/README.md +++ b/README.md @@ -424,6 +424,6 @@ Current versions of Chrome, Firefox, Safari, Opera, Edge, and IE11. * [Español](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/es-ES) * [Français](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/fr-FR) -* [русский](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/ru-RU) +* [Pусский](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/ru-RU) * [简体中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-CN) * [繁體中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-TW) From f3dcfec654b3dc7c1018418c326e520083b71558 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Tue, 26 Jul 2016 20:52:17 -0400 Subject: [PATCH 061/135] =?UTF-8?q?Deleted=20media=20directory=20?= =?UTF-8?q?=F0=9F=9A=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- media/logo.svg | 5 ----- 1 file changed, 5 deletions(-) delete mode 100644 media/logo.svg diff --git a/media/logo.svg b/media/logo.svg deleted file mode 100644 index 4a53585..0000000 --- a/media/logo.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - \ No newline at end of file From d5dd88b4780d41afb305f129072bec4ffd1fcf2b Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Mon, 5 Sep 2016 00:09:35 -0400 Subject: [PATCH 062/135] =?UTF-8?q?Added=20hiding=20broken=20images=20tip?= =?UTF-8?q?=20=F0=9F=92=83=F0=9F=8F=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 11 ++++++++++- js/fix-broken-images-automatically.js | 5 +++++ translations/es-ES/README.md | 8 +++++++- translations/fr-FR/README.md | 8 +++++++- translations/ru-RU/README.md | 8 +++++++- translations/zh-CN/README.md | 8 +++++++- translations/zh-TW/README.md | 8 +++++++- 7 files changed, 50 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index da4a837..164dc6b 100644 --- a/README.md +++ b/README.md @@ -21,6 +21,9 @@ A collection of simple tips to help up your jQuery game. 1. [Preload Images](#preload-images) 1. [Checking If Images Are Loaded](#checking-if-images-are-loaded) 1. [Fix Broken Images Automatically](#fix-broken-images-automatically) + + + 1. [Toggle Classes on Hover](#toggle-classes-on-hover) 1. [Disabling Input Fields](#disabling-input-fields) 1. [Stop the Loading of Links](#stop-the-loading-of-links) @@ -144,7 +147,13 @@ $('img').on('error', function () { }); ``` -Even if you don't have any broken links, adding this won't do any harm. +Alternatively, if you wish to simply hide broken images this snippet will take care of that for: + +```javascript +$('img').on('error', function () { + $(this).hide(); +}); +``` [back to table of contents](#table-of-contents) diff --git a/js/fix-broken-images-automatically.js b/js/fix-broken-images-automatically.js index 900c810..7529ce7 100644 --- a/js/fix-broken-images-automatically.js +++ b/js/fix-broken-images-automatically.js @@ -3,4 +3,9 @@ $('img').on('error', function () { if(!$(this).hasClass('broken-image')) { $(this).prop('src', 'img/broken.png').addClass('broken-image'); } +}); + +// Hide broken images +$('img').on('error', function () { + $(this).hide(); }); \ No newline at end of file diff --git a/translations/es-ES/README.md b/translations/es-ES/README.md index c6afda1..909650e 100644 --- a/translations/es-ES/README.md +++ b/translations/es-ES/README.md @@ -148,7 +148,13 @@ $('img').on('error', function () { }); ``` -Incluso si usted no tiene ningún enlaces rotos, añadiendo que esto no hará ningún daño. +Alternativamente, si desea ocultar simplemente imágenes rotas este fragmento se encargará de que para: + +```javascript +$('img').on('error', function () { + $(this).hide(); +}); +``` [volver al índice de contenidos](#table-of-contents) diff --git a/translations/fr-FR/README.md b/translations/fr-FR/README.md index 41c496c..8565338 100644 --- a/translations/fr-FR/README.md +++ b/translations/fr-FR/README.md @@ -148,7 +148,13 @@ $('img').on('error', function () { }); ``` -Même si vous n'avez pas de liens brisés, ajoutant cela ne fera pas de mal. +Alternativement, si vous souhaitez simplement masquer les images brisées cet extrait prendra soin de cela pour: + +```javascript +$('img').on('error', function () { + $(this).hide(); +}); +``` [retour à la table des matières](#table-of-contents) diff --git a/translations/ru-RU/README.md b/translations/ru-RU/README.md index ecbd78e..f95df49 100644 --- a/translations/ru-RU/README.md +++ b/translations/ru-RU/README.md @@ -148,7 +148,13 @@ $('img').on('error', function () { }); ``` -Даже если у вас нет неработающих ссылок, добавление этого скрипта не принесет никакого вреда. +В качестве альтернативы, если вы хотите просто скрыть сломанные изображения этот фрагмент будет заботиться о том, что для: + +```javascript +$('img').on('error', function () { + $(this).hide(); +}); +``` [вернуться к оглавлению](#table-of-contents) diff --git a/translations/zh-CN/README.md b/translations/zh-CN/README.md index 5868c0e..276232f 100644 --- a/translations/zh-CN/README.md +++ b/translations/zh-CN/README.md @@ -149,7 +149,13 @@ $('img').on('error', function () { }); ``` -即使你没有任何断开的链接，这将不会做任何伤害。 +另外，如果你想简单地隐藏破碎的形象这个片段将利用该护理： + +```javascript +$('img').on('error', function () { + $(this).hide(); +}); +``` [回目录](#table-of-contents) diff --git a/translations/zh-TW/README.md b/translations/zh-TW/README.md index bd28e7f..b1d8091 100644 --- a/translations/zh-TW/README.md +++ b/translations/zh-TW/README.md @@ -143,7 +143,13 @@ $('img').on('error', function () { }); ``` -甚至你沒有任何壞掉的圖片連結，這段程式碼也不會帶來什麼壞影響。 +另外，如果你想简单地隐藏破碎的形象这个片段将利用该护理： + +```javascript +$('img').on('error', function () { + $(this).hide(); +}); +``` [回到目錄](#目錄) From 6e07eed7c4fb00638faeea1987d2ee30e6370658 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Tue, 13 Sep 2016 22:21:22 -0400 Subject: [PATCH 063/135] =?UTF-8?q?Added=20AJAX=20tip=20=F0=9F=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 25 ++++++++++++++++++++++--- js/post-a-form-with-ajax.js | 11 +++++++++++ 2 files changed, 33 insertions(+), 3 deletions(-) create mode 100644 js/post-a-form-with-ajax.js diff --git a/README.md b/README.md index 164dc6b..80bcee0 100644 --- a/README.md +++ b/README.md @@ -21,9 +21,7 @@ A collection of simple tips to help up your jQuery game. 1. [Preload Images](#preload-images) 1. [Checking If Images Are Loaded](#checking-if-images-are-loaded) 1. [Fix Broken Images Automatically](#fix-broken-images-automatically) - - - +1. [Post a Form with AJAX](#post-a-form-with-ajax) 1. [Toggle Classes on Hover](#toggle-classes-on-hover) 1. [Disabling Input Fields](#disabling-input-fields) 1. [Stop the Loading of Links](#stop-the-loading-of-links) @@ -158,6 +156,27 @@ $('img').on('error', function () { [back to table of contents](#table-of-contents) +### Post a Form with AJAX + +jQuery AJAX methods are a common way to request text, HTML, XML, or JSON. If you wanted to send a form via AJAX you could collect the user inputs via the `val()` method: + +```javascript +$.post('sign_up.php', { + user_name: $('input[name=user_name]').val(), + email: $('input[name=email]').val(), + password: $('input[name=password]').val(), +}); +``` + +However, all of those `val()` calls is expensive. A better way of collecting the user inputs is using the `serialize()` function which collects the user inputs as a string: + +```javascript +$.post('sign_up', $('#sign-up-form').serialize()); +``` + +[back to table of contents](#table-of-contents) + + ### Toggle Classes on Hover Let's say you want to change the visual of a clickable element on your page when a user hovers over it. You can add a class to your element when the user is hovering; when the user stops hovering removes the class: diff --git a/js/post-a-form-with-ajax.js b/js/post-a-form-with-ajax.js new file mode 100644 index 0000000..4f5a747 --- /dev/null +++ b/js/post-a-form-with-ajax.js @@ -0,0 +1,11 @@ +// Post a form with AJAX + +// DO THIS +$.post('sign_up', $('#sign-up-form').serialize()); + +// NOT THIS +$.post('sign_up.php', { + user_name: $('input[name=user_name]').val(), + email: $('input[name=email]').val(), + password: $('input[name=password]').val(), +}); \ No newline at end of file From f35d128e0c487d53faf8d79a96f42059d3d86476 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Tue, 13 Sep 2016 22:44:49 -0400 Subject: [PATCH 064/135] =?UTF-8?q?Minor=20edit=20=E2=9C=8F=EF=B8=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 80bcee0..cba7b83 100644 --- a/README.md +++ b/README.md @@ -168,7 +168,7 @@ $.post('sign_up.php', { }); ``` -However, all of those `val()` calls is expensive. A better way of collecting the user inputs is using the `serialize()` function which collects the user inputs as a string: +However, all of those `val()` calls are expensive. A better way of collecting the user inputs is using the `serialize()` function which collects the user inputs as a string: ```javascript $.post('sign_up', $('#sign-up-form').serialize()); From 6faa01e7a8ecf52931ffc74d7ed972f60e3acc94 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Wed, 14 Sep 2016 00:00:12 -0400 Subject: [PATCH 065/135] =?UTF-8?q?Added=20link=20to=20translations=20?= =?UTF-8?q?=F0=9F=8F=84=F0=9F=8F=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CONTRIBUTING.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 80a3f5c..7f28314 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -33,7 +33,7 @@ Thank you for your suggestions! If you fluently speak another language and want to contribute by translating this list into that language, please submit a PR using the following guidelines: -* Add a new folder to the `translations` folder +* Add a new folder to the [`translations`](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations) folder * The new folder should be labeled the language culture name, e.g, `es-ES`, `ru-RU`, `zh-CN`, etc. Additionally, feel free to review already translated content for accuracy. From 25fa675d3caf91334ca8b87fcf2e9773ed7f80da Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Wed, 14 Sep 2016 00:00:58 -0400 Subject: [PATCH 066/135] =?UTF-8?q?Added=20AJAX=20tip=20=F0=9F=90=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- translations/es-ES/README.md | 24 +++++++++++++++++++++++- translations/fr-FR/README.md | 23 +++++++++++++++++++++++ translations/ru-RU/README.md | 23 +++++++++++++++++++++++ translations/zh-CN/README.md | 23 +++++++++++++++++++++++ translations/zh-TW/README.md | 23 +++++++++++++++++++++++ 5 files changed, 115 insertions(+), 1 deletion(-) diff --git a/translations/es-ES/README.md b/translations/es-ES/README.md index 909650e..9319215 100644 --- a/translations/es-ES/README.md +++ b/translations/es-ES/README.md @@ -21,6 +21,7 @@ Una colección de consejos simples para ayudar a su juego jQuery. 1. [Carga previa de imágenes](#preload-images) 1. [comprobando si las imágenes se cargan](#checking-if-images-are-loaded) 1. [corregir imágenes automáticamente rotas](#fix-broken-images-automatically) +1. [Publicar un formulario con AJAX](#post-a-form-with-ajax) 1. [Las clases de palanca en la libración](#toggle-classes-on-hover) 1. [Desactivar la acción de campos](#disabling-input-fields) 1. [Detener la carga de Enlaces](#stop-the-loading-of-links) @@ -159,6 +160,28 @@ $('img').on('error', function () { [volver al índice de contenidos](#table-of-contents) +
+### Publicar un formulario con AJAX + +Métodos jQuery AJAX son una forma común para solicitar texto, HTML, XML, JSON o. Si desea enviar un formulario a través de AJAX se podía recoger las entradas del usuario a través del método `val()`: + +```javascript +$.post('sign_up.php', { + user_name: $('input[name=user_name]').val(), + email: $('input[name=email]').val(), + password: $('input[name=password]').val(), +}); +``` + +Sin embargo, todos esos `val()` llamadas es caro. Una mejor manera de recoger las entradas del usuario está utilizando el `serialize()` función que recoge las entradas del usuario como una cadena: + +```javascript +$.post('sign_up', $('#sign-up-form').serialize()); +``` + +[volver al índice de contenidos](#table-of-contents) + +
### Alternar clases en la libración @@ -179,7 +202,6 @@ $('.btn').hover(function () { $(this).toggleClass('hover'); }); ``` -``` **Nota:** CSS puede ser una solución más rápida en este caso, pero es todavía vale la pena saber esto. diff --git a/translations/fr-FR/README.md b/translations/fr-FR/README.md index 8565338..b5b49a0 100644 --- a/translations/fr-FR/README.md +++ b/translations/fr-FR/README.md @@ -21,6 +21,7 @@ Une collection de conseils simples pour aider votre jeu jQuery. 1. [Précharger Images](#preload-images) 1. [Vérification Si les images sont chargées](#checking-if-images-are-loaded) 1. [Fix Broken Images automatiquement](#fix-broken-images-automatically) +1. [Poster un formulaire avec AJAX](#post-a-form-with-ajax) 1. [Basculer Classes sur Hover](#toggle-classes-on-hover) 1. [Entrée Désactivation champs](#disabling-input-fields) 1. [Arrêter le chargement des Liens](#stop-the-loading-of-links) @@ -159,6 +160,28 @@ $('img').on('error', function () { [retour à la table des matières](#table-of-contents) +
+### Poster un formulaire avec AJAX + +Méthodes jQuery AJAX sont une voie commune pour demander le texte, HTML, XML ou JSON. Si vous voulez envoyer un formulaire via AJAX, vous pouvez collecter les entrées utilisateur via la méthode `val()`: + +```javascript +$.post('sign_up.php', { + user_name: $('input[name=user_name]').val(), + email: $('input[name=email]').val(), + password: $('input[name=password]').val(), +}); +``` + +Cependant, tous ces `val()` appels est coûteux. Une meilleure façon de recueillir les entrées de l'utilisateur utilise le `serialize()` de fonction qui recueille les entrées de l'utilisateur sous forme de chaîne: + +```javascript +$.post('sign_up', $('#sign-up-form').serialize()); +``` + +[retour à la table des matières](#table-of-contents) + +
### Basculer Classes sur Hover diff --git a/translations/ru-RU/README.md b/translations/ru-RU/README.md index f95df49..f33ab2e 100644 --- a/translations/ru-RU/README.md +++ b/translations/ru-RU/README.md @@ -21,6 +21,7 @@ 1. [Предварительная загрузка изображений](#preload-images) 1. [Проверка, загружаются ли изображения](#checking-if-images-are-loaded) 1. [Автоматическое исправление сломанных изображений](#fix-broken-images-automatically) +1. [Дать форму с помощью AJAX](#post-a-form-with-ajax) 1. [Переключение классов по наведению](#toggle-classes-on-hover) 1. [Отключение поля ввода](#disabling-input-fields) 1. [Прерывание загрузки ссылки](#stop-the-loading-of-links) @@ -159,6 +160,28 @@ $('img').on('error', function () { [вернуться к оглавлению](#table-of-contents) +
+### Дать форму с помощью AJAX + +методы JQuery AJAX являются распространенным способом запросить текст, HTML, XML или JSON. Если вы хотите отправить форму через AJAX можно собирать пользовательские входные данные через `val()` метода: + +```javascript +$.post('sign_up.php', { + user_name: $('input[name=user_name]').val(), + email: $('input[name=email]').val(), + password: $('input[name=password]').val(), +}); +``` + +Тем не менее, все эти `val()` звонки стоят дорого. Лучший способ сбора данных, вводимых пользователем использует `serialize()` функцию, которая собирает пользовательские входные данные в виде строки: + +```javascript +$.post('sign_up', $('#sign-up-form').serialize()); +``` + +[вернуться к оглавлению](#table-of-contents) + +
### Переключение классов по наведению diff --git a/translations/zh-CN/README.md b/translations/zh-CN/README.md index 276232f..47efa5f 100644 --- a/translations/zh-CN/README.md +++ b/translations/zh-CN/README.md @@ -22,6 +22,7 @@ 1. [预先载入图像](#preload-images) 1. [检查，如果图像加载](#checking-if-images-are-loaded) 1. [自动修复破碎的形象](#fix-broken-images-automatically) +1. [发布的AJAX表单](#post-a-form-with-ajax) 1. [悬停切换类](#toggle-classes-on-hover) 1. [禁用输入字段](#disabling-input-fields) 1. [停止路径的负载](#stop-the-loading-of-links) @@ -160,6 +161,28 @@ $('img').on('error', function () { [回目录](#table-of-contents) +
+### 发布的AJAX表单 + +jQuery的AJAX方法来请求文本，HTML，XML或JSON的常用方法。如果你想通过AJAX发送的形式，你可以通过`val()`方法收集用户输入： + +```javascript +$.post('sign_up.php', { + user_name: $('input[name=user_name]').val(), + email: $('input[name=email]').val(), + password: $('input[name=password]').val(), +}); +``` + +然而，所有这些`val()`调用的是昂贵的。收集用户输入的一个更好的办法是使用'的`serialize()`函数，它收集用户输入一个字符串： + +```javascript +$.post('sign_up', $('#sign-up-form').serialize()); +``` + +[回目录](#table-of-contents) + +
### 切换悬停类 diff --git a/translations/zh-TW/README.md b/translations/zh-TW/README.md index b1d8091..e30b22c 100644 --- a/translations/zh-TW/README.md +++ b/translations/zh-TW/README.md @@ -21,6 +21,7 @@ 1. [預先載入圖片](#預先載入圖片) 1. [檢查圖片是否成功載入](#檢查圖片是否成功載入) 1. [自動修復載入失敗的圖片](#自動修復載入失敗的圖片) +1. [發布的AJAX表單](#post-a-form-with-ajax) 1. [透過 Hover 切換 Class](#透過-hover-切換-class) 1. [讓 input field 無法輸入](#讓-input-field-無法輸入) 1. [停止載入連結](#停止載入連結) @@ -154,6 +155,28 @@ $('img').on('error', function () { [回到目錄](#目錄) +
+### 發布的AJAX表單 + +jQuery的AJAX方法來請求文本，HTML，XML或JSON的常用方法。如果你想通過AJAX發送的形式，你可以通過`val()`方法收集用戶輸入： + +```javascript +$.post('sign_up.php', { + user_name: $('input[name=user_name]').val(), + email: $('input[name=email]').val(), + password: $('input[name=password]').val(), +}); +``` + +然而，所有這些`val()`調用的是昂貴的。收集用戶輸入的一個更好的辦法是使用CSS`（）`函數，它收集用戶輸入一個字符串： + +```javascript +$.post('sign_up', $('#sign-up-form').serialize()); +``` + +[回到目錄](#目錄) + + ### 透過 Hover 切換 Class 如果說你想要在一個可點擊元件的外貌被 hover 過的時候改變他的外貌，你可以在使用者 hover 時加上一個 class，當使用者停止 hover 時就移除該 class： From c2f975f1e38a1fc5c764bb933e91431ac48a4707 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Fri, 17 Feb 2017 17:09:24 -0500 Subject: [PATCH 067/135] Removed snippets; README duplicates --- js/ajax-call-error-handling.js | 4 ---- js/back-to-top.js | 5 ----- js/back-to-top.min.js | 1 - js/cache-jquery-selectors.js | 10 ---------- js/chain-plugin-calls.js | 11 ----------- js/checking-if-images-are-loaded.js | 4 ---- js/checking-if-jquery-loaded.js | 6 ------ js/disabling-input-fields.js | 5 ----- js/find-element-by-text.js | 3 --- js/fix-broken-images-automatically.js | 11 ----------- js/make-two-divs-the-same-height.js | 20 -------------------- js/open-external-links-in-new-tab-window.js | 4 ---- js/post-a-form-with-ajax.js | 11 ----------- js/preload-images.js | 8 -------- js/simple-accordion.js | 12 ------------ js/sort-list-items-alphabetically.js | 8 -------- js/stop-the-loading-of-links.js | 4 ---- js/toggle-classes-on-hover.js | 6 ------ js/toggle-fade-slide.js | 11 ----------- js/trigger-on-visibility-change.js | 8 -------- 20 files changed, 152 deletions(-) delete mode 100644 js/ajax-call-error-handling.js delete mode 100644 js/back-to-top.js delete mode 100644 js/back-to-top.min.js delete mode 100644 js/cache-jquery-selectors.js delete mode 100644 js/chain-plugin-calls.js delete mode 100644 js/checking-if-images-are-loaded.js delete mode 100644 js/checking-if-jquery-loaded.js delete mode 100644 js/disabling-input-fields.js delete mode 100644 js/find-element-by-text.js delete mode 100644 js/fix-broken-images-automatically.js delete mode 100644 js/make-two-divs-the-same-height.js delete mode 100644 js/open-external-links-in-new-tab-window.js delete mode 100644 js/post-a-form-with-ajax.js delete mode 100644 js/preload-images.js delete mode 100644 js/simple-accordion.js delete mode 100644 js/sort-list-items-alphabetically.js delete mode 100644 js/stop-the-loading-of-links.js delete mode 100644 js/toggle-classes-on-hover.js delete mode 100644 js/toggle-fade-slide.js delete mode 100644 js/trigger-on-visibility-change.js diff --git a/js/ajax-call-error-handling.js b/js/ajax-call-error-handling.js deleted file mode 100644 index e5efd24..0000000 --- a/js/ajax-call-error-handling.js +++ /dev/null @@ -1,4 +0,0 @@ -// Ajax call error handling -$(document).on('ajaxError', function (e, xhr, settings, error) { - console.log(error); -}); \ No newline at end of file diff --git a/js/back-to-top.js b/js/back-to-top.js deleted file mode 100644 index bbcde67..0000000 --- a/js/back-to-top.js +++ /dev/null @@ -1,5 +0,0 @@ -// Back to top -$('.container').on('click', '.back-to-top', function (e) { - e.preventDefault(); - $('html, body').animate({scrollTop: 0}, 800); -}); \ No newline at end of file diff --git a/js/back-to-top.min.js b/js/back-to-top.min.js deleted file mode 100644 index 44f3dcc..0000000 --- a/js/back-to-top.min.js +++ /dev/null @@ -1 +0,0 @@ -$(".container").on("click",".back-to-top",function(o){o.preventDefault(),$("html, body").animate({scrollTop:0},800)}); \ No newline at end of file diff --git a/js/cache-jquery-selectors.js b/js/cache-jquery-selectors.js deleted file mode 100644 index 73c98b7..0000000 --- a/js/cache-jquery-selectors.js +++ /dev/null @@ -1,10 +0,0 @@ -// Cache jQuery selectors -var blocks = $('#blocks').find('li'); - -$('#hideBlocks').on('click', function () { - blocks.fadeOut(); -}); - -$('#showBlocks').on('click', function () { - blocks.fadeIn(); -}); \ No newline at end of file diff --git a/js/chain-plugin-calls.js b/js/chain-plugin-calls.js deleted file mode 100644 index e0fe7c4..0000000 --- a/js/chain-plugin-calls.js +++ /dev/null @@ -1,11 +0,0 @@ -// Chain plugin calls -$('#elem') - .show() - .html('bla') - .otherStuff(); - -// Cache element in a variable -var $elem = $('#elem'); -$elem.hide(); -$elem.html('bla'); -$elem.otherStuff(); \ No newline at end of file diff --git a/js/checking-if-images-are-loaded.js b/js/checking-if-images-are-loaded.js deleted file mode 100644 index 81f120c..0000000 --- a/js/checking-if-images-are-loaded.js +++ /dev/null @@ -1,4 +0,0 @@ -// Checking if images are loaded -$('img').on('load', function () { - console.log('image load successful'); -}); \ No newline at end of file diff --git a/js/checking-if-jquery-loaded.js b/js/checking-if-jquery-loaded.js deleted file mode 100644 index 584d6a5..0000000 --- a/js/checking-if-jquery-loaded.js +++ /dev/null @@ -1,6 +0,0 @@ -// Checking If jQuery Loaded -if (typeof jQuery == 'undefined') { - console.log('jQuery hasn\'t loaded'); -} else { - console.log('jQuery has loaded'); -} \ No newline at end of file diff --git a/js/disabling-input-fields.js b/js/disabling-input-fields.js deleted file mode 100644 index 1283a54..0000000 --- a/js/disabling-input-fields.js +++ /dev/null @@ -1,5 +0,0 @@ -// Disabling input fields -$('input[type="submit"]').prop('disabled', true); - -// Then enable input fields -$('input[type="submit"]').prop('disabled', false); \ No newline at end of file diff --git a/js/find-element-by-text.js b/js/find-element-by-text.js deleted file mode 100644 index fdd90e3..0000000 --- a/js/find-element-by-text.js +++ /dev/null @@ -1,3 +0,0 @@ -// Find element by text -var search = $('#search').val(); -$('div:not(:contains("' + search + '"))').hide(); \ No newline at end of file diff --git a/js/fix-broken-images-automatically.js b/js/fix-broken-images-automatically.js deleted file mode 100644 index 7529ce7..0000000 --- a/js/fix-broken-images-automatically.js +++ /dev/null @@ -1,11 +0,0 @@ -// Fix broken images automatically -$('img').on('error', function () { - if(!$(this).hasClass('broken-image')) { - $(this).prop('src', 'img/broken.png').addClass('broken-image'); - } -}); - -// Hide broken images -$('img').on('error', function () { - $(this).hide(); -}); \ No newline at end of file diff --git a/js/make-two-divs-the-same-height.js b/js/make-two-divs-the-same-height.js deleted file mode 100644 index d029849..0000000 --- a/js/make-two-divs-the-same-height.js +++ /dev/null @@ -1,20 +0,0 @@ -// Make two divs the same height - -// Example 1 -$('.div').css('min-height', $('.main-div').height()); - -// Example 2 -var $columns = $('.column'); -var height = 0; -$columns.each(function () { - if ($(this).height() > height) { - height = $(this).height(); - } -}); -$columns.height(height); - -// Make all child divs the same height -var $rows = $('.same-height-columns'); -$rows.each(function () { - $(this).find('.column').height($(this).height()); -}); \ No newline at end of file diff --git a/js/open-external-links-in-new-tab-window.js b/js/open-external-links-in-new-tab-window.js deleted file mode 100644 index a00177f..0000000 --- a/js/open-external-links-in-new-tab-window.js +++ /dev/null @@ -1,4 +0,0 @@ -// Open external links in new tab/window -$('a[href^="http"]').attr('target', '_blank'); -$('a[href^="//"]').attr('target', '_blank'); -$('a[href^="' + window.location.origin + '"]').attr('target', '_self'); \ No newline at end of file diff --git a/js/post-a-form-with-ajax.js b/js/post-a-form-with-ajax.js deleted file mode 100644 index 4f5a747..0000000 --- a/js/post-a-form-with-ajax.js +++ /dev/null @@ -1,11 +0,0 @@ -// Post a form with AJAX - -// DO THIS -$.post('sign_up', $('#sign-up-form').serialize()); - -// NOT THIS -$.post('sign_up.php', { - user_name: $('input[name=user_name]').val(), - email: $('input[name=email]').val(), - password: $('input[name=password]').val(), -}); \ No newline at end of file diff --git a/js/preload-images.js b/js/preload-images.js deleted file mode 100644 index 12a356e..0000000 --- a/js/preload-images.js +++ /dev/null @@ -1,8 +0,0 @@ -// Preload images -$.preloadImages = function () { - for (var i = 0; i < arguments.length; i++) { - $('img').attr('src', arguments[i]); - } -}; - -$.preloadImages('img/hover-on.png', 'img/hover-off.png'); \ No newline at end of file diff --git a/js/simple-accordion.js b/js/simple-accordion.js deleted file mode 100644 index 1044cfa..0000000 --- a/js/simple-accordion.js +++ /dev/null @@ -1,12 +0,0 @@ -// Simple accordion - -// Close all panels -$('#accordion').find('.content').hide(); - -// Accordion -$('#accordion').find('.accordion-header').on('click', function () { - var next = $(this).next(); - next.slideToggle('fast'); - $('.content').not(next).slideUp('fast'); - return false; -}); \ No newline at end of file diff --git a/js/sort-list-items-alphabetically.js b/js/sort-list-items-alphabetically.js deleted file mode 100644 index a9f1bb3..0000000 --- a/js/sort-list-items-alphabetically.js +++ /dev/null @@ -1,8 +0,0 @@ -var ul = $('#list'), - lis = $('li', ul).get(); - -lis.sort(function (a, b) { - return ($(a).text().toUpperCase() < $(b).text().toUpperCase()) ? -1 : 1; -}); - -ul.append(lis); \ No newline at end of file diff --git a/js/stop-the-loading-of-links.js b/js/stop-the-loading-of-links.js deleted file mode 100644 index 91a40c4..0000000 --- a/js/stop-the-loading-of-links.js +++ /dev/null @@ -1,4 +0,0 @@ -// Stop the loading of links -$('a.no-link').on('click', function (e) { - e.preventDefault(); -}); \ No newline at end of file diff --git a/js/toggle-classes-on-hover.js b/js/toggle-classes-on-hover.js deleted file mode 100644 index f5482f9..0000000 --- a/js/toggle-classes-on-hover.js +++ /dev/null @@ -1,6 +0,0 @@ -// Toggle classes on hover -$('.btn').on('hover', function () { - $(this).addClass('hover'); -}, function () { - $(this).removeClass('hover'); -}); \ No newline at end of file diff --git a/js/toggle-fade-slide.js b/js/toggle-fade-slide.js deleted file mode 100644 index c3da3bc..0000000 --- a/js/toggle-fade-slide.js +++ /dev/null @@ -1,11 +0,0 @@ -// Toggle fade/slide - -// Fade -$('.btn').on('click', function () { - $('.element').fadeToggle('slow'); -}); - -// Toggle -$('.btn').on('click', function () { - $('.element').slideToggle('slow'); -}); \ No newline at end of file diff --git a/js/trigger-on-visibility-change.js b/js/trigger-on-visibility-change.js deleted file mode 100644 index 1ef4e68..0000000 --- a/js/trigger-on-visibility-change.js +++ /dev/null @@ -1,8 +0,0 @@ -// Trigger on visibility change -$(document).on('visibilitychange', function (e) { - if (e.target.visibilityState === 'visible') { - console.log('Tab is now in view!'); - } else if (e.target.visibilityState === 'hidden') { - console.log('Tab is now hidden!'); - } -}); \ No newline at end of file From 8b0a55ac77d41b5d708610163af3f257dcfa0d18 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Fri, 17 Feb 2017 17:09:37 -0500 Subject: [PATCH 068/135] Minor update --- CONTRIBUTING.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 7f28314..23456be 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -20,8 +20,6 @@ Please ensure your pull request adheres to the following guidelines: * Code formatting should follow standard [JSLint](http://www.jslint.com/) default settings, including: * Indent with two spaces * Use single quotes, e.g., `$.preloadImages('img/hover-on.png');` -* PR's should include a .js file with the same name as the tip being added in the [README](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/blob/master/README.md) document, e.g., `make-two-divs-the-same-height.js` and added to the `js` folder. -* Snippets should begin with a comment that matches the name of the tip, e.g., `// Make two divs the same height`. * Make sure your text editor is set to remove trailing whitespace. * Check your spelling and grammar. * The PR should have a useful title. From a1aa488c77f6d4464f8c3af155778613b9345b20 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Mon, 15 May 2017 21:55:50 -0400 Subject: [PATCH 069/135] Added tip to disable right-click --- README.md | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/README.md b/README.md index cba7b83..9d2efdd 100644 --- a/README.md +++ b/README.md @@ -35,6 +35,7 @@ A collection of simple tips to help up your jQuery game. 1. [Ajax Call Error Handling](#ajax-call-error-handling) 1. [Chain Plugin Calls](#chain-plugin-calls) 1. [Sort List Items Alphabetically](#sort-list-items-alphabetically) +1. [Disable Right-Click](#disable-right-click) ### Checking If jQuery Loaded @@ -443,6 +444,31 @@ There you go! [back to table of contents](#table-of-contents) +### Disable Right-Click + +If you want to disable right-click, you can do it for an entire page... + +```javascript +$(document).ready(function(){ + $(document).bind('contextmenu', function(e){ + return false; + }) +}) +``` + +...but you can also do the same for a specific element: + +```javascript +$(document).ready(function(){ + $('#submit').bind('contextmenu', function(e){ + return false; + }) +}) +``` + +[back to table of contents](#table-of-contents) + + ## Support Current versions of Chrome, Firefox, Safari, Opera, Edge, and IE11. From 112968ae944030c2cb808c4e0e0674869526d698 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Mon, 15 May 2017 22:04:34 -0400 Subject: [PATCH 070/135] Fixed syntax --- translations/fr-FR/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/translations/fr-FR/README.md b/translations/fr-FR/README.md index b5b49a0..dd2148a 100644 --- a/translations/fr-FR/README.md +++ b/translations/fr-FR/README.md @@ -426,7 +426,7 @@ $('#elem') .otherStuff(); ``` -Une alternative consiste à mettre en cache l'élément dans une variable (avec le préfixe `` $): +Une alternative consiste à mettre en cache l'élément dans une variable (avec le préfixe `$`): ```javascript var $elem = $('#elem'); From a0026951ad8c78c36c0bab179a38cb4eda6888f9 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Mon, 15 May 2017 22:20:45 -0400 Subject: [PATCH 071/135] Fixed syntax --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 9d2efdd..7061897 100644 --- a/README.md +++ b/README.md @@ -449,8 +449,8 @@ There you go! If you want to disable right-click, you can do it for an entire page... ```javascript -$(document).ready(function(){ - $(document).bind('contextmenu', function(e){ +$(document).ready(function() { + $(document).bind('contextmenu', function(e) { return false; }) }) @@ -459,8 +459,8 @@ $(document).ready(function(){ ...but you can also do the same for a specific element: ```javascript -$(document).ready(function(){ - $('#submit').bind('contextmenu', function(e){ +$(document).ready(function() { + $('#submit').bind('contextmenu', function(e) { return false; }) }) From 94a806db017d10e1ab3206b7bb685fd31ba68603 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Tue, 16 May 2017 10:57:17 -0400 Subject: [PATCH 072/135] Formatting updates --- translations/es-ES/README.md | 41 ++++++++++++++++++------------------ 1 file changed, 21 insertions(+), 20 deletions(-) diff --git a/translations/es-ES/README.md b/translations/es-ES/README.md index 9319215..38b36ac 100644 --- a/translations/es-ES/README.md +++ b/translations/es-ES/README.md @@ -38,6 +38,7 @@ Una colección de consejos simples para ayudar a su juego jQuery.
+ ### Verificando jQuery Cargado Antes de que pueda hacer cualquier cosa con jQuery primero tiene que asegurarse de que se ha cargado: @@ -52,7 +53,7 @@ if (typeof jQuery == 'undefined') { Ahora que estás fuera... -[volver al índice de contenidos](#table-of-contents) +[volver al índice de contenidos](#tabla-de-contenido)
@@ -74,7 +75,7 @@ Ahora que estás fuera... Los espacios de nombres te dan el poder para desenlazar un evento específico (por ejemplo,`.off('click.menuOpening')`). -[volver al índice de contenidos](#table-of-contents) +[volver al índice de contenidos](#tabla-de-contenido)
@@ -99,7 +100,7 @@ El cambio de los cambios de valor `scrollTop` donde se quiere que la barra de de **Nota:** ve por alguna [comportamiento incorrecto](https://github.com/jquery/api.jquery.com/issues/417) con `scrollTop`. -[volver al índice de contenidos](#table-of-contents) +[volver al índice de contenidos](#tabla-de-contenido)
@@ -117,7 +118,7 @@ $.preloadImages = function () { $.preloadImages('img/hover-on.png', 'img/hover-off.png'); ``` -[volver al índice de contenidos](#table-of-contents) +[volver al índice de contenidos](#tabla-de-contenido)
@@ -133,7 +134,7 @@ $('img').on('load', function () { También puede comprobar si una imagen en particular se ha cargado mediante la sustitución de la etiqueta `` con un ID o clase. -[volver al índice de contenidos](#table-of-contents) +[volver al índice de contenidos](#tabla-de-contenido)
@@ -157,7 +158,7 @@ $('img').on('error', function () { }); ``` -[volver al índice de contenidos](#table-of-contents) +[volver al índice de contenidos](#tabla-de-contenido)
@@ -179,7 +180,7 @@ Sin embargo, todos esos `val()` llamadas es caro. Una mejor manera de recoger la $.post('sign_up', $('#sign-up-form').serialize()); ``` -[volver al índice de contenidos](#table-of-contents) +[volver al índice de contenidos](#tabla-de-contenido)
@@ -205,7 +206,7 @@ $('.btn').hover(function () { **Nota:** CSS puede ser una solución más rápida en este caso, pero es todavía vale la pena saber esto. -[volver al índice de contenidos](#table-of-contents) +[volver al índice de contenidos](#tabla-de-contenido)
@@ -223,7 +224,7 @@ Todo lo que necesita hacer es ejecutar el método `prop` otra vez en la entrada, $('input[type="submit"]').prop('disabled', false); ``` -[volver al índice de contenidos](#table-of-contents) +[volver al índice de contenidos](#tabla-de-contenido) div> @@ -237,7 +238,7 @@ $('a.no-link').on('click', function (e) { }); ``` -[volver al índice de contenidos](#table-of-contents) +[volver al índice de contenidos](#tabla-de-contenido)
@@ -263,7 +264,7 @@ $('#showBlocks').on('click', function () { El almacenamiento en caché selectores de jQuery son una ganancia de rendimiento fácil. -[volver al índice de contenidos](#table-of-contents) +[volver al índice de contenidos](#tabla-de-contenido)
@@ -283,7 +284,7 @@ $('.btn').on('click', function () { }); ``` -[volver al índice de contenidos](#table-of-contents) +[volver al índice de contenidos](#tabla-de-contenido)
@@ -306,7 +307,7 @@ $('#accordion').find('.accordion-header').on('click', function () { Mediante la adición de este script lo único que tiene que hacer en su página web es el HTML necesario ir a buscar este trabajo. -[volver al índice de contenidos](#table-of-contents) +[volver al índice de contenidos](#tabla-de-contenido)
@@ -358,7 +359,7 @@ $('a[href^="' + window.location.origin + '"]').attr('target', '_self'); **Nota:** `window.location.origin` no funciona en IE10. [Esta corrección](http://tosbourn.com/a-fix-for-window-location-origin-in-internet-explorer/) se ocupa de la cuestión. -[volver al índice de contenidos](#table-of-contents) +[volver al índice de contenidos](#tabla-de-contenido)
@@ -371,7 +372,7 @@ var search = $('#search').val(); $('div:not(:contains("' + search + '"))').hide(); ``` -[volver al índice de contenidos](#table-of-contents) +[volver al índice de contenidos](#tabla-de-contenido)
@@ -389,7 +390,7 @@ $(document).on('visibilitychange', function (e) { }); ``` -[volver al índice de contenidos](#table-of-contents) +[volver al índice de contenidos](#tabla-de-contenido)
@@ -403,7 +404,7 @@ $(document).on('ajaxError', function (e, xhr, settings, error) { }); ``` -[volver al índice de contenidos](#table-of-contents) +[volver al índice de contenidos](#tabla-de-contenido)
@@ -437,7 +438,7 @@ $elem.otherStuff(); Ambos métodos [almacenamiento en caché](#cache-jquery-selectors) en el encadenamiento y son las mejores prácticas que conducen al código corto y más rápido. -[volver al índice de contenidos](#table-of-contents) +[volver al índice de contenidos](#tabla-de-contenido)
@@ -458,9 +459,9 @@ ul.append(lis); Hay que ir! -[volver al índice de contenidos](#table-of-contents) +[volver al índice de contenidos](#tabla-de-contenido) ## Apoyo -Las versiones actuales de Chrome, Firefox, Safari, Opera, Edge y EI11. \ No newline at end of file +Las versiones actuales de Chrome, Firefox, Safari, Opera, Edge y EI11. From e20f3430188ba370a8035994efe51d304133767f Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Tue, 16 May 2017 11:00:15 -0400 Subject: [PATCH 073/135] Formatting update --- translations/es-ES/README.md | 58 ++++++++++++++++++++++++------------ 1 file changed, 39 insertions(+), 19 deletions(-) diff --git a/translations/es-ES/README.md b/translations/es-ES/README.md index 38b36ac..005e904 100644 --- a/translations/es-ES/README.md +++ b/translations/es-ES/README.md @@ -6,6 +6,7 @@ Una colección de consejos simples para ayudar a su juego jQuery.
+ ## Tabla de contenido * [Tips](#consejos) @@ -53,10 +54,11 @@ if (typeof jQuery == 'undefined') { Ahora que estás fuera... -[volver al índice de contenidos](#tabla-de-contenido) +[volver al índice de contenidos](#table-of-contents)
+ ### Utilice `.on ()` En lugar de unión `.click ()` .en El uso de `()` le da varias ventajas sobre el uso de `.click ()`, tales como la capacidad de agregar varios eventos... @@ -75,10 +77,11 @@ Ahora que estás fuera... Los espacios de nombres te dan el poder para desenlazar un evento específico (por ejemplo,`.off('click.menuOpening')`). -[volver al índice de contenidos](#tabla-de-contenido) +[volver al índice de contenidos](#table-of-contents)
+ ### Volver al botón de inicio Mediante el uso de la `animate` y métodos `scrollTop` en jQuery que no es necesario un plugin para crear una animación simple-scroll-a arriba: @@ -100,10 +103,11 @@ El cambio de los cambios de valor `scrollTop` donde se quiere que la barra de de **Nota:** ve por alguna [comportamiento incorrecto](https://github.com/jquery/api.jquery.com/issues/417) con `scrollTop`. -[volver al índice de contenidos](#tabla-de-contenido) +[volver al índice de contenidos](#table-of-contents)
+ ### Carga previa de imágenes Si su página web utiliza una gran cantidad de imágenes que no son visibles inicialmente (por ejemplo, en vuelo estacionario) que tiene sentido para precargar ellos: @@ -118,10 +122,11 @@ $.preloadImages = function () { $.preloadImages('img/hover-on.png', 'img/hover-off.png'); ``` -[volver al índice de contenidos](#tabla-de-contenido) +[volver al índice de contenidos](#table-of-contents)
+ ### Comprobación Si las imágenes se cargan A veces puede que tenga que comprobar si las imágenes han cargado completamente con el fin de continuar con las secuencias de comandos: @@ -134,10 +139,11 @@ $('img').on('load', function () { También puede comprobar si una imagen en particular se ha cargado mediante la sustitución de la etiqueta `` con un ID o clase. -[volver al índice de contenidos](#tabla-de-contenido) +[volver al índice de contenidos](#table-of-contents)
+ ### Corregir imágenes automáticamente rotas Si por casualidad usted encuentra enlaces de imagen rotos en su sitio de la sustitución de uno por uno puede ser un dolor. Esta sencilla pieza de código puede ahorrar muchos dolores de cabeza: @@ -158,10 +164,11 @@ $('img').on('error', function () { }); ``` -[volver al índice de contenidos](#tabla-de-contenido) +[volver al índice de contenidos](#table-of-contents)
+ ### Publicar un formulario con AJAX Métodos jQuery AJAX son una forma común para solicitar texto, HTML, XML, JSON o. Si desea enviar un formulario a través de AJAX se podía recoger las entradas del usuario a través del método `val()`: @@ -180,10 +187,11 @@ Sin embargo, todos esos `val()` llamadas es caro. Una mejor manera de recoger la $.post('sign_up', $('#sign-up-form').serialize()); ``` -[volver al índice de contenidos](#tabla-de-contenido) +[volver al índice de contenidos](#table-of-contents)
+ ### Alternar clases en la libración Digamos que usted quiere cambiar la visual de un elemento se puede hacer clic en la página cuando un usuario se desplaza sobre él. Usted puede agregar una clase a su elemento cuando el usuario está flotando; cuando el usuario deja flotando elimina la clase: @@ -206,10 +214,11 @@ $('.btn').hover(function () { **Nota:** CSS puede ser una solución más rápida en este caso, pero es todavía vale la pena saber esto. -[volver al índice de contenidos](#tabla-de-contenido) +[volver al índice de contenidos](#table-of-contents)
+ ### Desactivación de campos de entrada A veces es posible que desee el botón de envío de un formulario o una de sus entradas de texto debe ser inhabilitado hasta que el usuario ha realizado una acción determinada (por ejemplo, control de la "He leído los términos" casilla de verificación). Añadir el atributo `disabled` a la entrada para que pueda activarlo cuando se quiere: @@ -224,10 +233,11 @@ Todo lo que necesita hacer es ejecutar el método `prop` otra vez en la entrada, $('input[type="submit"]').prop('disabled', false); ``` -[volver al índice de contenidos](#tabla-de-contenido) +[volver al índice de contenidos](#table-of-contents) div> + ### Detener la carga de Enlaces A veces no desea vínculos para ir a una determinada página web, ni volver a cargar la página; es posible que desee que hagan otra cosa, como disparador de otro guión. Esto va a hacer el truco de la prevención de la acción por defecto: @@ -238,10 +248,11 @@ $('a.no-link').on('click', function (e) { }); ``` -[volver al índice de contenidos](#tabla-de-contenido) +[volver al índice de contenidos](#table-of-contents)
+ ### de caché de jQuery selectores Piense en cuántas veces se escribe el mismo selector una y otra vez en cualquier proyecto. Cada `$('.element')` selector tiene que buscar en todo el DOM cada vez, independientemente de si dicho selector había ejecutado anteriormente. En lugar de ello, ejecute el selector de una vez y almacenar los resultados en una variable: @@ -264,10 +275,11 @@ $('#showBlocks').on('click', function () { El almacenamiento en caché selectores de jQuery son una ganancia de rendimiento fácil. -[volver al índice de contenidos](#tabla-de-contenido) +[volver al índice de contenidos](#table-of-contents)
+ ### De palanca de fundido / Slide Deslizante y la decoloración son algo que usamos un montón en nuestras animaciones con jQuery. Es posible que sólo quieren mostrar un elemento cuando un usuario hace clic en algo, lo que hace que los `fadeIn` y métodos de `slideDown` perfecta. Pero si desea que el elemento que aparezca en la primera posición y luego desaparecen en el segundo esto va a funcionar muy bien: @@ -284,10 +296,11 @@ $('.btn').on('click', function () { }); ``` -[volver al índice de contenidos](#tabla-de-contenido) +[volver al índice de contenidos](#table-of-contents)
+ ### Acordeón simple Este es un método simple para un acordeón rápida: @@ -307,10 +320,11 @@ $('#accordion').find('.accordion-header').on('click', function () { Mediante la adición de este script lo único que tiene que hacer en su página web es el HTML necesario ir a buscar este trabajo. -[volver al índice de contenidos](#tabla-de-contenido) +[volver al índice de contenidos](#table-of-contents)
+ ### Haga dos Divs la misma altura A veces, usted querrá dos divs tener la misma altura no importa qué contenido tienen en ellos: @@ -347,6 +361,7 @@ $rows.each(function () { + ### Abrir enlaces externos en una nueva pestaña / ventana Abrir enlaces externos en una nueva pestaña o ventana del navegador y garantizar enlaces en el mismo origen abierta en la misma pestaña o ventana: @@ -359,10 +374,11 @@ $('a[href^="' + window.location.origin + '"]').attr('target', '_self'); **Nota:** `window.location.origin` no funciona en IE10. [Esta corrección](http://tosbourn.com/a-fix-for-window-location-origin-in-internet-explorer/) se ocupa de la cuestión. -[volver al índice de contenidos](#tabla-de-contenido) +[volver al índice de contenidos](#table-of-contents)
+ ### Buscar elemento Por Texto Mediante el uso de la selector `contains()` en jQuery se puede encontrar texto en el contenido de un elemento. Si no existe texto, ese elemento se ocultará: @@ -372,10 +388,11 @@ var search = $('#search').val(); $('div:not(:contains("' + search + '"))').hide(); ``` -[volver al índice de contenidos](#tabla-de-contenido) +[volver al índice de contenidos](#table-of-contents)
+ ### Visibilidad gatillo de Cambio Gatillo JavaScript cuando el usuario ya no se centra en una pestaña, o vuelve a centrar en una pestaña: @@ -390,10 +407,11 @@ $(document).on('visibilitychange', function (e) { }); ``` -[volver al índice de contenidos](#tabla-de-contenido) +[volver al índice de contenidos](#table-of-contents)
+ ### Control de errores de llamada Ajax Cuando una llamada Ajax devuelve un error 404 o 500 se ejecutará el gestor de errores. Si no se define el controlador, otro código jQuery podría no funcionar. Definir un controlador global de error de Ajax: @@ -404,10 +422,11 @@ $(document).on('ajaxError', function (e, xhr, settings, error) { }); ``` -[volver al índice de contenidos](#tabla-de-contenido) +[volver al índice de contenidos](#table-of-contents)
+ ### llamadas Plugin Cadena jQuery permite el "encadenamiento" plug-in de llamadas a métodos para mitigar el proceso de consulta en repetidas ocasiones el DOM y la creación de varios objetos jQuery. Digamos que el siguiente fragmento representa sus llamadas a métodos plugin: @@ -438,10 +457,11 @@ $elem.otherStuff(); Ambos métodos [almacenamiento en caché](#cache-jquery-selectors) en el encadenamiento y son las mejores prácticas que conducen al código corto y más rápido. -[volver al índice de contenidos](#tabla-de-contenido) +[volver al índice de contenidos](#table-of-contents)
+ ### ordenar la lista de elementos alfabéticamente Digamos que usted termina con demasiados elementos en una lista. Tal vez el contenido es producido por un CMS y desea ordenar por orden alfabético: @@ -459,7 +479,7 @@ ul.append(lis); Hay que ir! -[volver al índice de contenidos](#tabla-de-contenido) +[volver al índice de contenidos](#table-of-contents) ## Apoyo From e60ef8b3d25d279c75df278262ce836f5d13cbf9 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Tue, 16 May 2017 11:09:49 -0400 Subject: [PATCH 074/135] Removed HTML anchors --- translations/es-ES/README.md | 86 ++++++++++-------------------------- 1 file changed, 23 insertions(+), 63 deletions(-) diff --git a/translations/es-ES/README.md b/translations/es-ES/README.md index 005e904..1af21fa 100644 --- a/translations/es-ES/README.md +++ b/translations/es-ES/README.md @@ -16,29 +16,27 @@ Una colección de consejos simples para ayudar a su juego jQuery. ## Consejos -1. [Verificando jQuery Cargado](#checking-if-jquery-loaded) -1. [Utilice `.on ()` En lugar de unión `.click ()`](#use-on-binding-instead-of-click) -1. [Volver al botón de inicio](#back-to-top-button) -1. [Carga previa de imágenes](#preload-images) -1. [comprobando si las imágenes se cargan](#checking-if-images-are-loaded) -1. [corregir imágenes automáticamente rotas](#fix-broken-images-automatically) -1. [Publicar un formulario con AJAX](#post-a-form-with-ajax) -1. [Las clases de palanca en la libración](#toggle-classes-on-hover) -1. [Desactivar la acción de campos](#disabling-input-fields) -1. [Detener la carga de Enlaces](#stop-the-loading-of-links) -1. [de caché de jQuery selectores](#cache-jquery-selectors) -1. [De palanca de fundido / Slide](#toggle-fadeslide) -1. [Acordeón simple](#simple-accordion) -1. [Haga dos Divs la misma altura](#make-two-divs-the-same-height) -1. [Abrir enlaces externos en una nueva pestaña / ventana](#open-external-links-in-new-tabwindow) -1. [Buscar elemento Por Texto](#find-element-by-text) -1. [Visibilidad gatillo de Cambio](#trigger-on-visibility-change) -1. [Control de errores de llamada Ajax](#ajax-call-error-handling) -1. [Llamadas Plugin Cadena](#chain-plugin-calls) -1. [Ordenar la lista de elementos alfabéticamente](#sort-list-items-alphabetically) - - -
+1. [Verificando jQuery Cargado](#verificando-jquery-cargado) +1. [Utilice `.on ()` En lugar de unión `.click ()`](#utilice-on--en-lugar-de-unión-click-) +1. [Volver al botón de inicio](#volver-al-botón-de-inicio) +1. [Carga previa de imágenes](#carga-previa-de-imágenes) +1. [comprobando si las imágenes se cargan](#comprobación-si-las-imágenes-se-cargan) +1. [corregir imágenes automáticamente rotas](#corregir-imágenes-automáticamente-rotas) +1. [Publicar un formulario con AJAX](#publicar-un-formulario-con-ajax) +1. [Alternar clases en la libración](##alternar-clases-en-la-libración) +1. [Desactivar la acción de campos](#desactivación-de-campos-de-entrada) +1. [Detener la carga de Enlaces](#detener-la-carga-de-enlaces) +1. [de caché de jQuery selectores](#de-caché-de-jquery-selectores) +1. [De palanca de fundido / Slide](#de-palanca-de-fundido--slide) +1. [Acordeón simple](#acordeón-simple) +1. [Haga dos Divs la misma altura](#haga-dos-divs-la-misma-altura) +1. [Abrir enlaces externos en una nueva pestaña / ventana](#abrir-enlaces-externos-en-una-nueva-pestaña--ventana) +1. [Buscar elemento Por Texto](#buscar-elemento-por-texto) +1. [Visibilidad gatillo de Cambio](#visibilidad-gatillo-de-cambio) +1. [Control de errores de llamada Ajax](#control-de-errores-de-llamada-ajax) +1. [Llamadas Plugin Cadena](#llamadas-plugin-cadena) +1. [Ordenar la lista de elementos alfabéticamente](#ordenar-la-lista-de-elementos-alfabéticamente) + ### Verificando jQuery Cargado @@ -57,8 +55,6 @@ Ahora que estás fuera... [volver al índice de contenidos](#table-of-contents) -
- ### Utilice `.on ()` En lugar de unión `.click ()` .en El uso de `()` le da varias ventajas sobre el uso de `.click ()`, tales como la capacidad de agregar varios eventos... @@ -80,8 +76,6 @@ Los espacios de nombres te dan el poder para desenlazar un evento específico (p [volver al índice de contenidos](#table-of-contents) -
- ### Volver al botón de inicio Mediante el uso de la `animate` y métodos `scrollTop` en jQuery que no es necesario un plugin para crear una animación simple-scroll-a arriba: @@ -106,8 +100,6 @@ El cambio de los cambios de valor `scrollTop` donde se quiere que la barra de de [volver al índice de contenidos](#table-of-contents) -
- ### Carga previa de imágenes Si su página web utiliza una gran cantidad de imágenes que no son visibles inicialmente (por ejemplo, en vuelo estacionario) que tiene sentido para precargar ellos: @@ -125,8 +117,6 @@ $.preloadImages('img/hover-on.png', 'img/hover-off.png'); [volver al índice de contenidos](#table-of-contents) -
- ### Comprobación Si las imágenes se cargan A veces puede que tenga que comprobar si las imágenes han cargado completamente con el fin de continuar con las secuencias de comandos: @@ -142,8 +132,6 @@ También puede comprobar si una imagen en particular se ha cargado mediante la s [volver al índice de contenidos](#table-of-contents) -
- ### Corregir imágenes automáticamente rotas Si por casualidad usted encuentra enlaces de imagen rotos en su sitio de la sustitución de uno por uno puede ser un dolor. Esta sencilla pieza de código puede ahorrar muchos dolores de cabeza: @@ -167,8 +155,6 @@ $('img').on('error', function () { [volver al índice de contenidos](#table-of-contents) -
- ### Publicar un formulario con AJAX Métodos jQuery AJAX son una forma común para solicitar texto, HTML, XML, JSON o. Si desea enviar un formulario a través de AJAX se podía recoger las entradas del usuario a través del método `val()`: @@ -190,8 +176,6 @@ $.post('sign_up', $('#sign-up-form').serialize()); [volver al índice de contenidos](#table-of-contents) -
- ### Alternar clases en la libración Digamos que usted quiere cambiar la visual de un elemento se puede hacer clic en la página cuando un usuario se desplaza sobre él. Usted puede agregar una clase a su elemento cuando el usuario está flotando; cuando el usuario deja flotando elimina la clase: @@ -217,8 +201,6 @@ $('.btn').hover(function () { [volver al índice de contenidos](#table-of-contents) -
- ### Desactivación de campos de entrada A veces es posible que desee el botón de envío de un formulario o una de sus entradas de texto debe ser inhabilitado hasta que el usuario ha realizado una acción determinada (por ejemplo, control de la "He leído los términos" casilla de verificación). Añadir el atributo `disabled` a la entrada para que pueda activarlo cuando se quiere: @@ -236,8 +218,6 @@ $('input[type="submit"]').prop('disabled', false); [volver al índice de contenidos](#table-of-contents) -div> - ### Detener la carga de Enlaces A veces no desea vínculos para ir a una determinada página web, ni volver a cargar la página; es posible que desee que hagan otra cosa, como disparador de otro guión. Esto va a hacer el truco de la prevención de la acción por defecto: @@ -251,8 +231,6 @@ $('a.no-link').on('click', function (e) { [volver al índice de contenidos](#table-of-contents) -
- ### de caché de jQuery selectores Piense en cuántas veces se escribe el mismo selector una y otra vez en cualquier proyecto. Cada `$('.element')` selector tiene que buscar en todo el DOM cada vez, independientemente de si dicho selector había ejecutado anteriormente. En lugar de ello, ejecute el selector de una vez y almacenar los resultados en una variable: @@ -278,8 +256,6 @@ El almacenamiento en caché selectores de jQuery son una ganancia de rendimiento [volver al índice de contenidos](#table-of-contents) -
- ### De palanca de fundido / Slide Deslizante y la decoloración son algo que usamos un montón en nuestras animaciones con jQuery. Es posible que sólo quieren mostrar un elemento cuando un usuario hace clic en algo, lo que hace que los `fadeIn` y métodos de `slideDown` perfecta. Pero si desea que el elemento que aparezca en la primera posición y luego desaparecen en el segundo esto va a funcionar muy bien: @@ -299,8 +275,6 @@ $('.btn').on('click', function () { [volver al índice de contenidos](#table-of-contents) -
- ### Acordeón simple Este es un método simple para un acordeón rápida: @@ -323,8 +297,6 @@ Mediante la adición de este script lo único que tiene que hacer en su página [volver al índice de contenidos](#table-of-contents) -
- ### Haga dos Divs la misma altura A veces, usted querrá dos divs tener la misma altura no importa qué contenido tienen en ellos: @@ -360,8 +332,6 @@ $rows.each(function () { [volver al índice de contenidos](#table-of-contents) - - ### Abrir enlaces externos en una nueva pestaña / ventana Abrir enlaces externos en una nueva pestaña o ventana del navegador y garantizar enlaces en el mismo origen abierta en la misma pestaña o ventana: @@ -377,8 +347,6 @@ $('a[href^="' + window.location.origin + '"]').attr('target', '_self'); [volver al índice de contenidos](#table-of-contents) -
- ### Buscar elemento Por Texto Mediante el uso de la selector `contains()` en jQuery se puede encontrar texto en el contenido de un elemento. Si no existe texto, ese elemento se ocultará: @@ -391,8 +359,6 @@ $('div:not(:contains("' + search + '"))').hide(); [volver al índice de contenidos](#table-of-contents) -
- ### Visibilidad gatillo de Cambio Gatillo JavaScript cuando el usuario ya no se centra en una pestaña, o vuelve a centrar en una pestaña: @@ -410,8 +376,6 @@ $(document).on('visibilitychange', function (e) { [volver al índice de contenidos](#table-of-contents) -
- ### Control de errores de llamada Ajax Cuando una llamada Ajax devuelve un error 404 o 500 se ejecutará el gestor de errores. Si no se define el controlador, otro código jQuery podría no funcionar. Definir un controlador global de error de Ajax: @@ -425,9 +389,7 @@ $(document).on('ajaxError', function (e, xhr, settings, error) { [volver al índice de contenidos](#table-of-contents) -
- -### llamadas Plugin Cadena +### Llamadas Plugin Cadena jQuery permite el "encadenamiento" plug-in de llamadas a métodos para mitigar el proceso de consulta en repetidas ocasiones el DOM y la creación de varios objetos jQuery. Digamos que el siguiente fragmento representa sus llamadas a métodos plugin: @@ -460,9 +422,7 @@ Ambos métodos [almacenamiento en caché](#cache-jquery-selectors) en el encaden [volver al índice de contenidos](#table-of-contents) -
- -### ordenar la lista de elementos alfabéticamente +### Ordenar la lista de elementos alfabéticamente Digamos que usted termina con demasiados elementos en una lista. Tal vez el contenido es producido por un CMS y desea ordenar por orden alfabético: From 4a700a19db377c08462ad6823d282092c2a22349 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Tue, 16 May 2017 11:11:04 -0400 Subject: [PATCH 075/135] Minor edit --- translations/es-ES/README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/translations/es-ES/README.md b/translations/es-ES/README.md index 1af21fa..b0d6998 100644 --- a/translations/es-ES/README.md +++ b/translations/es-ES/README.md @@ -20,13 +20,13 @@ Una colección de consejos simples para ayudar a su juego jQuery. 1. [Utilice `.on ()` En lugar de unión `.click ()`](#utilice-on--en-lugar-de-unión-click-) 1. [Volver al botón de inicio](#volver-al-botón-de-inicio) 1. [Carga previa de imágenes](#carga-previa-de-imágenes) -1. [comprobando si las imágenes se cargan](#comprobación-si-las-imágenes-se-cargan) -1. [corregir imágenes automáticamente rotas](#corregir-imágenes-automáticamente-rotas) +1. [Comprobando si las imágenes se cargan](#comprobación-si-las-imágenes-se-cargan) +1. [Corregir imágenes automáticamente rotas](#corregir-imágenes-automáticamente-rotas) 1. [Publicar un formulario con AJAX](#publicar-un-formulario-con-ajax) 1. [Alternar clases en la libración](##alternar-clases-en-la-libración) 1. [Desactivar la acción de campos](#desactivación-de-campos-de-entrada) 1. [Detener la carga de Enlaces](#detener-la-carga-de-enlaces) -1. [de caché de jQuery selectores](#de-caché-de-jquery-selectores) +1. [De caché de jQuery selectores](#de-caché-de-jquery-selectores) 1. [De palanca de fundido / Slide](#de-palanca-de-fundido--slide) 1. [Acordeón simple](#acordeón-simple) 1. [Haga dos Divs la misma altura](#haga-dos-divs-la-misma-altura) @@ -231,7 +231,7 @@ $('a.no-link').on('click', function (e) { [volver al índice de contenidos](#table-of-contents) -### de caché de jQuery selectores +### De caché de jQuery selectores Piense en cuántas veces se escribe el mismo selector una y otra vez en cualquier proyecto. Cada `$('.element')` selector tiene que buscar en todo el DOM cada vez, independientemente de si dicho selector había ejecutado anteriormente. En lugar de ello, ejecute el selector de una vez y almacenar los resultados en una variable: From 80a193ce1b7a74b66bb72c9df600cdc43334e1f5 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Tue, 16 May 2017 16:31:19 -0400 Subject: [PATCH 076/135] Updated anchors --- translations/es-ES/README.md | 53 ++++++++++++++++++++++++++++++++++++ translations/fr-FR/README.md | 28 ++++++++++++++++++- translations/ru-RU/README.md | 28 ++++++++++++++++++- translations/zh-CN/README.md | 27 ++++++++++++++++++ translations/zh-TW/README.md | 35 ++++++++++++++++++------ 5 files changed, 161 insertions(+), 10 deletions(-) diff --git a/translations/es-ES/README.md b/translations/es-ES/README.md index b0d6998..7004141 100644 --- a/translations/es-ES/README.md +++ b/translations/es-ES/README.md @@ -16,6 +16,7 @@ Una colección de consejos simples para ayudar a su juego jQuery. ## Consejos +<<<<<<< Updated upstream 1. [Verificando jQuery Cargado](#verificando-jquery-cargado) 1. [Utilice `.on ()` En lugar de unión `.click ()`](#utilice-on--en-lugar-de-unión-click-) 1. [Volver al botón de inicio](#volver-al-botón-de-inicio) @@ -38,6 +39,32 @@ Una colección de consejos simples para ayudar a su juego jQuery. 1. [Ordenar la lista de elementos alfabéticamente](#ordenar-la-lista-de-elementos-alfabéticamente) +======= +1. [Verificando jQuery Cargado](#checking-if-jquery-loaded) +1. [Utilice `.on ()` En lugar de unión `.click ()`](#use-on-binding-instead-of-click) +1. [Volver al botón de inicio](#back-to-top-button) +1. [Carga previa de imágenes](#preload-images) +1. [comprobando si las imágenes se cargan](#checking-if-images-are-loaded) +1. [corregir imágenes automáticamente rotas](#fix-broken-images-automatically) +1. [Publicar un formulario con AJAX](#post-a-form-with-ajax) +1. [Las clases de palanca en la libración](#toggle-classes-on-hover) +1. [Desactivar la acción de campos](#disabling-input-fields) +1. [Detener la carga de Enlaces](#stop-the-loading-of-links) +1. [de caché de jQuery selectores](#cache-jquery-selectors) +1. [De palanca de fundido / Slide](#toggle-fadeslide) +1. [Acordeón simple](#simple-accordion) +1. [Haga dos Divs la misma altura](#make-two-divs-the-same-height) +1. [Abrir enlaces externos en una nueva pestaña / ventana](#open-external-links-in-new-tabwindow) +1. [Buscar elemento Por Texto](#find-element-by-text) +1. [Visibilidad gatillo de Cambio](#trigger-on-visibility-change) +1. [Control de errores de llamada Ajax](#ajax-call-error-handling) +1. [Llamadas Plugin Cadena](#chain-plugin-calls) +1. [Ordenar la lista de elementos alfabéticamente](#sort-list-items-alphabetically) +1. [Deshabilitar clic derecho](#disable-right-click) + + +
+>>>>>>> Stashed changes ### Verificando jQuery Cargado Antes de que pueda hacer cualquier cosa con jQuery primero tiene que asegurarse de que se ha cargado: @@ -442,6 +469,32 @@ Hay que ir! [volver al índice de contenidos](#table-of-contents) +
+### Deshabilitar clic derecho + +Si desea desactivar el botón derecho del ratón, puede hacerlo para una página entera... + +```javascript +$(document).ready(function() { + $(document).bind('contextmenu', function(e) { + return false; + }) +}) +``` + +...pero también puede hacer lo mismo para un elemento específico: + +```javascript +$(document).ready(function() { + $('#submit').bind('contextmenu', function(e) { + return false; + }) +}) +``` + +[volver al índice de contenidos](#table-of-contents) + + ## Apoyo Las versiones actuales de Chrome, Firefox, Safari, Opera, Edge y EI11. diff --git a/translations/fr-FR/README.md b/translations/fr-FR/README.md index dd2148a..4c1c094 100644 --- a/translations/fr-FR/README.md +++ b/translations/fr-FR/README.md @@ -35,7 +35,7 @@ Une collection de conseils simples pour aider votre jeu jQuery. 1. [Gestion des erreurs Ajax Appel](#ajax-call-error-handling) 1. [Appels de Plugin Chain](#chain-plugin-calls) 1. [Trier Liste des articles par ordre alphabétique](#sort-list-items-alphabetically) - +1. [Desactivar Botón Derecho del Ratón](#disable-right-click)
### Vérification Si jQuery Loaded @@ -461,6 +461,32 @@ Voilà! [retour à la table des matières](#table-of-contents) +
+### Desactivar Botón Derecho del Ratón + +Si desea desactivar botón derecho del ratón, se puede hacer por una página entera... + +```javascript +$(document).ready(function() { + $(document).bind('contextmenu', function(e) { + return false; + }) +}) +``` + +...pero se puede hacer aussi la même para un elemento específico: + +```javascript +$(document).ready(function() { + $('#submit').bind('contextmenu', function(e) { + return false; + }) +}) +``` + +[retour à la table des matières](#table-of-contents) + + ## Soutien Les versions actuelles de Chrome, Firefox, Safari, Opera, Edge, et IE11. \ No newline at end of file diff --git a/translations/ru-RU/README.md b/translations/ru-RU/README.md index f33ab2e..a00a717 100644 --- a/translations/ru-RU/README.md +++ b/translations/ru-RU/README.md @@ -35,7 +35,7 @@ 1. [Обработка ошибок в AJAX-запросах](#ajax-call-error-handling) 1. [Цепочка вызовов плагинов](#chain-plugin-calls) 1. [Сортировка элементов списка по алфавиту](#sort-list-items-alphabetically) - +1. [Отключить правую кнопку мыши](#disable-right-click)
### Проверка готовности jQuery @@ -461,6 +461,32 @@ ul.append(lis); [вернуться к оглавлению](#table-of-contents) +
+### Отключить правую кнопку мыши + +Если вы хотите отключить контекстное меню, вы можете сделать это для всей страницы... + +```javascript +$(document).ready(function() { + $(document).bind('contextmenu', function(e) { + return false; + }) +}) +``` + +...но вы также можете сделать то же самое для конкретного элемента: + +```javascript +$(document).ready(function() { + $('#submit').bind('contextmenu', function(e) { + return false; + }) +}) +``` + +[вернуться к оглавлению](#table-of-contents) + + ## Поддержка Текущие версии Chrome, Firefox, Safari, Opera, Edge, и IE11. diff --git a/translations/zh-CN/README.md b/translations/zh-CN/README.md index 47efa5f..722e7b7 100644 --- a/translations/zh-CN/README.md +++ b/translations/zh-CN/README.md @@ -36,6 +36,7 @@ 1. [Ajax调用错误处理](#ajax-call-error-handling) 1. [连锁插件调用](#chain-plugin-calls) 1. [排序列表项按字母顺序](#sort-list-items-alphabetically) +1. [禁用右鍵單擊](#disable-right-click)
@@ -463,6 +464,32 @@ ul.append(lis); [回目录](#table-of-contents) +
+### 禁用右鍵單擊 + +如果要禁用右鍵單擊，您可以對整個頁面進行操作... + +```javascript +$(document).ready(function(){ + $(document).bind('contextmenu', function(e){ + return false; + }) +}) +``` + +...但是您也可以為特定元素做同樣的事情： + +```javascript +$(document).ready(function(){ + $('#submit').bind('contextmenu', function(e){ + return false; + }) +}) +``` + +[回目录](#table-of-contents) + + ## 支持 当前版本的Chrome，火狐，Safari，歌剧，EDGE和IE11的。 \ No newline at end of file diff --git a/translations/zh-TW/README.md b/translations/zh-TW/README.md index e30b22c..0bb0bff 100644 --- a/translations/zh-TW/README.md +++ b/translations/zh-TW/README.md @@ -35,6 +35,7 @@ 1. [Ajax 程序的錯誤處理](#ajax-程序的錯誤處理) 1. [串連 Plugin 的函式呼叫](#串連-plugin-的函式呼叫) 1. [照字母順序排序清單元素（list）](#照字母順序排清單元素list) +1. [禁用右键单击](#禁用右键单击) ### 檢查 jQuery 是否成功載入 @@ -444,14 +445,32 @@ ul.append(lis); [回到目錄](#目錄) -## 瀏覽器支援 +### 禁用右键单击 + -現今版本的 Chrome，Firefox，Safari，Opera，Edge 以及 IE11。 +如果要禁用右键单击，您可以对整个页面进行操作... -## 翻譯 +```javascript +$(document).ready(function() { + $(document).bind('contextmenu', function(e) { + return false; + }) +}) +``` + +...但是您也可以为特定元素做同样的事情： + +```javascript +$(document).ready(function() { + $('#submit').bind('contextmenu', function(e) { + return false; + }) +}) +``` + +[回到目錄](#目錄) + + +## 瀏覽器支援 -* [Español](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/es-ES) -* [Français](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/fr-FR) -* [русский](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/ru-RU) -* [简体中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-CN) -* [繁體中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-TW) +現今版本的 Chrome，Firefox，Safari，Opera，Edge 以及 IE11。 \ No newline at end of file From 9ada7067cc33c2de9772e69ba102df5ab972a222 Mon Sep 17 00:00:00 2001 From: Katamori Date: Tue, 20 Jun 2017 11:46:07 +0200 Subject: [PATCH 077/135] ToC translated; other files removed to prevent any conflict at merge. --- translations/es-ES/README.md | 500 ----------------------------------- translations/hu-HU/README.md | 485 +++++++++++++++++++++++++++++++++ translations/ru-RU/README.md | 492 ---------------------------------- translations/zh-CN/README.md | 495 ---------------------------------- translations/zh-TW/README.md | 476 --------------------------------- 5 files changed, 485 insertions(+), 1963 deletions(-) delete mode 100644 translations/es-ES/README.md create mode 100644 translations/hu-HU/README.md delete mode 100644 translations/ru-RU/README.md delete mode 100644 translations/zh-CN/README.md delete mode 100644 translations/zh-TW/README.md diff --git a/translations/es-ES/README.md b/translations/es-ES/README.md deleted file mode 100644 index 7004141..0000000 --- a/translations/es-ES/README.md +++ /dev/null @@ -1,500 +0,0 @@ -# Consejos jQuery cada uno debe saber [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) - -Una colección de consejos simples para ayudar a su juego jQuery. - -> Para otros grandes listas echa un vistazo a [@sindresorhus](https://github.com/sindresorhus/)'s lista curada de [listas impresionantes](https://github.com/sindresorhus/awesome/). - - -
- -## Tabla de contenido - -* [Tips](#consejos) -* [Apoyo](#apoyo) -* [Pautas de contribución](../../CONTRIBUTING.md) - - -## Consejos - -<<<<<<< Updated upstream -1. [Verificando jQuery Cargado](#verificando-jquery-cargado) -1. [Utilice `.on ()` En lugar de unión `.click ()`](#utilice-on--en-lugar-de-unión-click-) -1. [Volver al botón de inicio](#volver-al-botón-de-inicio) -1. [Carga previa de imágenes](#carga-previa-de-imágenes) -1. [Comprobando si las imágenes se cargan](#comprobación-si-las-imágenes-se-cargan) -1. [Corregir imágenes automáticamente rotas](#corregir-imágenes-automáticamente-rotas) -1. [Publicar un formulario con AJAX](#publicar-un-formulario-con-ajax) -1. [Alternar clases en la libración](##alternar-clases-en-la-libración) -1. [Desactivar la acción de campos](#desactivación-de-campos-de-entrada) -1. [Detener la carga de Enlaces](#detener-la-carga-de-enlaces) -1. [De caché de jQuery selectores](#de-caché-de-jquery-selectores) -1. [De palanca de fundido / Slide](#de-palanca-de-fundido--slide) -1. [Acordeón simple](#acordeón-simple) -1. [Haga dos Divs la misma altura](#haga-dos-divs-la-misma-altura) -1. [Abrir enlaces externos en una nueva pestaña / ventana](#abrir-enlaces-externos-en-una-nueva-pestaña--ventana) -1. [Buscar elemento Por Texto](#buscar-elemento-por-texto) -1. [Visibilidad gatillo de Cambio](#visibilidad-gatillo-de-cambio) -1. [Control de errores de llamada Ajax](#control-de-errores-de-llamada-ajax) -1. [Llamadas Plugin Cadena](#llamadas-plugin-cadena) -1. [Ordenar la lista de elementos alfabéticamente](#ordenar-la-lista-de-elementos-alfabéticamente) - - -======= -1. [Verificando jQuery Cargado](#checking-if-jquery-loaded) -1. [Utilice `.on ()` En lugar de unión `.click ()`](#use-on-binding-instead-of-click) -1. [Volver al botón de inicio](#back-to-top-button) -1. [Carga previa de imágenes](#preload-images) -1. [comprobando si las imágenes se cargan](#checking-if-images-are-loaded) -1. [corregir imágenes automáticamente rotas](#fix-broken-images-automatically) -1. [Publicar un formulario con AJAX](#post-a-form-with-ajax) -1. [Las clases de palanca en la libración](#toggle-classes-on-hover) -1. [Desactivar la acción de campos](#disabling-input-fields) -1. [Detener la carga de Enlaces](#stop-the-loading-of-links) -1. [de caché de jQuery selectores](#cache-jquery-selectors) -1. [De palanca de fundido / Slide](#toggle-fadeslide) -1. [Acordeón simple](#simple-accordion) -1. [Haga dos Divs la misma altura](#make-two-divs-the-same-height) -1. [Abrir enlaces externos en una nueva pestaña / ventana](#open-external-links-in-new-tabwindow) -1. [Buscar elemento Por Texto](#find-element-by-text) -1. [Visibilidad gatillo de Cambio](#trigger-on-visibility-change) -1. [Control de errores de llamada Ajax](#ajax-call-error-handling) -1. [Llamadas Plugin Cadena](#chain-plugin-calls) -1. [Ordenar la lista de elementos alfabéticamente](#sort-list-items-alphabetically) -1. [Deshabilitar clic derecho](#disable-right-click) - - -
->>>>>>> Stashed changes -### Verificando jQuery Cargado - -Antes de que pueda hacer cualquier cosa con jQuery primero tiene que asegurarse de que se ha cargado: - -```javascript -if (typeof jQuery == 'undefined') { - console.log('jQuery hasn\'t loaded'); -} else { - console.log('jQuery has loaded'); -} -``` - -Ahora que estás fuera... - -[volver al índice de contenidos](#table-of-contents) - - -### Utilice `.on ()` En lugar de unión `.click ()` - -.en El uso de `()` le da varias ventajas sobre el uso de `.click ()`, tales como la capacidad de agregar varios eventos... - -```javascript -.on ('click tap hover') -``` - -...Una unión se aplica a los elementos creados de forma dinámica, así (no hay necesidad de obligar manualmente cada elemento añadido dinámicamente a un elemento DOM) ... - -...Y la posibilidad de configurar un espacio de nombres: - -```javascript -.on('click.menuOpening') -``` - -Los espacios de nombres te dan el poder para desenlazar un evento específico (por ejemplo,`.off('click.menuOpening')`). - -[volver al índice de contenidos](#table-of-contents) - - -### Volver al botón de inicio - -Mediante el uso de la `animate` y métodos `scrollTop` en jQuery que no es necesario un plugin para crear una animación simple-scroll-a arriba: - -```javascript -// Back to top -$('.container').on('click', '.back-to-top', function (e) { - e.preventDefault(); - $('html, body').animate({scrollTop: 0}, 800); -}); -``` - -```html - -Back to top -``` - -El cambio de los cambios de valor `scrollTop` donde se quiere que la barra de desplazamiento a la tierra. Todo lo que realmente está haciendo es animar el cuerpo del documento a lo largo de 800 milisegundos hasta que se desplaza a la parte superior del documento. - -**Nota:** ve por alguna [comportamiento incorrecto](https://github.com/jquery/api.jquery.com/issues/417) con `scrollTop`. - -[volver al índice de contenidos](#table-of-contents) - - -### Carga previa de imágenes - -Si su página web utiliza una gran cantidad de imágenes que no son visibles inicialmente (por ejemplo, en vuelo estacionario) que tiene sentido para precargar ellos: - -```javascript -$.preloadImages = function () { - for (var i = 0; i < arguments.length; i++) { - $('').attr('src', arguments[i]); - } -}; - -$.preloadImages('img/hover-on.png', 'img/hover-off.png'); -``` - -[volver al índice de contenidos](#table-of-contents) - - -### Comprobación Si las imágenes se cargan - -A veces puede que tenga que comprobar si las imágenes han cargado completamente con el fin de continuar con las secuencias de comandos: - -```javascript -$('img').on('load', function () { - console.log('image load successful'); -}); -``` - -También puede comprobar si una imagen en particular se ha cargado mediante la sustitución de la etiqueta `` con un ID o clase. - -[volver al índice de contenidos](#table-of-contents) - - -### Corregir imágenes automáticamente rotas - -Si por casualidad usted encuentra enlaces de imagen rotos en su sitio de la sustitución de uno por uno puede ser un dolor. Esta sencilla pieza de código puede ahorrar muchos dolores de cabeza: - -```javascript -$('img').on('error', function () { - if(!$(this).hasClass('broken-image')) { - $(this).prop('src', 'img/broken.png').addClass('broken-image'); - } -}); -``` - -Alternativamente, si desea ocultar simplemente imágenes rotas este fragmento se encargará de que para: - -```javascript -$('img').on('error', function () { - $(this).hide(); -}); -``` - -[volver al índice de contenidos](#table-of-contents) - - -### Publicar un formulario con AJAX - -Métodos jQuery AJAX son una forma común para solicitar texto, HTML, XML, JSON o. Si desea enviar un formulario a través de AJAX se podía recoger las entradas del usuario a través del método `val()`: - -```javascript -$.post('sign_up.php', { - user_name: $('input[name=user_name]').val(), - email: $('input[name=email]').val(), - password: $('input[name=password]').val(), -}); -``` - -Sin embargo, todos esos `val()` llamadas es caro. Una mejor manera de recoger las entradas del usuario está utilizando el `serialize()` función que recoge las entradas del usuario como una cadena: - -```javascript -$.post('sign_up', $('#sign-up-form').serialize()); -``` - -[volver al índice de contenidos](#table-of-contents) - - -### Alternar clases en la libración - -Digamos que usted quiere cambiar la visual de un elemento se puede hacer clic en la página cuando un usuario se desplaza sobre él. Usted puede agregar una clase a su elemento cuando el usuario está flotando; cuando el usuario deja flotando elimina la clase: - -```javascript -$('.btn').on('hover', function () { - $(this).addClass('hover'); -}, function () { - $(this).removeClass('hover'); -}); -``` - -Sólo tiene que añadir el CSS necesario. Si desea una manera aún _simpler_ utilizar el método `toggleClass`: - -```javascript -$('.btn').hover(function () { - $(this).toggleClass('hover'); -}); -``` - -**Nota:** CSS puede ser una solución más rápida en este caso, pero es todavía vale la pena saber esto. - -[volver al índice de contenidos](#table-of-contents) - - -### Desactivación de campos de entrada - -A veces es posible que desee el botón de envío de un formulario o una de sus entradas de texto debe ser inhabilitado hasta que el usuario ha realizado una acción determinada (por ejemplo, control de la "He leído los términos" casilla de verificación). Añadir el atributo `disabled` a la entrada para que pueda activarlo cuando se quiere: - -```javascript -$('input[type="submit"]').prop('disabled', true); -``` - -Todo lo que necesita hacer es ejecutar el método `prop` otra vez en la entrada, pero establecer el valor de `disabled` a `false`: - -```javascript -$('input[type="submit"]').prop('disabled', false); -``` - -[volver al índice de contenidos](#table-of-contents) - - -### Detener la carga de Enlaces - -A veces no desea vínculos para ir a una determinada página web, ni volver a cargar la página; es posible que desee que hagan otra cosa, como disparador de otro guión. Esto va a hacer el truco de la prevención de la acción por defecto: - -```javascript -$('a.no-link').on('click', function (e) { - e.preventDefault(); -}); -``` - -[volver al índice de contenidos](#table-of-contents) - - -### De caché de jQuery selectores - -Piense en cuántas veces se escribe el mismo selector una y otra vez en cualquier proyecto. Cada `$('.element')` selector tiene que buscar en todo el DOM cada vez, independientemente de si dicho selector había ejecutado anteriormente. En lugar de ello, ejecute el selector de una vez y almacenar los resultados en una variable: - -```javascript -var blocks = $('#blocks').find('li'); -``` - -Ahora se puede utilizar la variable `blocks` donde quieras sin tener que buscar el DOM en cada ocasión: - -```javascript -$('#hideBlocks').on('click', function () { - blocks.fadeOut(); -}); - -$('#showBlocks').on('click', function () { - blocks.fadeIn(); -}); -``` - -El almacenamiento en caché selectores de jQuery son una ganancia de rendimiento fácil. - -[volver al índice de contenidos](#table-of-contents) - - -### De palanca de fundido / Slide - -Deslizante y la decoloración son algo que usamos un montón en nuestras animaciones con jQuery. Es posible que sólo quieren mostrar un elemento cuando un usuario hace clic en algo, lo que hace que los `fadeIn` y métodos de `slideDown` perfecta. Pero si desea que el elemento que aparezca en la primera posición y luego desaparecen en el segundo esto va a funcionar muy bien: - -```javascript -// Fade -$('.btn').on('click', function () { - $('.element').fadeToggle('slow'); -}); - -// Toggle -$('.btn').on('click', function () { - $('.element').slideToggle('slow'); -}); -``` - -[volver al índice de contenidos](#table-of-contents) - - -### Acordeón simple - -Este es un método simple para un acordeón rápida: - -```javascript -// Close all panels -$('#accordion').find('.content').hide(); - -// Accordion -$('#accordion').find('.accordion-header').on('click', function () { - var next = $(this).next(); - next.slideToggle('fast'); - $('.content').not(next).slideUp('fast'); - return false; -}); -``` - -Mediante la adición de este script lo único que tiene que hacer en su página web es el HTML necesario ir a buscar este trabajo. - -[volver al índice de contenidos](#table-of-contents) - - -### Haga dos Divs la misma altura - -A veces, usted querrá dos divs tener la misma altura no importa qué contenido tienen en ellos: - -```javascript -$('.div').css('min-height', $('.main-div').height()); -``` - -Este ejemplo establece el `min-height` característica que significa que puede ser más grande que el div principal pero nunca más pequeña. Sin embargo, un método más flexible sería la de bucle sobre un conjunto de elementos y ajustar la altura a la altura del elemento más alto: - -```javascript -var $columns = $('.column'); -var height = 0; -$columns.each(function () { - if ($(this).height() > height) { - height = $(this).height(); - } -}); -$columns.height(height); -``` - -Si desea _todas_ columnas tengan la misma altura: - -```javascript -var $rows = $('.same-height-columns'); -$rows.each(function () { - $(this).find('.column').height($(this).height()); -}); -``` - -**Nota:** Esto se puede hacer de varias maneras [en CSS](http://codepen.io/AllThingsSmitty/pen/KMPqoO) pero dependiendo de cuáles son sus necesidades, saber cómo hacer esto en jQuery es todavía vale la pena. - -[volver al índice de contenidos](#table-of-contents) - - -### Abrir enlaces externos en una nueva pestaña / ventana - -Abrir enlaces externos en una nueva pestaña o ventana del navegador y garantizar enlaces en el mismo origen abierta en la misma pestaña o ventana: - -```javascript -$('a[href^="http"]').attr('target', '_blank'); -$('a[href^="//"]').attr('target', '_blank'); -$('a[href^="' + window.location.origin + '"]').attr('target', '_self'); -``` - -**Nota:** `window.location.origin` no funciona en IE10. [Esta corrección](http://tosbourn.com/a-fix-for-window-location-origin-in-internet-explorer/) se ocupa de la cuestión. - -[volver al índice de contenidos](#table-of-contents) - - -### Buscar elemento Por Texto - -Mediante el uso de la selector `contains()` en jQuery se puede encontrar texto en el contenido de un elemento. Si no existe texto, ese elemento se ocultará: - -```javascript -var search = $('#search').val(); -$('div:not(:contains("' + search + '"))').hide(); -``` - -[volver al índice de contenidos](#table-of-contents) - - -### Visibilidad gatillo de Cambio - -Gatillo JavaScript cuando el usuario ya no se centra en una pestaña, o vuelve a centrar en una pestaña: - -```javascript -$(document).on('visibilitychange', function (e) { - if (e.target.visibilityState === 'visible') { - console.log('Tab is now in view!'); - } else if (e.target.visibilityState === 'hidden') { - console.log('Tab is now hidden!'); - } -}); -``` - -[volver al índice de contenidos](#table-of-contents) - - -### Control de errores de llamada Ajax - -Cuando una llamada Ajax devuelve un error 404 o 500 se ejecutará el gestor de errores. Si no se define el controlador, otro código jQuery podría no funcionar. Definir un controlador global de error de Ajax: - -```javascript -$(document).on('ajaxError', function (e, xhr, settings, error) { - console.log(error); -}); -``` - -[volver al índice de contenidos](#table-of-contents) - - -### Llamadas Plugin Cadena - -jQuery permite el "encadenamiento" plug-in de llamadas a métodos para mitigar el proceso de consulta en repetidas ocasiones el DOM y la creación de varios objetos jQuery. Digamos que el siguiente fragmento representa sus llamadas a métodos plugin: - -```javascript -$('#elem').show(); -$('#elem').html('bla'); -$('#elem').otherStuff(); -``` - -Esto podría mejorarse enormemente mediante el uso de encadenamiento: - -```javascript -$('#elem') - .show() - .html('bla') - .otherStuff(); -``` - -Una alternativa es almacenar en caché el elemento en una variable (con el prefijo `$`): - -```javascript -var $elem = $('#elem'); -$elem.hide(); -$elem.html('bla'); -$elem.otherStuff(); -``` - -Ambos métodos [almacenamiento en caché](#cache-jquery-selectors) en el encadenamiento y son las mejores prácticas que conducen al código corto y más rápido. - -[volver al índice de contenidos](#table-of-contents) - - -### Ordenar la lista de elementos alfabéticamente - -Digamos que usted termina con demasiados elementos en una lista. Tal vez el contenido es producido por un CMS y desea ordenar por orden alfabético: - -```javascript -var ul = $('#list'), -lis = $('li', ul).get(); - -lis.sort(function (a, b) { - return ($(a).text().toUpperCase() < $(b).text().toUpperCase()) ? -1 : 1; -}); - -ul.append(lis); -``` - -Hay que ir! - -[volver al índice de contenidos](#table-of-contents) - - -
-### Deshabilitar clic derecho - -Si desea desactivar el botón derecho del ratón, puede hacerlo para una página entera... - -```javascript -$(document).ready(function() { - $(document).bind('contextmenu', function(e) { - return false; - }) -}) -``` - -...pero también puede hacer lo mismo para un elemento específico: - -```javascript -$(document).ready(function() { - $('#submit').bind('contextmenu', function(e) { - return false; - }) -}) -``` - -[volver al índice de contenidos](#table-of-contents) - - -## Apoyo - -Las versiones actuales de Chrome, Firefox, Safari, Opera, Edge y EI11. diff --git a/translations/hu-HU/README.md b/translations/hu-HU/README.md new file mode 100644 index 0000000..6311232 --- /dev/null +++ b/translations/hu-HU/README.md @@ -0,0 +1,485 @@ +# jQuery tippek, amiket mindenkinek tudnia kellene [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) + +Egyszerű tippek gyűjteménye, a jQuery-ben való elmélyülésed segítendő. + +> További nagyszerű listákért tekintsd meg [@sindresorhus](https://github.com/sindresorhus/) válogatott [listáját](https://github.com/sindresorhus/awesome/). + + +## Tartalomjegyzék + +* [Tippek](#tips) +* [Támogatás](#support) +* [További fordítások](#translations) +* [Közreműködési útmutató (angolul)](CONTRIBUTING.md) + + +## Tippek + +1. [Betöltött-e a jQuery? - Ellenőrzés](#checking-if-jquery-loaded) +1. [`.on()` binding ("kötés") használata `.click()` helyett](#use-on-binding-instead-of-click) +1. ['Vissza az elejére' gomb](#back-to-top-button) +1. [Képek előbetöltése](#preload-images) +1. [Betöltöttek-e a képek? - Ellenőrzés](#checking-if-images-are-loaded) +1. [Betölt(het)etlen képek automatikus javítása](#fix-broken-images-automatically) +1. [Űrlap elküldése AJAX-al](#post-a-form-with-ajax) +1. [CSS osztály aktiválása a kurzor hatására](#toggle-classes-on-hover) +1. [Beviteli mezők kikapcsolása](#disabling-input-fields) +1. [Linkbetöltés megállítása](#stop-the-loading-of-links) +1. [jQuery kiválasztók eltárolása](#cache-jquery-selectors) +1. [Áttűnés/becsúszás effekt rögzítése](#toggle-fadeslide) +1. [Egyszerű accordion (harmonika-menü)](#simple-accordion) +1. [HTML div elemek egyező magassággal](#make-two-divs-the-same-height) +1. [Külső linkek megnyitása új fülön/ablakban](#open-external-links-in-new-tabwindow) +1. [Elemek keresése szöveg alapján](#find-element-by-text) +1. [Script aktiválás láthatóság változása esetén](#trigger-on-visibility-change) +1. [AJAX hívások hibakezelése](#ajax-call-error-handling) +1. [Plugin hívások láncolása](#chain-plugin-calls) +1. [Listaelemek sorba rendezése ABC szerint](#sort-list-items-alphabetically) +1. [Jobb egérkattintás kikapcsolása](#disable-right-click) + + +### Betöltött-e a jQuery? - Ellenőrzés + +Before you can do anything with jQuery you first need to make certain it has loaded: + +```javascript +if (typeof jQuery == 'undefined') { + console.log('jQuery hasn\'t loaded'); +} else { + console.log('jQuery has loaded'); +} +``` + +Now you're off... + +[back to table of contents](#table-of-contents) + + +### `.on()` binding ("kötés") használata `.click()` helyett + +Using `.on()` gives you several advantages over using `.click()`, such as the ability to add multiple events... + +```javascript +.on('click tap hover') +``` + +...a binding applies to dynamically created elements, as well (there's no need to manually bind every single element dynamically added to a DOM element)... + +...and the possibility to set a namespace: + +```javascript +.on('click.menuOpening') +``` + +Namespaces give you the power to unbind a specific event (e.g., `.off('click.menuOpening')`). + +[back to table of contents](#table-of-contents) + + +### 'Vissza az elejére' gomb + +By using the `animate` and `scrollTop` methods in jQuery you don't need a plugin to create a simple scroll-to-top animation: + +```javascript +// Back to top +$('.container').on('click', '.back-to-top', function (e) { + e.preventDefault(); + $('html, body').animate({scrollTop: 0}, 800); +}); +``` + +```html + +
+ Back to top +
+``` + +Changing the `scrollTop` value changes where you wants the scrollbar to land. All you're really doing is animating the body of the document throughout the course of 800 milliseconds until it scrolls to the top of the document. + +**Note:** Watch for some [buggy behavior](https://github.com/jquery/api.jquery.com/issues/417) with `scrollTop`. + +[back to table of contents](#table-of-contents) + + +### Képek előbetöltése + +If your web page uses a lot of images that aren't visible initially (e.g., on hover) it makes sense to preload them: + +```javascript +$.preloadImages = function () { + for (var i = 0; i < arguments.length; i++) { + $('').attr('src', arguments[i]); + } +}; + +$.preloadImages('img/hover-on.png', 'img/hover-off.png'); +``` + +[back to table of contents](#table-of-contents) + + +### Betöltöttek-e a képek? - Ellenőrzés + +Sometimes you might need to check if your images have fully loaded in order to continue on with your scripts: + +```javascript +$('img').on('load', function () { + console.log('image load successful'); +}); +``` + +You can also check if one particular image has loaded by replacing the `` tag with an ID or class. + +[back to table of contents](#table-of-contents) + + +### Betölt(het)etlen képek automatikus javítása + +If you happen to find broken image links on your site replacing them one by one can be a pain. This simple piece of code can save a lot of headaches: + +```javascript +$('img').on('error', function () { + if(!$(this).hasClass('broken-image')) { + $(this).prop('src', 'img/broken.png').addClass('broken-image'); + } +}); +``` + +Alternatively, if you wish to simply hide broken images this snippet will take care of that for: + +```javascript +$('img').on('error', function () { + $(this).hide(); +}); +``` + +[back to table of contents](#table-of-contents) + + +### Űrlap elküldése AJAX-al + +jQuery AJAX methods are a common way to request text, HTML, XML, or JSON. If you wanted to send a form via AJAX you could collect the user inputs via the `val()` method: + +```javascript +$.post('sign_up.php', { + user_name: $('input[name=user_name]').val(), + email: $('input[name=email]').val(), + password: $('input[name=password]').val(), +}); +``` + +However, all of those `val()` calls are expensive. A better way of collecting the user inputs is using the `serialize()` function which collects the user inputs as a string: + +```javascript +$.post('sign_up', $('#sign-up-form').serialize()); +``` + +[back to table of contents](#table-of-contents) + + +### CSS osztály aktiválása a kurzor hatására + +Let's say you want to change the visual of a clickable element on your page when a user hovers over it. You can add a class to your element when the user is hovering; when the user stops hovering removes the class: + +```javascript +$('.btn').on('hover', function () { + $(this).addClass('hover'); +}, function () { + $(this).removeClass('hover'); +}); +``` + +You just need to add the necessary CSS. If you want an even _simpler_ way use the `toggleClass` method: + +```javascript +$('.btn').on('hover', function () { + $(this).toggleClass('hover'); +}); +``` + +**Note:** CSS may be a faster solution in this case but it's still worthwhile to know this. + +[back to table of contents](#table-of-contents) + + +### Beviteli mezők kikapcsolása + +At times you may want the submit button of a form or one of its text inputs to be disabled until the user has performed a certain action (e.g., checking the "I've read the terms" checkbox). Add the `disabled` attribute to your input so you can enable it when you want: + +```javascript +$('input[type="submit"]').prop('disabled', true); +``` + +All you need to do is run the `prop` method again on the input, but set the value of `disabled` to `false`: + +```javascript +$('input[type="submit"]').prop('disabled', false); +``` + +[back to table of contents](#table-of-contents) + + +### Linkbetöltés megállítása + +Sometimes you don't want links to go to a certain web page nor reload the page; you might want them to do something else like trigger some other script. This will do the trick of preventing the default action: + +```javascript +$('a.no-link').on('click', function (e) { + e.preventDefault(); +}); +``` + +[back to table of contents](#table-of-contents) + + +### jQuery kiválasztók eltárolása + +Think of how many times you write the same selector over and over again in any project. Every `$('.element')` selector has to search the entire DOM each time, regardless if that selector had previously run. Instead, run the selector once and store the results in a variable: + +```javascript +var blocks = $('#blocks').find('li'); +``` + +Now you can use the `blocks` variable wherever you want without having to search the DOM every time: + +```javascript +$('#hideBlocks').on('click', function () { + blocks.fadeOut(); +}); + +$('#showBlocks').on('click', function () { + blocks.fadeIn(); +}); +``` + +Caching jQuery selectors are an easy performance gain. + +[back to table of contents](#table-of-contents) + + +### Áttűnés/becsúszás effekt rögzítése + +Sliding and fading are something we use plenty in our animations with jQuery. You might just want to show an element when a user clicks something, which makes the `fadeIn` and `slideDown` methods perfect. But if you want that element to appear on the first click and then disappear on the second this will work just fine: + +```javascript +// Fade +$('.btn').on('click', function () { + $('.element').fadeToggle('slow'); +}); + +// Toggle +$('.btn').on('click', function () { + $('.element').slideToggle('slow'); +}); +``` + +[back to table of contents](#table-of-contents) + + +### Egyszerű accordion (harmonika-menü) + +This is a simple method for a quick accordion: + +```javascript +// Close all panels +$('#accordion').find('.content').hide(); + +// Accordion +$('#accordion').find('.accordion-header').on('click', function () { + var next = $(this).next(); + next.slideToggle('fast'); + $('.content').not(next).slideUp('fast'); + return false; +}); +``` + +By adding this script all you really needs to do on your web page is the necessary HTML go get this working. + +[back to table of contents](#table-of-contents) + + +### HTML div elemek egyező magassággal + +Sometimes you'll want two divs to have the same height no matter what content they have in them: + +```javascript +$('.div').css('min-height', $('.main-div').height()); +``` + +This example sets the `min-height` which means that it can be bigger than the main div but never smaller. However, a more flexible method would be to loop over a set of elements and set the height to the height of the tallest element: + +```javascript +var $columns = $('.column'); +var height = 0; +$columns.each(function () { + if ($(this).height() > height) { + height = $(this).height(); + } +}); +$columns.height(height); +``` + +If you want _all_ columns to have the same height: + +```javascript +var $rows = $('.same-height-columns'); +$rows.each(function () { + $(this).find('.column').height($(this).height()); +}); +``` + +**Note:** This can be done several ways [in CSS](http://codepen.io/AllThingsSmitty/pen/KMPqoO) but depending on what your needs are, knowing how to do this in jQuery is still worthwhile. + +[back to table of contents](#table-of-contents) + + +### Külső linkek megnyitása új fülön/ablakban + +Open external links in a new browser tab or window and ensure links on the same origin open in the same tab or window: + +```javascript +$('a[href^="http"]').attr('target', '_blank'); +$('a[href^="//"]').attr('target', '_blank'); +$('a[href^="' + window.location.origin + '"]').attr('target', '_self'); +``` + +**Note:** `window.location.origin` doesn't work in IE10. [This fix](http://tosbourn.com/a-fix-for-window-location-origin-in-internet-explorer/) takes care of the issue. + +[back to table of contents](#table-of-contents) + + +### Elemek keresése szöveg alapján + +By using the `contains()` selector in jQuery you can find text in content of an element. If text doesn't exists, that element will be hidden: + +```javascript +var search = $('#search').val(); +$('div:not(:contains("' + search + '"))').hide(); +``` + +[back to table of contents](#table-of-contents) + + +### Script aktiválás láthatóság változása esetén + +Trigger JavaScript when the user is no longer focusing on a tab, or refocuses on a tab: + +```javascript +$(document).on('visibilitychange', function (e) { + if (e.target.visibilityState === 'visible') { + console.log('Tab is now in view!'); + } else if (e.target.visibilityState === 'hidden') { + console.log('Tab is now hidden!'); + } +}); +``` + +[back to table of contents](#table-of-contents) + + +### AJAX hívások hibakezelése + +When an Ajax call returns a 404 or 500 error the error handler will be executed. If the handler isn't defined, other jQuery code might not work anymore. Define a global Ajax error handler: + +```javascript +$(document).on('ajaxError', function (e, xhr, settings, error) { + console.log(error); +}); +``` + +[back to table of contents](#table-of-contents) + + +### Plugin hívások láncolása + +jQuery allows for the "chaining" of plugin method calls to mitigate the process of repeatedly querying the DOM and creating multiple jQuery objects. Let's say the following snippet represents your plugin method calls: + +```javascript +$('#elem').show(); +$('#elem').html('bla'); +$('#elem').otherStuff(); +``` + +This could be vastly improved by using chaining: + +```javascript +$('#elem') + .show() + .html('bla') + .otherStuff(); +``` + +An alternative is to cache the element in a variable (prefixed with `$`): + +```javascript +var $elem = $('#elem'); +$elem.hide(); +$elem.html('bla'); +$elem.otherStuff(); +``` + +Both chaining and [caching](#cache-jquery-selectors) methods in jQuery are best practices that lead to shorter and faster code. + +[back to table of contents](#table-of-contents) + + +### Listaelemek sorba rendezése ABC szerint + +Let's say you end up with too many items in a list. Maybe the content is produced by a CMS and you want to order them alphabetically: + +```javascript +var ul = $('#list'), +lis = $('li', ul).get(); + +lis.sort(function (a, b) { + return ($(a).text().toUpperCase() < $(b).text().toUpperCase()) ? -1 : 1; +}); + +ul.append(lis); +``` + +There you go! + +[back to table of contents](#table-of-contents) + + +### Jobb egérkattintás kikapcsolása + +If you want to disable right-click, you can do it for an entire page... + +```javascript +$(document).ready(function() { + $(document).bind('contextmenu', function(e) { + return false; + }) +}) +``` + +...but you can also do the same for a specific element: + +```javascript +$(document).ready(function() { + $('#submit').bind('contextmenu', function(e) { + return false; + }) +}) +``` + +[back to table of contents](#table-of-contents) + + +## Támogatás + + + +A Chrome, Firefox, Safari, Opera, Edge és IE11 böngészők jelenlegi verziói. + + +## További fordítások + +* [Español](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/es-ES) +* [Français](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/fr-FR) +* [Pусский](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/ru-RU) +* [简体中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-CN) +* [繁體中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-TW) diff --git a/translations/ru-RU/README.md b/translations/ru-RU/README.md deleted file mode 100644 index a00a717..0000000 --- a/translations/ru-RU/README.md +++ /dev/null @@ -1,492 +0,0 @@ -# Советы по jQuery, которые должен знать каждый [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) - -Коллекция простых советов, чтобы помочь вашей работе с jQuery. - -> Другие прекрасные списки, за которыми следит [@sindresorhus](https://github.com/sindresorhus/~~HEAD=dobj), можно увидеть [здесь](https://github.com/sindresorhus/awesome/). - - -
-## Содержание - -* [Советы](#советы) -* [Поддержка](#поддержка) -* [Как сделать вклад](../../CONTRIBUTING.md) - - -## Советы - -1. [Проверка готовности jQuery](#checking-if-jquery-loaded) -1. [Используйте `.on()` вместо `.click()`](#use-on-binding-instead-of-click) -1. [Кнопка "вернуться к началу"](#back-to-top-button) -1. [Предварительная загрузка изображений](#preload-images) -1. [Проверка, загружаются ли изображения](#checking-if-images-are-loaded) -1. [Автоматическое исправление сломанных изображений](#fix-broken-images-automatically) -1. [Дать форму с помощью AJAX](#post-a-form-with-ajax) -1. [Переключение классов по наведению](#toggle-classes-on-hover) -1. [Отключение поля ввода](#disabling-input-fields) -1. [Прерывание загрузки ссылки](#stop-the-loading-of-links) -1. [Кэширование селекторов jQuery](#cache-jquery-selectors) -1. [Переключение fade/slide](#toggle-fadeslide) -1. [Простой аккордеон](#simple-accordion) -1. [Сделать два элемента div одинаковой высотой](#make-two-divs-the-same-height) -1. [Открывать внешние ссылки в новой вкладке или новом окне](#open-external-links-in-new-tabwindow) -1. [Найти элемент по тексту](#find-element-by-text) -1. [Запуск по изменению видимости](#trigger-on-visibility-change) -1. [Обработка ошибок в AJAX-запросах](#ajax-call-error-handling) -1. [Цепочка вызовов плагинов](#chain-plugin-calls) -1. [Сортировка элементов списка по алфавиту](#sort-list-items-alphabetically) -1. [Отключить правую кнопку мыши](#disable-right-click) - -
-### Проверка готовности jQuery - -Перед тем, как сделать что-нибудь с помощью jQuery, необходимо убедиться в том, что он загружен: - -```javascript -if (typeof jQuery == 'undefined') { - console.log('jQuery hasn\'t loaded'); -} else { - console.log('jQuery has loaded'); -} -``` - -Теперь вы можете продолжать ... - -[вернуться к оглавлению](#table-of-contents) - - -
-### Используйте `.on()` вместо `.click()` - -Использование `.on()` дает ряд преимуществ по сравнению с использованием `.click()`, например, возможность добавлять несколько событий... - -```javascript -.on('click tap hover') -``` - -...привязка применяется к динамически создаваемым элементам (нет необходимости вручную связывать каждый отдельный элемент, динамически добавленный к DOM)... - -...и возможность установить пространство имен: - -```javascript -.on('click.menuOpening') -``` - -Пространства имен дают вам возможность отключать привязку к конкретному событию (например, `.off('click.menuOpening')`). - -[вернуться к оглавлению](#table-of-contents) - - -
-### Кнопка "вернуться к началу" - -С помощью методов `animate` и `scrollTop` в jQuery вам не нужен плагин, чтобы создать простую анимацию прокрутки вверх: - -```javascript -// Вернуться к началу -$('.container').on('click', '.back-to-top', function (e) { - e.preventDefault(); - $('html, body').animate({scrollTop: 0}, 800); -}); -``` - -```html - -Back to top -``` - -Изменение значения `scrollTop` изменяет место, на котором прокрутка остановится. Все, что вы действительно делаете, это прокрутка документа на протяжении 800 миллисекунд, пока мы не окажемся в верхней части документа. - -**Примечание:** Обратите внимание на некоторое [неправильное поведение](https://github.com/jquery/api.jquery.com/issues/417) `scrollTop`. - -[вернуться к оглавлению](#table-of-contents) - - -
-### Предварительная загрузка изображений - -Если ваш веб-страница использует много изображений, которые не видны изначально (например, появлюятся при наведении курсора мыши), имеет смысл предварительно загрузить их: - -```javascript -$.preloadImages = function () { - for (var i = 0; i < arguments.length; i++) { - $('').attr('src', arguments[i]); - } -}; - -$.preloadImages('img/hover-on.png', 'img/hover-off.png'); -``` - -[вернуться к оглавлению](#table-of-contents) - - -
-### Проверка, загружаются ли изображения - -Иногда вам может понадобиться проверка того, что ваши изображения полностью загружены, перед тем как вы продолжите работу своего скрипта: - -```javascript -$('img').on('load', function () { - console.log('image load successful'); -}); -``` - -Вы также можете проверить, если одно конкретное изображение загружено, заменив тег `` на идентификатор или класс. - -[вернуться к оглавлению](#table-of-contents) - - -
-### Автоматическое исправление сломанных изображений - -Если вам посчастливилось найти неработающие ссылки на изображения на вашем сайте, замена их по одной может утомить. Этот простой фрагмент кода поможет избежать этой головной боли: - -```javascript -$('img').on('error', function () { - if(!$(this).hasClass('broken-image')) { - $(this).prop('src', 'img/broken.png').addClass('broken-image'); - } -}); -``` - -В качестве альтернативы, если вы хотите просто скрыть сломанные изображения этот фрагмент будет заботиться о том, что для: - -```javascript -$('img').on('error', function () { - $(this).hide(); -}); -``` - -[вернуться к оглавлению](#table-of-contents) - - -
-### Дать форму с помощью AJAX - -методы JQuery AJAX являются распространенным способом запросить текст, HTML, XML или JSON. Если вы хотите отправить форму через AJAX можно собирать пользовательские входные данные через `val()` метода: - -```javascript -$.post('sign_up.php', { - user_name: $('input[name=user_name]').val(), - email: $('input[name=email]').val(), - password: $('input[name=password]').val(), -}); -``` - -Тем не менее, все эти `val()` звонки стоят дорого. Лучший способ сбора данных, вводимых пользователем использует `serialize()` функцию, которая собирает пользовательские входные данные в виде строки: - -```javascript -$.post('sign_up', $('#sign-up-form').serialize()); -``` - -[вернуться к оглавлению](#table-of-contents) - - -
-### Переключение классов по наведению - -Допустим, вы хотите изменить визуальный интерактивный элемент на странице, когда пользователь наводит курсор над ним. Вы можете добавить класс к вашему элементу, когда пользователь навел курсор; когда пользователь уводит курсор, класс удаляется: - -```javascript -$('.btn').on('hover', function () { - $(this).addClass('hover'); -}, function () { - $(this).removeClass('hover'); -}); -``` - -Вам просто нужно добавить необходимые стили CSS. Если вы хотите _упростить_ логику, используйте метод `toggleClass`: - -```javascript -$('.btn').hover(function () { - $(this).toggleClass('hover'); -}); -``` - -**Примечание:** CSS может быть более быстрым решением в этом случае, но вам по-прежнему стоит знать об этом. - -[вернуться к оглавлению](#table-of-contents) - - -
-### Отключение поля ввода - -Иногда вы можете захотеть отключить кнопку отправки формы или одно из его текстовых полей, до тех пор, пока пользователь не выполнил определенное действие (например, не отметил флаг "я прочитал условия"). Добавьте атрибут `disabled` на ваше поле ввода, отключив его, когда вы хотите: - -```javascript -$('input[type="submit"]').prop('disabled', true); -``` - -Все, что вам нужно сделать, чтобы включить поле обратно, это запустить метод `prop` на том же поле ввода, но установить значение `disabled` к `false`: - -```javascript -$('input[type="submit"]').prop('disabled', false); -``` - -[вернуться к оглавлению](#table-of-contents) - - - -### Прерывание загрузки ссылки - -Иногда вы не хотите, чтобы ссылки переводили пользователя на определенную веб-страницу или перезагружали страницу; Вы можете хотеть, чтобы они делали что-то еще, как спусковой крючок для какой-либо другого сценария. Этот скрипт предотвратит действие по умолчанию: - -```javascript -$('a.no-link').on('click', function (e) { - e.preventDefault(); -}); -``` - -[вернуться к оглавлению](#table-of-contents) - - -
-### Кэширование селекторов jQuery - -Подумайте, сколько раз вы пишете один и тот же селектор снова и снова в любом проекте. Каждый `$('.element')` селектор ищет по всему DOM каждый раз, независимо от того, был ли он использован раньше. Вместо этого запустите селектор один раз и сохраните его результаты в переменной: - -```javascript -var blocks = $('#blocks').find('li'); -``` - -Теперь вы можете использовать `blocks` переменную там, где вы хотите, без необходимости выполнять поиск по DOM каждый раз: - -```javascript -$('#hideBlocks').on('click', function () { - blocks.fadeOut(); -}); - -$('#showBlocks').on('click', function () { - blocks.fadeIn(); -}); -``` - -Кэширование jQuery селекторов позволяет получить выигрыш в производительности. - -[вернуться к оглавлению](#table-of-contents) - - -
-### Переключение fade/slide - -Slide и fade являются часто используемыми действиями в анимации с jQuery. Вы можете захотить, показать элемент, когда пользователь нажимает что-то, что делает методы `fadeIn` и `slideDown` хорошо подходящими. Но если вы хотите, чтобы этот элемент, появился на первый щелчок, а затем исчез на второй, то этот скрипт будет работать просто отлично: - -```javascript -// Fade -$('.btn').on('click', function () { - $('.element').fadeToggle('slow'); -}); - -// Toggle -$('.btn').on('click', function () { - $('.element').slideToggle('slow'); -}); -``` - -[вернуться к оглавлению](#table-of-contents) - - -
-### Простой аккордеон - -Метод для создания простого аккордеона: - -```javascript -// Закрываем все панели -$('#accordion').find('.content').hide(); - -// Аккордеон -$('#accordion').find('.accordion-header').on('click', function () { - var next = $(this).next(); - next.slideToggle('fast'); - $('.content').not(next).slideUp('fast'); - return false; -}); -``` - -Добавив этот скрипт все, что вам нужно сделать на вашей веб-странице, это найти необходимый HTML и поручить ему эту работу. - -[вернуться к оглавлению](#table-of-contents) - - -
-### Сделать два элемента div одинаковой высотой - -Иногда вы будете хотеть две элемента div, которые имеют одинаковую высоту, независимо от содержания: - -```javascript -$('.div').css('min-height', $('.main-div').height()); -``` - -В этом примере задается `min-height`, что означает, что она может быть больше, чем основной DIV, но никогда меньше. Тем не менее, более гибкий метод должен был бы пройтись циклом по множеству элементов и установить высоту самого высокого элемента: - -```javascript -var $columns = $('.column'); -var height = 0; -$columns.each(function () { - if ($(this).height() > height) { - height = $(this).height(); - } -}); -$columns.height(height); -``` - -Если вы хотите, чтобы _все_ столбцы имели одинаковую высоту: - -```javascript -var $rows = $('.same-height-columns'); -$rows.each(function () { - $(this).find('.column').height($(this).height()); -}); -``` - -**Примечание:** Это можно сделать несколькими способами [в CSS](http://codepen.io/AllThingsSmitty/pen/KMPqoO), но в зависимости от ваших потребностей, стоит знать, как это сделать с помощью jQuery. - -[вернуться к оглавлению](#table-of-contents) - - - -### Открывать внешние ссылки в новой вкладке или новом окне - -Открыть внешние ссылки в новой вкладке браузера или новом окне, и открывать внутренние ссылки в той же вкладке или окне: - -```javascript -$('a[href^="http"]').attr('target', '_blank'); -$('a[href^="//"]').attr('target', '_blank'); -$('a[href^="' + window.location.origin + '"]').attr('target', '_self'); -``` - -**Примечание:** `window.location.origin` не работает в IE10. [Это исправление](http://tosbourn.com/a-fix-for-window-location-origin-in-internet-explorer/) решает проблему. - -[вернуться к оглавлению](#table-of-contents) - - -
-### Найти элемент по тексту - -При использовании `contains()` селектора в jQuery вы можете найти текст в содержимом элемента. Если текст не существует, то этот элемент будет скрыт: - -```javascript -var search = $('#search').val(); -$('div:not(:contains("' + search + '"))').hide(); -``` - -[вернуться к оглавлению](#table-of-contents) - - -
-### Запуск по изменению видимости - -Запуск скрипта, когда пользователь больше не фокусируется на вкладке или перефокусируется на вкладке: - -```javascript -$(document).on('visibilitychange', function (e) { - if (e.target.visibilityState === 'visible') { - console.log('Tab is now in view!'); - } else if (e.target.visibilityState === 'hidden') { - console.log('Tab is now hidden!'); - } -}); -``` - -[вернуться к оглавлению](#table-of-contents) - - -
-### Обработка ошибок в AJAX-запросах - -Когда AJAX-запрос возвращает ошибку 404 или 500, будет выполняться обработчик ошибок. Если обработчик не определен, другой код jQuery может не работать после этого. Определить глобальный обработчик ошибок AJAX-запросов можно следующим образом: - -```javascript -$(document).on('ajaxError', function (e, xhr, settings, error) { - console.log(error); -}); -``` - -[вернуться к оглавлению](#table-of-contents) - - -
-### Цепочка вызовов плагинов - -jQuery позволяет выполнять "цепочки" методов, что упрощает процесс, однократно запрашивая DOM и не создавая несколько объектов jQuery. Скажем, следующий фрагмент кода представляет ваш метод: - -```javascript -$('#elem').show(); -$('#elem').html('bla'); -$('#elem').otherStuff(); -``` - -Он может быть значительно улучшен с помощью цепочки: - -```javascript -$('#elem') - .show() - .html('bla') - .otherStuff(); -``` - -Альтернативой является кэширование элемента в переменной (с приставкой `$`): - -```javascript -var $elem = $('#elem'); -$elem.hide(); -$elem.html('bla'); -$elem.otherStuff(); -``` - -И цепочки и [кэширование](#cache-jquery-selectors) в jQuery являются лучшими практиками, которые приводят к более короткому и быстрому код. - -[вернуться к оглавлению](#table-of-contents) - - -
-### Сортировка элементов списка по алфавиту - -Допустим, в списке слишком много элементов. Возможно, содержание производится с помощью CMS, а вы хотите показать их в алфавитном порядке: - -```javascript -var ul = $('#list'), -lis = $('li', ul).get(); - -lis.sort(function (a, b) { - return ($(a).text().toUpperCase() < $(b).text().toUpperCase()) ? -1 : 1; -}); - -ul.append(lis); -``` - -Такие дела! - -[вернуться к оглавлению](#table-of-contents) - - -
-### Отключить правую кнопку мыши - -Если вы хотите отключить контекстное меню, вы можете сделать это для всей страницы... - -```javascript -$(document).ready(function() { - $(document).bind('contextmenu', function(e) { - return false; - }) -}) -``` - -...но вы также можете сделать то же самое для конкретного элемента: - -```javascript -$(document).ready(function() { - $('#submit').bind('contextmenu', function(e) { - return false; - }) -}) -``` - -[вернуться к оглавлению](#table-of-contents) - - -## Поддержка - -Текущие версии Chrome, Firefox, Safari, Opera, Edge, и IE11. diff --git a/translations/zh-CN/README.md b/translations/zh-CN/README.md deleted file mode 100644 index 722e7b7..0000000 --- a/translations/zh-CN/README.md +++ /dev/null @@ -1,495 +0,0 @@ -# jQuery的提示大家应该知道 [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) - -简单的窍门的集合，以帮助您的jQuery的游戏。 - -> 对于其他大名单退房 [@sindresorhus](https://github.com/sindresorhus/)的策展的名单 [真棒名单](https://github.com/sindresorhus/awesome/). - - -
-## 目录 - -* [温馨提示](＃提示) -* [支持](＃support) -* [贡献指引](../../CONTRIBUTING.md) - - -
-## 提示 - -1. [检查是否加载的jQuery](＃checking-if-jquery-loaded) -1. [使用`.on()`绑定`.click()`代替](#use-on-binding-instead-of-click) -1. [返回顶部按钮](#back-to-top-button) -1. [预先载入图像](#preload-images) -1. [检查，如果图像加载](#checking-if-images-are-loaded) -1. [自动修复破碎的形象](#fix-broken-images-automatically) -1. [发布的AJAX表单](#post-a-form-with-ajax) -1. [悬停切换类](#toggle-classes-on-hover) -1. [禁用输入字段](#disabling-input-fields) -1. [停止路径的负载](#stop-the-loading-of-links) -1. [缓存jquery选择](#cache-jquery-selectors) -1. [淡入淡出切换/幻灯片](#toggle-fadeslide) -1. [简单手风琴](#simple-accordion) -1. [让两个div相同的高度](#make-two-divs-the-same-height) -1. [打开外部链接在新标签/窗口](#open-external-links-in-new-tabwindow) -1. [查找元素通过短信](#find-element-by-text) -1. [可见性改变触发器](#trigger-on-visibility-change) -1. [Ajax调用错误处理](#ajax-call-error-handling) -1. [连锁插件调用](#chain-plugin-calls) -1. [排序列表项按字母顺序](#sort-list-items-alphabetically) -1. [禁用右鍵單擊](#disable-right-click) - - -
-### 检查如果加载的jQuery - -之前，你可以使用jQuery做任何事情，你首先需要确保它加载： - -```javascript -if (typeof jQuery == 'undefined') { - console.log('jQuery hasn\'t loaded'); -} else { - console.log('jQuery has loaded'); -} -``` - -现在你是关闭... - -[回目录](#table-of-contents) - - -
-### 使用`.on()`绑定`.click()`代替 - -使用`.on()`给你几个优点比使用`.click()`，如添加多个事件的能力... - -```javascript -.on('click tap hover') -``` - -...绑定适用于动态创建的元素，以及（有没有必要动态添加到DOM元素每一个元素手动绑定）... - -...和可能性来设置一个命名空间: - -```javascript -.on('click.menuOpening') -``` - -命名空间给你解除对特定事件（例如，`.off（'click.menuOpening'）`）的权力。 - -[回目录](#table-of-contents) - - -
-### 返回顶部按钮 - -通过使用jQuery中的`animate`和`scrollTop`方法，你并不需要一个插件来创建一个简单的滚动到顶部动画： - -```javascript -// Back to top -$('.container').on('click', '.back-to-top', function (e) { - e.preventDefault(); - $('html, body').animate({scrollTop: 0}, 800); -}); -``` - -```html - -Back to top -``` - -改变，你想要滚动降落`scrollTop`价值的变化。所有你真的做的是动画文件的全身各处的800毫秒的过程中，直到它滚动到文档的顶部。 - -**注：** 观看一些 [错误行为](https://github.com/jquery/api.jquery.com/issues/417) 用 `scrollTop`。 - -[回目录](#table-of-contents) - - -
-### 预先载入图像 - -如果你的网页使用了大量不可见的开始（例如，悬停）图像是有意义的预加载它们： - -```javascript -$.preloadImages = function () { - for (var i = 0; i < arguments.length; i++) { - $('').attr('src', arguments[i]); - } -}; - -$.preloadImages('img/hover-on.png', 'img/hover-off.png'); -``` - -[回目录](#table-of-contents) - - -
-### 检查如果图像加载 - -有时你可能需要检查，如果您的影像出现，以便继续与脚本满载： - -```javascript -$('img').on('load', function () { - console.log('image load successful'); -}); -``` - -您也可以检查，如果一个特定的形象已被用一个ID或类替换``标签加载。 - -[回目录](#table-of-contents) - - -
-### 自动修复破碎的形象 - -如果你碰巧发现网站上的残缺的图像链接一个取代他们可以是一个痛苦。这一段简单的代码可以节省很多麻烦： - -```javascript -$('img').on('error', function () { - if(!$(this).hasClass('broken-image')) { - $(this).prop('src', 'img/broken.png').addClass('broken-image'); - } -}); -``` - -另外，如果你想简单地隐藏破碎的形象这个片段将利用该护理： - -```javascript -$('img').on('error', function () { - $(this).hide(); -}); -``` - -[回目录](#table-of-contents) - - -
-### 发布的AJAX表单 - -jQuery的AJAX方法来请求文本，HTML，XML或JSON的常用方法。如果你想通过AJAX发送的形式，你可以通过`val()`方法收集用户输入： - -```javascript -$.post('sign_up.php', { - user_name: $('input[name=user_name]').val(), - email: $('input[name=email]').val(), - password: $('input[name=password]').val(), -}); -``` - -然而，所有这些`val()`调用的是昂贵的。收集用户输入的一个更好的办法是使用'的`serialize()`函数，它收集用户输入一个字符串： - -```javascript -$.post('sign_up', $('#sign-up-form').serialize()); -``` - -[回目录](#table-of-contents) - - -
-### 切换悬停类 - -比方说，你想改变视觉可点击元素的页面上，当用户将鼠标悬停在它。您可以将类添加到你的元素，当用户徘徊;用户停止徘徊时删除类： - -```javascript -$('.btn').on('hover', function () { - $(this).addClass('hover'); -}, function () { - $(this).removeClass('hover'); -}); -``` - -你只需要添加必要的CSS。如果你想要一个更_simpler_方式使用`toggleClass`方法： - -```javascript -$('.btn').hover(function () { - $(this).toggleClass('hover'); -}); -``` - -**注：** CSS可能在这种情况下，更快的解决方案，但它仍然是值得的知道这一点。 - -[回目录](#table-of-contents) - - -
-### 禁用输入字段 - -有时你可能要直到用户执行特定操作（例如，勾选“我已阅读条款”复选框）提交被禁用的形式或它的文本输入中的一个按钮。在`disabled`属性添加到您的输入，所以你可以在需要时启用它： - -```javascript -$('input[type="submit"]').prop('disabled', true); -``` - -所有你需要做的是在输入再次运行`prop`方法，但`disabled`的值设置为`false`： - -```javascript -$('input[type="submit"]').prop('disabled', false); -``` - -[回目录](#table-of-contents) - - - -### 停止路径的负载 - -有时候，你不想链接到特定网页，也没有重新加载页面;你可能希望他们做别的事情一样触发一些其他的脚本。这将做防止默认操作的技巧： - -```javascript -$('a.no-link').on('click', function (e) { - e.preventDefault(); -}); -``` - -[回目录](#table-of-contents) - - -
-### 高速缓存jquery选择 - -想想有多少次你一遍又一遍地在任何项目中再次写入相同的选择。每个`$('.element')`选择有每次搜索整个DOM，如果不管选择以前有运行。相反，运行一次选择器和存储在变量的结果： - -```javascript -var blocks = $('#blocks').find('li'); -``` - -现在你可以使用任何你想要的`blocks`变量，而不必每次搜索DOM： - -```javascript -$('#hideBlocks').on('click', function () { - blocks.fadeOut(); -}); - -$('#showBlocks').on('click', function () { - blocks.fadeIn(); -}); -``` - -缓存jQuery选择器是一种简单的性能增益。 - -[回目录](#table-of-contents) - - -
-### 切换淡入/幻灯片 - -滑动和衰落都是我们用很多东西在我们使用jQuery的动画。你可能只是想表明一个元素，当用户点击的东西，这使得`fadeIn`和`slideDown`方法完善。但是，如果你想要的元素出现在第一次点击，然后消失在第二本会工作得很好： - -```javascript -// Fade -$('.btn').on('click', function () { - $('.element').fadeToggle('slow'); -}); - -// Toggle -$('.btn').on('click', function () { - $('.element').slideToggle('slow'); -}); -``` - -[回目录](#table-of-contents) - - -
-### 简单手风琴 - -这是一个快速手风琴一个简单的方法： - -```javascript -// Close all panels -$('#accordion').find('.content').hide(); - -// Accordion -$('#accordion').find('.accordion-header').on('click', function () { - var next = $(this).next(); - next.slideToggle('fast'); - $('.content').not(next).slideUp('fast'); - return false; -}); -``` - -通过添加这个脚本你真正需要在网页上做的是必要的HTML去得到这个工作。 - -[回目录](#table-of-contents) - - -
-### 让两个div相同的高度 - -有时候，你会想两个div具有相同的高度，无论他们有他们什么内容： - -```javascript -$('.div').css('min-height', $('.main-div').height()); -``` - -本示例设置了`min-height`这意味着它可以比主分区越大，但从来没有变小。然而，更灵活的方法是循环在一组的元素，并设置高度最高的元件的高度： - -```javascript -var $columns = $('.column'); -var height = 0; -$columns.each(function () { - if ($(this).height() > height) { - height = $(this).height(); - } -}); -$columns.height(height); -``` - -如果希望_all_列具有相同的高度： - -```javascript -var $rows = $('.same-height-columns'); -$rows.each(function () { - $(this).find('.column').height($(this).height()); -}); -``` - -**注：**这是可以做到几个方面[在CSS](http://codepen.io/AllThingsSmitty/pen/KMPqoO)，但根据您的需要是什么，知道如何在jQuery中做到这一点还是值得的。 - -[回目录](#table-of-contents) - - - -### 在新标签中打开外部链接/窗 - -打开外部链接在新的浏览器标签或窗口，并确保在同一起源于同一个标签或窗口打开链接： - -```javascript -$('a[href^="http"]').attr('target', '_blank'); -$('a[href^="//"]').attr('target', '_blank'); -$('a[href^="' + window.location.origin + '"]').attr('target', '_self'); -``` - -**注：** `window.location.origin`不IE10工作。 [此修复程序](http://tosbourn.com/a-fix-for-window-location-origin-in-internet-explorer/) 主罚问题的照顾。 - -[回目录](#table-of-contents) - - -
-### 查找元素通过短信 - -通过jQuery中使用`contains()`选择，你可以找到在元素内容的文字。如果文本不存在，该元素将被隐藏： - -```javascript -var search = $('#search').val(); -$('div:not(:contains("' + search + '"))').hide(); -``` - -[回目录](#table-of-contents) - - -
-### 上触发能见度变化 - -触发JavaScript的用户不再集中在选项卡上，或重新调整选项卡上： - -```javascript -$(document).on('visibilitychange', function (e) { - if (e.target.visibilityState === 'visible') { - console.log('Tab is now in view!'); - } else if (e.target.visibilityState === 'hidden') { - console.log('Tab is now hidden!'); - } -}); -``` - -[回目录](#table-of-contents) - - -
-### AJAX调用错误处理 - -当Ajax调用返回404或500错误的错误处理程序将被执行。如果没有定义的处理程序，其他的jQuery代码可能就失效了。定义一个全局的Ajax错误处理程序： - -```javascript -$(document).on('ajaxError', function (e, xhr, settings, error) { - console.log(error); -}); -``` - -[回目录](#table-of-contents) - - -
-### 连锁插件调用 - -jQuery的允许“链接”插件的方法调用，以减轻反复查询DOM并创建多个jQuery的对象的过程。比方说，下面的代码片段代表了你的插件方法调用： - -```javascript -$('#elem').show(); -$('#elem').html('bla'); -$('#elem').otherStuff(); -``` - -这可以通过链接可以大大提高： - -```javascript -$('#elem') - .show() - .html('bla') - .otherStuff(); -``` - -另一种方法是缓存元素的变量（用 `$` 前缀）： - - -```javascript -var $elem = $('#elem'); -$elem.hide(); -$elem.html('bla'); -$elem.otherStuff(); -``` - -无论链接和jQuery的[缓存](#缓存的jQuery选择器)方法是导致更短，更快的代码的最佳实践。 - -[回目录](#table-of-contents) - - -
-### 排序列表项按字母顺序 - -比方说，你结束了在列表中的项目太多。也许内容是由CMS生成并希望他们字母顺序： - -```javascript -var ul = $('#list'), -lis = $('li', ul).get(); - -lis.sort(function (a, b) { - return ($(a).text().toUpperCase() < $(b).text().toUpperCase()) ? -1 : 1; -}); - -ul.append(lis); -``` - -你去那里！ - -[回目录](#table-of-contents) - - -
-### 禁用右鍵單擊 - -如果要禁用右鍵單擊，您可以對整個頁面進行操作... - -```javascript -$(document).ready(function(){ - $(document).bind('contextmenu', function(e){ - return false; - }) -}) -``` - -...但是您也可以為特定元素做同樣的事情： - -```javascript -$(document).ready(function(){ - $('#submit').bind('contextmenu', function(e){ - return false; - }) -}) -``` - -[回目录](#table-of-contents) - - -## 支持 - -当前版本的Chrome，火狐，Safari，歌剧，EDGE和IE11的。 \ No newline at end of file diff --git a/translations/zh-TW/README.md b/translations/zh-TW/README.md deleted file mode 100644 index 0bb0bff..0000000 --- a/translations/zh-TW/README.md +++ /dev/null @@ -1,476 +0,0 @@ -# 大家都應該知道的 jQuery 小技巧 [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) - -一些簡單的小技巧讓您對 jQuery 更得心應手。 - -> 也可以看看由 [@sindresorhus](https://github.com/sindresorhus/) 整理，一些其他很不錯的清單集合： [awesome lists](https://github.com/sindresorhus/awesome/). - - -## 目錄 - -* [技巧](#技巧) -* [瀏覽器支援](#瀏覽器支援) -* [翻譯](#翻譯) -* [貢獻守則](../../CONTRIBUTING.md) - - -## 技巧 - -1. [檢查 jQuery 是否成功載入](#檢查-jquery-是否成功載入) -1. [使用 `.on()` 做 Binding，而不要使用 `.click()`](#使用-on-做-binding而不要使用-click) -1. [返回最頂端的按鈕](#返回最頂端的按鈕) -1. [預先載入圖片](#預先載入圖片) -1. [檢查圖片是否成功載入](#檢查圖片是否成功載入) -1. [自動修復載入失敗的圖片](#自動修復載入失敗的圖片) -1. [發布的AJAX表單](#post-a-form-with-ajax) -1. [透過 Hover 切換 Class](#透過-hover-切換-class) -1. [讓 input field 無法輸入](#讓-input-field-無法輸入) -1. [停止載入連結](#停止載入連結) -1. [快取 jQuery 選擇器](#快取-jquery-選擇器) -1. [切換 Fade/Slide](#切換-fadeslide) -1. [簡單可收放元件(Accordion)](#簡單可收放元件accordion) -1. [使兩個 Div 一樣高](#使兩個-div-一樣高) -1. [在新分頁/視窗開啟外部連結](#在新分頁視窗開啟外部連結) -1. [利用文字找到元素](#利用文字找到元素) -1. [Visibility 改變時觸發事件](#visibility-改變時觸發事件) -1. [Ajax 程序的錯誤處理](#ajax-程序的錯誤處理) -1. [串連 Plugin 的函式呼叫](#串連-plugin-的函式呼叫) -1. [照字母順序排序清單元素（list）](#照字母順序排清單元素list) -1. [禁用右键单击](#禁用右键单击) - - -### 檢查 jQuery 是否成功載入 - -在你使用 jQuery 做任何事情之前，你應該先確定其是否成功載入： - -```javascript -if (typeof jQuery == 'undefined') { - console.log('jQuery hasn\'t loaded'); -} else { - console.log('jQuery has loaded'); -} -``` - - -[回到目錄](#目錄) - - -### 使用 `.on()` 做 Binding，而不要使用 `.click()` - -使用 `.on()` 比起使用 `.click()` 多了一些好處，像是可以加上多個事件(events)... - -```javascript -.on('click tap hover') -``` - -...這樣的連結（binding）也會對動態產生的元素產生效用（不需要每產生一個 DOM element 就做一次連結)... - -...還能夠使用命名空間（namespace）: - -```javascript -.on('click.menuOpening') -``` - -命名空間讓你能取消對特定事件(event)的連結（例如： `.off('click.menuOpening')`）。 - -[回到目錄](#目錄) - - -### 返回最頂端的按鈕 - -利用 jQuery 中 `animate` 以及 `scrollTop` 的函式， 你不需要外加特別的插件來完成「返回最頂端」的功能： - -```javascript -// Back to top -$('.container').on('click', '.back-to-top', function (e) { - e.preventDefault(); - $('html, body').animate({scrollTop: 0}, 800); -}); -``` - -```html - -
- Back to top -
-``` - -改變 `scrollTop` 的數值可以改變你希望捲軸停在哪裡，而你實際上是使用 `animate()` 函式以動畫的方式並花費 800 毫秒的時間滾動到文件的頂端。 - -**注意:** 看看一些使用 `scrollTop` 而導致的[奇怪行為](https://github.com/jquery/api.jquery.com/issues/417) 。 - -[回到目錄](#目錄) - - -### 預先載入圖片 - -如果你的網頁有很多圖片並非一開始就是看得到的（例如：hover 才會看到），讓這些圖片預先載入是很合理的： - -```javascript -$.preloadImages = function () { - for (var i = 0; i < arguments.length; i++) { - $('').attr('src', arguments[i]); - } -}; - -$.preloadImages('img/hover-on.png', 'img/hover-off.png'); -``` - -[回到目錄](#目錄) - - -### 檢查圖片是否成功載入 - -有時候你會想要確定圖片是否成功載入後再執行接下來的動作： - -```javascript -$('img').on('load', function () { - console.log('image load successful'); -}); -``` - -你也可以透過替換 `` 成其他 ID 或 class 來檢查特定圖片。 - -[回到目錄](#目錄) - - -### 自動修復載入失敗的圖片 - -如果你覺得一個一個替換掉載入失敗的圖片連結很痛苦，這段程式碼可以讓你不會這麼頭痛： - -```javascript -$('img').on('error', function () { - if(!$(this).hasClass('broken-image')) { - $(this).prop('src', 'img/broken.png').addClass('broken-image'); - } -}); -``` - -另外，如果你想简单地隐藏破碎的形象这个片段将利用该护理： - -```javascript -$('img').on('error', function () { - $(this).hide(); -}); -``` - -[回到目錄](#目錄) - - -
-### 發布的AJAX表單 - -jQuery的AJAX方法來請求文本，HTML，XML或JSON的常用方法。如果你想通過AJAX發送的形式，你可以通過`val()`方法收集用戶輸入： - -```javascript -$.post('sign_up.php', { - user_name: $('input[name=user_name]').val(), - email: $('input[name=email]').val(), - password: $('input[name=password]').val(), -}); -``` - -然而，所有這些`val()`調用的是昂貴的。收集用戶輸入的一個更好的辦法是使用CSS`（）`函數，它收集用戶輸入一個字符串： - -```javascript -$.post('sign_up', $('#sign-up-form').serialize()); -``` - -[回到目錄](#目錄) - - -### 透過 Hover 切換 Class - -如果說你想要在一個可點擊元件的外貌被 hover 過的時候改變他的外貌，你可以在使用者 hover 時加上一個 class，當使用者停止 hover 時就移除該 class： - -```javascript -$('.btn').on('hover', function () { - $(this).addClass('hover'); -}, function () { - $(this).removeClass('hover'); -}); -``` - -你只要加上必要的 CSS 即可。如果你想要使用更簡單的方法，可以使用 `toggleClass` 函式： - -```javascript -$('.btn').on('hover', function () { - $(this).toggleClass('hover'); -}); -``` - -**注意:** 使用 CSS 可能是更快的解決方法，但是這個方法還是值得我們學習。 - -[回到目錄](#目錄) - - -### 讓 input field 無法輸入 - -常常你會希望在使用者進行一些特定動作前， input field 是無法輸入，或是一個 form 的 submit 按鈕是無法點擊的。（例如：點選「我已經閱讀條約。」的checkbox），在 input 加上 `disabled` 的屬性你就能夠在你想要時開啟權限： - -```javascript -$('input[type="submit"]').prop('disabled', true); -``` - -你只需要再執行一次 `prop` 函式，不過是將 `disabled` 的數值設成 `false`： - -```javascript -$('input[type="submit"]').prop('disabled', false); -``` - -[回到目錄](#目錄) - - -### 停止載入連結 - -有時候你不想讓連結連至特定網站或是重新載入頁面，你可能想要讓他們做一些其他行為，例如：觸發其他程式，以下將會避免預設的行為發生： - -```javascript -$('a.no-link').on('click', function (e) { - e.preventDefault(); -}); -``` - -[回到目錄](#目錄) - - -### 快取 jQuery 選擇器 - -想想看你在同一個專案中寫了多少次樣的選擇器，每一個 `$('.element')` 選擇器每一次都會搜尋整個 DOM，不管該選擇器是否在之前執行過。因此，執行一次選擇器並且將結果存在變數中： - -```javascript -var blocks = $('#blocks').find('li'); -``` - -現在你能夠在任何地方使用 `blocks` 變數而不用每一次都搜尋整個DOM： - -```javascript -$('#hideBlocks').on('click', function () { - blocks.fadeOut(); -}); - -$('#showBlocks').on('click', function () { - blocks.fadeIn(); -}); -``` - -快取 jQuery 選擇器是能夠簡單又能增進效能的小技巧。 - -[回到目錄](#目錄) - - -### 切換 Fade/Slide - -Sliding 以及 fading 是我們經常使用 jQuery 來完成的動畫效果。你可能只是想要在使用者點擊某個東西時秀出一個元件，此時 `fadeIn` 以及 `slideDown` 就是你的最佳選擇。如果你想要讓元件在第一次點擊時現身，並且在第二次點擊時消失，以下程式碼也可以很好地實現這個效果： - - -```javascript -// Fade -$('.btn').on('click', function () { - $('.element').fadeToggle('slow'); -}); - -// Toggle -$('.btn').on('click', function () { - $('.element').slideToggle('slow'); -}); -``` - -[回到目錄](#目錄) - - -### 簡單可收放元件(Accordion) - -這是一個簡單實現可收放元件（accordion）的做法： - -```javascript -// Close all panels -$('#accordion').find('.content').hide(); - -// Accordion -$('#accordion').find('.accordion-header').on('click', function () { - var next = $(this).next(); - next.slideToggle('fast'); - $('.content').not(next).slideUp('fast'); - return false; -}); -``` - -加上這段程式碼後，你要做的只剩下加上必要的 HTML 即可。 - -[回到目錄](#目錄) - - -### 使兩個 Div 一樣高 - -有時候不論兩個 Div 裡面的內容為何，你會希望他們有同樣的高度： - -```javascript -$('.div').css('min-height', $('.main-div').height()); -``` - -這個例子設定 `min-height`，表示其只能比 `.main-div` 的 `height` 大，永遠不會比它小。然而，在一組元素中循環並將各元素之 `height` 調整至最高的元素高度為另一種更彈性的方法： - -```javascript -var $columns = $('.column'); -var height = 0; -$columns.each(function () { - if ($(this).height() > height) { - height = $(this).height(); - } -}); -$columns.height(height); -``` - -如果你希望每一行都有同樣高度： - -```javascript -var $rows = $('.same-height-columns'); -$rows.each(function () { - $(this).find('.column').height($(this).height()); -}); -``` - -**注意:** 這件事可以使用幾種方法完成，[使用 CSS](http://codepen.io/AllThingsSmitty/pen/KMPqoO) 這跟你的需求有關，但也值得知道如何使用 jQuery完成。 - -[回到目錄](#目錄) - - -### 在新分頁/視窗開啟外部連結 - -在瀏覽器新的分頁或視窗中開啟新的外部連結，並且確定同樣 host 的連結會在同樣的分頁或視窗開啟： - -```javascript -$('a[href^="http"]').attr('target', '_blank'); -$('a[href^="//"]').attr('target', '_blank'); -$('a[href^="' + window.location.origin + '"]').attr('target', '_self'); -``` - -**注意:** `window.location.origin` 在 IE 10 中無效。[這個方法](http://tosbourn.com/a-fix-for-window-location-origin-in-internet-explorer/) 可以解決這個問題。 - -[回到目錄](#目錄) - - -### 利用文字找到元素 - -利用 jQuery 中 `contains()` 選擇器，你可以找到元素內容中的文字。如果沒有文字，該元素會被隱藏： - -```javascript -var search = $('#search').val(); -$('div:not(:contains("' + search + '"))').hide(); -``` - -[回到目錄](#目錄) - - -### Visibility 改變時觸發事件 - -當使用者不再停留在某分頁，或是重新停留在某分頁，觸發 JavaScript： - -```javascript -$(document).on('visibilitychange', function (e) { - if (e.target.visibilityState === 'visible') { - console.log('Tab is now in view!'); - } else if (e.target.visibilityState === 'hidden') { - console.log('Tab is now hidden!'); - } -}); -``` - -[回到目錄](#目錄) - - -### Ajax 程序的錯誤處理 - -當一個 Ajax 程序呼叫後回傳 404 或是 500 錯誤，錯誤處理程序將會被執行。如果沒有定義錯誤處理程序，其他 jQuery 的程式碼可能不會運作。定義一個全域 Ajax 錯誤處理程序： - -```javascript -$(document).on('ajaxError', function (e, xhr, settings, error) { - console.log(error); -}); -``` - -[回到目錄](#目錄) - - -### 串連 Plugin 的函式呼叫 - -jQuery 允許「串連」 plugin 函式的呼叫來減少重複搜尋 DOM 以及產生多個 jQuery 物件。以下的程式碼展示了 plugin 函式的呼叫： - -```javascript -$('#elem').show(); -$('#elem').html('bla'); -$('#elem').otherStuff(); -``` - -可以利用串連來改進： - -```javascript -$('#elem') - .show() - .html('bla') - .otherStuff(); -``` - -另外一種方法是利用一個變數來快取(cache)一個元素（在變數前面加上 `$`）： - -```javascript -var $elem = $('#elem'); -$elem.hide(); -$elem.html('bla'); -$elem.otherStuff(); -``` - -jQuery 中串連以及[快取](#cache-jquery-selectors)的方法是最簡潔且最快速的實作方式。 - -[回到目錄](#目錄) - - -### 照字母順序排清單元素（list） - -如果在清單中有太多元素，或許其內容是被ㄧ CMS 所製造的且你希望照字母順序來排序： - -```javascript -var ul = $('#list'), -lis = $('li', ul).get(); - -lis.sort(function (a, b) { - return ($(a).text().toUpperCase() < $(b).text().toUpperCase()) ? -1 : 1; -}); - -ul.append(lis); -``` - -就是這樣！ - -[回到目錄](#目錄) - - -### 禁用右键单击 - - -如果要禁用右键单击，您可以对整个页面进行操作... - -```javascript -$(document).ready(function() { - $(document).bind('contextmenu', function(e) { - return false; - }) -}) -``` - -...但是您也可以为特定元素做同样的事情： - -```javascript -$(document).ready(function() { - $('#submit').bind('contextmenu', function(e) { - return false; - }) -}) -``` - -[回到目錄](#目錄) - - -## 瀏覽器支援 - -現今版本的 Chrome，Firefox，Safari，Opera，Edge 以及 IE11。 \ No newline at end of file From b011b5449d52d7c1ae0140ae560e61060ff02f7a Mon Sep 17 00:00:00 2001 From: Katamori Date: Tue, 20 Jun 2017 11:51:41 +0200 Subject: [PATCH 078/135] Back to ToC menus mass-translated. --- translations/hu-HU/README.md | 43 ++++++++++++++++++------------------ 1 file changed, 21 insertions(+), 22 deletions(-) diff --git a/translations/hu-HU/README.md b/translations/hu-HU/README.md index 6311232..53a1548 100644 --- a/translations/hu-HU/README.md +++ b/translations/hu-HU/README.md @@ -4,7 +4,6 @@ Egyszerű tippek gyűjteménye, a jQuery-ben való elmélyülésed segítendő. > További nagyszerű listákért tekintsd meg [@sindresorhus](https://github.com/sindresorhus/) válogatott [listáját](https://github.com/sindresorhus/awesome/). - ## Tartalomjegyzék * [Tippek](#tips) @@ -52,7 +51,7 @@ if (typeof jQuery == 'undefined') { Now you're off... -[back to table of contents](#table-of-contents) +[vissza a tartalomjegyzékhez](#table-of-contents) ### `.on()` binding ("kötés") használata `.click()` helyett @@ -73,7 +72,7 @@ Using `.on()` gives you several advantages over using `.click()`, such as the ab Namespaces give you the power to unbind a specific event (e.g., `.off('click.menuOpening')`). -[back to table of contents](#table-of-contents) +[vissza a tartalomjegyzékhez](#table-of-contents) ### 'Vissza az elejére' gomb @@ -99,7 +98,7 @@ Changing the `scrollTop` value changes where you wants the scrollbar to land. Al **Note:** Watch for some [buggy behavior](https://github.com/jquery/api.jquery.com/issues/417) with `scrollTop`. -[back to table of contents](#table-of-contents) +[vissza a tartalomjegyzékhez](#table-of-contents) ### Képek előbetöltése @@ -116,7 +115,7 @@ $.preloadImages = function () { $.preloadImages('img/hover-on.png', 'img/hover-off.png'); ``` -[back to table of contents](#table-of-contents) +[vissza a tartalomjegyzékhez](#table-of-contents) ### Betöltöttek-e a képek? - Ellenőrzés @@ -131,7 +130,7 @@ $('img').on('load', function () { You can also check if one particular image has loaded by replacing the `` tag with an ID or class. -[back to table of contents](#table-of-contents) +[vissza a tartalomjegyzékhez](#table-of-contents) ### Betölt(het)etlen képek automatikus javítása @@ -154,7 +153,7 @@ $('img').on('error', function () { }); ``` -[back to table of contents](#table-of-contents) +[vissza a tartalomjegyzékhez](#table-of-contents) ### Űrlap elküldése AJAX-al @@ -175,7 +174,7 @@ However, all of those `val()` calls are expensive. A better way of collecting th $.post('sign_up', $('#sign-up-form').serialize()); ``` -[back to table of contents](#table-of-contents) +[vissza a tartalomjegyzékhez](#table-of-contents) ### CSS osztály aktiválása a kurzor hatására @@ -200,7 +199,7 @@ $('.btn').on('hover', function () { **Note:** CSS may be a faster solution in this case but it's still worthwhile to know this. -[back to table of contents](#table-of-contents) +[vissza a tartalomjegyzékhez](#table-of-contents) ### Beviteli mezők kikapcsolása @@ -217,7 +216,7 @@ All you need to do is run the `prop` method again on the input, but set the valu $('input[type="submit"]').prop('disabled', false); ``` -[back to table of contents](#table-of-contents) +[vissza a tartalomjegyzékhez](#table-of-contents) ### Linkbetöltés megállítása @@ -230,7 +229,7 @@ $('a.no-link').on('click', function (e) { }); ``` -[back to table of contents](#table-of-contents) +[vissza a tartalomjegyzékhez](#table-of-contents) ### jQuery kiválasztók eltárolása @@ -255,7 +254,7 @@ $('#showBlocks').on('click', function () { Caching jQuery selectors are an easy performance gain. -[back to table of contents](#table-of-contents) +[vissza a tartalomjegyzékhez](#table-of-contents) ### Áttűnés/becsúszás effekt rögzítése @@ -274,7 +273,7 @@ $('.btn').on('click', function () { }); ``` -[back to table of contents](#table-of-contents) +[vissza a tartalomjegyzékhez](#table-of-contents) ### Egyszerű accordion (harmonika-menü) @@ -296,7 +295,7 @@ $('#accordion').find('.accordion-header').on('click', function () { By adding this script all you really needs to do on your web page is the necessary HTML go get this working. -[back to table of contents](#table-of-contents) +[vissza a tartalomjegyzékhez](#table-of-contents) ### HTML div elemek egyező magassággal @@ -331,7 +330,7 @@ $rows.each(function () { **Note:** This can be done several ways [in CSS](http://codepen.io/AllThingsSmitty/pen/KMPqoO) but depending on what your needs are, knowing how to do this in jQuery is still worthwhile. -[back to table of contents](#table-of-contents) +[vissza a tartalomjegyzékhez](#table-of-contents) ### Külső linkek megnyitása új fülön/ablakban @@ -346,7 +345,7 @@ $('a[href^="' + window.location.origin + '"]').attr('target', '_self'); **Note:** `window.location.origin` doesn't work in IE10. [This fix](http://tosbourn.com/a-fix-for-window-location-origin-in-internet-explorer/) takes care of the issue. -[back to table of contents](#table-of-contents) +[vissza a tartalomjegyzékhez](#table-of-contents) ### Elemek keresése szöveg alapján @@ -358,7 +357,7 @@ var search = $('#search').val(); $('div:not(:contains("' + search + '"))').hide(); ``` -[back to table of contents](#table-of-contents) +[vissza a tartalomjegyzékhez](#table-of-contents) ### Script aktiválás láthatóság változása esetén @@ -375,7 +374,7 @@ $(document).on('visibilitychange', function (e) { }); ``` -[back to table of contents](#table-of-contents) +[vissza a tartalomjegyzékhez](#table-of-contents) ### AJAX hívások hibakezelése @@ -388,7 +387,7 @@ $(document).on('ajaxError', function (e, xhr, settings, error) { }); ``` -[back to table of contents](#table-of-contents) +[vissza a tartalomjegyzékhez](#table-of-contents) ### Plugin hívások láncolása @@ -421,7 +420,7 @@ $elem.otherStuff(); Both chaining and [caching](#cache-jquery-selectors) methods in jQuery are best practices that lead to shorter and faster code. -[back to table of contents](#table-of-contents) +[vissza a tartalomjegyzékhez](#table-of-contents) ### Listaelemek sorba rendezése ABC szerint @@ -441,7 +440,7 @@ ul.append(lis); There you go! -[back to table of contents](#table-of-contents) +[vissza a tartalomjegyzékhez](#table-of-contents) ### Jobb egérkattintás kikapcsolása @@ -466,7 +465,7 @@ $(document).ready(function() { }) ``` -[back to table of contents](#table-of-contents) +[vissza a tartalomjegyzékhez](#table-of-contents) ## Támogatás From 414a7ab6a6b9e25ee3ded77cff03eb267b958299 Mon Sep 17 00:00:00 2001 From: Katamori Date: Tue, 20 Jun 2017 12:24:10 +0200 Subject: [PATCH 079/135] 10 out of 21. --- translations/hu-HU/README.md | 43 +++++++++++++++++++----------------- 1 file changed, 23 insertions(+), 20 deletions(-) diff --git a/translations/hu-HU/README.md b/translations/hu-HU/README.md index 53a1548..fb27d47 100644 --- a/translations/hu-HU/README.md +++ b/translations/hu-HU/README.md @@ -39,7 +39,7 @@ Egyszerű tippek gyűjteménye, a jQuery-ben való elmélyülésed segítendő. ### Betöltött-e a jQuery? - Ellenőrzés -Before you can do anything with jQuery you first need to make certain it has loaded: +Mielőtt bármihez is kezdhetnél a jQuery-vel, először biztosra kell menned abban, hogy betöltött: ```javascript if (typeof jQuery == 'undefined') { @@ -49,35 +49,36 @@ if (typeof jQuery == 'undefined') { } ``` -Now you're off... +Most, hogy elstartoltunk... [vissza a tartalomjegyzékhez](#table-of-contents) ### `.on()` binding ("kötés") használata `.click()` helyett -Using `.on()` gives you several advantages over using `.click()`, such as the ability to add multiple events... +Az `.on()` függvény használata számos előnnyel rendelkezik a `.click()` megoldással szemben, mint például: több esemény egyszeri hozzáadása... ```javascript .on('click tap hover') ``` -...a binding applies to dynamically created elements, as well (there's no need to manually bind every single element dynamically added to a DOM element)... +...a kötés alkalmazása dinamikusan létrehozott elemekre is (tehát nem kell egyesével végrehajtani a kötést minden dinamikus DOM elemre)... -...and the possibility to set a namespace: +...és a névterek felállításának lehetősége: ```javascript .on('click.menuOpening') ``` -Namespaces give you the power to unbind a specific event (e.g., `.off('click.menuOpening')`). +Névterek segítségével "lecsatolhatsz" egyes konkrét eseményeket (pl. `.off('click.menuOpening')`). [vissza a tartalomjegyzékhez](#table-of-contents) ### 'Vissza az elejére' gomb -By using the `animate` and `scrollTop` methods in jQuery you don't need a plugin to create a simple scroll-to-top animation: +Hála a jQuery `animate` és `scrollTop` eljárásainak, nincs szükséged pluginokra ahhoz, hogy létrehozz egy egyszerű 'scroll-to-top' animációt: + ```javascript // Back to top @@ -94,9 +95,9 @@ $('.container').on('click', '.back-to-top', function (e) {
``` -Changing the `scrollTop` value changes where you wants the scrollbar to land. All you're really doing is animating the body of the document throughout the course of 800 milliseconds until it scrolls to the top of the document. +A `scrollTop` értékének változtatásával beállíthatod, hova szeretnéd, hogy érkezzen a görgetősáv. Igazából amit csinálsz, az annyi, hogy a látható részt animálod egy 800 miliszekundumos időtartamon belül, aminek a végére ez aztán "felgurul" a dokumentum tetejére. -**Note:** Watch for some [buggy behavior](https://github.com/jquery/api.jquery.com/issues/417) with `scrollTop`. +**Megjegyzés:** Figyelj oda a `scrollTop` esetenkénti [bugos viselkedésére](https://github.com/jquery/api.jquery.com/issues/417). [vissza a tartalomjegyzékhez](#table-of-contents) @@ -120,7 +121,7 @@ $.preloadImages('img/hover-on.png', 'img/hover-off.png'); ### Betöltöttek-e a képek? - Ellenőrzés -Sometimes you might need to check if your images have fully loaded in order to continue on with your scripts: +Alkalmanként szükséges lehet rá. hogy leellenőrizd, teljesen betöltöttek-e a képeid, annak érdekében, hogy folytatódhasson a scripted lefutása: ```javascript $('img').on('load', function () { @@ -128,14 +129,14 @@ $('img').on('load', function () { }); ``` -You can also check if one particular image has loaded by replacing the `` tag with an ID or class. +Ezen felül azt is leellenőrizheted, hogy egy konkrét kép betöltött-e: mindössze cseréld le a fenti kódban az `` címkét egy megfelelő azonosíra (ID) vagy osztályra. [vissza a tartalomjegyzékhez](#table-of-contents) ### Betölt(het)etlen képek automatikus javítása -If you happen to find broken image links on your site replacing them one by one can be a pain. This simple piece of code can save a lot of headaches: +Ha úgy alakul, hogy 'törött képlinkeket' találsz az oldaladon, egyenként mindet lecserélni fájdalmasan hosszú és kimerítő folyamat lenne. Ez az egyszerű kódrészlet sok fejfájástól megkímélhet: ```javascript $('img').on('error', function () { @@ -145,7 +146,7 @@ $('img').on('error', function () { }); ``` -Alternatively, if you wish to simply hide broken images this snippet will take care of that for: +Alternatívaként, ha egyszerűen csak el kívánod rejteni ezeket a betölt(het)etlen képeket, ez a kódrészlet gondoskodik róla: ```javascript $('img').on('error', function () { @@ -158,7 +159,7 @@ $('img').on('error', function () { ### Űrlap elküldése AJAX-al -jQuery AJAX methods are a common way to request text, HTML, XML, or JSON. If you wanted to send a form via AJAX you could collect the user inputs via the `val()` method: +A jQuery AJAX eljárások elterjedt módjai szöveges, HTML, XML vagy JSON állományok lekérésének. Ha egy egyszerű űrlapot kívánsz AJAX-on keresztül elküldeni, a felhasználói bemenetet össze tudod gyűjteni a `val()` eljárás segítségével: ```javascript $.post('sign_up.php', { @@ -168,7 +169,7 @@ $.post('sign_up.php', { }); ``` -However, all of those `val()` calls are expensive. A better way of collecting the user inputs is using the `serialize()` function which collects the user inputs as a string: +A `val()` hívások ugyanakkor számításigényesek. Felhasználói input begyűjtésére kedvezőbb módszer a `serialize()` függvény használata, ami ezeket string-ként gyűjti be: ```javascript $.post('sign_up', $('#sign-up-form').serialize()); @@ -179,7 +180,9 @@ $.post('sign_up', $('#sign-up-form').serialize()); ### CSS osztály aktiválása a kurzor hatására -Let's say you want to change the visual of a clickable element on your page when a user hovers over it. You can add a class to your element when the user is hovering; when the user stops hovering removes the class: +Tegyük fel, hogy egy kattintható elem megjelenését szeretnéd megváltoztatni, amikor egy felhasználó a kurzorával éppen fölötte áll. (:hover) + +Elemedhez hozzáadhatsz egy vagy több CSS osztályt ilyen esetekben; amikor a felhasználó arrébb viszi a kurzort, az osztály automatikusan eltávolításra kerül az elemről: ```javascript $('.btn').on('hover', function () { @@ -189,7 +192,7 @@ $('.btn').on('hover', function () { }); ``` -You just need to add the necessary CSS. If you want an even _simpler_ way use the `toggleClass` method: +Innentől már csak a szükséges CSS-t kell hozzáadnod. Viszont egy _még egyszerűbb_ módszerért használhatod a `toggleClass` eljárást is: ```javascript $('.btn').on('hover', function () { @@ -197,20 +200,20 @@ $('.btn').on('hover', function () { }); ``` -**Note:** CSS may be a faster solution in this case but it's still worthwhile to know this. +**Megjegyzés:** a CSS gyorsabb megoldás lehet ebben az esetben, mindazonáltal érdemes tudnod róla, hogy ilyet is lehet. [vissza a tartalomjegyzékhez](#table-of-contents) ### Beviteli mezők kikapcsolása -At times you may want the submit button of a form or one of its text inputs to be disabled until the user has performed a certain action (e.g., checking the "I've read the terms" checkbox). Add the `disabled` attribute to your input so you can enable it when you want: +Alkalmanként előfordulhat, hogy érdekedben áll kikapcsolni a "küldés" gombot egy űrlapon, vagy letiltani egy vagy több szövegbeviteli mezőt, amíg a felhasználó végre nem hajt egy bizonyos akciót (pl. bepipálja az "elolvastam a felhasználói feltételeket" jelölőnégyzetet). Adj hozzá egy `disabled` tulajdonságot a beviteli mezőidhez, így kedved szerint (de)aktiválhatod őket: ```javascript $('input[type="submit"]').prop('disabled', true); ``` -All you need to do is run the `prop` method again on the input, but set the value of `disabled` to `false`: +Nem kell mást tenned, mint újra futtatni a `prop` eljárást az adott beviteli mező(kö)n, ezúttal `false` értékkel: ```javascript $('input[type="submit"]').prop('disabled', false); From 17b32ee544e18334a8cb752e0563d57851f3bfbf Mon Sep 17 00:00:00 2001 From: Katamori Date: Tue, 20 Jun 2017 13:07:30 +0200 Subject: [PATCH 080/135] Translation completed. Links not working, though --- translations/hu-HU/README.md | 55 ++++++++++++++++++------------------ 1 file changed, 28 insertions(+), 27 deletions(-) diff --git a/translations/hu-HU/README.md b/translations/hu-HU/README.md index fb27d47..2c420ab 100644 --- a/translations/hu-HU/README.md +++ b/translations/hu-HU/README.md @@ -1,4 +1,4 @@ -# jQuery tippek, amiket mindenkinek tudnia kellene [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) +# jQuery tippek, amiket mindenkinek tudnia kell [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) Egyszerű tippek gyűjteménye, a jQuery-ben való elmélyülésed segítendő. @@ -9,7 +9,7 @@ Egyszerű tippek gyűjteménye, a jQuery-ben való elmélyülésed segítendő. * [Tippek](#tips) * [Támogatás](#support) * [További fordítások](#translations) -* [Közreműködési útmutató (angolul)](CONTRIBUTING.md) +* [Közreműködési útmutató (angolul)](../../CONTRIBUTING.md) ## Tippek @@ -224,7 +224,7 @@ $('input[type="submit"]').prop('disabled', false); ### Linkbetöltés megállítása -Sometimes you don't want links to go to a certain web page nor reload the page; you might want them to do something else like trigger some other script. This will do the trick of preventing the default action: +Alkalmanként előfordulhat, hogy egy linkre kattintva nem kívánsz se betölteni egy bizonyos weboldalt, se ugyanazt az oldalt újra, hanem valami másra kell, mint például valami más script aktiválása. Ez a kód megelőzi az alapértelmezett akció lefutását: ```javascript $('a.no-link').on('click', function (e) { @@ -237,13 +237,13 @@ $('a.no-link').on('click', function (e) { ### jQuery kiválasztók eltárolása -Think of how many times you write the same selector over and over again in any project. Every `$('.element')` selector has to search the entire DOM each time, regardless if that selector had previously run. Instead, run the selector once and store the results in a variable: +Gondolj bele, milyen sokszor kellett ugyanazt a kiválasztót (selector) leírnod újra meg újra. Minden `$('.elem')` kiválasztó újra meg újra végig kell böngéssze a teljes DOM-ot akárhányszor meghívod - függetlenül attól, hogy az a kiválasztó egyszer volt-e már futtatva. Szóval helyette futtasd a kiválasztót egyszer, és tárold el az eredményét egy változóban: ```javascript var blocks = $('#blocks').find('li'); ``` -Now you can use the `blocks` variable wherever you want without having to search the DOM every time: +Most már használhatod s `blocks` változót akárhányszor csak akarod, anélkül, hogy a DOM-ot át kelljen böngészni érte: ```javascript $('#hideBlocks').on('click', function () { @@ -254,15 +254,14 @@ $('#showBlocks').on('click', function () { blocks.fadeIn(); }); ``` - -Caching jQuery selectors are an easy performance gain. +A jQuery kiválasztók eltárolása egy roppant egyszerű teljesítményjavító technika. [vissza a tartalomjegyzékhez](#table-of-contents) ### Áttűnés/becsúszás effekt rögzítése -Sliding and fading are something we use plenty in our animations with jQuery. You might just want to show an element when a user clicks something, which makes the `fadeIn` and `slideDown` methods perfect. But if you want that element to appear on the first click and then disappear on the second this will work just fine: +A becsúszások és az áttűnések olyan tuajdonságok, amiket előszeretettel használunk animációkhoz a jQuery-ben. Lehet, hogy csak akkor szeretnéd láthatóvá tenni az adott elemet, amikor a felhasználó rákattint valamire, amire a `fadeIn` és `slideDown` eljárások tökéletesek. De ha azt szeretnéd, hogy az adott elem első kattintásra felbukkanjon, majd a másodikre eltűnjön, ez pont megfelel a célra: ```javascript // Fade @@ -281,7 +280,7 @@ $('.btn').on('click', function () { ### Egyszerű accordion (harmonika-menü) -This is a simple method for a quick accordion: +Íme egy egyszerá eljárás egy egyszerű harmonika-menü elkészítésére: ```javascript // Close all panels @@ -296,20 +295,22 @@ $('#accordion').find('.accordion-header').on('click', function () { }); ``` -By adding this script all you really needs to do on your web page is the necessary HTML go get this working. +Ezen script hozzáadásával már nincs már feladatot hátra a weboldaladon, mint a szükséges HTML elkészítése ahhoz, hogy ezt működésre bírd. [vissza a tartalomjegyzékhez](#table-of-contents) ### HTML div elemek egyező magassággal -Sometimes you'll want two divs to have the same height no matter what content they have in them: +Néha szükséged lehet arra, hogy két HTML div elem egyforma magas legyen, függetlenül azok belső tartalmától: ```javascript $('.div').css('min-height', $('.main-div').height()); ``` -This example sets the `min-height` which means that it can be bigger than the main div but never smaller. However, a more flexible method would be to loop over a set of elements and set the height to the height of the tallest element: +Ez a példa beállít egy `min-height` értéket, ami azt jelenti, hogy a kiválasztott elemnek megengedjük, hogy a fő div-nél nagyobb legyen, de azt nem, hogy kisebb. + +Egy rugalmasabb megoldás ciklusban végigmenni elemek egy adott halmazán, és azok közül a legmagasabbéhoz állítani a kérdéses elem magasságát: ```javascript var $columns = $('.column'); @@ -322,7 +323,7 @@ $columns.each(function () { $columns.height(height); ``` -If you want _all_ columns to have the same height: +Ha _minden_ minden oszop magasságát egyformára akarod: ```javascript var $rows = $('.same-height-columns'); @@ -331,14 +332,14 @@ $rows.each(function () { }); ``` -**Note:** This can be done several ways [in CSS](http://codepen.io/AllThingsSmitty/pen/KMPqoO) but depending on what your needs are, knowing how to do this in jQuery is still worthwhile. +**Megjegyzés:** Erre sok megoldás van [CSS-ben](http://codepen.io/AllThingsSmitty/pen/KMPqoO) de a szükségleteidtől függően, érdemes lehet tudni, hogyan is megy ez jQuery-ben. [vissza a tartalomjegyzékhez](#table-of-contents) ### Külső linkek megnyitása új fülön/ablakban -Open external links in a new browser tab or window and ensure links on the same origin open in the same tab or window: +Külső linkek új böngészőfülön vagy -ablakban megnyitása, és annak biztosítása, hogy az azonos forrású linkek ugyanabban a fülben/ablakban nyílnak meg: ```javascript $('a[href^="http"]').attr('target', '_blank'); @@ -346,14 +347,14 @@ $('a[href^="//"]').attr('target', '_blank'); $('a[href^="' + window.location.origin + '"]').attr('target', '_self'); ``` -**Note:** `window.location.origin` doesn't work in IE10. [This fix](http://tosbourn.com/a-fix-for-window-location-origin-in-internet-explorer/) takes care of the issue. +**Megjegyzés:** `window.location.origin` nem működik IE10-ben. [Ez a javítás](http://tosbourn.com/a-fix-for-window-location-origin-in-internet-explorer/) gondoskodik erről a problémáról. [vissza a tartalomjegyzékhez](#table-of-contents) ### Elemek keresése szöveg alapján -By using the `contains()` selector in jQuery you can find text in content of an element. If text doesn't exists, that element will be hidden: +A jQuery `contains()` kiválasztójának használatával megtalálhatsz szöveg(részlet)eket egy elem tartalmában. Ez a kód, ha nem talál szöveget az elemben, elrejti azt: ```javascript var search = $('#search').val(); @@ -365,7 +366,7 @@ $('div:not(:contains("' + search + '"))').hide(); ### Script aktiválás láthatóság változása esetén -Trigger JavaScript when the user is no longer focusing on a tab, or refocuses on a tab: +Javascript aktiválásra amikor a felhasználó ellapoz egy fülről, vagy visszalép oda: ```javascript $(document).on('visibilitychange', function (e) { @@ -382,7 +383,7 @@ $(document).on('visibilitychange', function (e) { ### AJAX hívások hibakezelése -When an Ajax call returns a 404 or 500 error the error handler will be executed. If the handler isn't defined, other jQuery code might not work anymore. Define a global Ajax error handler: +Amikor egy AJAX hívás HTTP 404 vagy 500 hibával tér vissza, a hibakezelő végrehajtásra kerül. Ha a hibakezelő nincs definiálva, további jQuery kódok potenciálisan működésképtelenné válnak. Definiálj egy globális AJAX hibakezelőt: ```javascript $(document).on('ajaxError', function (e, xhr, settings, error) { @@ -395,7 +396,7 @@ $(document).on('ajaxError', function (e, xhr, settings, error) { ### Plugin hívások láncolása -jQuery allows for the "chaining" of plugin method calls to mitigate the process of repeatedly querying the DOM and creating multiple jQuery objects. Let's say the following snippet represents your plugin method calls: +A jQuery lehetővé teszi plugin eljáráshívások "láncolását" a DOM ismételt lekérése folyamatának enyhítésére, valamint több jQuery objektum létrehozására. Tegyük fel, hogy az alábbi kódtöredék jelképezi a plugin eljáráshívásaid: ```javascript $('#elem').show(); @@ -403,7 +404,7 @@ $('#elem').html('bla'); $('#elem').otherStuff(); ``` -This could be vastly improved by using chaining: +Ekkor igen komoly teljesítményövekedést érhetsz el láncolás használatával: ```javascript $('#elem') @@ -412,7 +413,7 @@ $('#elem') .otherStuff(); ``` -An alternative is to cache the element in a variable (prefixed with `$`): +Alternatívaként eltárolhatod az elemet egy változóban (`$` előtaggal): ```javascript var $elem = $('#elem'); @@ -421,14 +422,14 @@ $elem.html('bla'); $elem.otherStuff(); ``` -Both chaining and [caching](#cache-jquery-selectors) methods in jQuery are best practices that lead to shorter and faster code. +Mind a láncolás, mint az [eltárolás](#cache-jquery-selectors) eljárásai "legjobb gyakorlatnak" (best practice) tekinthetők jQuery-ben, és rövidebb, gyorsabb kódot eredményeznek. [vissza a tartalomjegyzékhez](#table-of-contents) ### Listaelemek sorba rendezése ABC szerint -Let's say you end up with too many items in a list. Maybe the content is produced by a CMS and you want to order them alphabetically: +Tegyük fel, hogy egy listádban túl sok elem van. Mondjuk a lista tartalma egy CMS által került legenerálásra, és te szeretnéd ezt ABC-sorba rendezni: ```javascript var ul = $('#list'), @@ -441,14 +442,14 @@ lis.sort(function (a, b) { ul.append(lis); ``` -There you go! +Meg is volnánk! [vissza a tartalomjegyzékhez](#table-of-contents) ### Jobb egérkattintás kikapcsolása -If you want to disable right-click, you can do it for an entire page... +Ha le szeretnéd tiltani a jobb-klikket, az egész oldalra megteheted... ```javascript $(document).ready(function() { @@ -458,7 +459,7 @@ $(document).ready(function() { }) ``` -...but you can also do the same for a specific element: +...de akár egy konkrét elemre is: ```javascript $(document).ready(function() { From 0d076b790fb1bbf049f02df8307b9356ad455b1f Mon Sep 17 00:00:00 2001 From: Roman Gusev Date: Tue, 20 Jun 2017 17:42:17 +0600 Subject: [PATCH 081/135] Update README.md --- translations/es-ES/README.md | 29 ++++------------------------- 1 file changed, 4 insertions(+), 25 deletions(-) diff --git a/translations/es-ES/README.md b/translations/es-ES/README.md index 7004141..5a78ada 100644 --- a/translations/es-ES/README.md +++ b/translations/es-ES/README.md @@ -16,7 +16,6 @@ Una colección de consejos simples para ayudar a su juego jQuery. ## Consejos -<<<<<<< Updated upstream 1. [Verificando jQuery Cargado](#verificando-jquery-cargado) 1. [Utilice `.on ()` En lugar de unión `.click ()`](#utilice-on--en-lugar-de-unión-click-) 1. [Volver al botón de inicio](#volver-al-botón-de-inicio) @@ -37,34 +36,12 @@ Una colección de consejos simples para ayudar a su juego jQuery. 1. [Control de errores de llamada Ajax](#control-de-errores-de-llamada-ajax) 1. [Llamadas Plugin Cadena](#llamadas-plugin-cadena) 1. [Ordenar la lista de elementos alfabéticamente](#ordenar-la-lista-de-elementos-alfabéticamente) +1. [Deshabilitar clic derecho](#deshabilitar-clic-derecho) -======= -1. [Verificando jQuery Cargado](#checking-if-jquery-loaded) -1. [Utilice `.on ()` En lugar de unión `.click ()`](#use-on-binding-instead-of-click) -1. [Volver al botón de inicio](#back-to-top-button) -1. [Carga previa de imágenes](#preload-images) -1. [comprobando si las imágenes se cargan](#checking-if-images-are-loaded) -1. [corregir imágenes automáticamente rotas](#fix-broken-images-automatically) -1. [Publicar un formulario con AJAX](#post-a-form-with-ajax) -1. [Las clases de palanca en la libración](#toggle-classes-on-hover) -1. [Desactivar la acción de campos](#disabling-input-fields) -1. [Detener la carga de Enlaces](#stop-the-loading-of-links) -1. [de caché de jQuery selectores](#cache-jquery-selectors) -1. [De palanca de fundido / Slide](#toggle-fadeslide) -1. [Acordeón simple](#simple-accordion) -1. [Haga dos Divs la misma altura](#make-two-divs-the-same-height) -1. [Abrir enlaces externos en una nueva pestaña / ventana](#open-external-links-in-new-tabwindow) -1. [Buscar elemento Por Texto](#find-element-by-text) -1. [Visibilidad gatillo de Cambio](#trigger-on-visibility-change) -1. [Control de errores de llamada Ajax](#ajax-call-error-handling) -1. [Llamadas Plugin Cadena](#chain-plugin-calls) -1. [Ordenar la lista de elementos alfabéticamente](#sort-list-items-alphabetically) -1. [Deshabilitar clic derecho](#disable-right-click) +
-
->>>>>>> Stashed changes ### Verificando jQuery Cargado Antes de que pueda hacer cualquier cosa con jQuery primero tiene que asegurarse de que se ha cargado: @@ -470,6 +447,8 @@ Hay que ir!
+ + ### Deshabilitar clic derecho Si desea desactivar el botón derecho del ratón, puede hacerlo para una página entera... From cd5fe224a29b6f344df1aaa397b081810b657dde Mon Sep 17 00:00:00 2001 From: Katamori Date: Tue, 20 Jun 2017 14:10:18 +0200 Subject: [PATCH 082/135] Deleted files restored - turned out I don't have to delete them from my branch neither. --- translations/es-ES/README.md | 500 +++++++++++++++++++++++++++++++++++ translations/ru-RU/README.md | 492 ++++++++++++++++++++++++++++++++++ translations/zh-CN/README.md | 495 ++++++++++++++++++++++++++++++++++ translations/zh-TW/README.md | 476 +++++++++++++++++++++++++++++++++ 4 files changed, 1963 insertions(+) create mode 100644 translations/es-ES/README.md create mode 100644 translations/ru-RU/README.md create mode 100644 translations/zh-CN/README.md create mode 100644 translations/zh-TW/README.md diff --git a/translations/es-ES/README.md b/translations/es-ES/README.md new file mode 100644 index 0000000..7004141 --- /dev/null +++ b/translations/es-ES/README.md @@ -0,0 +1,500 @@ +# Consejos jQuery cada uno debe saber [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) + +Una colección de consejos simples para ayudar a su juego jQuery. + +> Para otros grandes listas echa un vistazo a [@sindresorhus](https://github.com/sindresorhus/)'s lista curada de [listas impresionantes](https://github.com/sindresorhus/awesome/). + + +
+ +## Tabla de contenido + +* [Tips](#consejos) +* [Apoyo](#apoyo) +* [Pautas de contribución](../../CONTRIBUTING.md) + + +## Consejos + +<<<<<<< Updated upstream +1. [Verificando jQuery Cargado](#verificando-jquery-cargado) +1. [Utilice `.on ()` En lugar de unión `.click ()`](#utilice-on--en-lugar-de-unión-click-) +1. [Volver al botón de inicio](#volver-al-botón-de-inicio) +1. [Carga previa de imágenes](#carga-previa-de-imágenes) +1. [Comprobando si las imágenes se cargan](#comprobación-si-las-imágenes-se-cargan) +1. [Corregir imágenes automáticamente rotas](#corregir-imágenes-automáticamente-rotas) +1. [Publicar un formulario con AJAX](#publicar-un-formulario-con-ajax) +1. [Alternar clases en la libración](##alternar-clases-en-la-libración) +1. [Desactivar la acción de campos](#desactivación-de-campos-de-entrada) +1. [Detener la carga de Enlaces](#detener-la-carga-de-enlaces) +1. [De caché de jQuery selectores](#de-caché-de-jquery-selectores) +1. [De palanca de fundido / Slide](#de-palanca-de-fundido--slide) +1. [Acordeón simple](#acordeón-simple) +1. [Haga dos Divs la misma altura](#haga-dos-divs-la-misma-altura) +1. [Abrir enlaces externos en una nueva pestaña / ventana](#abrir-enlaces-externos-en-una-nueva-pestaña--ventana) +1. [Buscar elemento Por Texto](#buscar-elemento-por-texto) +1. [Visibilidad gatillo de Cambio](#visibilidad-gatillo-de-cambio) +1. [Control de errores de llamada Ajax](#control-de-errores-de-llamada-ajax) +1. [Llamadas Plugin Cadena](#llamadas-plugin-cadena) +1. [Ordenar la lista de elementos alfabéticamente](#ordenar-la-lista-de-elementos-alfabéticamente) + + +======= +1. [Verificando jQuery Cargado](#checking-if-jquery-loaded) +1. [Utilice `.on ()` En lugar de unión `.click ()`](#use-on-binding-instead-of-click) +1. [Volver al botón de inicio](#back-to-top-button) +1. [Carga previa de imágenes](#preload-images) +1. [comprobando si las imágenes se cargan](#checking-if-images-are-loaded) +1. [corregir imágenes automáticamente rotas](#fix-broken-images-automatically) +1. [Publicar un formulario con AJAX](#post-a-form-with-ajax) +1. [Las clases de palanca en la libración](#toggle-classes-on-hover) +1. [Desactivar la acción de campos](#disabling-input-fields) +1. [Detener la carga de Enlaces](#stop-the-loading-of-links) +1. [de caché de jQuery selectores](#cache-jquery-selectors) +1. [De palanca de fundido / Slide](#toggle-fadeslide) +1. [Acordeón simple](#simple-accordion) +1. [Haga dos Divs la misma altura](#make-two-divs-the-same-height) +1. [Abrir enlaces externos en una nueva pestaña / ventana](#open-external-links-in-new-tabwindow) +1. [Buscar elemento Por Texto](#find-element-by-text) +1. [Visibilidad gatillo de Cambio](#trigger-on-visibility-change) +1. [Control de errores de llamada Ajax](#ajax-call-error-handling) +1. [Llamadas Plugin Cadena](#chain-plugin-calls) +1. [Ordenar la lista de elementos alfabéticamente](#sort-list-items-alphabetically) +1. [Deshabilitar clic derecho](#disable-right-click) + + +
+>>>>>>> Stashed changes +### Verificando jQuery Cargado + +Antes de que pueda hacer cualquier cosa con jQuery primero tiene que asegurarse de que se ha cargado: + +```javascript +if (typeof jQuery == 'undefined') { + console.log('jQuery hasn\'t loaded'); +} else { + console.log('jQuery has loaded'); +} +``` + +Ahora que estás fuera... + +[volver al índice de contenidos](#table-of-contents) + + +### Utilice `.on ()` En lugar de unión `.click ()` + +.en El uso de `()` le da varias ventajas sobre el uso de `.click ()`, tales como la capacidad de agregar varios eventos... + +```javascript +.on ('click tap hover') +``` + +...Una unión se aplica a los elementos creados de forma dinámica, así (no hay necesidad de obligar manualmente cada elemento añadido dinámicamente a un elemento DOM) ... + +...Y la posibilidad de configurar un espacio de nombres: + +```javascript +.on('click.menuOpening') +``` + +Los espacios de nombres te dan el poder para desenlazar un evento específico (por ejemplo,`.off('click.menuOpening')`). + +[volver al índice de contenidos](#table-of-contents) + + +### Volver al botón de inicio + +Mediante el uso de la `animate` y métodos `scrollTop` en jQuery que no es necesario un plugin para crear una animación simple-scroll-a arriba: + +```javascript +// Back to top +$('.container').on('click', '.back-to-top', function (e) { + e.preventDefault(); + $('html, body').animate({scrollTop: 0}, 800); +}); +``` + +```html + +Back to top +``` + +El cambio de los cambios de valor `scrollTop` donde se quiere que la barra de desplazamiento a la tierra. Todo lo que realmente está haciendo es animar el cuerpo del documento a lo largo de 800 milisegundos hasta que se desplaza a la parte superior del documento. + +**Nota:** ve por alguna [comportamiento incorrecto](https://github.com/jquery/api.jquery.com/issues/417) con `scrollTop`. + +[volver al índice de contenidos](#table-of-contents) + + +### Carga previa de imágenes + +Si su página web utiliza una gran cantidad de imágenes que no son visibles inicialmente (por ejemplo, en vuelo estacionario) que tiene sentido para precargar ellos: + +```javascript +$.preloadImages = function () { + for (var i = 0; i < arguments.length; i++) { + $('').attr('src', arguments[i]); + } +}; + +$.preloadImages('img/hover-on.png', 'img/hover-off.png'); +``` + +[volver al índice de contenidos](#table-of-contents) + + +### Comprobación Si las imágenes se cargan + +A veces puede que tenga que comprobar si las imágenes han cargado completamente con el fin de continuar con las secuencias de comandos: + +```javascript +$('img').on('load', function () { + console.log('image load successful'); +}); +``` + +También puede comprobar si una imagen en particular se ha cargado mediante la sustitución de la etiqueta `` con un ID o clase. + +[volver al índice de contenidos](#table-of-contents) + + +### Corregir imágenes automáticamente rotas + +Si por casualidad usted encuentra enlaces de imagen rotos en su sitio de la sustitución de uno por uno puede ser un dolor. Esta sencilla pieza de código puede ahorrar muchos dolores de cabeza: + +```javascript +$('img').on('error', function () { + if(!$(this).hasClass('broken-image')) { + $(this).prop('src', 'img/broken.png').addClass('broken-image'); + } +}); +``` + +Alternativamente, si desea ocultar simplemente imágenes rotas este fragmento se encargará de que para: + +```javascript +$('img').on('error', function () { + $(this).hide(); +}); +``` + +[volver al índice de contenidos](#table-of-contents) + + +### Publicar un formulario con AJAX + +Métodos jQuery AJAX son una forma común para solicitar texto, HTML, XML, JSON o. Si desea enviar un formulario a través de AJAX se podía recoger las entradas del usuario a través del método `val()`: + +```javascript +$.post('sign_up.php', { + user_name: $('input[name=user_name]').val(), + email: $('input[name=email]').val(), + password: $('input[name=password]').val(), +}); +``` + +Sin embargo, todos esos `val()` llamadas es caro. Una mejor manera de recoger las entradas del usuario está utilizando el `serialize()` función que recoge las entradas del usuario como una cadena: + +```javascript +$.post('sign_up', $('#sign-up-form').serialize()); +``` + +[volver al índice de contenidos](#table-of-contents) + + +### Alternar clases en la libración + +Digamos que usted quiere cambiar la visual de un elemento se puede hacer clic en la página cuando un usuario se desplaza sobre él. Usted puede agregar una clase a su elemento cuando el usuario está flotando; cuando el usuario deja flotando elimina la clase: + +```javascript +$('.btn').on('hover', function () { + $(this).addClass('hover'); +}, function () { + $(this).removeClass('hover'); +}); +``` + +Sólo tiene que añadir el CSS necesario. Si desea una manera aún _simpler_ utilizar el método `toggleClass`: + +```javascript +$('.btn').hover(function () { + $(this).toggleClass('hover'); +}); +``` + +**Nota:** CSS puede ser una solución más rápida en este caso, pero es todavía vale la pena saber esto. + +[volver al índice de contenidos](#table-of-contents) + + +### Desactivación de campos de entrada + +A veces es posible que desee el botón de envío de un formulario o una de sus entradas de texto debe ser inhabilitado hasta que el usuario ha realizado una acción determinada (por ejemplo, control de la "He leído los términos" casilla de verificación). Añadir el atributo `disabled` a la entrada para que pueda activarlo cuando se quiere: + +```javascript +$('input[type="submit"]').prop('disabled', true); +``` + +Todo lo que necesita hacer es ejecutar el método `prop` otra vez en la entrada, pero establecer el valor de `disabled` a `false`: + +```javascript +$('input[type="submit"]').prop('disabled', false); +``` + +[volver al índice de contenidos](#table-of-contents) + + +### Detener la carga de Enlaces + +A veces no desea vínculos para ir a una determinada página web, ni volver a cargar la página; es posible que desee que hagan otra cosa, como disparador de otro guión. Esto va a hacer el truco de la prevención de la acción por defecto: + +```javascript +$('a.no-link').on('click', function (e) { + e.preventDefault(); +}); +``` + +[volver al índice de contenidos](#table-of-contents) + + +### De caché de jQuery selectores + +Piense en cuántas veces se escribe el mismo selector una y otra vez en cualquier proyecto. Cada `$('.element')` selector tiene que buscar en todo el DOM cada vez, independientemente de si dicho selector había ejecutado anteriormente. En lugar de ello, ejecute el selector de una vez y almacenar los resultados en una variable: + +```javascript +var blocks = $('#blocks').find('li'); +``` + +Ahora se puede utilizar la variable `blocks` donde quieras sin tener que buscar el DOM en cada ocasión: + +```javascript +$('#hideBlocks').on('click', function () { + blocks.fadeOut(); +}); + +$('#showBlocks').on('click', function () { + blocks.fadeIn(); +}); +``` + +El almacenamiento en caché selectores de jQuery son una ganancia de rendimiento fácil. + +[volver al índice de contenidos](#table-of-contents) + + +### De palanca de fundido / Slide + +Deslizante y la decoloración son algo que usamos un montón en nuestras animaciones con jQuery. Es posible que sólo quieren mostrar un elemento cuando un usuario hace clic en algo, lo que hace que los `fadeIn` y métodos de `slideDown` perfecta. Pero si desea que el elemento que aparezca en la primera posición y luego desaparecen en el segundo esto va a funcionar muy bien: + +```javascript +// Fade +$('.btn').on('click', function () { + $('.element').fadeToggle('slow'); +}); + +// Toggle +$('.btn').on('click', function () { + $('.element').slideToggle('slow'); +}); +``` + +[volver al índice de contenidos](#table-of-contents) + + +### Acordeón simple + +Este es un método simple para un acordeón rápida: + +```javascript +// Close all panels +$('#accordion').find('.content').hide(); + +// Accordion +$('#accordion').find('.accordion-header').on('click', function () { + var next = $(this).next(); + next.slideToggle('fast'); + $('.content').not(next).slideUp('fast'); + return false; +}); +``` + +Mediante la adición de este script lo único que tiene que hacer en su página web es el HTML necesario ir a buscar este trabajo. + +[volver al índice de contenidos](#table-of-contents) + + +### Haga dos Divs la misma altura + +A veces, usted querrá dos divs tener la misma altura no importa qué contenido tienen en ellos: + +```javascript +$('.div').css('min-height', $('.main-div').height()); +``` + +Este ejemplo establece el `min-height` característica que significa que puede ser más grande que el div principal pero nunca más pequeña. Sin embargo, un método más flexible sería la de bucle sobre un conjunto de elementos y ajustar la altura a la altura del elemento más alto: + +```javascript +var $columns = $('.column'); +var height = 0; +$columns.each(function () { + if ($(this).height() > height) { + height = $(this).height(); + } +}); +$columns.height(height); +``` + +Si desea _todas_ columnas tengan la misma altura: + +```javascript +var $rows = $('.same-height-columns'); +$rows.each(function () { + $(this).find('.column').height($(this).height()); +}); +``` + +**Nota:** Esto se puede hacer de varias maneras [en CSS](http://codepen.io/AllThingsSmitty/pen/KMPqoO) pero dependiendo de cuáles son sus necesidades, saber cómo hacer esto en jQuery es todavía vale la pena. + +[volver al índice de contenidos](#table-of-contents) + + +### Abrir enlaces externos en una nueva pestaña / ventana + +Abrir enlaces externos en una nueva pestaña o ventana del navegador y garantizar enlaces en el mismo origen abierta en la misma pestaña o ventana: + +```javascript +$('a[href^="http"]').attr('target', '_blank'); +$('a[href^="//"]').attr('target', '_blank'); +$('a[href^="' + window.location.origin + '"]').attr('target', '_self'); +``` + +**Nota:** `window.location.origin` no funciona en IE10. [Esta corrección](http://tosbourn.com/a-fix-for-window-location-origin-in-internet-explorer/) se ocupa de la cuestión. + +[volver al índice de contenidos](#table-of-contents) + + +### Buscar elemento Por Texto + +Mediante el uso de la selector `contains()` en jQuery se puede encontrar texto en el contenido de un elemento. Si no existe texto, ese elemento se ocultará: + +```javascript +var search = $('#search').val(); +$('div:not(:contains("' + search + '"))').hide(); +``` + +[volver al índice de contenidos](#table-of-contents) + + +### Visibilidad gatillo de Cambio + +Gatillo JavaScript cuando el usuario ya no se centra en una pestaña, o vuelve a centrar en una pestaña: + +```javascript +$(document).on('visibilitychange', function (e) { + if (e.target.visibilityState === 'visible') { + console.log('Tab is now in view!'); + } else if (e.target.visibilityState === 'hidden') { + console.log('Tab is now hidden!'); + } +}); +``` + +[volver al índice de contenidos](#table-of-contents) + + +### Control de errores de llamada Ajax + +Cuando una llamada Ajax devuelve un error 404 o 500 se ejecutará el gestor de errores. Si no se define el controlador, otro código jQuery podría no funcionar. Definir un controlador global de error de Ajax: + +```javascript +$(document).on('ajaxError', function (e, xhr, settings, error) { + console.log(error); +}); +``` + +[volver al índice de contenidos](#table-of-contents) + + +### Llamadas Plugin Cadena + +jQuery permite el "encadenamiento" plug-in de llamadas a métodos para mitigar el proceso de consulta en repetidas ocasiones el DOM y la creación de varios objetos jQuery. Digamos que el siguiente fragmento representa sus llamadas a métodos plugin: + +```javascript +$('#elem').show(); +$('#elem').html('bla'); +$('#elem').otherStuff(); +``` + +Esto podría mejorarse enormemente mediante el uso de encadenamiento: + +```javascript +$('#elem') + .show() + .html('bla') + .otherStuff(); +``` + +Una alternativa es almacenar en caché el elemento en una variable (con el prefijo `$`): + +```javascript +var $elem = $('#elem'); +$elem.hide(); +$elem.html('bla'); +$elem.otherStuff(); +``` + +Ambos métodos [almacenamiento en caché](#cache-jquery-selectors) en el encadenamiento y son las mejores prácticas que conducen al código corto y más rápido. + +[volver al índice de contenidos](#table-of-contents) + + +### Ordenar la lista de elementos alfabéticamente + +Digamos que usted termina con demasiados elementos en una lista. Tal vez el contenido es producido por un CMS y desea ordenar por orden alfabético: + +```javascript +var ul = $('#list'), +lis = $('li', ul).get(); + +lis.sort(function (a, b) { + return ($(a).text().toUpperCase() < $(b).text().toUpperCase()) ? -1 : 1; +}); + +ul.append(lis); +``` + +Hay que ir! + +[volver al índice de contenidos](#table-of-contents) + + +
+### Deshabilitar clic derecho + +Si desea desactivar el botón derecho del ratón, puede hacerlo para una página entera... + +```javascript +$(document).ready(function() { + $(document).bind('contextmenu', function(e) { + return false; + }) +}) +``` + +...pero también puede hacer lo mismo para un elemento específico: + +```javascript +$(document).ready(function() { + $('#submit').bind('contextmenu', function(e) { + return false; + }) +}) +``` + +[volver al índice de contenidos](#table-of-contents) + + +## Apoyo + +Las versiones actuales de Chrome, Firefox, Safari, Opera, Edge y EI11. diff --git a/translations/ru-RU/README.md b/translations/ru-RU/README.md new file mode 100644 index 0000000..a00a717 --- /dev/null +++ b/translations/ru-RU/README.md @@ -0,0 +1,492 @@ +# Советы по jQuery, которые должен знать каждый [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) + +Коллекция простых советов, чтобы помочь вашей работе с jQuery. + +> Другие прекрасные списки, за которыми следит [@sindresorhus](https://github.com/sindresorhus/~~HEAD=dobj), можно увидеть [здесь](https://github.com/sindresorhus/awesome/). + + +
+## Содержание + +* [Советы](#советы) +* [Поддержка](#поддержка) +* [Как сделать вклад](../../CONTRIBUTING.md) + + +## Советы + +1. [Проверка готовности jQuery](#checking-if-jquery-loaded) +1. [Используйте `.on()` вместо `.click()`](#use-on-binding-instead-of-click) +1. [Кнопка "вернуться к началу"](#back-to-top-button) +1. [Предварительная загрузка изображений](#preload-images) +1. [Проверка, загружаются ли изображения](#checking-if-images-are-loaded) +1. [Автоматическое исправление сломанных изображений](#fix-broken-images-automatically) +1. [Дать форму с помощью AJAX](#post-a-form-with-ajax) +1. [Переключение классов по наведению](#toggle-classes-on-hover) +1. [Отключение поля ввода](#disabling-input-fields) +1. [Прерывание загрузки ссылки](#stop-the-loading-of-links) +1. [Кэширование селекторов jQuery](#cache-jquery-selectors) +1. [Переключение fade/slide](#toggle-fadeslide) +1. [Простой аккордеон](#simple-accordion) +1. [Сделать два элемента div одинаковой высотой](#make-two-divs-the-same-height) +1. [Открывать внешние ссылки в новой вкладке или новом окне](#open-external-links-in-new-tabwindow) +1. [Найти элемент по тексту](#find-element-by-text) +1. [Запуск по изменению видимости](#trigger-on-visibility-change) +1. [Обработка ошибок в AJAX-запросах](#ajax-call-error-handling) +1. [Цепочка вызовов плагинов](#chain-plugin-calls) +1. [Сортировка элементов списка по алфавиту](#sort-list-items-alphabetically) +1. [Отключить правую кнопку мыши](#disable-right-click) + +
+### Проверка готовности jQuery + +Перед тем, как сделать что-нибудь с помощью jQuery, необходимо убедиться в том, что он загружен: + +```javascript +if (typeof jQuery == 'undefined') { + console.log('jQuery hasn\'t loaded'); +} else { + console.log('jQuery has loaded'); +} +``` + +Теперь вы можете продолжать ... + +[вернуться к оглавлению](#table-of-contents) + + +
+### Используйте `.on()` вместо `.click()` + +Использование `.on()` дает ряд преимуществ по сравнению с использованием `.click()`, например, возможность добавлять несколько событий... + +```javascript +.on('click tap hover') +``` + +...привязка применяется к динамически создаваемым элементам (нет необходимости вручную связывать каждый отдельный элемент, динамически добавленный к DOM)... + +...и возможность установить пространство имен: + +```javascript +.on('click.menuOpening') +``` + +Пространства имен дают вам возможность отключать привязку к конкретному событию (например, `.off('click.menuOpening')`). + +[вернуться к оглавлению](#table-of-contents) + + +
+### Кнопка "вернуться к началу" + +С помощью методов `animate` и `scrollTop` в jQuery вам не нужен плагин, чтобы создать простую анимацию прокрутки вверх: + +```javascript +// Вернуться к началу +$('.container').on('click', '.back-to-top', function (e) { + e.preventDefault(); + $('html, body').animate({scrollTop: 0}, 800); +}); +``` + +```html + +Back to top +``` + +Изменение значения `scrollTop` изменяет место, на котором прокрутка остановится. Все, что вы действительно делаете, это прокрутка документа на протяжении 800 миллисекунд, пока мы не окажемся в верхней части документа. + +**Примечание:** Обратите внимание на некоторое [неправильное поведение](https://github.com/jquery/api.jquery.com/issues/417) `scrollTop`. + +[вернуться к оглавлению](#table-of-contents) + + +
+### Предварительная загрузка изображений + +Если ваш веб-страница использует много изображений, которые не видны изначально (например, появлюятся при наведении курсора мыши), имеет смысл предварительно загрузить их: + +```javascript +$.preloadImages = function () { + for (var i = 0; i < arguments.length; i++) { + $('').attr('src', arguments[i]); + } +}; + +$.preloadImages('img/hover-on.png', 'img/hover-off.png'); +``` + +[вернуться к оглавлению](#table-of-contents) + + +
+### Проверка, загружаются ли изображения + +Иногда вам может понадобиться проверка того, что ваши изображения полностью загружены, перед тем как вы продолжите работу своего скрипта: + +```javascript +$('img').on('load', function () { + console.log('image load successful'); +}); +``` + +Вы также можете проверить, если одно конкретное изображение загружено, заменив тег `` на идентификатор или класс. + +[вернуться к оглавлению](#table-of-contents) + + +
+### Автоматическое исправление сломанных изображений + +Если вам посчастливилось найти неработающие ссылки на изображения на вашем сайте, замена их по одной может утомить. Этот простой фрагмент кода поможет избежать этой головной боли: + +```javascript +$('img').on('error', function () { + if(!$(this).hasClass('broken-image')) { + $(this).prop('src', 'img/broken.png').addClass('broken-image'); + } +}); +``` + +В качестве альтернативы, если вы хотите просто скрыть сломанные изображения этот фрагмент будет заботиться о том, что для: + +```javascript +$('img').on('error', function () { + $(this).hide(); +}); +``` + +[вернуться к оглавлению](#table-of-contents) + + +
+### Дать форму с помощью AJAX + +методы JQuery AJAX являются распространенным способом запросить текст, HTML, XML или JSON. Если вы хотите отправить форму через AJAX можно собирать пользовательские входные данные через `val()` метода: + +```javascript +$.post('sign_up.php', { + user_name: $('input[name=user_name]').val(), + email: $('input[name=email]').val(), + password: $('input[name=password]').val(), +}); +``` + +Тем не менее, все эти `val()` звонки стоят дорого. Лучший способ сбора данных, вводимых пользователем использует `serialize()` функцию, которая собирает пользовательские входные данные в виде строки: + +```javascript +$.post('sign_up', $('#sign-up-form').serialize()); +``` + +[вернуться к оглавлению](#table-of-contents) + + +
+### Переключение классов по наведению + +Допустим, вы хотите изменить визуальный интерактивный элемент на странице, когда пользователь наводит курсор над ним. Вы можете добавить класс к вашему элементу, когда пользователь навел курсор; когда пользователь уводит курсор, класс удаляется: + +```javascript +$('.btn').on('hover', function () { + $(this).addClass('hover'); +}, function () { + $(this).removeClass('hover'); +}); +``` + +Вам просто нужно добавить необходимые стили CSS. Если вы хотите _упростить_ логику, используйте метод `toggleClass`: + +```javascript +$('.btn').hover(function () { + $(this).toggleClass('hover'); +}); +``` + +**Примечание:** CSS может быть более быстрым решением в этом случае, но вам по-прежнему стоит знать об этом. + +[вернуться к оглавлению](#table-of-contents) + + +
+### Отключение поля ввода + +Иногда вы можете захотеть отключить кнопку отправки формы или одно из его текстовых полей, до тех пор, пока пользователь не выполнил определенное действие (например, не отметил флаг "я прочитал условия"). Добавьте атрибут `disabled` на ваше поле ввода, отключив его, когда вы хотите: + +```javascript +$('input[type="submit"]').prop('disabled', true); +``` + +Все, что вам нужно сделать, чтобы включить поле обратно, это запустить метод `prop` на том же поле ввода, но установить значение `disabled` к `false`: + +```javascript +$('input[type="submit"]').prop('disabled', false); +``` + +[вернуться к оглавлению](#table-of-contents) + + + +### Прерывание загрузки ссылки + +Иногда вы не хотите, чтобы ссылки переводили пользователя на определенную веб-страницу или перезагружали страницу; Вы можете хотеть, чтобы они делали что-то еще, как спусковой крючок для какой-либо другого сценария. Этот скрипт предотвратит действие по умолчанию: + +```javascript +$('a.no-link').on('click', function (e) { + e.preventDefault(); +}); +``` + +[вернуться к оглавлению](#table-of-contents) + + +
+### Кэширование селекторов jQuery + +Подумайте, сколько раз вы пишете один и тот же селектор снова и снова в любом проекте. Каждый `$('.element')` селектор ищет по всему DOM каждый раз, независимо от того, был ли он использован раньше. Вместо этого запустите селектор один раз и сохраните его результаты в переменной: + +```javascript +var blocks = $('#blocks').find('li'); +``` + +Теперь вы можете использовать `blocks` переменную там, где вы хотите, без необходимости выполнять поиск по DOM каждый раз: + +```javascript +$('#hideBlocks').on('click', function () { + blocks.fadeOut(); +}); + +$('#showBlocks').on('click', function () { + blocks.fadeIn(); +}); +``` + +Кэширование jQuery селекторов позволяет получить выигрыш в производительности. + +[вернуться к оглавлению](#table-of-contents) + + +
+### Переключение fade/slide + +Slide и fade являются часто используемыми действиями в анимации с jQuery. Вы можете захотить, показать элемент, когда пользователь нажимает что-то, что делает методы `fadeIn` и `slideDown` хорошо подходящими. Но если вы хотите, чтобы этот элемент, появился на первый щелчок, а затем исчез на второй, то этот скрипт будет работать просто отлично: + +```javascript +// Fade +$('.btn').on('click', function () { + $('.element').fadeToggle('slow'); +}); + +// Toggle +$('.btn').on('click', function () { + $('.element').slideToggle('slow'); +}); +``` + +[вернуться к оглавлению](#table-of-contents) + + +
+### Простой аккордеон + +Метод для создания простого аккордеона: + +```javascript +// Закрываем все панели +$('#accordion').find('.content').hide(); + +// Аккордеон +$('#accordion').find('.accordion-header').on('click', function () { + var next = $(this).next(); + next.slideToggle('fast'); + $('.content').not(next).slideUp('fast'); + return false; +}); +``` + +Добавив этот скрипт все, что вам нужно сделать на вашей веб-странице, это найти необходимый HTML и поручить ему эту работу. + +[вернуться к оглавлению](#table-of-contents) + + +
+### Сделать два элемента div одинаковой высотой + +Иногда вы будете хотеть две элемента div, которые имеют одинаковую высоту, независимо от содержания: + +```javascript +$('.div').css('min-height', $('.main-div').height()); +``` + +В этом примере задается `min-height`, что означает, что она может быть больше, чем основной DIV, но никогда меньше. Тем не менее, более гибкий метод должен был бы пройтись циклом по множеству элементов и установить высоту самого высокого элемента: + +```javascript +var $columns = $('.column'); +var height = 0; +$columns.each(function () { + if ($(this).height() > height) { + height = $(this).height(); + } +}); +$columns.height(height); +``` + +Если вы хотите, чтобы _все_ столбцы имели одинаковую высоту: + +```javascript +var $rows = $('.same-height-columns'); +$rows.each(function () { + $(this).find('.column').height($(this).height()); +}); +``` + +**Примечание:** Это можно сделать несколькими способами [в CSS](http://codepen.io/AllThingsSmitty/pen/KMPqoO), но в зависимости от ваших потребностей, стоит знать, как это сделать с помощью jQuery. + +[вернуться к оглавлению](#table-of-contents) + + + +### Открывать внешние ссылки в новой вкладке или новом окне + +Открыть внешние ссылки в новой вкладке браузера или новом окне, и открывать внутренние ссылки в той же вкладке или окне: + +```javascript +$('a[href^="http"]').attr('target', '_blank'); +$('a[href^="//"]').attr('target', '_blank'); +$('a[href^="' + window.location.origin + '"]').attr('target', '_self'); +``` + +**Примечание:** `window.location.origin` не работает в IE10. [Это исправление](http://tosbourn.com/a-fix-for-window-location-origin-in-internet-explorer/) решает проблему. + +[вернуться к оглавлению](#table-of-contents) + + +
+### Найти элемент по тексту + +При использовании `contains()` селектора в jQuery вы можете найти текст в содержимом элемента. Если текст не существует, то этот элемент будет скрыт: + +```javascript +var search = $('#search').val(); +$('div:not(:contains("' + search + '"))').hide(); +``` + +[вернуться к оглавлению](#table-of-contents) + + +
+### Запуск по изменению видимости + +Запуск скрипта, когда пользователь больше не фокусируется на вкладке или перефокусируется на вкладке: + +```javascript +$(document).on('visibilitychange', function (e) { + if (e.target.visibilityState === 'visible') { + console.log('Tab is now in view!'); + } else if (e.target.visibilityState === 'hidden') { + console.log('Tab is now hidden!'); + } +}); +``` + +[вернуться к оглавлению](#table-of-contents) + + +
+### Обработка ошибок в AJAX-запросах + +Когда AJAX-запрос возвращает ошибку 404 или 500, будет выполняться обработчик ошибок. Если обработчик не определен, другой код jQuery может не работать после этого. Определить глобальный обработчик ошибок AJAX-запросов можно следующим образом: + +```javascript +$(document).on('ajaxError', function (e, xhr, settings, error) { + console.log(error); +}); +``` + +[вернуться к оглавлению](#table-of-contents) + + +
+### Цепочка вызовов плагинов + +jQuery позволяет выполнять "цепочки" методов, что упрощает процесс, однократно запрашивая DOM и не создавая несколько объектов jQuery. Скажем, следующий фрагмент кода представляет ваш метод: + +```javascript +$('#elem').show(); +$('#elem').html('bla'); +$('#elem').otherStuff(); +``` + +Он может быть значительно улучшен с помощью цепочки: + +```javascript +$('#elem') + .show() + .html('bla') + .otherStuff(); +``` + +Альтернативой является кэширование элемента в переменной (с приставкой `$`): + +```javascript +var $elem = $('#elem'); +$elem.hide(); +$elem.html('bla'); +$elem.otherStuff(); +``` + +И цепочки и [кэширование](#cache-jquery-selectors) в jQuery являются лучшими практиками, которые приводят к более короткому и быстрому код. + +[вернуться к оглавлению](#table-of-contents) + + +
+### Сортировка элементов списка по алфавиту + +Допустим, в списке слишком много элементов. Возможно, содержание производится с помощью CMS, а вы хотите показать их в алфавитном порядке: + +```javascript +var ul = $('#list'), +lis = $('li', ul).get(); + +lis.sort(function (a, b) { + return ($(a).text().toUpperCase() < $(b).text().toUpperCase()) ? -1 : 1; +}); + +ul.append(lis); +``` + +Такие дела! + +[вернуться к оглавлению](#table-of-contents) + + +
+### Отключить правую кнопку мыши + +Если вы хотите отключить контекстное меню, вы можете сделать это для всей страницы... + +```javascript +$(document).ready(function() { + $(document).bind('contextmenu', function(e) { + return false; + }) +}) +``` + +...но вы также можете сделать то же самое для конкретного элемента: + +```javascript +$(document).ready(function() { + $('#submit').bind('contextmenu', function(e) { + return false; + }) +}) +``` + +[вернуться к оглавлению](#table-of-contents) + + +## Поддержка + +Текущие версии Chrome, Firefox, Safari, Opera, Edge, и IE11. diff --git a/translations/zh-CN/README.md b/translations/zh-CN/README.md new file mode 100644 index 0000000..722e7b7 --- /dev/null +++ b/translations/zh-CN/README.md @@ -0,0 +1,495 @@ +# jQuery的提示大家应该知道 [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) + +简单的窍门的集合，以帮助您的jQuery的游戏。 + +> 对于其他大名单退房 [@sindresorhus](https://github.com/sindresorhus/)的策展的名单 [真棒名单](https://github.com/sindresorhus/awesome/). + + +
+## 目录 + +* [温馨提示](＃提示) +* [支持](＃support) +* [贡献指引](../../CONTRIBUTING.md) + + +
+## 提示 + +1. [检查是否加载的jQuery](＃checking-if-jquery-loaded) +1. [使用`.on()`绑定`.click()`代替](#use-on-binding-instead-of-click) +1. [返回顶部按钮](#back-to-top-button) +1. [预先载入图像](#preload-images) +1. [检查，如果图像加载](#checking-if-images-are-loaded) +1. [自动修复破碎的形象](#fix-broken-images-automatically) +1. [发布的AJAX表单](#post-a-form-with-ajax) +1. [悬停切换类](#toggle-classes-on-hover) +1. [禁用输入字段](#disabling-input-fields) +1. [停止路径的负载](#stop-the-loading-of-links) +1. [缓存jquery选择](#cache-jquery-selectors) +1. [淡入淡出切换/幻灯片](#toggle-fadeslide) +1. [简单手风琴](#simple-accordion) +1. [让两个div相同的高度](#make-two-divs-the-same-height) +1. [打开外部链接在新标签/窗口](#open-external-links-in-new-tabwindow) +1. [查找元素通过短信](#find-element-by-text) +1. [可见性改变触发器](#trigger-on-visibility-change) +1. [Ajax调用错误处理](#ajax-call-error-handling) +1. [连锁插件调用](#chain-plugin-calls) +1. [排序列表项按字母顺序](#sort-list-items-alphabetically) +1. [禁用右鍵單擊](#disable-right-click) + + +
+### 检查如果加载的jQuery + +之前，你可以使用jQuery做任何事情，你首先需要确保它加载： + +```javascript +if (typeof jQuery == 'undefined') { + console.log('jQuery hasn\'t loaded'); +} else { + console.log('jQuery has loaded'); +} +``` + +现在你是关闭... + +[回目录](#table-of-contents) + + +
+### 使用`.on()`绑定`.click()`代替 + +使用`.on()`给你几个优点比使用`.click()`，如添加多个事件的能力... + +```javascript +.on('click tap hover') +``` + +...绑定适用于动态创建的元素，以及（有没有必要动态添加到DOM元素每一个元素手动绑定）... + +...和可能性来设置一个命名空间: + +```javascript +.on('click.menuOpening') +``` + +命名空间给你解除对特定事件（例如，`.off（'click.menuOpening'）`）的权力。 + +[回目录](#table-of-contents) + + +
+### 返回顶部按钮 + +通过使用jQuery中的`animate`和`scrollTop`方法，你并不需要一个插件来创建一个简单的滚动到顶部动画： + +```javascript +// Back to top +$('.container').on('click', '.back-to-top', function (e) { + e.preventDefault(); + $('html, body').animate({scrollTop: 0}, 800); +}); +``` + +```html + +Back to top +``` + +改变，你想要滚动降落`scrollTop`价值的变化。所有你真的做的是动画文件的全身各处的800毫秒的过程中，直到它滚动到文档的顶部。 + +**注：** 观看一些 [错误行为](https://github.com/jquery/api.jquery.com/issues/417) 用 `scrollTop`。 + +[回目录](#table-of-contents) + + +
+### 预先载入图像 + +如果你的网页使用了大量不可见的开始（例如，悬停）图像是有意义的预加载它们： + +```javascript +$.preloadImages = function () { + for (var i = 0; i < arguments.length; i++) { + $('').attr('src', arguments[i]); + } +}; + +$.preloadImages('img/hover-on.png', 'img/hover-off.png'); +``` + +[回目录](#table-of-contents) + + +
+### 检查如果图像加载 + +有时你可能需要检查，如果您的影像出现，以便继续与脚本满载： + +```javascript +$('img').on('load', function () { + console.log('image load successful'); +}); +``` + +您也可以检查，如果一个特定的形象已被用一个ID或类替换``标签加载。 + +[回目录](#table-of-contents) + + +
+### 自动修复破碎的形象 + +如果你碰巧发现网站上的残缺的图像链接一个取代他们可以是一个痛苦。这一段简单的代码可以节省很多麻烦： + +```javascript +$('img').on('error', function () { + if(!$(this).hasClass('broken-image')) { + $(this).prop('src', 'img/broken.png').addClass('broken-image'); + } +}); +``` + +另外，如果你想简单地隐藏破碎的形象这个片段将利用该护理： + +```javascript +$('img').on('error', function () { + $(this).hide(); +}); +``` + +[回目录](#table-of-contents) + + +
+### 发布的AJAX表单 + +jQuery的AJAX方法来请求文本，HTML，XML或JSON的常用方法。如果你想通过AJAX发送的形式，你可以通过`val()`方法收集用户输入： + +```javascript +$.post('sign_up.php', { + user_name: $('input[name=user_name]').val(), + email: $('input[name=email]').val(), + password: $('input[name=password]').val(), +}); +``` + +然而，所有这些`val()`调用的是昂贵的。收集用户输入的一个更好的办法是使用'的`serialize()`函数，它收集用户输入一个字符串： + +```javascript +$.post('sign_up', $('#sign-up-form').serialize()); +``` + +[回目录](#table-of-contents) + + +
+### 切换悬停类 + +比方说，你想改变视觉可点击元素的页面上，当用户将鼠标悬停在它。您可以将类添加到你的元素，当用户徘徊;用户停止徘徊时删除类： + +```javascript +$('.btn').on('hover', function () { + $(this).addClass('hover'); +}, function () { + $(this).removeClass('hover'); +}); +``` + +你只需要添加必要的CSS。如果你想要一个更_simpler_方式使用`toggleClass`方法： + +```javascript +$('.btn').hover(function () { + $(this).toggleClass('hover'); +}); +``` + +**注：** CSS可能在这种情况下，更快的解决方案，但它仍然是值得的知道这一点。 + +[回目录](#table-of-contents) + + +
+### 禁用输入字段 + +有时你可能要直到用户执行特定操作（例如，勾选“我已阅读条款”复选框）提交被禁用的形式或它的文本输入中的一个按钮。在`disabled`属性添加到您的输入，所以你可以在需要时启用它： + +```javascript +$('input[type="submit"]').prop('disabled', true); +``` + +所有你需要做的是在输入再次运行`prop`方法，但`disabled`的值设置为`false`： + +```javascript +$('input[type="submit"]').prop('disabled', false); +``` + +[回目录](#table-of-contents) + + + +### 停止路径的负载 + +有时候，你不想链接到特定网页，也没有重新加载页面;你可能希望他们做别的事情一样触发一些其他的脚本。这将做防止默认操作的技巧： + +```javascript +$('a.no-link').on('click', function (e) { + e.preventDefault(); +}); +``` + +[回目录](#table-of-contents) + + +
+### 高速缓存jquery选择 + +想想有多少次你一遍又一遍地在任何项目中再次写入相同的选择。每个`$('.element')`选择有每次搜索整个DOM，如果不管选择以前有运行。相反，运行一次选择器和存储在变量的结果： + +```javascript +var blocks = $('#blocks').find('li'); +``` + +现在你可以使用任何你想要的`blocks`变量，而不必每次搜索DOM： + +```javascript +$('#hideBlocks').on('click', function () { + blocks.fadeOut(); +}); + +$('#showBlocks').on('click', function () { + blocks.fadeIn(); +}); +``` + +缓存jQuery选择器是一种简单的性能增益。 + +[回目录](#table-of-contents) + + +
+### 切换淡入/幻灯片 + +滑动和衰落都是我们用很多东西在我们使用jQuery的动画。你可能只是想表明一个元素，当用户点击的东西，这使得`fadeIn`和`slideDown`方法完善。但是，如果你想要的元素出现在第一次点击，然后消失在第二本会工作得很好： + +```javascript +// Fade +$('.btn').on('click', function () { + $('.element').fadeToggle('slow'); +}); + +// Toggle +$('.btn').on('click', function () { + $('.element').slideToggle('slow'); +}); +``` + +[回目录](#table-of-contents) + + +
+### 简单手风琴 + +这是一个快速手风琴一个简单的方法： + +```javascript +// Close all panels +$('#accordion').find('.content').hide(); + +// Accordion +$('#accordion').find('.accordion-header').on('click', function () { + var next = $(this).next(); + next.slideToggle('fast'); + $('.content').not(next).slideUp('fast'); + return false; +}); +``` + +通过添加这个脚本你真正需要在网页上做的是必要的HTML去得到这个工作。 + +[回目录](#table-of-contents) + + +
+### 让两个div相同的高度 + +有时候，你会想两个div具有相同的高度，无论他们有他们什么内容： + +```javascript +$('.div').css('min-height', $('.main-div').height()); +``` + +本示例设置了`min-height`这意味着它可以比主分区越大，但从来没有变小。然而，更灵活的方法是循环在一组的元素，并设置高度最高的元件的高度： + +```javascript +var $columns = $('.column'); +var height = 0; +$columns.each(function () { + if ($(this).height() > height) { + height = $(this).height(); + } +}); +$columns.height(height); +``` + +如果希望_all_列具有相同的高度： + +```javascript +var $rows = $('.same-height-columns'); +$rows.each(function () { + $(this).find('.column').height($(this).height()); +}); +``` + +**注：**这是可以做到几个方面[在CSS](http://codepen.io/AllThingsSmitty/pen/KMPqoO)，但根据您的需要是什么，知道如何在jQuery中做到这一点还是值得的。 + +[回目录](#table-of-contents) + + + +### 在新标签中打开外部链接/窗 + +打开外部链接在新的浏览器标签或窗口，并确保在同一起源于同一个标签或窗口打开链接： + +```javascript +$('a[href^="http"]').attr('target', '_blank'); +$('a[href^="//"]').attr('target', '_blank'); +$('a[href^="' + window.location.origin + '"]').attr('target', '_self'); +``` + +**注：** `window.location.origin`不IE10工作。 [此修复程序](http://tosbourn.com/a-fix-for-window-location-origin-in-internet-explorer/) 主罚问题的照顾。 + +[回目录](#table-of-contents) + + +
+### 查找元素通过短信 + +通过jQuery中使用`contains()`选择，你可以找到在元素内容的文字。如果文本不存在，该元素将被隐藏： + +```javascript +var search = $('#search').val(); +$('div:not(:contains("' + search + '"))').hide(); +``` + +[回目录](#table-of-contents) + + +
+### 上触发能见度变化 + +触发JavaScript的用户不再集中在选项卡上，或重新调整选项卡上： + +```javascript +$(document).on('visibilitychange', function (e) { + if (e.target.visibilityState === 'visible') { + console.log('Tab is now in view!'); + } else if (e.target.visibilityState === 'hidden') { + console.log('Tab is now hidden!'); + } +}); +``` + +[回目录](#table-of-contents) + + +
+### AJAX调用错误处理 + +当Ajax调用返回404或500错误的错误处理程序将被执行。如果没有定义的处理程序，其他的jQuery代码可能就失效了。定义一个全局的Ajax错误处理程序： + +```javascript +$(document).on('ajaxError', function (e, xhr, settings, error) { + console.log(error); +}); +``` + +[回目录](#table-of-contents) + + +
+### 连锁插件调用 + +jQuery的允许“链接”插件的方法调用，以减轻反复查询DOM并创建多个jQuery的对象的过程。比方说，下面的代码片段代表了你的插件方法调用： + +```javascript +$('#elem').show(); +$('#elem').html('bla'); +$('#elem').otherStuff(); +``` + +这可以通过链接可以大大提高： + +```javascript +$('#elem') + .show() + .html('bla') + .otherStuff(); +``` + +另一种方法是缓存元素的变量（用 `$` 前缀）： + + +```javascript +var $elem = $('#elem'); +$elem.hide(); +$elem.html('bla'); +$elem.otherStuff(); +``` + +无论链接和jQuery的[缓存](#缓存的jQuery选择器)方法是导致更短，更快的代码的最佳实践。 + +[回目录](#table-of-contents) + + +
+### 排序列表项按字母顺序 + +比方说，你结束了在列表中的项目太多。也许内容是由CMS生成并希望他们字母顺序： + +```javascript +var ul = $('#list'), +lis = $('li', ul).get(); + +lis.sort(function (a, b) { + return ($(a).text().toUpperCase() < $(b).text().toUpperCase()) ? -1 : 1; +}); + +ul.append(lis); +``` + +你去那里！ + +[回目录](#table-of-contents) + + +
+### 禁用右鍵單擊 + +如果要禁用右鍵單擊，您可以對整個頁面進行操作... + +```javascript +$(document).ready(function(){ + $(document).bind('contextmenu', function(e){ + return false; + }) +}) +``` + +...但是您也可以為特定元素做同樣的事情： + +```javascript +$(document).ready(function(){ + $('#submit').bind('contextmenu', function(e){ + return false; + }) +}) +``` + +[回目录](#table-of-contents) + + +## 支持 + +当前版本的Chrome，火狐，Safari，歌剧，EDGE和IE11的。 \ No newline at end of file diff --git a/translations/zh-TW/README.md b/translations/zh-TW/README.md new file mode 100644 index 0000000..0bb0bff --- /dev/null +++ b/translations/zh-TW/README.md @@ -0,0 +1,476 @@ +# 大家都應該知道的 jQuery 小技巧 [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) + +一些簡單的小技巧讓您對 jQuery 更得心應手。 + +> 也可以看看由 [@sindresorhus](https://github.com/sindresorhus/) 整理，一些其他很不錯的清單集合： [awesome lists](https://github.com/sindresorhus/awesome/). + + +## 目錄 + +* [技巧](#技巧) +* [瀏覽器支援](#瀏覽器支援) +* [翻譯](#翻譯) +* [貢獻守則](../../CONTRIBUTING.md) + + +## 技巧 + +1. [檢查 jQuery 是否成功載入](#檢查-jquery-是否成功載入) +1. [使用 `.on()` 做 Binding，而不要使用 `.click()`](#使用-on-做-binding而不要使用-click) +1. [返回最頂端的按鈕](#返回最頂端的按鈕) +1. [預先載入圖片](#預先載入圖片) +1. [檢查圖片是否成功載入](#檢查圖片是否成功載入) +1. [自動修復載入失敗的圖片](#自動修復載入失敗的圖片) +1. [發布的AJAX表單](#post-a-form-with-ajax) +1. [透過 Hover 切換 Class](#透過-hover-切換-class) +1. [讓 input field 無法輸入](#讓-input-field-無法輸入) +1. [停止載入連結](#停止載入連結) +1. [快取 jQuery 選擇器](#快取-jquery-選擇器) +1. [切換 Fade/Slide](#切換-fadeslide) +1. [簡單可收放元件(Accordion)](#簡單可收放元件accordion) +1. [使兩個 Div 一樣高](#使兩個-div-一樣高) +1. [在新分頁/視窗開啟外部連結](#在新分頁視窗開啟外部連結) +1. [利用文字找到元素](#利用文字找到元素) +1. [Visibility 改變時觸發事件](#visibility-改變時觸發事件) +1. [Ajax 程序的錯誤處理](#ajax-程序的錯誤處理) +1. [串連 Plugin 的函式呼叫](#串連-plugin-的函式呼叫) +1. [照字母順序排序清單元素（list）](#照字母順序排清單元素list) +1. [禁用右键单击](#禁用右键单击) + + +### 檢查 jQuery 是否成功載入 + +在你使用 jQuery 做任何事情之前，你應該先確定其是否成功載入： + +```javascript +if (typeof jQuery == 'undefined') { + console.log('jQuery hasn\'t loaded'); +} else { + console.log('jQuery has loaded'); +} +``` + + +[回到目錄](#目錄) + + +### 使用 `.on()` 做 Binding，而不要使用 `.click()` + +使用 `.on()` 比起使用 `.click()` 多了一些好處，像是可以加上多個事件(events)... + +```javascript +.on('click tap hover') +``` + +...這樣的連結（binding）也會對動態產生的元素產生效用（不需要每產生一個 DOM element 就做一次連結)... + +...還能夠使用命名空間（namespace）: + +```javascript +.on('click.menuOpening') +``` + +命名空間讓你能取消對特定事件(event)的連結（例如： `.off('click.menuOpening')`）。 + +[回到目錄](#目錄) + + +### 返回最頂端的按鈕 + +利用 jQuery 中 `animate` 以及 `scrollTop` 的函式， 你不需要外加特別的插件來完成「返回最頂端」的功能： + +```javascript +// Back to top +$('.container').on('click', '.back-to-top', function (e) { + e.preventDefault(); + $('html, body').animate({scrollTop: 0}, 800); +}); +``` + +```html + +
+ Back to top +
+``` + +改變 `scrollTop` 的數值可以改變你希望捲軸停在哪裡，而你實際上是使用 `animate()` 函式以動畫的方式並花費 800 毫秒的時間滾動到文件的頂端。 + +**注意:** 看看一些使用 `scrollTop` 而導致的[奇怪行為](https://github.com/jquery/api.jquery.com/issues/417) 。 + +[回到目錄](#目錄) + + +### 預先載入圖片 + +如果你的網頁有很多圖片並非一開始就是看得到的（例如：hover 才會看到），讓這些圖片預先載入是很合理的： + +```javascript +$.preloadImages = function () { + for (var i = 0; i < arguments.length; i++) { + $('').attr('src', arguments[i]); + } +}; + +$.preloadImages('img/hover-on.png', 'img/hover-off.png'); +``` + +[回到目錄](#目錄) + + +### 檢查圖片是否成功載入 + +有時候你會想要確定圖片是否成功載入後再執行接下來的動作： + +```javascript +$('img').on('load', function () { + console.log('image load successful'); +}); +``` + +你也可以透過替換 `` 成其他 ID 或 class 來檢查特定圖片。 + +[回到目錄](#目錄) + + +### 自動修復載入失敗的圖片 + +如果你覺得一個一個替換掉載入失敗的圖片連結很痛苦，這段程式碼可以讓你不會這麼頭痛： + +```javascript +$('img').on('error', function () { + if(!$(this).hasClass('broken-image')) { + $(this).prop('src', 'img/broken.png').addClass('broken-image'); + } +}); +``` + +另外，如果你想简单地隐藏破碎的形象这个片段将利用该护理： + +```javascript +$('img').on('error', function () { + $(this).hide(); +}); +``` + +[回到目錄](#目錄) + + +
+### 發布的AJAX表單 + +jQuery的AJAX方法來請求文本，HTML，XML或JSON的常用方法。如果你想通過AJAX發送的形式，你可以通過`val()`方法收集用戶輸入： + +```javascript +$.post('sign_up.php', { + user_name: $('input[name=user_name]').val(), + email: $('input[name=email]').val(), + password: $('input[name=password]').val(), +}); +``` + +然而，所有這些`val()`調用的是昂貴的。收集用戶輸入的一個更好的辦法是使用CSS`（）`函數，它收集用戶輸入一個字符串： + +```javascript +$.post('sign_up', $('#sign-up-form').serialize()); +``` + +[回到目錄](#目錄) + + +### 透過 Hover 切換 Class + +如果說你想要在一個可點擊元件的外貌被 hover 過的時候改變他的外貌，你可以在使用者 hover 時加上一個 class，當使用者停止 hover 時就移除該 class： + +```javascript +$('.btn').on('hover', function () { + $(this).addClass('hover'); +}, function () { + $(this).removeClass('hover'); +}); +``` + +你只要加上必要的 CSS 即可。如果你想要使用更簡單的方法，可以使用 `toggleClass` 函式： + +```javascript +$('.btn').on('hover', function () { + $(this).toggleClass('hover'); +}); +``` + +**注意:** 使用 CSS 可能是更快的解決方法，但是這個方法還是值得我們學習。 + +[回到目錄](#目錄) + + +### 讓 input field 無法輸入 + +常常你會希望在使用者進行一些特定動作前， input field 是無法輸入，或是一個 form 的 submit 按鈕是無法點擊的。（例如：點選「我已經閱讀條約。」的checkbox），在 input 加上 `disabled` 的屬性你就能夠在你想要時開啟權限： + +```javascript +$('input[type="submit"]').prop('disabled', true); +``` + +你只需要再執行一次 `prop` 函式，不過是將 `disabled` 的數值設成 `false`： + +```javascript +$('input[type="submit"]').prop('disabled', false); +``` + +[回到目錄](#目錄) + + +### 停止載入連結 + +有時候你不想讓連結連至特定網站或是重新載入頁面，你可能想要讓他們做一些其他行為，例如：觸發其他程式，以下將會避免預設的行為發生： + +```javascript +$('a.no-link').on('click', function (e) { + e.preventDefault(); +}); +``` + +[回到目錄](#目錄) + + +### 快取 jQuery 選擇器 + +想想看你在同一個專案中寫了多少次樣的選擇器，每一個 `$('.element')` 選擇器每一次都會搜尋整個 DOM，不管該選擇器是否在之前執行過。因此，執行一次選擇器並且將結果存在變數中： + +```javascript +var blocks = $('#blocks').find('li'); +``` + +現在你能夠在任何地方使用 `blocks` 變數而不用每一次都搜尋整個DOM： + +```javascript +$('#hideBlocks').on('click', function () { + blocks.fadeOut(); +}); + +$('#showBlocks').on('click', function () { + blocks.fadeIn(); +}); +``` + +快取 jQuery 選擇器是能夠簡單又能增進效能的小技巧。 + +[回到目錄](#目錄) + + +### 切換 Fade/Slide + +Sliding 以及 fading 是我們經常使用 jQuery 來完成的動畫效果。你可能只是想要在使用者點擊某個東西時秀出一個元件，此時 `fadeIn` 以及 `slideDown` 就是你的最佳選擇。如果你想要讓元件在第一次點擊時現身，並且在第二次點擊時消失，以下程式碼也可以很好地實現這個效果： + + +```javascript +// Fade +$('.btn').on('click', function () { + $('.element').fadeToggle('slow'); +}); + +// Toggle +$('.btn').on('click', function () { + $('.element').slideToggle('slow'); +}); +``` + +[回到目錄](#目錄) + + +### 簡單可收放元件(Accordion) + +這是一個簡單實現可收放元件（accordion）的做法： + +```javascript +// Close all panels +$('#accordion').find('.content').hide(); + +// Accordion +$('#accordion').find('.accordion-header').on('click', function () { + var next = $(this).next(); + next.slideToggle('fast'); + $('.content').not(next).slideUp('fast'); + return false; +}); +``` + +加上這段程式碼後，你要做的只剩下加上必要的 HTML 即可。 + +[回到目錄](#目錄) + + +### 使兩個 Div 一樣高 + +有時候不論兩個 Div 裡面的內容為何，你會希望他們有同樣的高度： + +```javascript +$('.div').css('min-height', $('.main-div').height()); +``` + +這個例子設定 `min-height`，表示其只能比 `.main-div` 的 `height` 大，永遠不會比它小。然而，在一組元素中循環並將各元素之 `height` 調整至最高的元素高度為另一種更彈性的方法： + +```javascript +var $columns = $('.column'); +var height = 0; +$columns.each(function () { + if ($(this).height() > height) { + height = $(this).height(); + } +}); +$columns.height(height); +``` + +如果你希望每一行都有同樣高度： + +```javascript +var $rows = $('.same-height-columns'); +$rows.each(function () { + $(this).find('.column').height($(this).height()); +}); +``` + +**注意:** 這件事可以使用幾種方法完成，[使用 CSS](http://codepen.io/AllThingsSmitty/pen/KMPqoO) 這跟你的需求有關，但也值得知道如何使用 jQuery完成。 + +[回到目錄](#目錄) + + +### 在新分頁/視窗開啟外部連結 + +在瀏覽器新的分頁或視窗中開啟新的外部連結，並且確定同樣 host 的連結會在同樣的分頁或視窗開啟： + +```javascript +$('a[href^="http"]').attr('target', '_blank'); +$('a[href^="//"]').attr('target', '_blank'); +$('a[href^="' + window.location.origin + '"]').attr('target', '_self'); +``` + +**注意:** `window.location.origin` 在 IE 10 中無效。[這個方法](http://tosbourn.com/a-fix-for-window-location-origin-in-internet-explorer/) 可以解決這個問題。 + +[回到目錄](#目錄) + + +### 利用文字找到元素 + +利用 jQuery 中 `contains()` 選擇器，你可以找到元素內容中的文字。如果沒有文字，該元素會被隱藏： + +```javascript +var search = $('#search').val(); +$('div:not(:contains("' + search + '"))').hide(); +``` + +[回到目錄](#目錄) + + +### Visibility 改變時觸發事件 + +當使用者不再停留在某分頁，或是重新停留在某分頁，觸發 JavaScript： + +```javascript +$(document).on('visibilitychange', function (e) { + if (e.target.visibilityState === 'visible') { + console.log('Tab is now in view!'); + } else if (e.target.visibilityState === 'hidden') { + console.log('Tab is now hidden!'); + } +}); +``` + +[回到目錄](#目錄) + + +### Ajax 程序的錯誤處理 + +當一個 Ajax 程序呼叫後回傳 404 或是 500 錯誤，錯誤處理程序將會被執行。如果沒有定義錯誤處理程序，其他 jQuery 的程式碼可能不會運作。定義一個全域 Ajax 錯誤處理程序： + +```javascript +$(document).on('ajaxError', function (e, xhr, settings, error) { + console.log(error); +}); +``` + +[回到目錄](#目錄) + + +### 串連 Plugin 的函式呼叫 + +jQuery 允許「串連」 plugin 函式的呼叫來減少重複搜尋 DOM 以及產生多個 jQuery 物件。以下的程式碼展示了 plugin 函式的呼叫： + +```javascript +$('#elem').show(); +$('#elem').html('bla'); +$('#elem').otherStuff(); +``` + +可以利用串連來改進： + +```javascript +$('#elem') + .show() + .html('bla') + .otherStuff(); +``` + +另外一種方法是利用一個變數來快取(cache)一個元素（在變數前面加上 `$`）： + +```javascript +var $elem = $('#elem'); +$elem.hide(); +$elem.html('bla'); +$elem.otherStuff(); +``` + +jQuery 中串連以及[快取](#cache-jquery-selectors)的方法是最簡潔且最快速的實作方式。 + +[回到目錄](#目錄) + + +### 照字母順序排清單元素（list） + +如果在清單中有太多元素，或許其內容是被ㄧ CMS 所製造的且你希望照字母順序來排序： + +```javascript +var ul = $('#list'), +lis = $('li', ul).get(); + +lis.sort(function (a, b) { + return ($(a).text().toUpperCase() < $(b).text().toUpperCase()) ? -1 : 1; +}); + +ul.append(lis); +``` + +就是這樣！ + +[回到目錄](#目錄) + + +### 禁用右键单击 + + +如果要禁用右键单击，您可以对整个页面进行操作... + +```javascript +$(document).ready(function() { + $(document).bind('contextmenu', function(e) { + return false; + }) +}) +``` + +...但是您也可以为特定元素做同样的事情： + +```javascript +$(document).ready(function() { + $('#submit').bind('contextmenu', function(e) { + return false; + }) +}) +``` + +[回到目錄](#目錄) + + +## 瀏覽器支援 + +現今版本的 Chrome，Firefox，Safari，Opera，Edge 以及 IE11。 \ No newline at end of file From 0bfacbd5c56f74f45ad94264d039b0c38e53f04a Mon Sep 17 00:00:00 2001 From: Katamori Date: Tue, 20 Jun 2017 14:27:23 +0200 Subject: [PATCH 083/135] ToC fixed (thanks to npm module DocToc) --- translations/hu-HU/README.md | 51 ++++++++++++++++++------------------ 1 file changed, 25 insertions(+), 26 deletions(-) diff --git a/translations/hu-HU/README.md b/translations/hu-HU/README.md index 2c420ab..7d9def3 100644 --- a/translations/hu-HU/README.md +++ b/translations/hu-HU/README.md @@ -1,4 +1,4 @@ -# jQuery tippek, amiket mindenkinek tudnia kell [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) +# jQuery tippek, amiket mindenkinek tudni érdemes [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) Egyszerű tippek gyűjteménye, a jQuery-ben való elmélyülésed segítendő. @@ -6,36 +6,35 @@ Egyszerű tippek gyűjteménye, a jQuery-ben való elmélyülésed segítendő. ## Tartalomjegyzék -* [Tippek](#tips) -* [Támogatás](#support) -* [További fordítások](#translations) +* [Tippek](#tippek) +* [Támogatás](#t%C3%A1mogat%C3%A1s) +* [További fordítások](#tov%C3%A1bbi-ford%C3%ADt%C3%A1sok) * [Közreműködési útmutató (angolul)](../../CONTRIBUTING.md) ## Tippek -1. [Betöltött-e a jQuery? - Ellenőrzés](#checking-if-jquery-loaded) -1. [`.on()` binding ("kötés") használata `.click()` helyett](#use-on-binding-instead-of-click) -1. ['Vissza az elejére' gomb](#back-to-top-button) -1. [Képek előbetöltése](#preload-images) -1. [Betöltöttek-e a képek? - Ellenőrzés](#checking-if-images-are-loaded) -1. [Betölt(het)etlen képek automatikus javítása](#fix-broken-images-automatically) -1. [Űrlap elküldése AJAX-al](#post-a-form-with-ajax) -1. [CSS osztály aktiválása a kurzor hatására](#toggle-classes-on-hover) -1. [Beviteli mezők kikapcsolása](#disabling-input-fields) -1. [Linkbetöltés megállítása](#stop-the-loading-of-links) -1. [jQuery kiválasztók eltárolása](#cache-jquery-selectors) -1. [Áttűnés/becsúszás effekt rögzítése](#toggle-fadeslide) -1. [Egyszerű accordion (harmonika-menü)](#simple-accordion) -1. [HTML div elemek egyező magassággal](#make-two-divs-the-same-height) -1. [Külső linkek megnyitása új fülön/ablakban](#open-external-links-in-new-tabwindow) -1. [Elemek keresése szöveg alapján](#find-element-by-text) -1. [Script aktiválás láthatóság változása esetén](#trigger-on-visibility-change) -1. [AJAX hívások hibakezelése](#ajax-call-error-handling) -1. [Plugin hívások láncolása](#chain-plugin-calls) -1. [Listaelemek sorba rendezése ABC szerint](#sort-list-items-alphabetically) -1. [Jobb egérkattintás kikapcsolása](#disable-right-click) - +1. [Betöltött-e a jQuery? - Ellenőrzés](#bet%C3%B6lt%C3%B6tt-e-a-jquery---ellen%C5%91rz%C3%A9s) +1. [`.on()` binding ("kötés") használata `.click()` helyett](#on-binding-k%C3%B6t%C3%A9s-haszn%C3%A1lata-click-helyett) +1. ['Vissza az elejére' gomb](#vissza-az-elej%C3%A9re-gomb) +1. [Képek előbetöltése](#k%C3%A9pek-el%C5%91bet%C3%B6lt%C3%A9se) +1. [Betöltöttek-e a képek? - Ellenőrzés](#bet%C3%B6lt%C3%B6ttek-e-a-k%C3%A9pek---ellen%C5%91rz%C3%A9s) +1. [Betölt(het)etlen képek automatikus javítása](#bet%C3%B6lthetetlen-k%C3%A9pek-automatikus-jav%C3%ADt%C3%A1sa) +1. [Űrlap elküldése AJAX-al](#%C5%B1rlap-elk%C3%BCld%C3%A9se-ajax-al) +1. [CSS osztály aktiválása a kurzor hatására](#css-oszt%C3%A1ly-aktiv%C3%A1l%C3%A1sa-a-kurzor-hat%C3%A1s%C3%A1ra) +1. [Beviteli mezők kikapcsolása](#beviteli-mez%C5%91k-kikapcsol%C3%A1sa) +1. [Linkbetöltés megállítása](#linkbet%C3%B6lt%C3%A9s-meg%C3%A1ll%C3%ADt%C3%A1sa) +1. [jQuery kiválasztók eltárolása](#jquery-kiv%C3%A1laszt%C3%B3k-elt%C3%A1rol%C3%A1sa) +1. [Áttűnés/becsúszás effekt rögzítése](#%C3%A1tt%C5%B1n%C3%A9sbecs%C3%BAsz%C3%A1s-effekt-r%C3%B6gz%C3%ADt%C3%A9se) +1. [Egyszerű accordion (harmonika-menü)](#egyszer%C5%B1-accordion-harmonika-men%C3%BC) +1. [HTML div elemek egyező magassággal](#html-div-elemek-egyez%C5%91-magass%C3%A1ggal) +1. [Külső linkek megnyitása új fülön/ablakban](#k%C3%BCls%C5%91-linkek-megnyit%C3%A1sa-%C3%BAj-f%C3%BCl%C3%B6nablakban) +1. [Elemek keresése szöveg alapján](#elemek-keres%C3%A9se-sz%C3%B6veg-alapj%C3%A1n) +1. [Script aktiválás láthatóság változása esetén](#script-aktiv%C3%A1l%C3%A1s-l%C3%A1that%C3%B3s%C3%A1g-v%C3%A1ltoz%C3%A1sa-eset%C3%A9n) +1. [AJAX hívások hibakezelése](#ajax-h%C3%ADv%C3%A1sok-hibakezel%C3%A9se) +1. [Plugin hívások láncolása](#plugin-h%C3%ADv%C3%A1sok-l%C3%A1ncol%C3%A1sa) +1. [Listaelemek sorba rendezése ABC szerint](#listaelemek-sorba-rendez%C3%A9se-abc-szerint) +1. [Jobb egérkattintás kikapcsolása](#jobb-eg%C3%A9rkattint%C3%A1s-kikapcsol%C3%A1sa) ### Betöltött-e a jQuery? - Ellenőrzés From fcd1b6927e4df6586c3ba30ce51ea2923aad49b5 Mon Sep 17 00:00:00 2001 From: Katamori Date: Tue, 20 Jun 2017 14:31:40 +0200 Subject: [PATCH 084/135] ..."back to toc" menus were not fixed. They are now --- translations/hu-HU/README.md | 42 ++++++++++++++++++------------------ 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/translations/hu-HU/README.md b/translations/hu-HU/README.md index 7d9def3..76379e9 100644 --- a/translations/hu-HU/README.md +++ b/translations/hu-HU/README.md @@ -50,7 +50,7 @@ if (typeof jQuery == 'undefined') { Most, hogy elstartoltunk... -[vissza a tartalomjegyzékhez](#table-of-contents) +[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k) ### `.on()` binding ("kötés") használata `.click()` helyett @@ -71,7 +71,7 @@ Az `.on()` függvény használata számos előnnyel rendelkezik a `.click()` meg Névterek segítségével "lecsatolhatsz" egyes konkrét eseményeket (pl. `.off('click.menuOpening')`). -[vissza a tartalomjegyzékhez](#table-of-contents) +[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k) ### 'Vissza az elejére' gomb @@ -98,7 +98,7 @@ A `scrollTop` értékének változtatásával beállíthatod, hova szeretnéd, h **Megjegyzés:** Figyelj oda a `scrollTop` esetenkénti [bugos viselkedésére](https://github.com/jquery/api.jquery.com/issues/417). -[vissza a tartalomjegyzékhez](#table-of-contents) +[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k) ### Képek előbetöltése @@ -115,7 +115,7 @@ $.preloadImages = function () { $.preloadImages('img/hover-on.png', 'img/hover-off.png'); ``` -[vissza a tartalomjegyzékhez](#table-of-contents) +[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k) ### Betöltöttek-e a képek? - Ellenőrzés @@ -130,7 +130,7 @@ $('img').on('load', function () { Ezen felül azt is leellenőrizheted, hogy egy konkrét kép betöltött-e: mindössze cseréld le a fenti kódban az `` címkét egy megfelelő azonosíra (ID) vagy osztályra. -[vissza a tartalomjegyzékhez](#table-of-contents) +[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k) ### Betölt(het)etlen képek automatikus javítása @@ -153,7 +153,7 @@ $('img').on('error', function () { }); ``` -[vissza a tartalomjegyzékhez](#table-of-contents) +[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k) ### Űrlap elküldése AJAX-al @@ -174,7 +174,7 @@ A `val()` hívások ugyanakkor számításigényesek. Felhasználói input begy $.post('sign_up', $('#sign-up-form').serialize()); ``` -[vissza a tartalomjegyzékhez](#table-of-contents) +[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k) ### CSS osztály aktiválása a kurzor hatására @@ -201,7 +201,7 @@ $('.btn').on('hover', function () { **Megjegyzés:** a CSS gyorsabb megoldás lehet ebben az esetben, mindazonáltal érdemes tudnod róla, hogy ilyet is lehet. -[vissza a tartalomjegyzékhez](#table-of-contents) +[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k) ### Beviteli mezők kikapcsolása @@ -218,7 +218,7 @@ Nem kell mást tenned, mint újra futtatni a `prop` eljárást az adott beviteli $('input[type="submit"]').prop('disabled', false); ``` -[vissza a tartalomjegyzékhez](#table-of-contents) +[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k) ### Linkbetöltés megállítása @@ -231,7 +231,7 @@ $('a.no-link').on('click', function (e) { }); ``` -[vissza a tartalomjegyzékhez](#table-of-contents) +[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k) ### jQuery kiválasztók eltárolása @@ -255,7 +255,7 @@ $('#showBlocks').on('click', function () { ``` A jQuery kiválasztók eltárolása egy roppant egyszerű teljesítményjavító technika. -[vissza a tartalomjegyzékhez](#table-of-contents) +[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k) ### Áttűnés/becsúszás effekt rögzítése @@ -274,7 +274,7 @@ $('.btn').on('click', function () { }); ``` -[vissza a tartalomjegyzékhez](#table-of-contents) +[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k) ### Egyszerű accordion (harmonika-menü) @@ -296,7 +296,7 @@ $('#accordion').find('.accordion-header').on('click', function () { Ezen script hozzáadásával már nincs már feladatot hátra a weboldaladon, mint a szükséges HTML elkészítése ahhoz, hogy ezt működésre bírd. -[vissza a tartalomjegyzékhez](#table-of-contents) +[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k) ### HTML div elemek egyező magassággal @@ -333,7 +333,7 @@ $rows.each(function () { **Megjegyzés:** Erre sok megoldás van [CSS-ben](http://codepen.io/AllThingsSmitty/pen/KMPqoO) de a szükségleteidtől függően, érdemes lehet tudni, hogyan is megy ez jQuery-ben. -[vissza a tartalomjegyzékhez](#table-of-contents) +[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k) ### Külső linkek megnyitása új fülön/ablakban @@ -348,7 +348,7 @@ $('a[href^="' + window.location.origin + '"]').attr('target', '_self'); **Megjegyzés:** `window.location.origin` nem működik IE10-ben. [Ez a javítás](http://tosbourn.com/a-fix-for-window-location-origin-in-internet-explorer/) gondoskodik erről a problémáról. -[vissza a tartalomjegyzékhez](#table-of-contents) +[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k) ### Elemek keresése szöveg alapján @@ -360,7 +360,7 @@ var search = $('#search').val(); $('div:not(:contains("' + search + '"))').hide(); ``` -[vissza a tartalomjegyzékhez](#table-of-contents) +[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k) ### Script aktiválás láthatóság változása esetén @@ -377,7 +377,7 @@ $(document).on('visibilitychange', function (e) { }); ``` -[vissza a tartalomjegyzékhez](#table-of-contents) +[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k) ### AJAX hívások hibakezelése @@ -390,7 +390,7 @@ $(document).on('ajaxError', function (e, xhr, settings, error) { }); ``` -[vissza a tartalomjegyzékhez](#table-of-contents) +[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k) ### Plugin hívások láncolása @@ -423,7 +423,7 @@ $elem.otherStuff(); Mind a láncolás, mint az [eltárolás](#cache-jquery-selectors) eljárásai "legjobb gyakorlatnak" (best practice) tekinthetők jQuery-ben, és rövidebb, gyorsabb kódot eredményeznek. -[vissza a tartalomjegyzékhez](#table-of-contents) +[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k) ### Listaelemek sorba rendezése ABC szerint @@ -443,7 +443,7 @@ ul.append(lis); Meg is volnánk! -[vissza a tartalomjegyzékhez](#table-of-contents) +[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k) ### Jobb egérkattintás kikapcsolása @@ -468,7 +468,7 @@ $(document).ready(function() { }) ``` -[vissza a tartalomjegyzékhez](#table-of-contents) +[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k) ## Támogatás From a1c7630a68a8f4631b84db9845d58bbdc42e46fc Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Tue, 20 Jun 2017 09:52:48 -0400 Subject: [PATCH 085/135] Added link to Hungarian translation --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 7061897..7328427 100644 --- a/README.md +++ b/README.md @@ -478,6 +478,7 @@ Current versions of Chrome, Firefox, Safari, Opera, Edge, and IE11. * [Español](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/es-ES) * [Français](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/fr-FR) +* [Magyar](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/hu-HU) * [Pусский](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/ru-RU) * [简体中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-CN) * [繁體中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-TW) From 5e69cea2b8537cc5a33b20353e924f9e32415352 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Thu, 22 Jun 2017 09:25:20 -0400 Subject: [PATCH 086/135] Added links (Issue #53) --- README.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/README.md b/README.md index 7328427..cd4a2b9 100644 --- a/README.md +++ b/README.md @@ -473,6 +473,8 @@ $(document).ready(function() { Current versions of Chrome, Firefox, Safari, Opera, Edge, and IE11. +[back to table of contents](#table-of-contents) + ## Translations @@ -482,3 +484,6 @@ Current versions of Chrome, Firefox, Safari, Opera, Edge, and IE11. * [Pусский](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/ru-RU) * [简体中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-CN) * [繁體中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-TW) + +[back to table of contents](#table-of-contents) + From 0ef0859a75d6a80246d8b784d3acdf24a2790c4f Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Thu, 22 Jun 2017 09:26:40 -0400 Subject: [PATCH 087/135] Added links (Issue #53) --- translations/es-ES/README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/translations/es-ES/README.md b/translations/es-ES/README.md index 5a78ada..7f85f56 100644 --- a/translations/es-ES/README.md +++ b/translations/es-ES/README.md @@ -477,3 +477,6 @@ $(document).ready(function() { ## Apoyo Las versiones actuales de Chrome, Firefox, Safari, Opera, Edge y EI11. + +[volver al índice de contenidos](#table-of-contents) + From aff1d68dceb537cd756dea1c0bba41e8ac25e8d8 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Thu, 22 Jun 2017 09:27:28 -0400 Subject: [PATCH 088/135] Added links (Issue #53) --- translations/fr-FR/README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/translations/fr-FR/README.md b/translations/fr-FR/README.md index 4c1c094..aa12a63 100644 --- a/translations/fr-FR/README.md +++ b/translations/fr-FR/README.md @@ -489,4 +489,6 @@ $(document).ready(function() { ## Soutien -Les versions actuelles de Chrome, Firefox, Safari, Opera, Edge, et IE11. \ No newline at end of file +Les versions actuelles de Chrome, Firefox, Safari, Opera, Edge, et IE11. + +[retour à la table des matières](#table-of-contents) From ad5cff1cdc9b6d63f545233210dc123304bd5f6e Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Thu, 22 Jun 2017 09:30:21 -0400 Subject: [PATCH 089/135] Updated anchors --- translations/fr-FR/README.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/translations/fr-FR/README.md b/translations/fr-FR/README.md index aa12a63..f572b4c 100644 --- a/translations/fr-FR/README.md +++ b/translations/fr-FR/README.md @@ -6,6 +6,7 @@ Une collection de conseils simples pour aider votre jeu jQuery.
+ ## Table des matières * [Conseils](#conseils) @@ -38,6 +39,7 @@ Une collection de conseils simples pour aider votre jeu jQuery. 1. [Desactivar Botón Derecho del Ratón](#disable-right-click)
+ ### Vérification Si jQuery Loaded Avant de pouvoir faire quoi que ce soit avec jQuery vous devez d'abord vous assurer qu'il a été chargé: @@ -56,6 +58,7 @@ Maintenant, vous êtes hors ...
+ ### Utilisez `.on()` Binding Au lieu de `.click()` Utiliser `.on()` vous donne plusieurs avantages par rapport `.click()`, comme la possibilité d'ajouter plusieurs événements... @@ -78,6 +81,7 @@ Namespaces vous donnent le pouvoir de délier un événement spécifique (par ex
+ ### Haut de la page Bouton En utilisant le `animate` et méthodes `scrollTop` dans jQuery vous ne pas besoin d'un plug-in pour créer une animation simple défilement-to-top: @@ -103,6 +107,7 @@ Modification des valeur change `scrollTop` où vous veut le scrollbar à la terr
+ ### Précharger Images Si votre page Web utilise beaucoup d'images qui ne sont pas visibles initialement (par exemple, sur le vol stationnaire), il est logique de les précharger: @@ -121,6 +126,7 @@ $.preloadImages('img/hover-on.png', 'img/hover-off.png');
+ ### Vérification Si les images sont chargées Parfois, vous pourriez avoir besoin de vérifier si vos images sont entièrement chargées, afin de continuer avec vos scripts: @@ -137,6 +143,7 @@ Vous pouvez également vérifier si une image particulière a été chargé par
+ ### Fix Broken Images automatiquement Si vous arrive de trouver des liens d'image cassés sur votre site pour les remplacer un par un peut être une douleur. Ce simple morceau de code permet d'économiser beaucoup de maux de tête: @@ -161,6 +168,7 @@ $('img').on('error', function () {
+ ### Poster un formulaire avec AJAX Méthodes jQuery AJAX sont une voie commune pour demander le texte, HTML, XML ou JSON. Si vous voulez envoyer un formulaire via AJAX, vous pouvez collecter les entrées utilisateur via la méthode `val()`: @@ -183,6 +191,7 @@ $.post('sign_up', $('#sign-up-form').serialize());
+ ### Basculer Classes sur Hover Disons que vous voulez changer le visuel d'un élément cliquable sur votre page quand un utilisateur survole. Vous pouvez ajouter une classe à votre élément lorsque l'utilisateur est en vol stationnaire; lorsque l'utilisateur arrête planant supprime la classe: @@ -209,6 +218,7 @@ $('.btn').hover(function () {
+ ### Désactivation de champs d'entrée Parfois, vous voudrez peut-être le bouton d'envoi d'un formulaire ou une de ses entrées de texte est désactivé jusqu'à ce que l'utilisateur a effectué une certaine action (par exemple, la vérification du «Je l'ai lu les termes« case à cocher). Ajouter l'attribut `disabled` à votre entrée de sorte que vous pouvez l'activer quand vous voulez: @@ -227,6 +237,7 @@ $('input[type="submit"]').prop('disabled', false); + ### Arrêter le chargement des Liens Parfois, vous ne voulez pas de liens pour aller à une certaine page Web, ni recharger la page; vous voudrez peut-être qu'ils fassent d'autre comme déclencheur d'un autre script quelque chose. Cela fera l'affaire d'empêcher l'action par défaut: @@ -241,6 +252,7 @@ $('a.no-link').on('click', function (e) {
+ ### Cache jQuery sélecteurs Pensez à combien de fois vous écrivez le même sélecteur maintes et maintes fois dans tout projet. Chaque `$ ( '. Élément')` sélecteur doit rechercher l'ensemble DOM chaque fois, peu importe si ce sélecteur avait précédemment terme. Au lieu de cela, exécutez le sélecteur une fois et stocker les résultats dans une variable: @@ -267,6 +279,7 @@ sélecteurs Caching jQuery sont un gain de performance facile.
+ ### Basculer Fade / Slide Coulissantes et à la décoloration sont quelque chose que nous utilisons beaucoup dans nos animations avec jQuery. Vous voudrez peut-être juste pour montrer un élément lorsqu'un utilisateur clique sur quelque chose, ce qui rend les méthodes `slideDown` et `fadeIn` parfait. Mais si vous voulez que l'élément à apparaître sur le premier clic et puis disparaissent sur le second cela fonctionne très bien: @@ -287,6 +300,7 @@ $('.btn').on('click', function () {
+ ### Accordéon Simple Ceci est une méthode simple pour un accordéon rapide: @@ -310,6 +324,7 @@ En ajoutant ce script tout ce que vous a vraiment besoin de le faire sur votre p
+ ### Faire deux Divs la même hauteur Parfois, vous aurez envie deux divs d'avoir la même hauteur, peu importe le contenu qu'ils ont en eux: @@ -346,6 +361,7 @@ $rows.each(function () { + ### Ouvrez Liens externes dans un nouvel onglet / fenêtre Ouvrir des liens externes dans un nouvel onglet du navigateur ou la fenêtre et assurer des liens sur la même origine ouvert dans le même onglet ou une fenêtre: @@ -362,6 +378,7 @@ $('a[href^="' + window.location.origin + '"]').attr('target', '_self');
+ ### Trouver Élément Par texte En utilisant le `contains()` sélecteur jQuery vous pouvez rechercher du texte dans le contenu d'un élément. Si le texte n'existe pas, cet élément sera caché: @@ -375,6 +392,7 @@ $('div:not(:contains("' + search + '"))').hide();
+ ### Déclenchement de la visibilité Change Trigger JavaScript lorsque l'utilisateur est plus axé sur un onglet, ou réoriente sur un onglet: @@ -393,6 +411,7 @@ $(document).on('visibilitychange', function (e) {
+ ### Gestion des erreurs Ajax Appel Lorsqu'un appel Ajax renvoie une erreur 404 ou 500 le gestionnaire d'erreur sera exécutée. Si le gestionnaire ne se définit pas, un autre code jQuery ne fonctionneront plus. Définir un gestionnaire global d'erreur Ajax: @@ -407,6 +426,7 @@ $(document).on('ajaxError', function (e, xhr, settings, error) {
+ ### appels Plugin Chain jQuery permet le "chaînage" du plug-in méthode appelle pour atténuer le processus d'interrogation à plusieurs reprises le DOM et la création de plusieurs objets jQuery. Disons que l'extrait suivant représente vos appels de méthode plugin: @@ -441,6 +461,7 @@ Les deux chaînage et [cache](#jquery-sélecteurs cache-) méthodes jQuery sont
+ ### Trier Liste Articles alphabétiquement Disons que vous vous retrouvez avec trop d'éléments dans une liste. Peut-être que le contenu est produit par un CMS et que vous souhaitez les commander par ordre alphabétique: @@ -462,6 +483,7 @@ Voilà!
+ ### Desactivar Botón Derecho del Ratón Si desea desactivar botón derecho del ratón, se puede hacer por una página entera... From 4f593d32293d25583985b9d4fe10318086245455 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Thu, 22 Jun 2017 09:31:38 -0400 Subject: [PATCH 090/135] Added links (Issue #53) --- translations/hu-HU/README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/translations/hu-HU/README.md b/translations/hu-HU/README.md index 76379e9..baf5a8a 100644 --- a/translations/hu-HU/README.md +++ b/translations/hu-HU/README.md @@ -477,6 +477,8 @@ $(document).ready(function() { A Chrome, Firefox, Safari, Opera, Edge és IE11 böngészők jelenlegi verziói. +[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k) + ## További fordítások @@ -485,3 +487,5 @@ A Chrome, Firefox, Safari, Opera, Edge és IE11 böngészők jelenlegi verziói. * [Pусский](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/ru-RU) * [简体中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-CN) * [繁體中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-TW) + +[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k) From 06fb5a54c0186073b89a67ada84e80a7ea67d539 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Thu, 22 Jun 2017 09:34:06 -0400 Subject: [PATCH 091/135] Added links (#53) and updated anchors --- translations/ru-RU/README.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/translations/ru-RU/README.md b/translations/ru-RU/README.md index a00a717..93de1dc 100644 --- a/translations/ru-RU/README.md +++ b/translations/ru-RU/README.md @@ -6,6 +6,7 @@
+ ## Содержание * [Советы](#советы) @@ -38,6 +39,7 @@ 1. [Отключить правую кнопку мыши](#disable-right-click)
+ ### Проверка готовности jQuery Перед тем, как сделать что-нибудь с помощью jQuery, необходимо убедиться в том, что он загружен: @@ -56,6 +58,7 @@ if (typeof jQuery == 'undefined') {
+ ### Используйте `.on()` вместо `.click()` Использование `.on()` дает ряд преимуществ по сравнению с использованием `.click()`, например, возможность добавлять несколько событий... @@ -78,6 +81,7 @@ if (typeof jQuery == 'undefined') {
+ ### Кнопка "вернуться к началу" С помощью методов `animate` и `scrollTop` в jQuery вам не нужен плагин, чтобы создать простую анимацию прокрутки вверх: @@ -103,6 +107,7 @@ $('.container').on('click', '.back-to-top', function (e) {
+ ### Предварительная загрузка изображений Если ваш веб-страница использует много изображений, которые не видны изначально (например, появлюятся при наведении курсора мыши), имеет смысл предварительно загрузить их: @@ -121,6 +126,7 @@ $.preloadImages('img/hover-on.png', 'img/hover-off.png');
+ ### Проверка, загружаются ли изображения Иногда вам может понадобиться проверка того, что ваши изображения полностью загружены, перед тем как вы продолжите работу своего скрипта: @@ -137,6 +143,7 @@ $('img').on('load', function () {
+ ### Автоматическое исправление сломанных изображений Если вам посчастливилось найти неработающие ссылки на изображения на вашем сайте, замена их по одной может утомить. Этот простой фрагмент кода поможет избежать этой головной боли: @@ -161,6 +168,7 @@ $('img').on('error', function () {
+ ### Дать форму с помощью AJAX методы JQuery AJAX являются распространенным способом запросить текст, HTML, XML или JSON. Если вы хотите отправить форму через AJAX можно собирать пользовательские входные данные через `val()` метода: @@ -183,6 +191,7 @@ $.post('sign_up', $('#sign-up-form').serialize());
+ ### Переключение классов по наведению Допустим, вы хотите изменить визуальный интерактивный элемент на странице, когда пользователь наводит курсор над ним. Вы можете добавить класс к вашему элементу, когда пользователь навел курсор; когда пользователь уводит курсор, класс удаляется: @@ -209,6 +218,7 @@ $('.btn').hover(function () {
+ ### Отключение поля ввода Иногда вы можете захотеть отключить кнопку отправки формы или одно из его текстовых полей, до тех пор, пока пользователь не выполнил определенное действие (например, не отметил флаг "я прочитал условия"). Добавьте атрибут `disabled` на ваше поле ввода, отключив его, когда вы хотите: @@ -227,6 +237,7 @@ $('input[type="submit"]').prop('disabled', false); + ### Прерывание загрузки ссылки Иногда вы не хотите, чтобы ссылки переводили пользователя на определенную веб-страницу или перезагружали страницу; Вы можете хотеть, чтобы они делали что-то еще, как спусковой крючок для какой-либо другого сценария. Этот скрипт предотвратит действие по умолчанию: @@ -241,6 +252,7 @@ $('a.no-link').on('click', function (e) {
+ ### Кэширование селекторов jQuery Подумайте, сколько раз вы пишете один и тот же селектор снова и снова в любом проекте. Каждый `$('.element')` селектор ищет по всему DOM каждый раз, независимо от того, был ли он использован раньше. Вместо этого запустите селектор один раз и сохраните его результаты в переменной: @@ -267,6 +279,7 @@ $('#showBlocks').on('click', function () {
+ ### Переключение fade/slide Slide и fade являются часто используемыми действиями в анимации с jQuery. Вы можете захотить, показать элемент, когда пользователь нажимает что-то, что делает методы `fadeIn` и `slideDown` хорошо подходящими. Но если вы хотите, чтобы этот элемент, появился на первый щелчок, а затем исчез на второй, то этот скрипт будет работать просто отлично: @@ -287,6 +300,7 @@ $('.btn').on('click', function () {
+ ### Простой аккордеон Метод для создания простого аккордеона: @@ -310,6 +324,7 @@ $('#accordion').find('.accordion-header').on('click', function () {
+ ### Сделать два элемента div одинаковой высотой Иногда вы будете хотеть две элемента div, которые имеют одинаковую высоту, независимо от содержания: @@ -346,6 +361,7 @@ $rows.each(function () { + ### Открывать внешние ссылки в новой вкладке или новом окне Открыть внешние ссылки в новой вкладке браузера или новом окне, и открывать внутренние ссылки в той же вкладке или окне: @@ -362,6 +378,7 @@ $('a[href^="' + window.location.origin + '"]').attr('target', '_self');
+ ### Найти элемент по тексту При использовании `contains()` селектора в jQuery вы можете найти текст в содержимом элемента. Если текст не существует, то этот элемент будет скрыт: @@ -375,6 +392,7 @@ $('div:not(:contains("' + search + '"))').hide();
+ ### Запуск по изменению видимости Запуск скрипта, когда пользователь больше не фокусируется на вкладке или перефокусируется на вкладке: @@ -393,6 +411,7 @@ $(document).on('visibilitychange', function (e) {
+ ### Обработка ошибок в AJAX-запросах Когда AJAX-запрос возвращает ошибку 404 или 500, будет выполняться обработчик ошибок. Если обработчик не определен, другой код jQuery может не работать после этого. Определить глобальный обработчик ошибок AJAX-запросов можно следующим образом: @@ -407,6 +426,7 @@ $(document).on('ajaxError', function (e, xhr, settings, error) {
+ ### Цепочка вызовов плагинов jQuery позволяет выполнять "цепочки" методов, что упрощает процесс, однократно запрашивая DOM и не создавая несколько объектов jQuery. Скажем, следующий фрагмент кода представляет ваш метод: @@ -441,6 +461,7 @@ $elem.otherStuff();
+ ### Сортировка элементов списка по алфавиту Допустим, в списке слишком много элементов. Возможно, содержание производится с помощью CMS, а вы хотите показать их в алфавитном порядке: @@ -462,6 +483,7 @@ ul.append(lis);
+ ### Отключить правую кнопку мыши Если вы хотите отключить контекстное меню, вы можете сделать это для всей страницы... @@ -490,3 +512,5 @@ $(document).ready(function() { ## Поддержка Текущие версии Chrome, Firefox, Safari, Opera, Edge, и IE11. + +[вернуться к оглавлению](#table-of-contents) From 6ff2ebb9a639f762e4dd86fd255c4b9a547551c5 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Thu, 22 Jun 2017 09:36:09 -0400 Subject: [PATCH 092/135] Updated anchors --- translations/ru-RU/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/translations/ru-RU/README.md b/translations/ru-RU/README.md index 93de1dc..9550a2b 100644 --- a/translations/ru-RU/README.md +++ b/translations/ru-RU/README.md @@ -9,8 +9,8 @@ ## Содержание -* [Советы](#советы) -* [Поддержка](#поддержка) +* [Советы](#Советы) +* [Поддержка](#Поддержка) * [Как сделать вклад](../../CONTRIBUTING.md) From 3d59283e6b167a6daead00b5429935133c8bcd29 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Thu, 22 Jun 2017 09:38:43 -0400 Subject: [PATCH 093/135] Added links (#53) and updated anchors --- translations/zh-CN/README.md | 27 ++++++++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/translations/zh-CN/README.md b/translations/zh-CN/README.md index 722e7b7..d4f9700 100644 --- a/translations/zh-CN/README.md +++ b/translations/zh-CN/README.md @@ -6,6 +6,7 @@
+ ## 目录 * [温馨提示](＃提示) @@ -14,6 +15,7 @@
+ ## 提示 1. [检查是否加载的jQuery](＃checking-if-jquery-loaded) @@ -40,6 +42,7 @@
+ ### 检查如果加载的jQuery 之前，你可以使用jQuery做任何事情，你首先需要确保它加载： @@ -58,6 +61,7 @@ if (typeof jQuery == 'undefined') {
+ ### 使用`.on()`绑定`.click()`代替 使用`.on()`给你几个优点比使用`.click()`，如添加多个事件的能力... @@ -80,6 +84,7 @@ if (typeof jQuery == 'undefined') {
+ ### 返回顶部按钮 通过使用jQuery中的`animate`和`scrollTop`方法，你并不需要一个插件来创建一个简单的滚动到顶部动画： @@ -105,6 +110,7 @@ $('.container').on('click', '.back-to-top', function (e) {
+ ### 预先载入图像 如果你的网页使用了大量不可见的开始（例如，悬停）图像是有意义的预加载它们： @@ -123,6 +129,7 @@ $.preloadImages('img/hover-on.png', 'img/hover-off.png');
+ ### 检查如果图像加载 有时你可能需要检查，如果您的影像出现，以便继续与脚本满载： @@ -139,6 +146,7 @@ $('img').on('load', function () {
+ ### 自动修复破碎的形象 如果你碰巧发现网站上的残缺的图像链接一个取代他们可以是一个痛苦。这一段简单的代码可以节省很多麻烦： @@ -163,6 +171,7 @@ $('img').on('error', function () {
+ ### 发布的AJAX表单 jQuery的AJAX方法来请求文本，HTML，XML或JSON的常用方法。如果你想通过AJAX发送的形式，你可以通过`val()`方法收集用户输入： @@ -185,6 +194,7 @@ $.post('sign_up', $('#sign-up-form').serialize());
+ ### 切换悬停类 比方说，你想改变视觉可点击元素的页面上，当用户将鼠标悬停在它。您可以将类添加到你的元素，当用户徘徊;用户停止徘徊时删除类： @@ -211,6 +221,7 @@ $('.btn').hover(function () {
+ ### 禁用输入字段 有时你可能要直到用户执行特定操作（例如，勾选“我已阅读条款”复选框）提交被禁用的形式或它的文本输入中的一个按钮。在`disabled`属性添加到您的输入，所以你可以在需要时启用它： @@ -229,6 +240,7 @@ $('input[type="submit"]').prop('disabled', false); + ### 停止路径的负载 有时候，你不想链接到特定网页，也没有重新加载页面;你可能希望他们做别的事情一样触发一些其他的脚本。这将做防止默认操作的技巧： @@ -243,6 +255,7 @@ $('a.no-link').on('click', function (e) {
+ ### 高速缓存jquery选择 想想有多少次你一遍又一遍地在任何项目中再次写入相同的选择。每个`$('.element')`选择有每次搜索整个DOM，如果不管选择以前有运行。相反，运行一次选择器和存储在变量的结果： @@ -269,6 +282,7 @@ $('#showBlocks').on('click', function () {
+ ### 切换淡入/幻灯片 滑动和衰落都是我们用很多东西在我们使用jQuery的动画。你可能只是想表明一个元素，当用户点击的东西，这使得`fadeIn`和`slideDown`方法完善。但是，如果你想要的元素出现在第一次点击，然后消失在第二本会工作得很好： @@ -289,6 +303,7 @@ $('.btn').on('click', function () {
+ ### 简单手风琴 这是一个快速手风琴一个简单的方法： @@ -312,6 +327,7 @@ $('#accordion').find('.accordion-header').on('click', function () {
+ ### 让两个div相同的高度 有时候，你会想两个div具有相同的高度，无论他们有他们什么内容： @@ -348,6 +364,7 @@ $rows.each(function () { + ### 在新标签中打开外部链接/窗 打开外部链接在新的浏览器标签或窗口，并确保在同一起源于同一个标签或窗口打开链接： @@ -364,6 +381,7 @@ $('a[href^="' + window.location.origin + '"]').attr('target', '_self');
+ ### 查找元素通过短信 通过jQuery中使用`contains()`选择，你可以找到在元素内容的文字。如果文本不存在，该元素将被隐藏： @@ -377,6 +395,7 @@ $('div:not(:contains("' + search + '"))').hide();
+ ### 上触发能见度变化 触发JavaScript的用户不再集中在选项卡上，或重新调整选项卡上： @@ -395,6 +414,7 @@ $(document).on('visibilitychange', function (e) {
+ ### AJAX调用错误处理 当Ajax调用返回404或500错误的错误处理程序将被执行。如果没有定义的处理程序，其他的jQuery代码可能就失效了。定义一个全局的Ajax错误处理程序： @@ -409,6 +429,7 @@ $(document).on('ajaxError', function (e, xhr, settings, error) {
+ ### 连锁插件调用 jQuery的允许“链接”插件的方法调用，以减轻反复查询DOM并创建多个jQuery的对象的过程。比方说，下面的代码片段代表了你的插件方法调用： @@ -444,6 +465,7 @@ $elem.otherStuff();
+ ### 排序列表项按字母顺序 比方说，你结束了在列表中的项目太多。也许内容是由CMS生成并希望他们字母顺序： @@ -465,6 +487,7 @@ ul.append(lis);
+ ### 禁用右鍵單擊 如果要禁用右鍵單擊，您可以對整個頁面進行操作... @@ -492,4 +515,6 @@ $(document).ready(function(){ ## 支持 -当前版本的Chrome，火狐，Safari，歌剧，EDGE和IE11的。 \ No newline at end of file +当前版本的Chrome，火狐，Safari，歌剧，EDGE和IE11的。 + +[回目录](#table-of-contents) From 3633503ece209ace084ad4a9b20321d494a5613d Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Thu, 22 Jun 2017 09:39:49 -0400 Subject: [PATCH 094/135] Added links (Issue #53) --- translations/zh-TW/README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/translations/zh-TW/README.md b/translations/zh-TW/README.md index 0bb0bff..647b033 100644 --- a/translations/zh-TW/README.md +++ b/translations/zh-TW/README.md @@ -473,4 +473,6 @@ $(document).ready(function() { ## 瀏覽器支援 -現今版本的 Chrome，Firefox，Safari，Opera，Edge 以及 IE11。 \ No newline at end of file +現今版本的 Chrome，Firefox，Safari，Opera，Edge 以及 IE11。 + +[回到目錄](#目錄) From 3807d78c69a9433b4e34ceb4426d4de56d75e2c4 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Fri, 23 Jun 2017 06:39:53 -0400 Subject: [PATCH 095/135] Added translation links (Issue #52) --- translations/es-ES/README.md | 12 ++++++++++++ translations/fr-FR/README.md | 13 +++++++++++++ translations/hu-HU/README.md | 1 + translations/ru-RU/README.md | 15 +++++++++++++++ translations/zh-CN/README.md | 14 ++++++++++++++ translations/zh-TW/README.md | 15 +++++++++++++++ 6 files changed, 70 insertions(+) diff --git a/translations/es-ES/README.md b/translations/es-ES/README.md index 7f85f56..0e7c9f7 100644 --- a/translations/es-ES/README.md +++ b/translations/es-ES/README.md @@ -11,6 +11,7 @@ Una colección de consejos simples para ayudar a su juego jQuery. * [Tips](#consejos) * [Apoyo](#apoyo) +* [Traducciones](#traducciones) * [Pautas de contribución](../../CONTRIBUTING.md) @@ -480,3 +481,14 @@ Las versiones actuales de Chrome, Firefox, Safari, Opera, Edge y EI11. [volver al índice de contenidos](#table-of-contents) + +## Traducciones + +* [Español](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/es-ES) +* [Français](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/fr-FR) +* [Magyar](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/hu-HU) +* [Pусский](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/ru-RU) +* [简体中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-CN) +* [繁體中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-TW) + +[volver al índice de contenidos](#table-of-contents) diff --git a/translations/fr-FR/README.md b/translations/fr-FR/README.md index f572b4c..c516955 100644 --- a/translations/fr-FR/README.md +++ b/translations/fr-FR/README.md @@ -11,6 +11,7 @@ Une collection de conseils simples pour aider votre jeu jQuery. * [Conseils](#conseils) * [Soutien](#soutien) +* [Traductions](#traductions) * [Lignes directrices des contributions](../../CONTRIBUTING.md) @@ -514,3 +515,15 @@ $(document).ready(function() { Les versions actuelles de Chrome, Firefox, Safari, Opera, Edge, et IE11. [retour à la table des matières](#table-of-contents) + + +## Traductions + +* [Español](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/es-ES) +* [Français](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/fr-FR) +* [Magyar](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/hu-HU) +* [Pусский](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/ru-RU) +* [简体中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-CN) +* [繁體中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-TW) + +[retour à la table des matières](#table-of-contents) diff --git a/translations/hu-HU/README.md b/translations/hu-HU/README.md index baf5a8a..d7d4a53 100644 --- a/translations/hu-HU/README.md +++ b/translations/hu-HU/README.md @@ -484,6 +484,7 @@ A Chrome, Firefox, Safari, Opera, Edge és IE11 böngészők jelenlegi verziói. * [Español](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/es-ES) * [Français](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/fr-FR) +* [Magyar](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/hu-HU) * [Pусский](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/ru-RU) * [简体中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-CN) * [繁體中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-TW) diff --git a/translations/ru-RU/README.md b/translations/ru-RU/README.md index 9550a2b..934684c 100644 --- a/translations/ru-RU/README.md +++ b/translations/ru-RU/README.md @@ -11,6 +11,7 @@ * [Советы](#Советы) * [Поддержка](#Поддержка) +* [Переводы](#translations) * [Как сделать вклад](../../CONTRIBUTING.md) @@ -514,3 +515,17 @@ $(document).ready(function() { Текущие версии Chrome, Firefox, Safari, Opera, Edge, и IE11. [вернуться к оглавлению](#table-of-contents) + + +
+ +## Переводы + +* [Español](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/es-ES) +* [Français](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/fr-FR) +* [Magyar](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/hu-HU) +* [Pусский](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/ru-RU) +* [简体中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-CN) +* [繁體中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-TW) + +[вернуться к оглавлению](#table-of-contents) diff --git a/translations/zh-CN/README.md b/translations/zh-CN/README.md index d4f9700..f2fe5ac 100644 --- a/translations/zh-CN/README.md +++ b/translations/zh-CN/README.md @@ -518,3 +518,17 @@ $(document).ready(function(){ 当前版本的Chrome，火狐，Safari，歌剧，EDGE和IE11的。 [回目录](#table-of-contents) + + +
+ +## 翻譯 + +* [Español](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/es-ES) +* [Français](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/fr-FR) +* [Magyar](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/hu-HU) +* [Pусский](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/ru-RU) +* [简体中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-CN) +* [繁體中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-TW) + +[回目录](#table-of-contents) diff --git a/translations/zh-TW/README.md b/translations/zh-TW/README.md index 647b033..12030a2 100644 --- a/translations/zh-TW/README.md +++ b/translations/zh-TW/README.md @@ -10,6 +10,7 @@ * [技巧](#技巧) * [瀏覽器支援](#瀏覽器支援) * [翻譯](#翻譯) +* [翻译](#translations) * [貢獻守則](../../CONTRIBUTING.md) @@ -476,3 +477,17 @@ $(document).ready(function() { 現今版本的 Chrome，Firefox，Safari，Opera，Edge 以及 IE11。 [回到目錄](#目錄) + + +
+ +## 翻译 + +* [Español](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/es-ES) +* [Français](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/fr-FR) +* [Magyar](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/hu-HU) +* [Pусский](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/ru-RU) +* [简体中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-CN) +* [繁體中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-TW) + +[回到目錄](#目錄) From e985165a99c0b585c51b171dda790243b7fa51f2 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Thu, 23 Nov 2017 13:47:11 -0500 Subject: [PATCH 096/135] Added tip --- README.md | 14 ++++++++++++++ translations/es-ES/README.md | 13 ++++++++++++- translations/fr-FR/README.md | 17 +++++++++++++++++ translations/hu-HU/README.md | 15 +++++++++++++++ translations/ru-RU/README.md | 17 +++++++++++++++++ 5 files changed, 75 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index cd4a2b9..60f90f0 100644 --- a/README.md +++ b/README.md @@ -15,6 +15,7 @@ A collection of simple tips to help up your jQuery game. ## Tips +1. [Use `noConflict()`](#use-noconflict-method) 1. [Checking If jQuery Loaded](#checking-if-jquery-loaded) 1. [Use `.on()` Binding Instead of `.click()`](#use-on-binding-instead-of-click) 1. [Back to Top Button](#back-to-top-button) @@ -38,6 +39,19 @@ A collection of simple tips to help up your jQuery game. 1. [Disable Right-Click](#disable-right-click) +### Use `noConflict()` + +The `$` alias used by jQuery is also used by other JavaScript libraries. To ensure that jQuery doesn't conflict with the `$` object of different libraries, use the `noConflict()` method at the start of the document: + +```javascript +jQuery.noConflict(); +``` + +Now you'll reference the jQuery object using the `jQuery` variable name instead of `$` (e.g., `jQuery('div p').hide()`). + +[back to table of contents](#table-of-contents) + + ### Checking If jQuery Loaded Before you can do anything with jQuery you first need to make certain it has loaded: diff --git a/translations/es-ES/README.md b/translations/es-ES/README.md index 0e7c9f7..f328be9 100644 --- a/translations/es-ES/README.md +++ b/translations/es-ES/README.md @@ -17,6 +17,7 @@ Una colección de consejos simples para ayudar a su juego jQuery. ## Consejos +1. [Utilizar `noConflict()`](#utilizar-noconflict) 1. [Verificando jQuery Cargado](#verificando-jquery-cargado) 1. [Utilice `.on ()` En lugar de unión `.click ()`](#utilice-on--en-lugar-de-unión-click-) 1. [Volver al botón de inicio](#volver-al-botón-de-inicio) @@ -40,7 +41,17 @@ Una colección de consejos simples para ayudar a su juego jQuery. 1. [Deshabilitar clic derecho](#deshabilitar-clic-derecho) -
+### Utilizar `noConflict()` + +El alias `$` usado por jQuery también lo usan otras bibliotecas de JavaScript. Para garantizar que jQuery no entre en conflicto con el objeto `$` de diferentes bibliotecas, utilice el método `noConflict()` al comienzo del documento: + +```javascript +jQuery.noConflict(); +``` + +Ahora hará referencia al objeto jQuery utilizando el nombre de la variable `jQuery` en lugar de `$` (por ejemplo, `jQuery('div p').hide()`). + +[volver al índice de contenidos](#table-of-contents) ### Verificando jQuery Cargado diff --git a/translations/fr-FR/README.md b/translations/fr-FR/README.md index c516955..b1c2787 100644 --- a/translations/fr-FR/README.md +++ b/translations/fr-FR/README.md @@ -17,6 +17,7 @@ Une collection de conseils simples pour aider votre jeu jQuery. ## Conseils +1. [Utilisez `noConflict()`](#use-noconflict) 1. [Vérification Si jQuery Loaded](#checking-if-jquery-loaded) 1. [Utilisez `.on()` Binding Au lieu de `.click()`](#use-on-binding-instead-of-click) 1. [Haut de la page Bouton](#back-to-top-button) @@ -39,6 +40,22 @@ Une collection de conseils simples pour aider votre jeu jQuery. 1. [Trier Liste des articles par ordre alphabétique](#sort-list-items-alphabetically) 1. [Desactivar Botón Derecho del Ratón](#disable-right-click) + +
+ +### Utilisez `noConflict()` + +L'alias `$` utilisé par jQuery est également utilisé par d'autres bibliothèques JavaScript. Pour vous assurer que jQuery n'est pas en conflit avec l'objet `$` de différentes bibliothèques, utilisez la méthode `noConflict ()` au début du document: + +```javascript +jQuery.noConflict(); +``` + +Vous allez maintenant référencer l'objet jQuery en utilisant le nom de variable `jQuery` au lieu de `$` (par exemple, `jQuery('div p').hide()`). + +[retour à la table des matières](#table-of-contents) + +
### Vérification Si jQuery Loaded diff --git a/translations/hu-HU/README.md b/translations/hu-HU/README.md index d7d4a53..ced0de7 100644 --- a/translations/hu-HU/README.md +++ b/translations/hu-HU/README.md @@ -14,6 +14,7 @@ Egyszerű tippek gyűjteménye, a jQuery-ben való elmélyülésed segítendő. ## Tippek +1. [Használat `noConflict()`](#használat-noconflict) 1. [Betöltött-e a jQuery? - Ellenőrzés](#bet%C3%B6lt%C3%B6tt-e-a-jquery---ellen%C5%91rz%C3%A9s) 1. [`.on()` binding ("kötés") használata `.click()` helyett](#on-binding-k%C3%B6t%C3%A9s-haszn%C3%A1lata-click-helyett) 1. ['Vissza az elejére' gomb](#vissza-az-elej%C3%A9re-gomb) @@ -36,6 +37,20 @@ Egyszerű tippek gyűjteménye, a jQuery-ben való elmélyülésed segítendő. 1. [Listaelemek sorba rendezése ABC szerint](#listaelemek-sorba-rendez%C3%A9se-abc-szerint) 1. [Jobb egérkattintás kikapcsolása](#jobb-eg%C3%A9rkattint%C3%A1s-kikapcsol%C3%A1sa) + +### Használat `noConflict()` + +A jQuery által használt `$` álnevet más JavaScript könyvtárak is használják. Annak érdekében, hogy a jQuery ne ütközzön a különböző könyvtárak `$` objektumával, használja a `noConflict()` metódust a dokumentum elején: + +```javascript +jQuery.noConflict(); +``` + +Most a jQuery objektumra a `jQuery` változónevet a `$` (például `jQuery('div p')hide()`). + +[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k) + + ### Betöltött-e a jQuery? - Ellenőrzés Mielőtt bármihez is kezdhetnél a jQuery-vel, először biztosra kell menned abban, hogy betöltött: diff --git a/translations/ru-RU/README.md b/translations/ru-RU/README.md index 934684c..6762a48 100644 --- a/translations/ru-RU/README.md +++ b/translations/ru-RU/README.md @@ -17,6 +17,7 @@ ## Советы +1. [Используйте `noConflict()`](#use-noconflict) 1. [Проверка готовности jQuery](#checking-if-jquery-loaded) 1. [Используйте `.on()` вместо `.click()`](#use-on-binding-instead-of-click) 1. [Кнопка "вернуться к началу"](#back-to-top-button) @@ -39,6 +40,22 @@ 1. [Сортировка элементов списка по алфавиту](#sort-list-items-alphabetically) 1. [Отключить правую кнопку мыши](#disable-right-click) + +
+ +### Используйте `noConflict()` + +Асимвол `$`, используемый jQuery, также используется другими библиотеками JavaScript. Чтобы гарантировать, что jQuery не конфликтует с объектом `$` из разных библиотек, используйте метод `noConflict()` в начале документа: + +```javascript +jQuery.noConflict(); +``` + +Теперь вы ссылаетесь на объект jQuery, используя имя переменной `jQuery` вместо `$` (например, `jQuery('div p').hide()`). + +[вернуться к оглавлению](#table-of-contents) + +
### Проверка готовности jQuery From ed70d54f26313ac4c2fbf811f2e0f04cc98990bc Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Thu, 23 Nov 2017 13:56:45 -0500 Subject: [PATCH 097/135] Fixed link --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 60f90f0..773f8b9 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,7 @@ A collection of simple tips to help up your jQuery game. ## Tips -1. [Use `noConflict()`](#use-noconflict-method) +1. [Use `noConflict()`](#use-noconflict) 1. [Checking If jQuery Loaded](#checking-if-jquery-loaded) 1. [Use `.on()` Binding Instead of `.click()`](#use-on-binding-instead-of-click) 1. [Back to Top Button](#back-to-top-button) From 2df1f599d6a8f34b27c8ac9b61fef7a070bc15a5 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Thu, 23 Nov 2017 13:57:13 -0500 Subject: [PATCH 098/135] Updated translations --- translations/zh-CN/README.md | 16 ++++++++++++++++ translations/zh-TW/README.md | 15 ++++++++++++++- 2 files changed, 30 insertions(+), 1 deletion(-) diff --git a/translations/zh-CN/README.md b/translations/zh-CN/README.md index f2fe5ac..5ac9ce8 100644 --- a/translations/zh-CN/README.md +++ b/translations/zh-CN/README.md @@ -18,6 +18,7 @@ ## 提示 +1. [使用 `noConflict()`](#use-noconflict) 1. [检查是否加载的jQuery](＃checking-if-jquery-loaded) 1. [使用`.on()`绑定`.click()`代替](#use-on-binding-instead-of-click) 1. [返回顶部按钮](#back-to-top-button) @@ -41,6 +42,21 @@ 1. [禁用右鍵單擊](#disable-right-click) +
+ +### 使用 `noConflict()` + +其他JavaScript庫也使用jQuery使用的`$`別名。 為了確保jQuery不會與不同庫的`$`對象發生衝突，請在文檔的開頭使用`noConflict()`方法： + +```javascript +jQuery.noConflict(); +``` + +現在，您將使用`jQuery`變量名稱而不是`$`來引用jQuery對象（例如，`jQuery('div p').hide()`）。 + +[回目录](#table-of-contents) + +
### 检查如果加载的jQuery diff --git a/translations/zh-TW/README.md b/translations/zh-TW/README.md index 12030a2..bd2a009 100644 --- a/translations/zh-TW/README.md +++ b/translations/zh-TW/README.md @@ -16,6 +16,7 @@ ## 技巧 +1. [使用 `noConflict()`](#使用-noConflict) 1. [檢查 jQuery 是否成功載入](#檢查-jquery-是否成功載入) 1. [使用 `.on()` 做 Binding，而不要使用 `.click()`](#使用-on-做-binding而不要使用-click) 1. [返回最頂端的按鈕](#返回最頂端的按鈕) @@ -39,6 +40,19 @@ 1. [禁用右键单击](#禁用右键单击) +### 使用 `noConflict()` + +其他JavaScript库也使用jQuery使用的`$`别名。 为了确保jQuery不会与不同库的`$`对象发生冲突，请在文档的开头使用`noConflict()`方法： + +```javascript +jQuery.noConflict(); +``` + +现在，您将使用`jQuery`变量名称而不是`$`来引用jQuery对象（例如`jQuery('div p').hide()`）。 + +[回到目錄](#目錄) + + ### 檢查 jQuery 是否成功載入 在你使用 jQuery 做任何事情之前，你應該先確定其是否成功載入： @@ -51,7 +65,6 @@ if (typeof jQuery == 'undefined') { } ``` - [回到目錄](#目錄) From a840bf247b1b3a9d114c058e68d136f044ef1b9a Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Fri, 24 Nov 2017 08:20:48 -0500 Subject: [PATCH 099/135] Fixed links --- translations/zh-CN/README.md | 6 +++--- translations/zh-TW/README.md | 3 +-- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/translations/zh-CN/README.md b/translations/zh-CN/README.md index 5ac9ce8..47ba70f 100644 --- a/translations/zh-CN/README.md +++ b/translations/zh-CN/README.md @@ -9,8 +9,8 @@ ## 目录 -* [温馨提示](＃提示) -* [支持](＃support) +* [温馨提示](#提示) +* [支持](#support) * [贡献指引](../../CONTRIBUTING.md) @@ -19,7 +19,7 @@ ## 提示 1. [使用 `noConflict()`](#use-noconflict) -1. [检查是否加载的jQuery](＃checking-if-jquery-loaded) +1. [检查是否加载的jQuery](#checking-if-jquery-loaded) 1. [使用`.on()`绑定`.click()`代替](#use-on-binding-instead-of-click) 1. [返回顶部按钮](#back-to-top-button) 1. [预先载入图像](#preload-images) diff --git a/translations/zh-TW/README.md b/translations/zh-TW/README.md index bd2a009..46c95b5 100644 --- a/translations/zh-TW/README.md +++ b/translations/zh-TW/README.md @@ -9,14 +9,13 @@ * [技巧](#技巧) * [瀏覽器支援](#瀏覽器支援) -* [翻譯](#翻譯) * [翻译](#translations) * [貢獻守則](../../CONTRIBUTING.md) ## 技巧 -1. [使用 `noConflict()`](#使用-noConflict) +1. [使用 `noConflict()`](#使用-noconflict) 1. [檢查 jQuery 是否成功載入](#檢查-jquery-是否成功載入) 1. [使用 `.on()` 做 Binding，而不要使用 `.click()`](#使用-on-做-binding而不要使用-click) 1. [返回最頂端的按鈕](#返回最頂端的按鈕) From 0ce4a8d7aacb5503d7fd5b1392b0efec5a9a927b Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Mon, 26 Mar 2018 22:26:19 -0400 Subject: [PATCH 100/135] Minor syntax fix --- README.md | 8 ++++---- translations/es-ES/README.md | 8 ++++---- translations/fr-FR/README.md | 8 ++++---- translations/hu-HU/README.md | 8 ++++---- translations/ru-RU/README.md | 8 ++++---- translations/zh-CN/README.md | 8 ++++---- translations/zh-TW/README.md | 8 ++++---- 7 files changed, 28 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index 773f8b9..6fdfb04 100644 --- a/README.md +++ b/README.md @@ -463,8 +463,8 @@ There you go! If you want to disable right-click, you can do it for an entire page... ```javascript -$(document).ready(function() { - $(document).bind('contextmenu', function(e) { +$(document).ready(function () { + $(document).bind('contextmenu', function (e) { return false; }) }) @@ -473,8 +473,8 @@ $(document).ready(function() { ...but you can also do the same for a specific element: ```javascript -$(document).ready(function() { - $('#submit').bind('contextmenu', function(e) { +$(document).ready(function () { + $('#submit').bind('contextmenu', function (e) { return false; }) }) diff --git a/translations/es-ES/README.md b/translations/es-ES/README.md index f328be9..c5f30b0 100644 --- a/translations/es-ES/README.md +++ b/translations/es-ES/README.md @@ -466,8 +466,8 @@ Hay que ir! Si desea desactivar el botón derecho del ratón, puede hacerlo para una página entera... ```javascript -$(document).ready(function() { - $(document).bind('contextmenu', function(e) { +$(document).ready(function () { + $(document).bind('contextmenu', function (e) { return false; }) }) @@ -476,8 +476,8 @@ $(document).ready(function() { ...pero también puede hacer lo mismo para un elemento específico: ```javascript -$(document).ready(function() { - $('#submit').bind('contextmenu', function(e) { +$(document).ready(function () { + $('#submit').bind('contextmenu', function (e) { return false; }) }) diff --git a/translations/fr-FR/README.md b/translations/fr-FR/README.md index b1c2787..27d3df7 100644 --- a/translations/fr-FR/README.md +++ b/translations/fr-FR/README.md @@ -507,8 +507,8 @@ Voilà! Si desea desactivar botón derecho del ratón, se puede hacer por una página entera... ```javascript -$(document).ready(function() { - $(document).bind('contextmenu', function(e) { +$(document).ready(function () { + $(document).bind('contextmenu', function (e) { return false; }) }) @@ -517,8 +517,8 @@ $(document).ready(function() { ...pero se puede hacer aussi la même para un elemento específico: ```javascript -$(document).ready(function() { - $('#submit').bind('contextmenu', function(e) { +$(document).ready(function () { + $('#submit').bind('contextmenu', function (e) { return false; }) }) diff --git a/translations/hu-HU/README.md b/translations/hu-HU/README.md index ced0de7..0de8225 100644 --- a/translations/hu-HU/README.md +++ b/translations/hu-HU/README.md @@ -466,8 +466,8 @@ Meg is volnánk! Ha le szeretnéd tiltani a jobb-klikket, az egész oldalra megteheted... ```javascript -$(document).ready(function() { - $(document).bind('contextmenu', function(e) { +$(document).ready(function () { + $(document).bind('contextmenu', function (e) { return false; }) }) @@ -476,8 +476,8 @@ $(document).ready(function() { ...de akár egy konkrét elemre is: ```javascript -$(document).ready(function() { - $('#submit').bind('contextmenu', function(e) { +$(document).ready(function () { + $('#submit').bind('contextmenu', function (e) { return false; }) }) diff --git a/translations/ru-RU/README.md b/translations/ru-RU/README.md index 6762a48..0d09803 100644 --- a/translations/ru-RU/README.md +++ b/translations/ru-RU/README.md @@ -507,8 +507,8 @@ ul.append(lis); Если вы хотите отключить контекстное меню, вы можете сделать это для всей страницы... ```javascript -$(document).ready(function() { - $(document).bind('contextmenu', function(e) { +$(document).ready(function () { + $(document).bind('contextmenu', function (e) { return false; }) }) @@ -517,8 +517,8 @@ $(document).ready(function() { ...но вы также можете сделать то же самое для конкретного элемента: ```javascript -$(document).ready(function() { - $('#submit').bind('contextmenu', function(e) { +$(document).ready(function () { + $('#submit').bind('contextmenu', function (e) { return false; }) }) diff --git a/translations/zh-CN/README.md b/translations/zh-CN/README.md index 47ba70f..58d4677 100644 --- a/translations/zh-CN/README.md +++ b/translations/zh-CN/README.md @@ -509,8 +509,8 @@ ul.append(lis); 如果要禁用右鍵單擊，您可以對整個頁面進行操作... ```javascript -$(document).ready(function(){ - $(document).bind('contextmenu', function(e){ +$(document).ready(function (){ + $(document).bind('contextmenu', function (e){ return false; }) }) @@ -519,8 +519,8 @@ $(document).ready(function(){ ...但是您也可以為特定元素做同樣的事情： ```javascript -$(document).ready(function(){ - $('#submit').bind('contextmenu', function(e){ +$(document).ready(function (){ + $('#submit').bind('contextmenu', function (e){ return false; }) }) diff --git a/translations/zh-TW/README.md b/translations/zh-TW/README.md index 46c95b5..0e0106e 100644 --- a/translations/zh-TW/README.md +++ b/translations/zh-TW/README.md @@ -464,8 +464,8 @@ ul.append(lis); 如果要禁用右键单击，您可以对整个页面进行操作... ```javascript -$(document).ready(function() { - $(document).bind('contextmenu', function(e) { +$(document).ready(function () { + $(document).bind('contextmenu', function (e) { return false; }) }) @@ -474,8 +474,8 @@ $(document).ready(function() { ...但是您也可以为特定元素做同样的事情： ```javascript -$(document).ready(function() { - $('#submit').bind('contextmenu', function(e) { +$(document).ready(function () { + $('#submit').bind('contextmenu', function (e) { return false; }) }) From 8de9c91e2be9cbc727471a0369342e3c30a566fd Mon Sep 17 00:00:00 2001 From: nunofca <33158346+nunofca@users.noreply.github.com> Date: Thu, 19 Apr 2018 22:48:11 +0100 Subject: [PATCH 101/135] Portuguese version I'm proposing a Portuguese translation of the tips that I just did. I found this project very interesting and wanted to leave my contribution. Nuno --- translations/pt-PT | 504 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 504 insertions(+) create mode 100644 translations/pt-PT diff --git a/translations/pt-PT b/translations/pt-PT new file mode 100644 index 0000000..57dcdd2 --- /dev/null +++ b/translations/pt-PT @@ -0,0 +1,504 @@ +# Conselhos para a jQuery que toda a gente devia saber [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) + +Uma colecção de dicas simples para ajudar-te com a jQuery. + +> Para outras grandes listas aqui visita [@sindresorhus](https://github.com/sindresorhus/)'s lista detalhada de [listas impresionantes](https://github.com/sindresorhus/awesome/). + + +
+ +## Tabela de conteúdo + +* [Dicas](#Dicas) +* [Apoio](#apoio) +* [Traduções](#traduções) +* [Tabelas de contribuições](../../CONTRIBUTING.md) + + +## Conselhos + +1. [Utilizar `noConflict()`](#utilizar-noconflict) +1. [Verifica jQuery Carregado](#verificando-jquery-carregado) +1. [Utiliza `.on ()` No lugar de união `.click ()`](#utiliza-no-lugar-de-união-click-) +1. [Regressar ao inicio](#Regressar-ao-inicio) +1. [Carregar imagem anterior](#caregar-imagem-anterior) +1. [Comprova se as imagem carregaram](#comprova-se-as-imagem-caregaram) +1. [Corrige imagens automáticamente crashada](#corrige-imgem-automáticamente-crashadas) +1. [Publica um formulário com AJAX](#publica-um-formulário-com-ajax) +1. [Alterna classes na biblioteca](##alterna-classes-na-biblioteca) +1. [Desactiva campos de actividade](#desactiva-campos-de-actividade) +1. [Retém a carga de Enlaces](#Retém-a-carga-de-enlaces) +1. [De caché de jQuery seletores](#de-caché-de-jquery-seletores) +1. [De alavanca de fundido / Slide](#de-alavanca-de-fundido--slide) +1. [Acordeão simples](#acordeão-simples) +1. [Faz dois Divs com a mesma altura](#faz-dois-divs-com-a-mesma-altura) +1. [Abre enlaces externos numa nova tab / janela](#abre-enlaces-externos-numa-nueva-tab--janela) +1. [Buscar elemento Por Texto](#buscar-elemento-por-texto) +1. [Visibilidade link de Cambio](#visibilidad-link-de-cambio) +1. [Controlo de erros durante a chamada da Ajax](#controlo-de-erros-durante-a-chamada-da-ajax) +1. [Chamadas Plugin em Cadeia](#chamadas-plugin-em-cadeia) +1. [Ordenar a lista de elementos alfabéticamente](#ordenar-a-lista-de-elementos-alfabéticamente) +1. [Desativar o botão direito](#desativar-o-botão-direito) + + +### Utilizar `noConflict()` + +O símbolo `$` usado pela jQuery também usa outras bibliotecas de JavaScript. Para garantir que a jQuery não entre em conflito com o objeto `$` de diferentes bibliotecas, utiliza o método `noConflict()` ao iniciar o documento: + +```javascript +jQuery.noConflict(); +``` + +Agora haverá referência ao objeto jQuery utilizando o nome da variavel `jQuery` no lugar de `$` (por exemplo, `jQuery('div p').hide()`). + +[Regressar ao índice de conteudos](#table-of-contents) + + +### Verificando a jQuery Carrgada + +Antes de fazeres alguma coisa com jQuery primeiro tens que asegurar-te de que esta carregado: + +```javascript +if (typeof jQuery == 'undefined') { + console.log('jQuery hasn\'t loaded'); +} else { + console.log('jQuery has loaded'); +} +``` + +Agora que estás fora... + +[Regressar ao índice de conteudos](#table-of-contents) + + +### Utiliza `.on ()` No lugar de uniao `.click ()` + +.en O uso de `()` da-lhe varias vantagens sobre o uso de `.click ()`, tais como a capacidade de agrupar varios eventos... + +```javascript +.on ('click tap hover') +``` + +...A uniao aplica-se aos elementos criados de forma dinámica, assim (nao ha necesidade de obrigar manualmente cada elemento adicionados dinámicamente a um elemento DOM) ... + +...E a posibilidade de configurar un espaco de nomes: + +```javascript +.on('click.menuOpening') +``` + +Os espacos de nomes dao te o poder para desenlacar um evento específico (por exemplo,`.off('click.menuOpening')`). + +[Regressar ao índice de conteudos](#table-of-contents) + + +### Regressar a botao de inicio + +No que toca ao uso da `animate` e métodos `scrollTop` na jQuery nao ee necesario um plugin para criar uma animaciao simple-scroll-a arriba: + +```javascript +// Back to top +$('.container').on('click', '.back-to-top', function (e) { + e.preventDefault(); + $('html, body').animate({scrollTop: 0}, 800); +}); +``` + +```html + +Back to top +``` + +A mudancao dos cambios de valor `scrollTop` onde se quer que a barra de deslocamento se aterre. Na realidade, tudo o está a fazer e animar o corpo do documento ao durante 800 milisegundos ate que se desloque a parte superior do documento. + +**Nota:** Procura por algum [comportamento incorrecto](https://github.com/jquery/api.jquery.com/issues/417) com `scrollTop`. + +[Regressar ao indice de conteudos](#table-of-contents) + + +### Carregar preview de imágens + +Se a tua página web utiliza una grande quantidade de imágens que nao sao visiveis inicialmente (por exemplo, em visao helicoptero) faz sentido para prever-las: + +```javascript +$.preloadImages = function () { + for (var i = 0; i < arguments.length; i++) { + $('').attr('src', arguments[i]); + } +}; + +$.preloadImages('img/hover-on.png', 'img/hover-off.png'); +``` + +[Regressar ao índice de conteudos](#table-of-contents) + + +### Comprovar Se as imagens carregaram + +As vezes pode ser preciso comprobar se as imagens carregaram completamente a fim de continuar com as sequencias de comandos: + +```javascript +$('img').on('load', function () { + console.log('image load successful'); +}); +``` + +Tambiem podes comprovar se uma imagen em particular carregou-se durante a troca da etiqueta `` por um ID ou classe. + +[Regressar ao índice de conteudos](#table-of-contents) + + +### Corrigir imágens automáticamente crashadas + +Se por acaso encontrares casos de imagens crashadas no teu site a troca de uma por outra pode seres uma chatice. Este simples pedaco de código pode poupar muitas dores de cabeca: + +```javascript +$('img').on('error', function () { + if(!$(this).hasClass('broken-image')) { + $(this).prop('src', 'img/broken.png').addClass('broken-image'); + } +}); +``` + +Alternativamente, se desejas ocultar simplemente imagens crashadas, este fragmento encarregará-se disso: + +```javascript +$('img').on('error', function () { + $(this).hide(); +}); +``` + +[Regressar ao índice de conteudos](#table-of-contents) + + +### Publicar um formulario com AJAX + +Métodos jQuery AJAX sao uma forma comum para solicitar texto, HTML, XML, JSON o. Se desejas enviar um formulario através da AJAX pode-se recolher os logins do utilizador através do método `val()`: + +```javascript +$.post('sign_up.php', { + user_name: $('input[name=user_name]').val(), + email: $('input[name=email]').val(), + password: $('input[name=password]').val(), +}); +``` + +Porem, todas estas chamadas `val()` costumam ser complicadas. Uma melhor maneira de recolher os logins do utilizador sera ao utilizar a funcao `serialize()` que recolhe as entradas do utilizador em cadeia: + +```javascript +$.post('sign_up', $('#sign-up-form').serialize()); +``` + +[Regressar ao índice de conteudos](#table-of-contents) + + +### Alternar classes na libertacao + +Digamos que queres trocar o visual de um elemento assim actualizas a página quando um utilizador se desloca sobre ele. Tu podes juntar uma classe ao seu elemento quando o utilizador está a flutuar; quando o utilizador deixa a flutuar a classe e eliminada: + +```javascript +$('.btn').on('hover', function () { + $(this).addClass('hover'); +}, function () { + $(this).removeClass('hover'); +}); +``` + +Só tens que adicionar o CSS necessario. Se desejas uma forma mais simples, utiliza o método `toggleClass`: + +```javascript +$('.btn').hover(function () { + $(this).toggleClass('hover'); +}); +``` + +**Nota:** CSS pode ser uma solucao mais rápida neste caso, mas vale a pena saber isto. + +[Regressar ao índice de conteudos](#table-of-contents) + + +### Desactivar campos de entrada + +As vezes e possivel pretender que o botao de envio de um formulario ou uma das suas entradas de texto esteja desativados ate que o utilizador realize uma acción determinada (por exemplo, controlo da "Ja leram terminais" janela de verificacao). Adicionar o atributo `disabled` a entrada para que se possa activar quando se quer: + +```javascript +$('input[type="submit"]').prop('disabled', true); +``` + +Tudo o que necessitas fazer e executar o método `prop` outra vez na entrada, e depois establecer o valor de `disabled` para `false`: + +```javascript +$('input[type="submit"]').prop('disabled', false); +``` + +[Regressar ao índice de conteudos](#table-of-contents) + + +### Deter a carga de Enlaces + +As vezes nao queres vínculos para ir a uma determinada página web, nem voltar a carregar a página; e posivele que queiras que se faca outra coisa, como abrir outro script. Isto vai fazer o truque de prevenir a accao por defeito: + +```javascript +$('a.no-link').on('click', function (e) { + e.preventDefault(); +}); +``` + +[Regressar ao índice de conteudos](#table-of-contents) + + +### De caché de jQuery selectores + +Pense em quantas vezes se escreve o mesmo selector vezes sem conta em qualquer projecto. Cada selector `$('.element')` tem que buscar em todo DOM cada vez, independentemente do seu dito selector havia executado anteriormente. No lugar deste, execute o selector de uma vez e armazena os resultados em uma so variavel: + +```javascript +var blocks = $('#blocks').find('li'); +``` + +Agora pode-se utilizar a variavel `blocks` sempre que quiseres sem precisares de buscar el DOM em cada ocasiao: + +```javascript +$('#hideBlocks').on('click', function () { + blocks.fadeOut(); +}); + +$('#showBlocks').on('click', function () { + blocks.fadeIn(); +}); +``` + +O armaenamento em caché selectores de jQuery sao uma ganancia de rendimiento fácil. + +[Regressar ao índice de conteudos](#table-of-contents) + + +### Alavanca de fundo / Slide + +Deslizante e a descoloracao sao algo que usamos um monte de vezes em animacoes com jQuery. E possivel que só queiram mostrar um elemento quando um utilizador clica em algo, o que faz com que os `fadeIn` e métodos de `slideDown` aperfeicoem. Mas se deseja que o elemento apareca na primera posiciao e logo desaparecem no segundo este vai a funcionar muito bem: + +```javascript +// Fade +$('.btn').on('click', function () { + $('.element').fadeToggle('slow'); +}); + +// Toggle +$('.btn').on('click', function () { + $('.element').slideToggle('slow'); +}); +``` + +[Regressar ao índice de conteudos](#table-of-contents) + + +### Acordeao simples + +Este e um método simples para um acordeao rápido: + +```javascript +// Close all panels +$('#accordion').find('.content').hide(); + +// Accordion +$('#accordion').find('.accordion-header').on('click', function () { + var next = $(this).next(); + next.slideToggle('fast'); + $('.content').not(next).slideUp('fast'); + return false; +}); +``` + +Diante a adicao deste script, a única coisa que tens que fazer na tua página web e o HTML necessario para ir buscar este trabalho. + +[Regressar ao índice de conteudos](#table-of-contents) + + +### Faz dois Divs na mesma altura + +As vezes, vais precisar de dois divs terem a mesma altura nao importa o conteudo: + +```javascript +$('.div').css('min-height', $('.main-div').height()); +``` + +Este exmplo establece a `min-height` característica que significa que pode ser maior que o div principal mas nunca mais pequena. Sem obstaculos, um método mais flexible seria um conjunto de elementos e ajustar a altura com a altura do elemento mais alto: + +```javascript +var $columns = $('.column'); +var height = 0; +$columns.each(function () { + if ($(this).height() > height) { + height = $(this).height(); + } +}); +$columns.height(height); +``` + +Se deseja _todas_ columnas tenham a mesma altura: + +```javascript +var $rows = $('.same-height-columns'); +$rows.each(function () { + $(this).find('.column').height($(this).height()); +}); +``` + +**Nota:** Isto pode fazer se de varias maneiras [em CSS](http://codepen.io/AllThingsSmitty/pen/KMPqoO) mas dependendo das tuas necessidades, saber como fazer isto em jQuery vale a pena. + +[Regressar ao índice de conteudos](#table-of-contents) + + +### Abrir enlaces externos numa nova tab / janela + +Abrir enlaces externos numa nova tab ou janela do browser e garantir enlaces na mesma origem aberta na mesma tab ou janela: + +```javascript +$('a[href^="http"]').attr('target', '_blank'); +$('a[href^="//"]').attr('target', '_blank'); +$('a[href^="' + window.location.origin + '"]').attr('target', '_self'); +``` + +**Nota:** `window.location.origin` nao funciona no IE10. [Este fix](http://tosbourn.com/a-fix-for-window-location-origin-in-internet-explorer/) ocupa-se deste problema. + +[Regressar ao índice de conteudos](#table-of-contents) + + +### Buscar elemento Por Texto +Tendo em conta o uso do selector `contains()` em jQuery pode-se encontrar texto contendo um elemento. Se nao existe texto, esse elemento ocultará-se: + +```javascript +var search = $('#search').val(); +$('div:not(:contains("' + search + '"))').hide(); +``` + +[Regressar ao índice de conteudos](#table-of-contents) + + +### Visibilidade link de Cambio + +Gatillo JavaScript quando o utilizador ja nao se concentra numa tab, ou volta a centrar-se numa tab: + +```javascript +$(document).on('visibilitychange', function (e) { + if (e.target.visibilityState === 'visible') { + console.log('Tab is now in view!'); + } else if (e.target.visibilityState === 'hidden') { + console.log('Tab is now hidden!'); + } +}); +``` + +[Regressar ao índice de conteudos](#table-of-contents) + + +### Controlo de erros de chamada Ajax + +Quando uma chamada Ajax devolve um erro 404 ou 500 o gestor de erros ira abrir. Se nao se define o controlador, outro código jQuery podera nao funcionar. Definir um controlador global de erros de Ajax: + +```javascript +$(document).on('ajaxError', function (e, xhr, settings, error) { + console.log(error); +}); +``` + +[Regressar ao índice de conteudos](#table-of-contents) + + +### Chamadas Plugin Cadeia + +jQuery permite el "encadeamento" plug-in de chamadas a métodos para mitigar o processo de consulta em repetidas ocasioes o DOM e a creacao de varios objetos jQuery. Digamos que o seguinte fragmento representa as suas chamadas a métodos plugin: + +```javascript +$('#elem').show(); +$('#elem').html('bla'); +$('#elem').otherStuff(); +``` + +Isto poderia melhorar significativamente o uso de encadeamento: + +```javascript +$('#elem') + .show() + .html('bla') + .otherStuff(); +``` + +Uma alternativa e armazenar em caché o elemento numa variavel (com o prefixo `$`): + +```javascript +var $elem = $('#elem'); +$elem.hide(); +$elem.html('bla'); +$elem.otherStuff(); +``` + +Ambos os métodos [armazenamento em caché](#cache-jquery-selectors) e o encadeamento sao as melhores prácticas que tornal o código curto e mais rápido. + +[Regressar ao índice de conteudos](#table-of-contents) + + +### Ordenar a lista de elementos alfabéticamente + +Digamos que tu terminas com demasiados elementos numa lista. Talvez o conteudo e produzido por um CMS e desejas ordenar por ordem alfabética: + +```javascript +var ul = $('#list'), +lis = $('li', ul).get(); + +lis.sort(function (a, b) { + return ($(a).text().toUpperCase() < $(b).text().toUpperCase()) ? -1 : 1; +}); + +ul.append(lis); +``` + +Tem que ir! + +[Regressar ao índice de conteudos](#table-of-contents) + + +
+ + +### Desactivar o click direito + +Se desejas desactivar o botao direito do rato, podes fazer-lo para uma página inteira... + +```javascript +$(document).ready(function () { + $(document).bind('contextmenu', function (e) { + return false; + }) +}) +``` + +...mas também podes fazer o mesmo para um elemento específico: + +```javascript +$(document).ready(function () { + $('#submit').bind('contextmenu', function (e) { + return false; + }) +}) +``` + +[Regressar ao índice de conteudos](#table-of-contents) + + +## Apoio + +As versoes actuais de Chrome, Firefox, Safari, Opera, Edge e EI11. + +[Regressar ao índice de conteudos](#table-of-contents) + + +## Traducoes + +* [Español](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/es-ES) +* [Français](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/fr-FR) +* [Magyar](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/hu-HU) +* [Pусский](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/ru-RU) +* [简体中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-CN) +* [繁體中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-TW) + +[volver al índice de contenidos](#table-of-contents) From 2b9546579a27dbb9bf9fca63b6b4468caf5a6bc7 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Mon, 7 May 2018 09:04:37 -0400 Subject: [PATCH 102/135] Added Portuguese folder --- translations/{pt-PT => pt-PT/README.md} | 13 ------------- 1 file changed, 13 deletions(-) rename translations/{pt-PT => pt-PT/README.md} (95%) diff --git a/translations/pt-PT b/translations/pt-PT/README.md similarity index 95% rename from translations/pt-PT rename to translations/pt-PT/README.md index 57dcdd2..bf0d888 100644 --- a/translations/pt-PT +++ b/translations/pt-PT/README.md @@ -11,7 +11,6 @@ Uma colecção de dicas simples para ajudar-te com a jQuery. * [Dicas](#Dicas) * [Apoio](#apoio) -* [Traduções](#traduções) * [Tabelas de contribuições](../../CONTRIBUTING.md) @@ -490,15 +489,3 @@ $(document).ready(function () { As versoes actuais de Chrome, Firefox, Safari, Opera, Edge e EI11. [Regressar ao índice de conteudos](#table-of-contents) - - -## Traducoes - -* [Español](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/es-ES) -* [Français](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/fr-FR) -* [Magyar](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/hu-HU) -* [Pусский](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/ru-RU) -* [简体中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-CN) -* [繁體中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-TW) - -[volver al índice de contenidos](#table-of-contents) From c8d08028dc8bbda2a890201d9f3b9030f260345e Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Mon, 7 May 2018 09:09:07 -0400 Subject: [PATCH 103/135] Updated README --- translations/es-ES/README.md | 13 ------------- translations/fr-FR/README.md | 13 ------------- translations/hu-HU/README.md | 13 ------------- translations/pt-PT/README.md | 2 +- translations/ru-RU/README.md | 15 --------------- translations/zh-CN/README.md | 14 -------------- translations/zh-TW/README.md | 15 --------------- 7 files changed, 1 insertion(+), 84 deletions(-) diff --git a/translations/es-ES/README.md b/translations/es-ES/README.md index c5f30b0..7e3ccff 100644 --- a/translations/es-ES/README.md +++ b/translations/es-ES/README.md @@ -11,7 +11,6 @@ Una colección de consejos simples para ayudar a su juego jQuery. * [Tips](#consejos) * [Apoyo](#apoyo) -* [Traducciones](#traducciones) * [Pautas de contribución](../../CONTRIBUTING.md) @@ -491,15 +490,3 @@ $(document).ready(function () { Las versiones actuales de Chrome, Firefox, Safari, Opera, Edge y EI11. [volver al índice de contenidos](#table-of-contents) - - -## Traducciones - -* [Español](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/es-ES) -* [Français](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/fr-FR) -* [Magyar](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/hu-HU) -* [Pусский](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/ru-RU) -* [简体中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-CN) -* [繁體中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-TW) - -[volver al índice de contenidos](#table-of-contents) diff --git a/translations/fr-FR/README.md b/translations/fr-FR/README.md index 27d3df7..a6aed81 100644 --- a/translations/fr-FR/README.md +++ b/translations/fr-FR/README.md @@ -11,7 +11,6 @@ Une collection de conseils simples pour aider votre jeu jQuery. * [Conseils](#conseils) * [Soutien](#soutien) -* [Traductions](#traductions) * [Lignes directrices des contributions](../../CONTRIBUTING.md) @@ -532,15 +531,3 @@ $(document).ready(function () { Les versions actuelles de Chrome, Firefox, Safari, Opera, Edge, et IE11. [retour à la table des matières](#table-of-contents) - - -## Traductions - -* [Español](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/es-ES) -* [Français](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/fr-FR) -* [Magyar](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/hu-HU) -* [Pусский](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/ru-RU) -* [简体中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-CN) -* [繁體中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-TW) - -[retour à la table des matières](#table-of-contents) diff --git a/translations/hu-HU/README.md b/translations/hu-HU/README.md index 0de8225..ea6def7 100644 --- a/translations/hu-HU/README.md +++ b/translations/hu-HU/README.md @@ -8,7 +8,6 @@ Egyszerű tippek gyűjteménye, a jQuery-ben való elmélyülésed segítendő. * [Tippek](#tippek) * [Támogatás](#t%C3%A1mogat%C3%A1s) -* [További fordítások](#tov%C3%A1bbi-ford%C3%ADt%C3%A1sok) * [Közreműködési útmutató (angolul)](../../CONTRIBUTING.md) @@ -493,15 +492,3 @@ $(document).ready(function () { A Chrome, Firefox, Safari, Opera, Edge és IE11 böngészők jelenlegi verziói. [vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k) - - -## További fordítások - -* [Español](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/es-ES) -* [Français](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/fr-FR) -* [Magyar](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/hu-HU) -* [Pусский](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/ru-RU) -* [简体中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-CN) -* [繁體中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-TW) - -[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k) diff --git a/translations/pt-PT/README.md b/translations/pt-PT/README.md index bf0d888..b96f4e4 100644 --- a/translations/pt-PT/README.md +++ b/translations/pt-PT/README.md @@ -9,7 +9,7 @@ Uma colecção de dicas simples para ajudar-te com a jQuery. ## Tabela de conteúdo -* [Dicas](#Dicas) +* [Conselhos](#conselhos) * [Apoio](#apoio) * [Tabelas de contribuições](../../CONTRIBUTING.md) diff --git a/translations/ru-RU/README.md b/translations/ru-RU/README.md index 0d09803..0954c86 100644 --- a/translations/ru-RU/README.md +++ b/translations/ru-RU/README.md @@ -11,7 +11,6 @@ * [Советы](#Советы) * [Поддержка](#Поддержка) -* [Переводы](#translations) * [Как сделать вклад](../../CONTRIBUTING.md) @@ -532,17 +531,3 @@ $(document).ready(function () { Текущие версии Chrome, Firefox, Safari, Opera, Edge, и IE11. [вернуться к оглавлению](#table-of-contents) - - -
- -## Переводы - -* [Español](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/es-ES) -* [Français](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/fr-FR) -* [Magyar](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/hu-HU) -* [Pусский](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/ru-RU) -* [简体中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-CN) -* [繁體中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-TW) - -[вернуться к оглавлению](#table-of-contents) diff --git a/translations/zh-CN/README.md b/translations/zh-CN/README.md index 58d4677..f2faf3b 100644 --- a/translations/zh-CN/README.md +++ b/translations/zh-CN/README.md @@ -534,17 +534,3 @@ $(document).ready(function (){ 当前版本的Chrome，火狐，Safari，歌剧，EDGE和IE11的。 [回目录](#table-of-contents) - - -
- -## 翻譯 - -* [Español](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/es-ES) -* [Français](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/fr-FR) -* [Magyar](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/hu-HU) -* [Pусский](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/ru-RU) -* [简体中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-CN) -* [繁體中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-TW) - -[回目录](#table-of-contents) diff --git a/translations/zh-TW/README.md b/translations/zh-TW/README.md index 0e0106e..f6b6246 100644 --- a/translations/zh-TW/README.md +++ b/translations/zh-TW/README.md @@ -9,7 +9,6 @@ * [技巧](#技巧) * [瀏覽器支援](#瀏覽器支援) -* [翻译](#translations) * [貢獻守則](../../CONTRIBUTING.md) @@ -489,17 +488,3 @@ $(document).ready(function () { 現今版本的 Chrome，Firefox，Safari，Opera，Edge 以及 IE11。 [回到目錄](#目錄) - - -
- -## 翻译 - -* [Español](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/es-ES) -* [Français](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/fr-FR) -* [Magyar](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/hu-HU) -* [Pусский](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/ru-RU) -* [简体中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-CN) -* [繁體中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-TW) - -[回到目錄](#目錄) From bdf079213883a5a1858e6cdebed1322b17e1e02a Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Mon, 7 May 2018 22:21:49 -0400 Subject: [PATCH 104/135] Fixed links --- translations/pt-PT/README.md | 38 ++++++++++++++++++------------------ 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/translations/pt-PT/README.md b/translations/pt-PT/README.md index b96f4e4..6454475 100644 --- a/translations/pt-PT/README.md +++ b/translations/pt-PT/README.md @@ -17,27 +17,27 @@ Uma colecção de dicas simples para ajudar-te com a jQuery. ## Conselhos 1. [Utilizar `noConflict()`](#utilizar-noconflict) -1. [Verifica jQuery Carregado](#verificando-jquery-carregado) -1. [Utiliza `.on ()` No lugar de união `.click ()`](#utiliza-no-lugar-de-união-click-) -1. [Regressar ao inicio](#Regressar-ao-inicio) -1. [Carregar imagem anterior](#caregar-imagem-anterior) -1. [Comprova se as imagem carregaram](#comprova-se-as-imagem-caregaram) -1. [Corrige imagens automáticamente crashada](#corrige-imgem-automáticamente-crashadas) -1. [Publica um formulário com AJAX](#publica-um-formulário-com-ajax) -1. [Alterna classes na biblioteca](##alterna-classes-na-biblioteca) -1. [Desactiva campos de actividade](#desactiva-campos-de-actividade) -1. [Retém a carga de Enlaces](#Retém-a-carga-de-enlaces) -1. [De caché de jQuery seletores](#de-caché-de-jquery-seletores) -1. [De alavanca de fundido / Slide](#de-alavanca-de-fundido--slide) -1. [Acordeão simples](#acordeão-simples) -1. [Faz dois Divs com a mesma altura](#faz-dois-divs-com-a-mesma-altura) -1. [Abre enlaces externos numa nova tab / janela](#abre-enlaces-externos-numa-nueva-tab--janela) +1. [Verificando a jQuery Carrgada](#verificando-a-jquery-carrgada) +1. [Utiliza `.on()` No lugar de uniao `.click()`](#utiliza-on--no-lugar-de-uniao-click-) +1. [Regressar a botao de inicio](#regressar-a-botao-de-inicio) +1. [Carregar preview de imágens](#carregar-preview-de-imágens) +1. [Comprovar Se as imagens carregaram](#comprovar-se-as-imagens-carregaram) +1. [Corrigir imágens automáticamente crashadas](#corrigir-imágens-automáticamente-crashadas) +1. [Publicar um formulario com AJAX](#publicar-um-formulario-com-ajax) +1. [Alternar classes na libertacao](#alternar-classes-na-libertacao) +1. [Desactivar campos de entrada](#desactivar-campos-de-entrada) +1. [Deter a carga de Enlaces](#deter-a-carga-de-enlaces) +1. [De caché de jQuery selectores](#de-caché-de-jquery-selectores) +1. [Alavanca de fundo / Slide](#alavanca-de-fundo--slide) +1. [Acordeao simples](#acordeao-simples) +1. [Faz dois Divs na mesma altura](#faz-dois-divs-na-mesma-altura) +1. [Abrir enlaces externos numa nova tab / janela](#abrir-enlaces-externos-numa-nova-tab--janela) 1. [Buscar elemento Por Texto](#buscar-elemento-por-texto) -1. [Visibilidade link de Cambio](#visibilidad-link-de-cambio) -1. [Controlo de erros durante a chamada da Ajax](#controlo-de-erros-durante-a-chamada-da-ajax) -1. [Chamadas Plugin em Cadeia](#chamadas-plugin-em-cadeia) +1. [Visibilidade link de Cambio](#visibilidade-link-de-cambio) +1. [Controlo de erros de chamada Ajax](#controlo-de-erros-de-chamada-ajax) +1. [Chamadas Plugin Cadeia](#chamadas-plugin-cadeia) 1. [Ordenar a lista de elementos alfabéticamente](#ordenar-a-lista-de-elementos-alfabéticamente) -1. [Desativar o botão direito](#desativar-o-botão-direito) +1. [Desactivar o click direito](#desactivar-o-click-direito) ### Utilizar `noConflict()` From 71f625ed293701508f45e7560b6766b0e336528a Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Wed, 9 May 2018 20:04:06 -0400 Subject: [PATCH 105/135] Using friendlier language --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 6fdfb04..59cecdc 100644 --- a/README.md +++ b/README.md @@ -160,7 +160,7 @@ $('img').on('error', function () { }); ``` -Alternatively, if you wish to simply hide broken images this snippet will take care of that for: +Alternatively, if you wish to hide broken images this snippet will take care of that for: ```javascript $('img').on('error', function () { @@ -183,7 +183,7 @@ $.post('sign_up.php', { }); ``` -However, all of those `val()` calls are expensive. A better way of collecting the user inputs is using the `serialize()` function which collects the user inputs as a string: +But, all of those `val()` calls are expensive. A better way of collecting the user inputs is using the `serialize()` function which collects the user inputs as a string: ```javascript $.post('sign_up', $('#sign-up-form').serialize()); @@ -204,7 +204,7 @@ $('.btn').on('hover', function () { }); ``` -You just need to add the necessary CSS. If you want an even _simpler_ way use the `toggleClass` method: +You need to add the necessary CSS. If you want an even _simpler_ way use the `toggleClass` method: ```javascript $('.btn').on('hover', function () { @@ -267,14 +267,14 @@ $('#showBlocks').on('click', function () { }); ``` -Caching jQuery selectors are an easy performance gain. +Caching jQuery selectors is a good performance gain. [back to table of contents](#table-of-contents) ### Toggle Fade/Slide -Sliding and fading are something we use plenty in our animations with jQuery. You might just want to show an element when a user clicks something, which makes the `fadeIn` and `slideDown` methods perfect. But if you want that element to appear on the first click and then disappear on the second this will work just fine: +Sliding and fading are something we use plenty in our animations with jQuery. You might want to show an element when a user clicks something, which makes the `fadeIn` and `slideDown` methods perfect. But if you want that element to appear on the first click and then disappear on the second this will work fine: ```javascript // Fade From c4486322b829fae7b15af72b212e2db10e36f2f7 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Mon, 14 May 2018 16:07:08 -0400 Subject: [PATCH 106/135] Expanded tip --- README.md | 7 ++++++- translations/es-ES/README.md | 6 +++++- translations/fr-FR/README.md | 6 +++++- translations/hu-HU/README.md | 6 +++++- translations/pt-PT/README.md | 6 +++++- translations/ru-RU/README.md | 6 +++++- translations/zh-CN/README.md | 6 +++++- translations/zh-TW/README.md | 6 +++++- 8 files changed, 41 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 59cecdc..4a8afee 100644 --- a/README.md +++ b/README.md @@ -47,7 +47,11 @@ The `$` alias used by jQuery is also used by other JavaScript libraries. To ensu jQuery.noConflict(); ``` -Now you'll reference the jQuery object using the `jQuery` variable name instead of `$` (e.g., `jQuery('div p').hide()`). +Now you'll reference the jQuery object using the `jQuery` variable name instead of `$` (e.g., `jQuery('div p').hide()`). If you have multiple versions of jQuery on the same page, you can use `noConflict()` to set an alias to a specific version: + +```javascript +let $x = jQuery.noConflict(); +``` [back to table of contents](#table-of-contents) @@ -495,6 +499,7 @@ Current versions of Chrome, Firefox, Safari, Opera, Edge, and IE11. * [Español](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/es-ES) * [Français](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/fr-FR) * [Magyar](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/hu-HU) +* [Português do Europe](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/pt-PT) * [Pусский](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/ru-RU) * [简体中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-CN) * [繁體中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-TW) diff --git a/translations/es-ES/README.md b/translations/es-ES/README.md index 7e3ccff..bf6ea19 100644 --- a/translations/es-ES/README.md +++ b/translations/es-ES/README.md @@ -48,7 +48,11 @@ El alias `$` usado por jQuery también lo usan otras bibliotecas de JavaScript. jQuery.noConflict(); ``` -Ahora hará referencia al objeto jQuery utilizando el nombre de la variable `jQuery` en lugar de `$` (por ejemplo, `jQuery('div p').hide()`). +Ahora hará referencia al objeto jQuery utilizando el nombre de la variable `jQuery` en lugar de `$` (por ejemplo, `jQuery('div p').hide()`). Si tiene varias versiones de jQuery en la misma página, puede usar `noConflict ()` para establecer un alias para una versión específica: + +```javascript +let $x = jQuery.noConflict(); +``` [volver al índice de contenidos](#table-of-contents) diff --git a/translations/fr-FR/README.md b/translations/fr-FR/README.md index a6aed81..c3a69e7 100644 --- a/translations/fr-FR/README.md +++ b/translations/fr-FR/README.md @@ -50,7 +50,11 @@ L'alias `$` utilisé par jQuery est également utilisé par d'autres bibliothèq jQuery.noConflict(); ``` -Vous allez maintenant référencer l'objet jQuery en utilisant le nom de variable `jQuery` au lieu de `$` (par exemple, `jQuery('div p').hide()`). +Vous allez maintenant référencer l'objet jQuery en utilisant le nom de variable `jQuery` au lieu de `$` (par exemple, `jQuery('div p').hide()`). Si vous avez plusieurs versions de jQuery sur la même page, vous pouvez utiliser `noConflict ()` pour définir un alias pour une version spécifique: + +```javascript +let $x = jQuery.noConflict(); +``` [retour à la table des matières](#table-of-contents) diff --git a/translations/hu-HU/README.md b/translations/hu-HU/README.md index ea6def7..0d2d40d 100644 --- a/translations/hu-HU/README.md +++ b/translations/hu-HU/README.md @@ -45,7 +45,11 @@ A jQuery által használt `$` álnevet más JavaScript könyvtárak is használj jQuery.noConflict(); ``` -Most a jQuery objektumra a `jQuery` változónevet a `$` (például `jQuery('div p')hide()`). +Most a jQuery objektumra a `jQuery` változónevet a `$` (például `jQuery('div p')hide()`). Ha a jQuery több verziója ugyanazon az oldalon található, akkor a `noConflict ()` paranccsal adhat meg egy álnevet egy adott verzióhoz: + +```javascript +let $x = jQuery.noConflict(); +``` [vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k) diff --git a/translations/pt-PT/README.md b/translations/pt-PT/README.md index 6454475..4c761a8 100644 --- a/translations/pt-PT/README.md +++ b/translations/pt-PT/README.md @@ -48,7 +48,11 @@ O símbolo `$` usado pela jQuery também usa outras bibliotecas de JavaScript. jQuery.noConflict(); ``` -Agora haverá referência ao objeto jQuery utilizando o nome da variavel `jQuery` no lugar de `$` (por exemplo, `jQuery('div p').hide()`). +Agora haverá referência ao objeto jQuery utilizando o nome da variavel `jQuery` no lugar de `$` (por exemplo, `jQuery('div p').hide()`). Se você tem várias versões do jQuery na mesma página, você pode usar o `noConflict ()` para definir um alias para uma versão específica: + +```javascript +let $x = jQuery.noConflict(); +``` [Regressar ao índice de conteudos](#table-of-contents) diff --git a/translations/ru-RU/README.md b/translations/ru-RU/README.md index 0954c86..b3ea663 100644 --- a/translations/ru-RU/README.md +++ b/translations/ru-RU/README.md @@ -50,7 +50,11 @@ jQuery.noConflict(); ``` -Теперь вы ссылаетесь на объект jQuery, используя имя переменной `jQuery` вместо `$` (например, `jQuery('div p').hide()`). +Теперь вы ссылаетесь на объект jQuery, используя имя переменной `jQuery` вместо `$` (например, `jQuery('div p').hide()`). Если у вас несколько версий jQuery на одной странице, вы можете использовать `noConflict ()` для установки псевдонима для определенной версии: + +```javascript +let $x = jQuery.noConflict(); +``` [вернуться к оглавлению](#table-of-contents) diff --git a/translations/zh-CN/README.md b/translations/zh-CN/README.md index f2faf3b..9647544 100644 --- a/translations/zh-CN/README.md +++ b/translations/zh-CN/README.md @@ -52,7 +52,11 @@ jQuery.noConflict(); ``` -現在，您將使用`jQuery`變量名稱而不是`$`來引用jQuery對象（例如，`jQuery('div p').hide()`）。 +現在，您將使用`jQuery`變量名稱而不是`$`來引用jQuery對象（例如，`jQuery('div p').hide()`）。如果你在同一頁面上有多個jQuery版本，你可以使用`noConflict（）`來設置一個特定版本的別名： + +```javascript +let $x = jQuery.noConflict(); +``` [回目录](#table-of-contents) diff --git a/translations/zh-TW/README.md b/translations/zh-TW/README.md index f6b6246..be538ca 100644 --- a/translations/zh-TW/README.md +++ b/translations/zh-TW/README.md @@ -46,7 +46,11 @@ jQuery.noConflict(); ``` -现在，您将使用`jQuery`变量名称而不是`$`来引用jQuery对象（例如`jQuery('div p').hide()`）。 +现在，您将使用`jQuery`变量名称而不是`$`来引用jQuery对象（例如`jQuery('div p').hide()`）。如果你在同一页面上有多个jQuery版本，你可以使用`noConflict（）`来设置一个特定版本的别名： + +```javascript +let $x = jQuery.noConflict(); +``` [回到目錄](#目錄) From df1a2e66b3e497cd34c46297e304a13722e48b0e Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Mon, 8 Oct 2018 19:16:10 -0400 Subject: [PATCH 107/135] General update --- CONTRIBUTING.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 23456be..3de401e 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -16,7 +16,7 @@ Please ensure your pull request adheres to the following guidelines: * Search open and closed PR's to avoid duplicate suggestions. * Only submit jQuery tips that you think would be useful to others. This implies each tip has enough succinct content to describe why it's useful. * Add your tip at the bottom of the [README](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/blob/master/README.md) document. Add a link to your tip at the bottom of the table of contents. -* Use [title-casing](http://titlecapitalization.com). +* Use [title-casex](https://titlecaseconverter.com/). * Code formatting should follow standard [JSLint](http://www.jslint.com/) default settings, including: * Indent with two spaces * Use single quotes, e.g., `$.preloadImages('img/hover-on.png');` From 5acacafcb37a9d417b3dbf1504cd8da160defb54 Mon Sep 17 00:00:00 2001 From: Ashley Anderson <5413914+lalaithan@users.noreply.github.com> Date: Fri, 19 Oct 2018 23:48:57 -0400 Subject: [PATCH 108/135] Fix typos in README.md --- README.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 4a8afee..9de1eca 100644 --- a/README.md +++ b/README.md @@ -33,7 +33,7 @@ A collection of simple tips to help up your jQuery game. 1. [Open External Links in New Tab/Window](#open-external-links-in-new-tabwindow) 1. [Find Element By Text](#find-element-by-text) 1. [Trigger on Visibility Change](#trigger-on-visibility-change) -1. [Ajax Call Error Handling](#ajax-call-error-handling) +1. [AJAX Call Error Handling](#ajax-call-error-handling) 1. [Chain Plugin Calls](#chain-plugin-calls) 1. [Sort List Items Alphabetically](#sort-list-items-alphabetically) 1. [Disable Right-Click](#disable-right-click) @@ -47,7 +47,7 @@ The `$` alias used by jQuery is also used by other JavaScript libraries. To ensu jQuery.noConflict(); ``` -Now you'll reference the jQuery object using the `jQuery` variable name instead of `$` (e.g., `jQuery('div p').hide()`). If you have multiple versions of jQuery on the same page, you can use `noConflict()` to set an alias to a specific version: +Now you'll reference the jQuery object using the `jQuery` variable name instead of `$` (e.g., `jQuery('div p').hide()`). If you have multiple versions of jQuery on the same page (not recommended), you can use `noConflict()` to set an alias to a specific version: ```javascript let $x = jQuery.noConflict(); @@ -187,7 +187,7 @@ $.post('sign_up.php', { }); ``` -But, all of those `val()` calls are expensive. A better way of collecting the user inputs is using the `serialize()` function which collects the user inputs as a string: +But all of those `val()` calls are expensive and using `.val()` on `