├── CODE-OF-CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
└── translations
    ├── bg-BG
        └── README.md
    ├── es-ES
        └── README.md
    ├── fr-FR
        └── README.md
    ├── hu-HU
        └── README.md
    ├── ko-KR
        └── README.md
    ├── pt-PT
        └── README.md
    ├── ru-RU
        └── README.md
    ├── zh-CN
        └── README.md
    └── zh-TW
        └── README.md


/CODE-OF-CONDUCT.md:
--------------------------------------------------------------------------------
 1 | # Contributor Code of Conduct
 2 | 
 3 | 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.
 4 | 
 5 | 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.
 6 | 
 7 | Examples of unacceptable behavior by participants include:
 8 | 
 9 | * The use of sexualized language or imagery
10 | * Personal attacks
11 | * Trolling or insulting/derogatory comments
12 | * Public or private harassment
13 | * Publishing other's private information, such as physical or electronic addresses, without explicit permission
14 | * Other unethical or unprofessional conduct
15 | 
16 | 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.
17 | 
18 | 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.
19 | 
20 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community.
21 | 
22 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the 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.
23 | 
24 | 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/).
25 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contribution Guidelines
 2 | 
 3 | 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.
 4 | 
 5 | ## Table of Contents
 6 | 
 7 | - [Adding to This List](#adding-to-this-list)
 8 | - [Updating Your Pull Request](#updating-your-pull-request)
 9 | 
10 | ## Adding to This List
11 | 
12 | Please ensure your pull request adheres to the following guidelines:
13 | 
14 | - Search open and closed PR's to avoid duplicate suggestions.
15 | - 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 | - 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.
17 | - Use [title-casex](https://titlecaseconverter.com/).
18 | - Code formatting should follow standard [JSLint](http://www.jslint.com/) default settings, including:
19 |   - Indent with two spaces
20 |   - Use single quotes, e.g., `$.preloadImages('img/hover-on.png');`
21 | - Make sure your text editor is set to remove trailing whitespace.
22 | - Check your spelling and grammar.
23 | - The PR should have a useful title.
24 | 
25 | Thank you for your suggestions!
26 | 
27 | ### Language Translations
28 | 
29 | 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:
30 | 
31 | - Add a new folder to the [`translations`](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations) folder
32 | - The new folder should be labeled the language culture name, e.g, `es-ES`, `ru-RU`, `zh-CN`, etc.
33 | 
34 | Additionally, feel free to review already translated content for accuracy.
35 | 
36 | ## Updating Your Pull Request
37 | 
38 | 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 guidelines. [This write-up](https://github.com/RichardLitt/knowledge/blob/master/github/amending-a-commit-guide.md) covers the different ways you can change a pull request
39 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 | CC0 1.0 Universal
  2 | 
  3 | Statement of Purpose
  4 | 
  5 | The laws of most jurisdictions throughout the world automatically confer
  6 | exclusive Copyright and Related Rights (defined below) upon the creator and
  7 | subsequent owner(s) (each and all, an "owner") of an original work of
  8 | authorship and/or a database (each, a "Work").
  9 | 
 10 | Certain owners wish to permanently relinquish those rights to a Work for the
 11 | purpose of contributing to a commons of creative, cultural and scientific
 12 | works ("Commons") that the public can reliably and without fear of later
 13 | claims of infringement build upon, modify, incorporate in other works, reuse
 14 | and redistribute as freely as possible in any form whatsoever and for any
 15 | purposes, including without limitation commercial purposes. These owners may
 16 | contribute to the Commons to promote the ideal of a free culture and the
 17 | further production of creative, cultural and scientific works, or to gain
 18 | reputation or greater distribution for their Work in part through the use and
 19 | efforts of others.
 20 | 
 21 | For these and/or other purposes and motivations, and without any expectation
 22 | of additional consideration or compensation, the person associating CC0 with a
 23 | Work (the "Affirmer"), to the extent that he or she is an owner of Copyright
 24 | and Related Rights in the Work, voluntarily elects to apply CC0 to the Work
 25 | and publicly distribute the Work under its terms, with knowledge of his or her
 26 | Copyright and Related Rights in the Work and the meaning and intended legal
 27 | effect of CC0 on those rights.
 28 | 
 29 | 1. Copyright and Related Rights. A Work made available under CC0 may be
 30 | protected by copyright and related or neighboring rights ("Copyright and
 31 | Related Rights"). Copyright and Related Rights include, but are not limited
 32 | to, the following:
 33 | 
 34 |   i. the right to reproduce, adapt, distribute, perform, display, communicate,
 35 |   and translate a Work;
 36 | 
 37 |   ii. moral rights retained by the original author(s) and/or performer(s);
 38 | 
 39 |   iii. publicity and privacy rights pertaining to a person's image or likeness
 40 |   depicted in a Work;
 41 | 
 42 |   iv. rights protecting against unfair competition in regards to a Work,
 43 |   subject to the limitations in paragraph 4(a), below;
 44 | 
 45 |   v. rights protecting the extraction, dissemination, use and reuse of data in
 46 |   a Work;
 47 | 
 48 |   vi. database rights (such as those arising under Directive 96/9/EC of the
 49 |   European Parliament and of the Council of 11 March 1996 on the legal
 50 |   protection of databases, and under any national implementation thereof,
 51 |   including any amended or successor version of such directive); and
 52 | 
 53 |   vii. other similar, equivalent or corresponding rights throughout the world
 54 |   based on applicable law or treaty, and any national implementations thereof.
 55 | 
 56 | 2. Waiver. To the greatest extent permitted by, but not in contravention of,
 57 | applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and
 58 | unconditionally waives, abandons, and surrenders all of Affirmer's Copyright
 59 | and Related Rights and associated claims and causes of action, whether now
 60 | known or unknown (including existing as well as future claims and causes of
 61 | action), in the Work (i) in all territories worldwide, (ii) for the maximum
 62 | duration provided by applicable law or treaty (including future time
 63 | extensions), (iii) in any current or future medium and for any number of
 64 | copies, and (iv) for any purpose whatsoever, including without limitation
 65 | commercial, advertising or promotional purposes (the "Waiver"). Affirmer makes
 66 | the Waiver for the benefit of each member of the public at large and to the
 67 | detriment of Affirmer's heirs and successors, fully intending that such Waiver
 68 | shall not be subject to revocation, rescission, cancellation, termination, or
 69 | any other legal or equitable action to disrupt the quiet enjoyment of the Work
 70 | by the public as contemplated by Affirmer's express Statement of Purpose.
 71 | 
 72 | 3. Public License Fallback. Should any part of the Waiver for any reason be
 73 | judged legally invalid or ineffective under applicable law, then the Waiver
 74 | shall be preserved to the maximum extent permitted taking into account
 75 | Affirmer's express Statement of Purpose. In addition, to the extent the Waiver
 76 | is so judged Affirmer hereby grants to each affected person a royalty-free,
 77 | non transferable, non sublicensable, non exclusive, irrevocable and
 78 | unconditional license to exercise Affirmer's Copyright and Related Rights in
 79 | the Work (i) in all territories worldwide, (ii) for the maximum duration
 80 | provided by applicable law or treaty (including future time extensions), (iii)
 81 | in any current or future medium and for any number of copies, and (iv) for any
 82 | purpose whatsoever, including without limitation commercial, advertising or
 83 | promotional purposes (the "License"). The License shall be deemed effective as
 84 | of the date CC0 was applied by Affirmer to the Work. Should any part of the
 85 | License for any reason be judged legally invalid or ineffective under
 86 | applicable law, such partial invalidity or ineffectiveness shall not
 87 | invalidate the remainder of the License, and in such case Affirmer hereby
 88 | affirms that he or she will not (i) exercise any of his or her remaining
 89 | Copyright and Related Rights in the Work or (ii) assert any associated claims
 90 | and causes of action with respect to the Work, in either case contrary to
 91 | Affirmer's express Statement of Purpose.
 92 | 
 93 | 4. Limitations and Disclaimers.
 94 | 
 95 |   a. No trademark or patent rights held by Affirmer are waived, abandoned,
 96 |   surrendered, licensed or otherwise affected by this document.
 97 | 
 98 |   b. Affirmer offers the Work as-is and makes no representations or warranties
 99 |   of any kind concerning the Work, express, implied, statutory or otherwise,
100 |   including without limitation warranties of title, merchantability, fitness
101 |   for a particular purpose, non infringement, or the absence of latent or
102 |   other defects, accuracy, or the present or absence of errors, whether or not
103 |   discoverable, all to the greatest extent permissible under applicable law.
104 | 
105 |   c. Affirmer disclaims responsibility for clearing rights of other persons
106 |   that may apply to the Work or any use thereof, including without limitation
107 |   any person's Copyright and Related Rights in the Work. Further, Affirmer
108 |   disclaims responsibility for obtaining any necessary consents, permissions
109 |   or other rights required for any use of the Work.
110 | 
111 |   d. Affirmer understands and acknowledges that Creative Commons is not a
112 |   party to this document and has no duty or obligation with respect to this
113 |   CC0 or use of the Work.
114 | 
115 | For more information, please see
116 | <http://creativecommons.org/publicdomain/zero/1.0/>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # jQuery Tips Everyone Should Know [![Awesome](https://awesome.re/badge-flat.svg)](https://awesome.re)
  2 | 
  3 | A collection of simple tips to help up your jQuery game.
  4 | 
  5 | > [!TIP]
  6 | > For other great lists check out [@sindresorhus](https://github.com/sindresorhus/)'s curated list of [awesome lists](https://github.com/sindresorhus/awesome/).
  7 | 
  8 | ## Table of Contents
  9 | 
 10 | - [Tips](#tips)
 11 | - [Support](#support)
 12 | - [Translations](#translations)
 13 | - [Contribution Guidelines](CONTRIBUTING.md)
 14 | 
 15 | ## Tips
 16 | 
 17 | 1. [Use `noConflict()`](#use-noconflict)
 18 | 1. [Checking If jQuery Loaded](#checking-if-jquery-loaded)
 19 | 1. [Check Whether an Element Exists](#check-whether-an-element-exists)
 20 | 1. [Use `.on()` Binding Instead of `.click()`](#use-on-binding-instead-of-click)
 21 | 1. [Back to Top Button](#back-to-top-button)
 22 | 1. [Preload Images](#preload-images)
 23 | 1. [Checking If Images Are Loaded](#checking-if-images-are-loaded)
 24 | 1. [Fix Broken Images Automatically](#fix-broken-images-automatically)
 25 | 1. [Post a Form with AJAX](#post-a-form-with-ajax)
 26 | 1. [Toggle Classes on Hover](#toggle-classes-on-hover)
 27 | 1. [Disabling Input Fields](#disabling-input-fields)
 28 | 1. [Stop the Loading of Links](#stop-the-loading-of-links)
 29 | 1. [Cache jQuery Selectors](#cache-jquery-selectors)
 30 | 1. [Toggle Fade/Slide](#toggle-fadeslide)
 31 | 1. [Simple Accordion](#simple-accordion)
 32 | 1. [Make Two Divs the Same Height](#make-two-divs-the-same-height)
 33 | 1. [Open External Links in New Tab/Window](#open-external-links-in-new-tabwindow)
 34 | 1. [Find Element By Text](#find-element-by-text)
 35 | 1. [Trigger on Visibility Change](#trigger-on-visibility-change)
 36 | 1. [AJAX Call Error Handling](#ajax-call-error-handling)
 37 | 1. [Chain Plugin Calls](#chain-plugin-calls)
 38 | 1. [Sort List Items Alphabetically](#sort-list-items-alphabetically)
 39 | 1. [Disable Right-Click](#disable-right-click)
 40 | 
 41 | ### Use `noConflict()`
 42 | 
 43 | 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:
 44 | 
 45 | ```javascript
 46 | jQuery.noConflict();
 47 | ```
 48 | 
 49 | 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:
 50 | 
 51 | ```javascript
 52 | let $x = jQuery.noConflict();
 53 | ```
 54 | 
 55 | <sup>[back to table of contents](#table-of-contents)</sup>
 56 | 
 57 | ### Checking If jQuery Loaded
 58 | 
 59 | Before you can do anything with jQuery you first need to make certain it has loaded:
 60 | 
 61 | ```javascript
 62 | if (typeof jQuery == "undefined") {
 63 |   console.log("jQuery hasn't loaded");
 64 | } else {
 65 |   console.log("jQuery has loaded");
 66 | }
 67 | ```
 68 | 
 69 | Now you're off...
 70 | 
 71 | <sup>[back to table of contents](#table-of-contents)</sup>
 72 | 
 73 | ### Check Whether an Element Exists
 74 | 
 75 | Prior using a HTML element you need to ensure it's part of DOM.
 76 | 
 77 | ```javascript
 78 | if ($("#selector").length) {
 79 |   //do something with element
 80 | }
 81 | ```
 82 | 
 83 | <sup>[back to table of contents](#table-of-contents)</sup>
 84 | 
 85 | ### Use `.on()` Binding Instead of `.click()`
 86 | 
 87 | Using `.on()` gives you several advantages over using `.click()`, such as the ability to add multiple events...
 88 | 
 89 | ```javascript
 90 | .on('click tap hover')
 91 | ```
 92 | 
 93 | ...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)...
 94 | 
 95 | ...and the possibility to set a namespace:
 96 | 
 97 | ```javascript
 98 | .on('click.menuOpening')
 99 | ```
100 | 
101 | Namespaces give you the power to unbind a specific event (e.g., `.off('click.menuOpening')`).
102 | 
103 | <sup>[back to table of contents](#table-of-contents)</sup>
104 | 
105 | ### Back to Top Button
106 | 
107 | By using the `animate` and `scrollTop` methods in jQuery you don't need a plugin to create a simple scroll-to-top animation:
108 | 
109 | ```javascript
110 | // Back to top
111 | $(".container").on("click", ".back-to-top", function (e) {
112 |   e.preventDefault();
113 |   $("html, body").animate({ scrollTop: 0 }, 800);
114 | });
115 | ```
116 | 
117 | ```html
118 | <!-- Create an anchor tag -->
119 | <div class="container">
120 |   <a href="#" class="back-to-top">Back to top</a>
121 | </div>
122 | ```
123 | 
124 | 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.
125 | 
126 | > [!NOTE]
127 | > Watch for some [buggy behavior](https://github.com/jquery/api.jquery.com/issues/417) with `scrollTop`.
128 | 
129 | <sup>[back to table of contents](#table-of-contents)</sup>
130 | 
131 | ### Preload Images
132 | 
133 | If your web page uses a lot of images that aren't visible initially (e.g., on hover) it makes sense to preload them:
134 | 
135 | ```javascript
136 | $.preloadImages = function () {
137 |   for (var i = 0; i < arguments.length; i++) {
138 |     $("<img>").attr("src", arguments[i]);
139 |   }
140 | };
141 | 
142 | $.preloadImages("img/hover-on.png", "img/hover-off.png");
143 | ```
144 | 
145 | <sup>[back to table of contents](#table-of-contents)</sup>
146 | 
147 | ### Checking If Images Are Loaded
148 | 
149 | Sometimes you might need to check if your images have fully loaded in order to continue on with your scripts:
150 | 
151 | ```javascript
152 | $("img").on("load", function () {
153 |   console.log("image load successful");
154 | });
155 | ```
156 | 
157 | You can also check if one particular image has loaded by replacing the `<img>` tag with an ID or class.
158 | 
159 | <sup>[back to table of contents](#table-of-contents)</sup>
160 | 
161 | ### Fix Broken Images Automatically
162 | 
163 | 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:
164 | 
165 | ```javascript
166 | $("img").on("error", function () {
167 |   if (!$(this).hasClass("broken-image")) {
168 |     $(this).prop("src", "img/broken.png").addClass("broken-image");
169 |   }
170 | });
171 | ```
172 | 
173 | Alternatively, if you wish to hide broken images this snippet will take care of that for:
174 | 
175 | ```javascript
176 | $("img").on("error", function () {
177 |   $(this).hide();
178 | });
179 | ```
180 | 
181 | <sup>[back to table of contents](#table-of-contents)</sup>
182 | 
183 | ### Post a Form with AJAX
184 | 
185 | 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:
186 | 
187 | ```javascript
188 | $.post("sign_up.php", {
189 |   user_name: $("input[name=user_name]").val(),
190 |   email: $("input[name=email]").val(),
191 |   password: $("input[name=password]").val(),
192 | });
193 | ```
194 | 
195 | But all of those `val()` calls are expensive and using `.val()` on `<textarea>` elements will strip carriage return characters from the browser-reported value. A better way of collecting user inputs is using the `serialize()` function which collects them as a string:
196 | 
197 | ```javascript
198 | $.post("sign_up", $("#sign-up-form").serialize());
199 | ```
200 | 
201 | <sup>[back to table of contents](#table-of-contents)</sup>
202 | 
203 | ### Toggle Classes on Hover
204 | 
205 | 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:
206 | 
207 | ```javascript
208 | $(".btn").on(
209 |   "hover",
210 |   function () {
211 |     $(this).addClass("hover");
212 |   },
213 |   function () {
214 |     $(this).removeClass("hover");
215 |   }
216 | );
217 | ```
218 | 
219 | You need to add the necessary CSS. If you want an even _simpler_ way use the `toggleClass` method:
220 | 
221 | ```javascript
222 | $(".btn").on("hover", function () {
223 |   $(this).toggleClass("hover");
224 | });
225 | ```
226 | 
227 | > [!NOTE]
228 | > CSS may be a faster solution in this case but it's still worthwhile to know this.
229 | 
230 | <sup>[back to table of contents](#table-of-contents)</sup>
231 | 
232 | ### Disabling Input Fields
233 | 
234 | 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:
235 | 
236 | ```javascript
237 | $('input[type="submit"]').prop("disabled", true);
238 | ```
239 | 
240 | All you need to do is run the `prop` method again on the input, but set the value of `disabled` to `false`:
241 | 
242 | ```javascript
243 | $('input[type="submit"]').prop("disabled", false);
244 | ```
245 | 
246 | <sup>[back to table of contents](#table-of-contents)</sup>
247 | 
248 | ### Stop the Loading of Links
249 | 
250 | 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 another script. This will do the trick of preventing the default action:
251 | 
252 | ```javascript
253 | $("a.no-link").on("click", function (e) {
254 |   e.preventDefault();
255 | });
256 | ```
257 | 
258 | <sup>[back to table of contents](#table-of-contents)</sup>
259 | 
260 | ### Cache jQuery Selectors
261 | 
262 | 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 you can run the selector once and store the results in a variable:
263 | 
264 | ```javascript
265 | var blocks = $("#blocks").find("li");
266 | ```
267 | 
268 | Now you can use the `blocks` variable wherever you want without having to search the DOM every time:
269 | 
270 | ```javascript
271 | $("#hideBlocks").on("click", function () {
272 |   blocks.fadeOut();
273 | });
274 | 
275 | $("#showBlocks").on("click", function () {
276 |   blocks.fadeIn();
277 | });
278 | ```
279 | 
280 | Caching jQuery selectors is a good performance gain.
281 | 
282 | <sup>[back to table of contents](#table-of-contents)</sup>
283 | 
284 | ### Toggle Fade/Slide
285 | 
286 | Sliding and fading are common in 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:
287 | 
288 | ```javascript
289 | // Fade
290 | $(".btn").on("click", function () {
291 |   $(".element").fadeToggle("slow");
292 | });
293 | 
294 | // Toggle
295 | $(".btn").on("click", function () {
296 |   $(".element").slideToggle("slow");
297 | });
298 | ```
299 | 
300 | <sup>[back to table of contents](#table-of-contents)</sup>
301 | 
302 | ### Simple Accordion
303 | 
304 | This is a simple method for a quick accordion:
305 | 
306 | ```javascript
307 | // Close all panels
308 | $("#accordion").find(".content").hide();
309 | 
310 | // Accordion
311 | $("#accordion")
312 |   .find(".accordion-header")
313 |   .on("click", function () {
314 |     var next = $(this).next();
315 |     next.slideToggle("fast");
316 |     $(".content").not(next).slideUp("fast");
317 |     return false;
318 |   });
319 | ```
320 | 
321 | By adding this script all you really need to do on your web page is the necessary HTML to get this working.
322 | 
323 | <sup>[back to table of contents](#table-of-contents)</sup>
324 | 
325 | ### Make Two Divs the Same Height
326 | 
327 | Sometimes you'll want two divs to have the same height no matter what content they have in them:
328 | 
329 | ```javascript
330 | $(".div").css("min-height", $(".main-div").height());
331 | ```
332 | 
333 | 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 `height` to the height of the tallest element:
334 | 
335 | ```javascript
336 | var $columns = $(".column");
337 | var height = 0;
338 | $columns.each(function () {
339 |   if ($(this).height() > height) {
340 |     height = $(this).height();
341 |   }
342 | });
343 | $columns.height(height);
344 | ```
345 | 
346 | If you want _all_ columns to have the same height:
347 | 
348 | ```javascript
349 | var $rows = $(".same-height-columns");
350 | $rows.each(function () {
351 |   $(this).find(".column").height($(this).height());
352 | });
353 | ```
354 | 
355 | > [!NOTE]
356 | > 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 handy.
357 | 
358 | <sup>[back to table of contents](#table-of-contents)</sup>
359 | 
360 | ### Open External Links in New Tab/Window
361 | 
362 | Open external links in a new browser tab or window and ensure links on the same origin open in the same tab or window:
363 | 
364 | ```javascript
365 | $('a[href^="http"]').attr("target", "_blank");
366 | $('a[href^="//"]').attr("target", "_blank");
367 | $('a[href^="' + window.location.origin + '"]').attr("target", "_self");
368 | ```
369 | 
370 | <sup>[back to table of contents](#table-of-contents)</sup>
371 | 
372 | ### Find Element By Text
373 | 
374 | 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:
375 | 
376 | ```javascript
377 | var search = $("#search").val();
378 | $('div:not(:contains("' + search + '"))').hide();
379 | ```
380 | 
381 | <sup>[back to table of contents](#table-of-contents)</sup>
382 | 
383 | ### Trigger on Visibility Change
384 | 
385 | Trigger JavaScript when the user is no longer focusing on a tab or refocuses on a tab:
386 | 
387 | ```javascript
388 | $(document).on("visibilitychange", function (e) {
389 |   if (e.target.visibilityState === "visible") {
390 |     console.log("Tab is now in view!");
391 |   } else if (e.target.visibilityState === "hidden") {
392 |     console.log("Tab is now hidden!");
393 |   }
394 | });
395 | ```
396 | 
397 | <sup>[back to table of contents](#table-of-contents)</sup>
398 | 
399 | ### AJAX Call Error Handling
400 | 
401 | 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 as intended. To define a global AJAX error handler:
402 | 
403 | ```javascript
404 | $(document).on("ajaxError", function (e, xhr, settings, error) {
405 |   console.log(error);
406 | });
407 | ```
408 | 
409 | <sup>[back to table of contents](#table-of-contents)</sup>
410 | 
411 | ### Chain Plugin Calls
412 | 
413 | 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:
414 | 
415 | ```javascript
416 | $("#elem").show();
417 | $("#elem").html("bla");
418 | $("#elem").otherStuff();
419 | ```
420 | 
421 | This could be vastly improved by using chaining:
422 | 
423 | ```javascript
424 | $("#elem").show().html("bla").otherStuff();
425 | ```
426 | 
427 | An alternative is to cache the element in a variable (prefixed with `$`):
428 | 
429 | ```javascript
430 | var $elem = $("#elem");
431 | $elem.hide();
432 | $elem.html("bla");
433 | $elem.otherStuff();
434 | ```
435 | 
436 | Both chaining and [caching](#cache-jquery-selectors) methods in jQuery are best practices that lead to shorter and faster code.
437 | 
438 | <sup>[back to table of contents](#table-of-contents)</sup>
439 | 
440 | ### Sort List Items Alphabetically
441 | 
442 | 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:
443 | 
444 | ```javascript
445 | var ul = $("#list"),
446 |   lis = $("li", ul).get();
447 | 
448 | lis.sort(function (a, b) {
449 |   return $(a).text().toUpperCase() < $(b).text().toUpperCase() ? -1 : 1;
450 | });
451 | 
452 | ul.append(lis);
453 | ```
454 | 
455 | There you go!
456 | 
457 | <sup>[back to table of contents](#table-of-contents)</sup>
458 | 
459 | ### Disable Right-Click
460 | 
461 | If you want to disable right-click, you can do it for an entire page...
462 | 
463 | ```javascript
464 | $(document).ready(function () {
465 |   $(document).bind("contextmenu", function (e) {
466 |     return false;
467 |   });
468 | });
469 | ```
470 | 
471 | ...and you can also do the same for a specific element:
472 | 
473 | ```javascript
474 | $(document).ready(function () {
475 |   $("#submit").bind("contextmenu", function (e) {
476 |     return false;
477 |   });
478 | });
479 | ```
480 | 
481 | <sup>[back to table of contents](#table-of-contents)</sup>
482 | 
483 | ## Support
484 | 
485 | Current versions of Chrome, Firefox, Safari, Opera, Edge, and IE11.
486 | 
487 | <sup>[back to table of contents](#table-of-contents)</sup>
488 | 
489 | ## Translations
490 | 
491 | - [български](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/bg-BG)
492 | - [Español](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/es-ES)
493 | - [Français](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/fr-FR)
494 | - [Magyar](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/hu-HU)
495 | - [한국어](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/ko-KR)
496 | - [Português do Europe](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/pt-PT)
497 | - [Pусский](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/ru-RU)
498 | - [简体中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-CN)
499 | - [繁體中文](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/tree/master/translations/zh-TW)
500 | 
501 | <sup>[back to table of contents](#table-of-contents)</sup>
502 | 


--------------------------------------------------------------------------------
/translations/bg-BG/README.md:
--------------------------------------------------------------------------------
  1 | # Предложения за решения в jQuery, които трябва да чуете [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)
  2 | 
  3 | Колекция от кратки съвети, които ще ви дадат предимство в надпреварата с jQuery.
  4 | 
  5 | >За още повече страхотни колекции, посетете избраните списъци [awesome lists](https://github.com/sindresorhus/awesome/) на [@sindresorhus](https://github.com/sindresorhus/).
  6 | 
  7 | 
  8 | ## Съдържание
  9 | 
 10 | * [Съвети](#съвети)
 11 | * [Поддръжка](#поддръжка)
 12 | 
 13 | 
 14 | ## Съвети
 15 | 
 16 | 1. [Употребата на `noConflict()`](#употребата-на-noconflict)
 17 | 1. [Проверка за успешно зареждане на jQuery](#проверка-за-успешно-зареждане-на-jquery)
 18 | 1. [Проверка за наличност на даден елемент](#проверка-за-наличност-на-даден-елемент)
 19 | 1. [Използвайте `.on()` вместо `.click()`](#използвайте-on-вместо-click)
 20 | 1. [Бутон "обратно-към-началото"](#бутон-обратно-към-началото)
 21 | 1. [Предварително зареждане на изображения](#предварително-зареждане-на-изображения)
 22 | 1. [Проверка за успешно зареждане на изображения](#проверка-за-успешно-зареждане-на-изображения)
 23 | 1. [Автоматичен фикс на счупени изображения](#автоматичен-фикс-на-счупени-изображения)
 24 | 1. [Изпращане на формуляр с AJAX](#изпращане-на-формуляр-с-ajax)
 25 | 1. [Превключване на класове при Hover](#превключване-на-класове-при-hover)
 26 | 1. [Деактивиране на поле за въвеждане](#деактивиране-на-поле-за-въвеждане)
 27 | 1. [Деактивиране зареждането на линкове](#деактивиране-зареждането-на-линкове)
 28 | 1. [Кеширане на jQuery-селектори](#кеширане-на-jquery-селектори)
 29 | 1. [Toggle-превключване на избледняването или приплъзгването](#toggle-превключване-на-избледняването-или-приплъзгването)
 30 | 1. [Лесен "Акордеон"-ефект](#лесен-акордеон-ефект)
 31 | 1. [Изравняване височината на два div-елемента](#изравняване-височината-на-два-div-елемента)
 32 | 1. [Отваряне на външни линкове в нов раздел или прозорец](#отваряне-на-външни-линкове-в-нов-раздел-или-прозорец)
 33 | 1. [Намиране на елемент по текст](#намиране-на-елемент-по-текст)
 34 | 1. [Задействане на скрипт при промяна във видимостта](#задействане-на-скрипт-при-промяна-във-видимостта)
 35 | 1. [Улавяне на грешка, върната от AJAX](#Улавяне-на-грешка,-върната-от-ajax)
 36 | 1. [Верижно повикване на методи](#верижно-повикване-на-методи)
 37 | 1. [Сортиране на списък по азбучен ред](#сортиране-на-списък-по-азбучен-ред)
 38 | 1. [Деактивиране на клик с десен бутон](#деактивиране-на-клик-с-десен-бутон)
 39 | 
 40 | 
 41 | ### Употребата на `noConflict()`
 42 | 
 43 | Символът `$`, полван от jQuery, се ползва също и от други JavaScript библиотеки. За да предотвратите конфликт с `$`-обектите на други библиотеки, добавете метод `noConflict()` в началото на документа:
 44 | 
 45 | ```javascript
 46 | jQuery.noConflict();
 47 | ```
 48 | 
 49 | По този начин jQuery ще бъде рефенцирана под псевдоним `jQuery` вместо `$` (например, `jQuery('div p').hide()`). Ако в един и същи документ имате няколко версии на jQuery (което не е препоръчително), може да ползвате `noConflict()`, за да зададете псевдоним за всяка от версиите:
 50 | 
 51 | ```javascript
 52 | let $x = jQuery.noConflict();
 53 | ```
 54 | 
 55 | <sup>[обратно към съдържанието](#съдържание)</sup>
 56 | 
 57 | 
 58 | ### Проверка за успешно зареждане на jQuery
 59 | 
 60 | Преди да започнете да правите каквото и да е с jQuery, уверете се, че библиотеката е успешно заредена:
 61 | 
 62 | ```javascript
 63 | if (typeof jQuery == 'undefined') {
 64 |   console.log('jQuery hasn\'t loaded');
 65 | } else {
 66 |   console.log('jQuery has loaded');
 67 | }
 68 | ```
 69 | 
 70 | Готови за излитане.
 71 | 
 72 | 
 73 | <sup>[обратно към съдържанието](#съдържание)</sup>
 74 | 
 75 | 
 76 | ### Проверка за наличност на даден елемент
 77 | 
 78 | Преди да започнете да манипулирате даден HTML елемент, е добре, да се уверите, че елементът вече е част от DOM-а.
 79 | 
 80 | ```javascript
 81 | if ($("#selector").length) {
 82 |   //тук направете нещо с елемента
 83 | }
 84 | ```
 85 | 
 86 | <sup>[обратно към съдържанието](#съдържание)</sup>
 87 | 
 88 | 
 89 | ### Използвайте `.on()` вместо `.click()`
 90 | 
 91 | Функцията `.on()` има няколко предимства спрямо `.click()`, като например:
 92 | ...опция за добавяне на повече от едно събития (events)...
 93 | 
 94 | ```javascript
 95 | .on('click tap hover')
 96 | ```
 97 | 
 98 | ...`.on()` обхваща не само вече съществуващите, но и динамично създаваните елементи, т.е. такива, които предстои да бъдат създадени чрез скрипта (няма нужда всеки елемент, динамично добавен към DOM-а, да бъде разглеждан като отделен случай)...
 99 | 
100 | ...както и възможността за определяне на пространство от имена (namespace):
101 | 
102 | ```javascript
103 | .on('click.menuOpening')
104 | ```
105 | 
106 | Пространствата от имена (namespaces) дават възможност за отмяна на дадено събитие (например, `.off('click.menuOpening')`).
107 | 
108 | <sup>[обратно към съдържанието](#съдържание)</sup>
109 | 
110 | 
111 | ### Бутон "обратно-към-началото"
112 | 
113 | Благодарение на методите `animate` и `scrollTop` в jQuery отпада необходимостта от имплементация на допълнителна функция за създаване на простичка анимация, която да превърта документа до горе.
114 | 
115 | ```javascript
116 | // Връщане към началото
117 | $('.container').on('click', '.back-to-top', function (e) {
118 |   e.preventDefault();
119 |   $('html, body').animate({scrollTop: 0}, 800);
120 | });
121 | ```
122 | 
123 | ```html
124 | <!-- Създайте таг "котва" -->
125 | <div class="container">
126 |   <a href="#" class="back-to-top">Back to top</a>
127 | </div>
128 | ```
129 | 
130 | Променяйки стойността на `scrollTop`, вие оказвате позицията, на която лентата за превъртане (скролбарът) трябва да стопира. Това което се случва в горния пример, е че тялото (body) на документа бива анимирано, движейки се нагоре със скорост от 800 милисекунди, докато не се озове в самото начало на документа.
131 | 
132 | **Внимание:** Бъдете нащрек за [бъгове](https://github.com/jquery/api.jquery.com/issues/417) със `scrollTop`.
133 | 
134 | 
135 | <sup>[обратно към съдържанието](#съдържание)</sup>
136 | 
137 | 
138 | ### Предварително зареждане на изображения
139 | 
140 | Ако уеб-страницата ви използва много изображения, някои от които не стават видими още в самото начало (а например само при поставяне на мишката отгоре - при т.нар. "hover"-ефект), тогава би било по-добре, да заредите изображенията предварително:
141 | 
142 | ```javascript
143 | $.preloadImages = function () {
144 |   for (var i = 0; i < arguments.length; i++) {
145 |     $('<img>').attr('src', arguments[i]);
146 |   }
147 | };
148 | 
149 | $.preloadImages('img/hover-on.png', 'img/hover-off.png');
150 | ```
151 | 
152 | <sup>[обратно към съдържанието](#съдържание)</sup>
153 | 
154 | 
155 | ### Проверка за успешно зареждане на изображения
156 | 
157 | Понякога, за да може скриптът да продължи да се изпълява по-нататък, се налага да се направи проверка за това, дали изображенията са вече напълно заредени:
158 | 
159 | ```javascript
160 | $('img').on('load', function () {
161 |   console.log('image load successful');
162 | });
163 | ```
164 | 
165 | Ако заместите таг `<img>` с дадено ID или class, ще може да проверите зареждането за конкретно изображение.
166 | 
167 | <sup>[обратно към съдържанието](#съдържание)</sup>
168 | 
169 | 
170 | ### Автоматичен фикс на счупени изображения
171 | 
172 | Ако се окаже, че сайтът ви съдържа счупени линкове към изображения, то поправянето на всеки един дефектен линк по отделно би било особено приятно занимание. В такъв случай следните няколко реда биха ви спестили доста главоболия:
173 | 
174 | ```javascript
175 | $('img').on('error', function () {
176 |   if(!$(this).hasClass('broken-image')) {
177 |     $(this).prop('src', 'img/broken.png').addClass('broken-image');
178 |   }
179 | });
180 | ```
181 | 
182 | Като алтернатива на горния блок, ако предпочитате да скриете счупените изображения, следният код ще се погрижи за това:
183 | 
184 | ```javascript
185 | $('img').on('error', function () {
186 |   $(this).hide();
187 | });
188 | ```
189 | 
190 | <sup>[обратно към съдържанието](#съдържание)</sup>
191 | 
192 | 
193 | ### Изпращане на формуляр с AJAX
194 | 
195 | jQuery AJAX методите са често срещан подход за поискване на текст, HTML, XML, или JSON. Ако искате да изпратите формуляр чрез AJAX, може да съберете потребителските данни чрез метод `val()`:
196 | 
197 | 
198 | ```javascript
199 | $.post('sign_up.php', {
200 |   user_name: $('input[name=user_name]').val(),
201 |   email:     $('input[name=email]').val(),
202 |   password:  $('input[name=password]').val(),
203 | });
204 | ```
205 | 
206 |  Всички тези повиквания на `val()` обаче струват доста ресурси, а повикването на `.val()` върху `<textarea>`-елементи ще премахнат символите CR (Carriage Return). По-добър начин за събиране на потребителски данни предлага функцията `serialize()`, която събира данните като стринг:
207 | 
208 | ```javascript
209 | $.post('sign_up', $('#sign-up-form').serialize());
210 | ```
211 | 
212 | <sup>[обратно към съдържанието](#съдържание)</sup>
213 | 
214 | 
215 | ### Превключване на класове при Hover
216 | 
217 | Да предположим, че имате елемент, който може да бъде кликнат, и искате елементът да променя стила си, щом мишката попадне върху него (при т.нар. ефект "hover"):
218 | 
219 | ```javascript
220 | $('.btn').on('hover', function () {
221 |   $(this).addClass('hover');
222 | }, function () {
223 |   $(this).removeClass('hover');
224 | });
225 | ```
226 | 
227 | Остава да добавите необходимия CSS. За още по-голямо _улесняване_, използвайте метод `toggleClass`:
228 | 
229 | ```javascript
230 | $('.btn').on('hover', function () {
231 |   $(this).toggleClass('hover');
232 | });
233 | ```
234 | 
235 | **Внимание:** Макар и CSS да е по-бързият начин в този случай, струва си да се запознаете и с този вариант.
236 | 
237 | <sup>[обратно към съдържанието](#съдържание)</sup>
238 | 
239 | 
240 | ### Деактивиране на поле за въвеждане
241 | 
242 | Може да се наложи submit-бутонът на даден формуляр, или пък някое от полетата за въвеждане на текст (input field) във формуляра, да останат деактивирани, докато потребителят не извърши определено действие (като например маркиране на отметката "Прочетох условията"). В такъв случай, добавете атрибута `disabled` ("деактивиран") към съответното input-поле, за да може полето да се активира, едва когато трябва:
243 | 
244 | ```javascript
245 | $('input[type="submit"]').prop('disabled', true);
246 | ```
247 | 
248 | Всичко, което трябва да направите, е да повикате метода `prop` върху input-полето още веднъж, само че този път задавайки на `disabled` стойността `false`:
249 | 
250 | ```javascript
251 | $('input[type="submit"]').prop('disabled', false);
252 | ```
253 | 
254 | <sup>[обратно към съдържанието](#съдържание)</sup>
255 | 
256 | 
257 | ### Деактивиране зареждането на линкове
258 | 
259 | Идеята при добавянето на линкове в страницата не винаги е, те да пренасочват към други страници или да презареждат текущата страница; вместо това, можете да използвате линковете с други цели, като например, да стартирате даден скрипт:
260 | 
261 | ```javascript
262 | $('a.no-link').on('click', function (e) {
263 |   e.preventDefault();
264 | });
265 | ```
266 | 
267 | <sup>[обратно към съдържанието](#съдържание)</sup>
268 | 
269 | 
270 | ### Кеширане на jQuery-селектори
271 | 
272 | Представете си, колко пъти общо може да се наложи да използвате един и същ селектор в даден проект. Селекторът `$('.element')` налага цялостно претърсване на DOM-а при всяко повикване, независимо, дали селекторът е бил задаван и преди. Вместо това, може да зададете селектора само веднъж, запазвайки резултатите в променлива:
273 | 
274 | ```javascript
275 | var blocks = $('#blocks').find('li');
276 | ```
277 | 
278 | По този начин можете да ползвате променливата `blocks` винаги, щом поискате, бъз да се налага DOM-ът да бъде претърсван всеки път:
279 | 
280 | ```javascript
281 | $('#hideBlocks').on('click', function () {
282 |   blocks.fadeOut();
283 | });
284 | 
285 | $('#showBlocks').on('click', function () {
286 |   blocks.fadeIn();
287 | });
288 | ```
289 | 
290 | Кеширането на jQuery-селектори допринася за по-добро и скоростно изпълнение на програмата.
291 | 
292 | <sup>[обратно към съдържанието](#съдържание)</sup>
293 | 
294 | 
295 | ### Toggle-превключване на избледняването или приплъзгването
296 | 
297 | Slide ("плъзгане") и fade ("избледняване") се срещат често при анимирането с jQuery. Ако искате даден елемент да се появи, щом потребителят кликне върху нещо, спокойно може да използвате методите `fadeIn`(за появяване на елемента) и `slideDown` ("приплъзгване надолу"). Ако обаче искате елементът да се появи при клик и веднага след това да изчезне отново, следният код може да ви бъде от полза:
298 | 
299 | ```javascript
300 | // Fade
301 | $('.btn').on('click', function () {
302 |   $('.element').fadeToggle('slow');
303 | });
304 | 
305 | // Toggle
306 | $('.btn').on('click', function () {
307 |   $('.element').slideToggle('slow');
308 | });
309 | ```
310 | 
311 | <sup>[обратно към съдържанието](#съдържание)</sup>
312 | 
313 | 
314 | ### Лесен "Акордеон"-ефект
315 | 
316 | Това е простичък метод за бърз ефект-тип акордеон:
317 | 
318 | ```javascript
319 | // Затваряне на всички панели
320 | $('#accordion').find('.content').hide();
321 | 
322 | // Акордеон
323 | $('#accordion').find('.accordion-header').on('click', function () {
324 |   var next = $(this).next();
325 |   next.slideToggle('fast');
326 |   $('.content').not(next).slideUp('fast');
327 |   return false;
328 | });
329 | ```
330 | 
331 | Остава само да добавите необходимия HTML в уеб-страница си, за да може скриптът да има ефект.
332 | 
333 | <sup>[обратно към съдържанието](#съдържание)</sup>
334 | 
335 | 
336 | ### Изравняване височината на два div-елемента
337 | 
338 | Ако искате два div-елемента да имат еднаква височина, независимо от тяхното съдържание:
339 | 
340 | ```javascript
341 | $('.div').css('min-height', $('.main-div').height());
342 | ```
343 | 
344 | Този пример задава `min-height`(минималната височина), което означава, че реалната височина може да е по-голяма от тази на .main-div, но никога по-малка. По-гъвкавият вариант обаче е, да се обходи в цикъл група от елементи, и в `height` да се зададе височината на най-високия от елементите:
345 | 
346 | ```javascript
347 | var $columns = $('.column');
348 | var height = 0;
349 | $columns.each(function () {
350 |   if ($(this).height() > height) {
351 |     height = $(this).height();
352 |   }
353 | });
354 | $columns.height(height);
355 | ```
356 | 
357 | Ако искате _всички_ колони да имат еднаква височина:
358 | 
359 | ```javascript
360 | var $rows = $('.same-height-columns');
361 | $rows.each(function () {
362 |   $(this).find('.column').height($(this).height());
363 | });
364 | ```
365 | 
366 | **Внимание:** Това може да бъде постигнато по няколко начина [в CSS](http://codepen.io/AllThingsSmitty/pen/KMPqoO), но според ситуацията, е полезно да познавате и вариант за имплементация в jQuery.
367 | 
368 | <sup>[обратно към съдържанието](#съдържание)</sup>
369 | 
370 | 
371 | ### Отваряне на външни линкове в нов раздел или прозорец
372 | 
373 | Отваряне на външни линкове в нов раздел на браузъра или в нов прозорец, така че ликовете от еднакъв източник (origin) да се отварят в същия раздел или прозорец:
374 | 
375 | ```javascript
376 | $('a[href^="http"]').attr('target', '_blank');
377 | $('a[href^="//"]').attr('target', '_blank');
378 | $('a[href^="' + window.location.origin + '"]').attr('target', '_self');
379 | ```
380 | 
381 | **Внимание:** `window.location.origin` не проработва в IE10. [Тази корекция](http://tosbourn.com/a-fix-for-window-location-origin-in-internet-explorer/) отстранява проблема.
382 | 
383 | <sup>[обратно към съдържанието](#съдържание)</sup>
384 | 
385 | 
386 | ### Намиране на елемент по текст
387 | 
388 | Селекторът `contains()` в jQuery позволява намирането на текст в съдържанието на даден елемент. В следния пример елементът ще бъде скрит, в случай че текстът не е намерен:
389 | 
390 | ```javascript
391 | var search = $('#search').val();
392 | $('div:not(:contains("' + search + '"))').hide();
393 | ```
394 | 
395 | <sup>[обратно към съдържанието](#съдържание)</sup>
396 | 
397 | 
398 | ### Задействане на скрипт при промяна във видимостта
399 | 
400 | Задействане на JavaScript, щом раздел на браузъра остане извън фокус или при повторно фокусиране на раздела:
401 | 
402 | ```javascript
403 | $(document).on('visibilitychange', function (e) {
404 |   if (e.target.visibilityState === 'visible') {
405 |     console.log('Tab is now in view!');
406 |   } else if (e.target.visibilityState === 'hidden') {
407 |     console.log('Tab is now hidden!');
408 |   }
409 | });
410 | ```
411 | 
412 | <sup>[обратно към съдържанието](#съдържание)</sup>
413 | 
414 | 
415 | ### Улавяне на грешка, върната от AJAX
416 | 
417 | При връщане на грешка 404 или 500 от AJAX, се изпълнява функция, която улавя грешката. Ако не дефинирате тази функция, е възможно друг jQuery-код да не проработи по очаквания начин. За това може да дефинирате глобално функцията, улавяща грешката, по следния начин:
418 | 
419 | ```javascript
420 | $(document).on('ajaxError', function (e, xhr, settings, error) {
421 |   console.log(error);
422 | });
423 | ```
424 | 
425 | <sup>[обратно към съдържанието](#съдържание)</sup>
426 | 
427 | 
428 | ### Верижно повикване на методи
429 | 
430 | "Верижните" повиквания на методи в jQuery облекчават процеса на многократно претърсване на DOM-а и предотвратяват създаването на множество jQuery-обекти. Да предположим, че вашите методи са повикани по следния начин:
431 | 
432 | ```javascript
433 | $('#elem').show();
434 | $('#elem').html('bla');
435 | $('#elem').otherStuff();
436 | ```
437 | 
438 | Така формулираният проблем може да бъде оптимиран значително чрез "верижни" повиквания:
439 | 
440 | ```javascript
441 | $('#elem')
442 |   .show()
443 |   .html('bla')
444 |   .otherStuff();
445 | ```
446 | 
447 | Друга алтернатива е кеширането на елемента в променлива (с префикс `$`):
448 | 
449 | ```javascript
450 | var $elem = $('#elem');
451 | $elem.hide();
452 | $elem.html('bla');
453 | $elem.otherStuff();
454 | ```
455 | 
456 | Както "верижните" повиквания, така и [кеширането](#cache-jquery-selectors) се считат за добри практики в jQuery, водещи до по-кратък и по-бързо изпълняем код.
457 | 
458 | <sup>[обратно към съдържанието](#съдържание)</sup>
459 | 
460 | 
461 | ### Сортиране на списък по азбучен ред
462 | 
463 | Ако елементите от даден списък се окажат твърде много на брой, например в случай, че съдържанието е изготвено от Система за Управление на Съдържание (Content Management System / CMS), можете да подредите елементите по азбучен ред:
464 | 
465 | ```javascript
466 | var ul = $('#list'),
467 | lis = $('li', ul).get();
468 | 
469 | lis.sort(function (a, b) {
470 |   return ($(a).text().toUpperCase() < $(b).text().toUpperCase()) ? -1 : 1;
471 | });
472 | 
473 | ul.append(lis);
474 | ```
475 | 
476 | Готово.
477 | 
478 | <sup>[обратно към съдържанието](#съдържание)</sup>
479 | 
480 | 
481 | ### Деактивиране на клик с десен бутон
482 | 
483 | Ако искате да деактивирате клик с десен бутон на мишката, може да го направите както за цялата страница...
484 | 
485 | ```javascript
486 | $(document).ready(function () {
487 |   $(document).bind('contextmenu', function (e) {
488 |     return false;
489 |   })
490 | })
491 | ```
492 | 
493 | ...така и за определен елемент:
494 | 
495 | ```javascript
496 | $(document).ready(function () {
497 |   $('#submit').bind('contextmenu', function (e) {
498 |     return false;
499 |   })
500 | })
501 | ```
502 | 
503 | <sup>[обратно към съдържанието](#съдържание)</sup>
504 | 
505 | 
506 | 
507 | 
508 | 
509 | 
510 | ## Поддръжка
511 | 
512 | Актуалните версии на Chrome, Firefox, Safari, Opera, Edge, и IE11.
513 | 
514 | <sup>[обратно към съдържанието](#съдържание)</sup>
515 | 


--------------------------------------------------------------------------------
/translations/es-ES/README.md:
--------------------------------------------------------------------------------
  1 | # Consejos jQuery cada uno debe saber [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)
  2 | 
  3 | Una colección de consejos simples para ayudar a su juego jQuery.
  4 | 
  5 | > Para otros grandes listas echa un vistazo a [@sindresorhus](https://github.com/sindresorhus/)'s lista curada de [listas impresionantes](https://github.com/sindresorhus/awesome/).
  6 | 
  7 | 
  8 | <div id="table-of-contents"></div>
  9 | 
 10 | ## Tabla de contenido
 11 | 
 12 | * [Tips](#consejos)
 13 | * [Apoyo](#apoyo)
 14 | * [Pautas de contribución](../../CONTRIBUTING.md)
 15 | 
 16 | 
 17 | ## Consejos
 18 | 
 19 | 1. [Utilizar `noConflict()`](#utilizar-noconflict)
 20 | 1. [Verificando jQuery Cargado](#verificando-jquery-cargado)
 21 | 1. [Compruebe si existe un elemento](#compruebe-si-existe-un-elemento)
 22 | 1. [Utilice `.on ()` En lugar de unión `.click ()`](#utilice-on--en-lugar-de-unión-click-)
 23 | 1. [Volver al botón de inicio](#volver-al-botón-de-inicio)
 24 | 1. [Carga previa de imágenes](#carga-previa-de-imágenes)
 25 | 1. [Comprobando si las imágenes se cargan](#comprobación-si-las-imágenes-se-cargan)
 26 | 1. [Corregir imágenes automáticamente rotas](#corregir-imágenes-automáticamente-rotas)
 27 | 1. [Publicar un formulario con AJAX](#publicar-un-formulario-con-ajax)
 28 | 1. [Alternar clases en la libración](##alternar-clases-en-la-libración)
 29 | 1. [Desactivar la acción de campos](#desactivación-de-campos-de-entrada)
 30 | 1. [Detener la carga de Enlaces](#detener-la-carga-de-enlaces)
 31 | 1. [De caché de jQuery selectores](#de-caché-de-jquery-selectores)
 32 | 1. [De palanca de fundido / Slide](#de-palanca-de-fundido--slide)
 33 | 1. [Acordeón simple](#acordeón-simple)
 34 | 1. [Haga dos Divs la misma altura](#haga-dos-divs-la-misma-altura)
 35 | 1. [Abrir enlaces externos en una nueva pestaña / ventana](#abrir-enlaces-externos-en-una-nueva-pestaña--ventana)
 36 | 1. [Buscar elemento Por Texto](#buscar-elemento-por-texto)
 37 | 1. [Visibilidad gatillo de Cambio](#visibilidad-gatillo-de-cambio)
 38 | 1. [Control de errores de llamada Ajax](#control-de-errores-de-llamada-ajax)
 39 | 1. [Llamadas Plugin Cadena](#llamadas-plugin-cadena)
 40 | 1. [Ordenar la lista de elementos alfabéticamente](#ordenar-la-lista-de-elementos-alfabéticamente)
 41 | 1. [Deshabilitar clic derecho](#deshabilitar-clic-derecho)
 42 | 
 43 | 
 44 | ### Utilizar `noConflict()`
 45 | 
 46 | 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:
 47 | 
 48 | ```javascript
 49 | jQuery.noConflict();
 50 | ```
 51 | 
 52 | 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:
 53 | 
 54 | ```javascript
 55 | let $x = jQuery.noConflict();
 56 | ```
 57 | 
 58 | <sup>[volver al índice de contenidos](#table-of-contents)</sup>
 59 | 
 60 | 
 61 | ### Verificando jQuery Cargado
 62 | 
 63 | Antes de que pueda hacer cualquier cosa con jQuery primero tiene que asegurarse de que se ha cargado:
 64 | 
 65 | ```javascript
 66 | if (typeof jQuery == 'undefined') {
 67 |   console.log('jQuery hasn\'t loaded');
 68 | } else {
 69 |   console.log('jQuery has loaded');
 70 | }
 71 | ```
 72 | 
 73 | Ahora que estás fuera...
 74 | 
 75 | <sup>[volver al índice de contenidos](#table-of-contents)</sup>
 76 | 
 77 | 
 78 | ### Compruebe si existe un elemento
 79 | 
 80 | Antes de usar un elemento HTML, debe asegurarse de que sea parte de DOM.
 81 | 
 82 | ```javascript
 83 | if ($("#selector").length) {
 84 |   //hacer algo con elemento
 85 | }
 86 | ```
 87 | 
 88 | <sup>[volver al índice de contenidos](#table-of-contents)</sup>
 89 | 
 90 | 
 91 | ### Utilice `.on ()` En lugar de unión `.click ()`
 92 | 
 93 | .en El uso de `()` le da varias ventajas sobre el uso de `.click ()`, tales como la capacidad de agregar varios eventos...
 94 | 
 95 | ```javascript
 96 | .on ('click tap hover')
 97 | ```
 98 | 
 99 | ...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) ...
100 | 
101 | ...Y la posibilidad de configurar un espacio de nombres:
102 | 
103 | ```javascript
104 | .on('click.menuOpening')
105 | ```
106 | 
107 | Los espacios de nombres te dan el poder para desenlazar un evento específico (por ejemplo,`.off('click.menuOpening')`).
108 | 
109 | <sup>[volver al índice de contenidos](#table-of-contents)</sup>
110 | 
111 | 
112 | ### Volver al botón de inicio
113 | 
114 | 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:
115 | 
116 | ```javascript
117 | // Back to top
118 | $('.container').on('click', '.back-to-top', function (e) {
119 |   e.preventDefault();
120 |   $('html, body').animate({scrollTop: 0}, 800);
121 | });
122 | ```
123 | 
124 | ```html
125 | <!-- Create an anchor tag -->
126 | <a class="top" href="#">Back to top</a>
127 | ```
128 | 
129 | 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.
130 | 
131 | **Nota:** ve por alguna [comportamiento incorrecto](https://github.com/jquery/api.jquery.com/issues/417) con `scrollTop`.
132 | 
133 | <sup>[volver al índice de contenidos](#table-of-contents)</sup>
134 | 
135 | 
136 | ### Carga previa de imágenes
137 | 
138 | 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:
139 | 
140 | ```javascript
141 | $.preloadImages = function () {
142 |   for (var i = 0; i < arguments.length; i++) {
143 |     $('<img>').attr('src', arguments[i]);
144 |   }
145 | };
146 | 
147 | $.preloadImages('img/hover-on.png', 'img/hover-off.png');
148 | ```
149 | 
150 | <sup>[volver al índice de contenidos](#table-of-contents)</sup>
151 | 
152 | 
153 | ### Comprobación Si las imágenes se cargan
154 | 
155 | A veces puede que tenga que comprobar si las imágenes han cargado completamente con el fin de continuar con las secuencias de comandos:
156 | 
157 | ```javascript
158 | $('img').on('load', function () {
159 |   console.log('image load successful');
160 | });
161 | ```
162 | 
163 | También puede comprobar si una imagen en particular se ha cargado mediante la sustitución de la etiqueta `<img>` con un ID o clase.
164 | 
165 | <sup>[volver al índice de contenidos](#table-of-contents)</sup>
166 | 
167 | 
168 | ### Corregir imágenes automáticamente rotas
169 | 
170 | 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:
171 | 
172 | ```javascript
173 | $('img').on('error', function () {
174 |   if(!$(this).hasClass('broken-image')) {
175 |     $(this).prop('src', 'img/broken.png').addClass('broken-image');
176 |   }
177 | });
178 | ```
179 | 
180 | Alternativamente, si desea ocultar simplemente imágenes rotas este fragmento se encargará de que para:
181 | 
182 | ```javascript
183 | $('img').on('error', function () {
184 |   $(this).hide();
185 | });
186 | ```
187 | 
188 | <sup>[volver al índice de contenidos](#table-of-contents)</sup>
189 | 
190 | 
191 | ### Publicar un formulario con AJAX
192 | 
193 | 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()`:
194 | 
195 | ```javascript
196 | $.post('sign_up.php', {
197 |   user_name: $('input[name=user_name]').val(),
198 |   email:     $('input[name=email]').val(),
199 |   password:  $('input[name=password]').val(),
200 | });
201 | ```
202 | 
203 | 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:
204 | 
205 | ```javascript
206 | $.post('sign_up', $('#sign-up-form').serialize());
207 | ```
208 | 
209 | <sup>[volver al índice de contenidos](#table-of-contents)</sup>
210 | 
211 | 
212 | ### Alternar clases en la libración
213 | 
214 | 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:
215 | 
216 | ```javascript
217 | $('.btn').on('hover', function () {
218 |   $(this).addClass('hover');
219 | }, function () {
220 |   $(this).removeClass('hover');
221 | });
222 | ```
223 | 
224 | Sólo tiene que añadir el CSS necesario. Si desea una manera aún _simpler_ utilizar el método `toggleClass`:
225 | 
226 | ```javascript
227 | $('.btn').hover(function () {
228 |   $(this).toggleClass('hover');
229 | });
230 | ```
231 | 
232 | **Nota:** CSS puede ser una solución más rápida en este caso, pero es todavía vale la pena saber esto.
233 | 
234 | <sup>[volver al índice de contenidos](#table-of-contents)</sup>
235 | 
236 | 
237 | ### Desactivación de campos de entrada
238 | 
239 | 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:
240 | 
241 | ```javascript
242 | $('input[type="submit"]').prop('disabled', true);
243 | ```
244 | 
245 | Todo lo que necesita hacer es ejecutar el método `prop` otra vez en la entrada, pero establecer el valor de `disabled` a `false`:
246 | 
247 | ```javascript
248 | $('input[type="submit"]').prop('disabled', false);
249 | ```
250 | 
251 | <sup>[volver al índice de contenidos](#table-of-contents)</sup>
252 | 
253 | 
254 | ### Detener la carga de Enlaces
255 | 
256 | 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:
257 | 
258 | ```javascript
259 | $('a.no-link').on('click', function (e) {
260 |   e.preventDefault();
261 | });
262 | ```
263 | 
264 | <sup>[volver al índice de contenidos](#table-of-contents)</sup>
265 | 
266 | 
267 | ### De caché de jQuery selectores
268 | 
269 | 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:
270 | 
271 | ```javascript
272 | var blocks = $('#blocks').find('li');
273 | ```
274 | 
275 | Ahora se puede utilizar la variable `blocks` donde quieras sin tener que buscar el DOM en cada ocasión:
276 | 
277 | ```javascript
278 | $('#hideBlocks').on('click', function () {
279 |   blocks.fadeOut();
280 | });
281 | 
282 | $('#showBlocks').on('click', function () {
283 |   blocks.fadeIn();
284 | });
285 | ```
286 | 
287 | El almacenamiento en caché selectores de jQuery son una ganancia de rendimiento fácil.
288 | 
289 | <sup>[volver al índice de contenidos](#table-of-contents)</sup>
290 | 
291 | 
292 | ### De palanca de fundido / Slide
293 | 
294 | 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:
295 | 
296 | ```javascript
297 | // Fade
298 | $('.btn').on('click', function () {
299 |   $('.element').fadeToggle('slow');
300 | });
301 | 
302 | // Toggle
303 | $('.btn').on('click', function () {
304 |   $('.element').slideToggle('slow');
305 | });
306 | ```
307 | 
308 | <sup>[volver al índice de contenidos](#table-of-contents)</sup>
309 | 
310 | 
311 | ### Acordeón simple
312 | 
313 | Este es un método simple para un acordeón rápida:
314 | 
315 | ```javascript
316 | // Close all panels
317 | $('#accordion').find('.content').hide();
318 | 
319 | // Accordion
320 | $('#accordion').find('.accordion-header').on('click', function () {
321 |   var next = $(this).next();
322 |   next.slideToggle('fast');
323 |   $('.content').not(next).slideUp('fast');
324 |   return false;
325 | });
326 | ```
327 | 
328 | 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.
329 | 
330 | <sup>[volver al índice de contenidos](#table-of-contents)</sup>
331 | 
332 | 
333 | ### Haga dos Divs la misma altura
334 | 
335 | A veces, usted querrá dos divs tener la misma altura no importa qué contenido tienen en ellos:
336 | 
337 | ```javascript
338 | $('.div').css('min-height', $('.main-div').height());
339 | ```
340 | 
341 | 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:
342 | 
343 | ```javascript
344 | var $columns = $('.column');
345 | var height = 0;
346 | $columns.each(function () {
347 |   if ($(this).height() > height) {
348 |     height = $(this).height();
349 |   }
350 | });
351 | $columns.height(height);
352 | ```
353 | 
354 | Si desea _todas_ columnas tengan la misma altura:
355 | 
356 | ```javascript
357 | var $rows = $('.same-height-columns');
358 | $rows.each(function () {
359 |   $(this).find('.column').height($(this).height());
360 | });
361 | ```
362 | 
363 | **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.
364 | 
365 | <sup>[volver al índice de contenidos](#table-of-contents)</sup>
366 | 
367 | 
368 | ### Abrir enlaces externos en una nueva pestaña / ventana
369 | 
370 | 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:
371 | 
372 | ```javascript
373 | $('a[href^="http"]').attr('target', '_blank');
374 | $('a[href^="//"]').attr('target', '_blank');
375 | $('a[href^="' + window.location.origin + '"]').attr('target', '_self');
376 | ```
377 | 
378 | **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.
379 | 
380 | <sup>[volver al índice de contenidos](#table-of-contents)</sup>
381 | 
382 | 
383 | ### Buscar elemento Por Texto
384 | 
385 | 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á:
386 | 
387 | ```javascript
388 | var search = $('#search').val();
389 | $('div:not(:contains("' + search + '"))').hide();
390 | ```
391 | 
392 | <sup>[volver al índice de contenidos](#table-of-contents)</sup>
393 | 
394 | 
395 | ### Visibilidad gatillo de Cambio
396 | 
397 | Gatillo JavaScript cuando el usuario ya no se centra en una pestaña, o vuelve a centrar en una pestaña:
398 | 
399 | ```javascript
400 | $(document).on('visibilitychange', function (e) {
401 |   if (e.target.visibilityState === 'visible') {
402 |     console.log('Tab is now in view!');
403 |   } else if (e.target.visibilityState === 'hidden') {
404 |     console.log('Tab is now hidden!');
405 |   }
406 | });
407 | ```
408 | 
409 | <sup>[volver al índice de contenidos](#table-of-contents)</sup>
410 | 
411 | 
412 | ### Control de errores de llamada Ajax
413 | 
414 | 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:
415 | 
416 | ```javascript
417 | $(document).on('ajaxError', function (e, xhr, settings, error) {
418 |   console.log(error);
419 | });
420 | ```
421 | 
422 | <sup>[volver al índice de contenidos](#table-of-contents)</sup>
423 | 
424 | 
425 | ### Llamadas Plugin Cadena
426 | 
427 | 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:
428 | 
429 | ```javascript
430 | $('#elem').show();
431 | $('#elem').html('bla');
432 | $('#elem').otherStuff();
433 | ```
434 | 
435 | Esto podría mejorarse enormemente mediante el uso de encadenamiento:
436 | 
437 | ```javascript
438 | $('#elem')
439 |   .show()
440 |   .html('bla')
441 |   .otherStuff();
442 | ```
443 | 
444 | Una alternativa es almacenar en caché el elemento en una variable (con el prefijo `$`):
445 | 
446 | ```javascript
447 | var $elem = $('#elem');
448 | $elem.hide();
449 | $elem.html('bla');
450 | $elem.otherStuff();
451 | ```
452 | 
453 | 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.
454 | 
455 | <sup>[volver al índice de contenidos](#table-of-contents)</sup>
456 | 
457 | 
458 | ### Ordenar la lista de elementos alfabéticamente
459 | 
460 | 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:
461 | 
462 | ```javascript
463 | var ul = $('#list'),
464 | lis = $('li', ul).get();
465 | 
466 | lis.sort(function (a, b) {
467 |   return ($(a).text().toUpperCase() < $(b).text().toUpperCase()) ? -1 : 1;
468 | });
469 | 
470 | ul.append(lis);
471 | ```
472 | 
473 | Hay que ir!
474 | 
475 | <sup>[volver al índice de contenidos](#table-of-contents)</sup>
476 | 
477 | 
478 | <div id="disable-right-click"></div>
479 | 
480 | 
481 | ### Deshabilitar clic derecho
482 | 
483 | Si desea desactivar el botón derecho del ratón, puede hacerlo para una página entera...
484 | 
485 | ```javascript
486 | $(document).ready(function () {
487 |   $(document).bind('contextmenu', function (e) {
488 |     return false;
489 |   })
490 | })
491 | ```
492 | 
493 | ...pero también puede hacer lo mismo para un elemento específico:
494 | 
495 | ```javascript
496 | $(document).ready(function () {
497 |   $('#submit').bind('contextmenu', function (e) {
498 |     return false;
499 |   })
500 | })
501 | ```
502 | 
503 | <sup>[volver al índice de contenidos](#table-of-contents)</sup>
504 | 
505 | 
506 | ## Apoyo
507 | 
508 | Las versiones actuales de Chrome, Firefox, Safari, Opera, Edge y EI11.
509 | 
510 | <sup>[volver al índice de contenidos](#table-of-contents)</sup>
511 | 


--------------------------------------------------------------------------------
/translations/fr-FR/README.md:
--------------------------------------------------------------------------------
  1 | # JQuery Conseils Tout le monde devrait savoir [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)
  2 | 
  3 | Une collection de conseils simples pour aider votre jeu jQuery.
  4 | 
  5 | > Pour les autres grandes listes vérifier [@sindresorhus](https://github.com/sindresorhus/) de la liste curated des [listes impressionnantes](https://github.com/sindresorhus/awesome/).
  6 | 
  7 | 
  8 | <div id="table-of-contents"></div>
  9 | 
 10 | ## Table des matières
 11 | 
 12 | * [Conseils](#conseils)
 13 | * [Soutien](#soutien)
 14 | * [Lignes directrices des contributions](../../CONTRIBUTING.md)
 15 | 
 16 | 
 17 | ## Conseils
 18 | 
 19 | 1. [Utilisez `noConflict()`](#use-noconflict)
 20 | 1. [Vérification Si jQuery Loaded](#checking-if-jquery-loaded)
 21 | 1. [Vérifier si un élément existe](#check-whether-an-element-exists)
 22 | 1. [Utilisez `.on()` Binding Au lieu de `.click()`](#use-on-binding-instead-of-click)
 23 | 1. [Haut de la page Bouton](#back-to-top-button)
 24 | 1. [Précharger Images](#preload-images)
 25 | 1. [Vérification Si les images sont chargées](#checking-if-images-are-loaded)
 26 | 1. [Fix Broken Images automatiquement](#fix-broken-images-automatically)
 27 | 1. [Poster un formulaire avec AJAX](#post-a-form-with-ajax)
 28 | 1. [Basculer Classes sur Hover](#toggle-classes-on-hover)
 29 | 1. [Entrée Désactivation champs](#disabling-input-fields)
 30 | 1. [Arrêter le chargement des Liens](#stop-the-loading-of-links)
 31 | 1. [Cache jQuery sélecteurs](#cache-jquery-selectors)
 32 | 1. [Basculer Fade / Slide](#toggle-fadeslide)
 33 | 1. [Accordéon Simple](#simple-accordion)
 34 | 1. [Faire deux Divs la même hauteur](#make-two-divs-the-same-height)
 35 | 1. [Ouvrir Liens externes dans un nouvel onglet / fenêtre](#open-external-links-in-new-tabwindow)
 36 | 1. [Trouver Élément Par texte](#find-element-by-text)
 37 | 1. [Déclenchement de la visibilité Change](#trigger-on-visibility-change)
 38 | 1. [Gestion des erreurs Ajax Appel](#ajax-call-error-handling)
 39 | 1. [Appels de Plugin Chain](#chain-plugin-calls)
 40 | 1. [Trier Liste des articles par ordre alphabétique](#sort-list-items-alphabetically)
 41 | 1. [Desactivar Botón Derecho del Ratón](#disable-right-click)
 42 | 
 43 | 
 44 | <div id="use-noconflict"></div>
 45 | 
 46 | ### Utilisez `noConflict()`
 47 | 
 48 | 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:
 49 | 
 50 | ```javascript
 51 | jQuery.noConflict();
 52 | ```
 53 | 
 54 | 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:
 55 | 
 56 | ```javascript
 57 | let $x = jQuery.noConflict();
 58 | ```
 59 | 
 60 | <sup>[retour à la table des matières](#table-of-contents)</sup>
 61 | 
 62 | 
 63 | <div id="checking-if-jquery-loaded"></div>
 64 | 
 65 | ### Vérification Si jQuery Loaded
 66 | 
 67 | Avant de pouvoir faire quoi que ce soit avec jQuery vous devez d'abord vous assurer qu'il a été chargé:
 68 | 
 69 | ```javascript
 70 | if (typeof jQuery == 'undefined') {
 71 |   console.log('jQuery hasn\'t loaded');
 72 | } else {
 73 |   console.log('jQuery has loaded');
 74 | }
 75 | ```
 76 | 
 77 | Maintenant, vous êtes hors ...
 78 | 
 79 | <sup>[retour à la table des matières](#table-of-contents)</sup>
 80 | 
 81 | 
 82 | <div id="check-whether-an-element-exists"></div>
 83 | 
 84 | ### Vérifier si un élément existe
 85 | 
 86 | Avant d'utiliser un élément HTML, vous devez vous assurer qu'il fait partie de DOM.
 87 | 
 88 | ```javascript
 89 | if ($("#selector").length) {
 90 |   //faire quelque chose avec élément
 91 | }
 92 | ```
 93 | 
 94 | <sup>[retour à la table des matières](#table-of-contents)</sup>
 95 | 
 96 | 
 97 | <div id="use-on-binding-instead-of-click"></div>
 98 | 
 99 | ### Utilisez `.on()` Binding Au lieu de `.click()`
100 | 
101 | Utiliser `.on()` vous donne plusieurs avantages par rapport `.click()`, comme la possibilité d'ajouter plusieurs événements...
102 | 
103 | ```javascript
104 | .on ('click tap hover')
105 | ```
106 | 
107 | ...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)...
108 | 
109 | ...Et la possibilité de définir un espace de noms:
110 | 
111 | ```javascript
112 | .on ('click.menuOpening')
113 | ```
114 | 
115 | Namespaces vous donnent le pouvoir de délier un événement spécifique (par exemple, `.off('click.menuOpening')`).
116 | 
117 | <sup>[retour à la table des matières](#table-of-contents)</sup>
118 | 
119 | 
120 | <div id="back-to-top-button"></div>
121 | 
122 | ### Haut de la page Bouton
123 | 
124 | 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:
125 | 
126 | ```javascript
127 | // Back to top
128 | $('.container').on('click', '.back-to-top', function (e) {
129 |   e.preventDefault();
130 |   $('html, body').animate({scrollTop: 0}, 800);
131 | });
132 | ```
133 | 
134 | ```html
135 | <!-- Create an anchor tag -->
136 | <a class="top" href="#">Back to top</a>
137 | ```
138 | 
139 | 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.
140 | 
141 | **Remarque:** Surveillez certains [comportement bogué](https://github.com/jquery/api.jquery.com/issues/417) avec `scrollTop`.
142 | 
143 | <sup>[retour à la table des matières](#table-of-contents)</sup>
144 | 
145 | 
146 | <div id="preload-images"></div>
147 | 
148 | ### Précharger Images
149 | 
150 | 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:
151 | 
152 | ```javascript
153 | $.preloadImages = function () {
154 |   for (var i = 0; i < arguments.length; i++) {
155 |     $('<img>').attr('src', arguments[i]);
156 |   }
157 | };
158 | 
159 | $.preloadImages('img/hover-on.png', 'img/hover-off.png');
160 | ```
161 | 
162 | <sup>[retour à la table des matières](#table-of-contents)</sup>
163 | 
164 | 
165 | <div id="checking-if-images-are-loaded"></div>
166 | 
167 | ### Vérification Si les images sont chargées
168 | 
169 | Parfois, vous pourriez avoir besoin de vérifier si vos images sont entièrement chargées, afin de continuer avec vos scripts:
170 | 
171 | ```javascript
172 | $('img').on('load', function () {
173 |   console.log('image load successful');
174 | });
175 | ```
176 | 
177 | Vous pouvez également vérifier si une image particulière a été chargé par le remplacement du `<img>` tag avec un ID ou classe.
178 | 
179 | <sup>[retour à la table des matières](#table-of-contents)</sup>
180 | 
181 | 
182 | <div id="fix-broken-images-automatically"></div>
183 | 
184 | ### Fix Broken Images automatiquement
185 | 
186 | 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:
187 | 
188 | ```javascript
189 | $('img').on('error', function () {
190 |   if(!$(this).hasClass('broken-image')) {
191 |     $(this).prop('src', 'img/broken.png').addClass('broken-image');
192 |   }
193 | });
194 | ```
195 | 
196 | Alternativement, si vous souhaitez simplement masquer les images brisées cet extrait prendra soin de cela pour:
197 | 
198 | ```javascript
199 | $('img').on('error', function () {
200 |   $(this).hide();
201 | });
202 | ```
203 | 
204 | <sup>[retour à la table des matières](#table-of-contents)</sup>
205 | 
206 | 
207 | <div id="post-a-form-with-ajax"></div>
208 | 
209 | ### Poster un formulaire avec AJAX
210 | 
211 | 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()`:
212 | 
213 | ```javascript
214 | $.post('sign_up.php', {
215 |   user_name: $('input[name=user_name]').val(),
216 |   email:     $('input[name=email]').val(),
217 |   password:  $('input[name=password]').val(),
218 | });
219 | ```
220 | 
221 | 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:
222 | 
223 | ```javascript
224 | $.post('sign_up', $('#sign-up-form').serialize());
225 | ```
226 | 
227 | <sup>[retour à la table des matières](#table-of-contents)</sup>
228 | 
229 | 
230 | <div id="toggle-classes-on-hover"></div>
231 | 
232 | ### Basculer Classes sur Hover
233 | 
234 | 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:
235 | 
236 | ```javascript
237 | $('.btn').on('hover', function () {
238 |   $(this).addClass('hover');
239 | }, function () {
240 |   $(this).removeClass('hover');
241 | });
242 | ```
243 | 
244 | Vous avez juste besoin d'ajouter le CSS nécessaire. Si vous voulez une manière encore _simpler_ utiliser la méthode `toggleClass`:
245 | 
246 | ```javascript
247 | $('.btn').hover(function () {
248 |   $(this).toggleClass('hover');
249 | });
250 | ```
251 | 
252 | **Remarque:** CSS peut être une solution plus rapide dans ce cas, mais il est toujours intéressant de savoir.
253 | 
254 | <sup>[retour à la table des matières](#table-of-contents)</sup>
255 | 
256 | 
257 | <div id="disabling-input-fields"></div>
258 | 
259 | ### Désactivation de champs d'entrée
260 | 
261 | 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:
262 | 
263 | ```javascript
264 | $('input[type="submit"]').prop('disabled', true);
265 | ```
266 | 
267 | 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`:
268 | 
269 | ```javascript
270 | $('input[type="submit"]').prop('disabled', false);
271 | ```
272 | 
273 | <sup>[retour à la table des matières](#table-of-contents)</sup>
274 | 
275 | 
276 | <div id="stop-the-loading-of-links"></div>
277 | 
278 | ### Arrêter le chargement des Liens
279 | 
280 | 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:
281 | 
282 | ```javascript
283 | $('a.no-link').on('click', function (e) {
284 |   e.preventDefault();
285 | });
286 | ```
287 | 
288 | <sup>[retour à la table des matières](#table-of-contents)</sup>
289 | 
290 | 
291 | <div id="cache-jquery-selectors"></div>
292 | 
293 | ### Cache jQuery sélecteurs
294 | 
295 | 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:
296 | 
297 | ```javascript
298 | var blocks = $('#blocks').find('li');
299 | ```
300 | 
301 | Maintenant, vous pouvez utiliser la variable `blocks` où vous voulez sans avoir à chercher les DOM à chaque fois:
302 | 
303 | ```javascript
304 | $('#hideBlocks').on('click', function () {
305 |   blocks.fadeOut();
306 | });
307 | 
308 | $('#showBlocks').on('click', function () {
309 |   blocks.fadeIn();
310 | });
311 | ```
312 | 
313 | sélecteurs Caching jQuery sont un gain de performance facile.
314 | 
315 | <sup>[retour à la table des matières](#table-of-contents)</sup>
316 | 
317 | 
318 | <div id="toggle-fadeslide"></div>
319 | 
320 | ### Basculer Fade / Slide
321 | 
322 | 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:
323 | 
324 | ```javascript
325 | // Fade
326 | $('.btn').on('click', function () {
327 |   $('.element').fadeToggle('slow');
328 | });
329 | 
330 | // Toggle
331 | $('.btn').on('click', function () {
332 |   $('.element').slideToggle('slow');
333 | });
334 | ```
335 | 
336 | <sup>[retour à la table des matières](#table-of-contents)</sup>
337 | 
338 | 
339 | <div id="simple-accordion"></div>
340 | 
341 | ### Accordéon Simple
342 | 
343 | Ceci est une méthode simple pour un accordéon rapide:
344 | 
345 | ```javascript
346 | // Close all panels
347 | $('#accordion').find('.content').hide();
348 | 
349 | // Accordion
350 | $('#accordion').find('.accordion-header').on('click', function () {
351 |   var next = $(this).next();
352 |   next.slideToggle('fast');
353 |   $('.content').not(next).slideUp('fast');
354 |   return false;
355 | });
356 | ```
357 | 
358 | 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.
359 | 
360 | <sup>[retour à la table des matières](#table-of-contents)</sup>
361 | 
362 | 
363 | <div id="make-two-divs-the-same-height"></div>
364 | 
365 | ### Faire deux Divs la même hauteur
366 | 
367 | Parfois, vous aurez envie deux divs d'avoir la même hauteur, peu importe le contenu qu'ils ont en eux:
368 | 
369 | ```javascript
370 | $('.div').css('min-height', $('.main-div').height());
371 | ```
372 | 
373 | 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:
374 | 
375 | ```javascript
376 | var $columns = $('.column');
377 | var height = 0;
378 | $columns.each(function () {
379 |   if ($(this).height() > height) {
380 |     height = $(this).height();
381 |   }
382 | });
383 | $columns.height(height);
384 | ```
385 | 
386 | Si vous voulez _all_ colonnes ont la même hauteur:
387 | 
388 | ```javascript
389 | var $rows = $('.same-height-columns');
390 | $rows.each(function () {
391 |   $(this).find('.column').height($(this).height());
392 | });
393 | ```
394 | 
395 | **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.
396 | 
397 | <sup>[retour à la table des matières](#table-of-contents)</sup>
398 | 
399 | 
400 | <div id="open-external-links-in-new-tabwindow"></div>
401 | 
402 | ### Ouvrez Liens externes dans un nouvel onglet / fenêtre
403 | 
404 | 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:
405 | 
406 | ```javascript
407 | $('a[href^="http"]').attr('target', '_blank');
408 | $('a[href^="//"]').attr('target', '_blank');
409 | $('a[href^="' + window.location.origin + '"]').attr('target', '_self');
410 | ```
411 | 
412 | **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.
413 | 
414 | <sup>[retour à la table des matières](#table-of-contents)</sup>
415 | 
416 | 
417 | <div id="find-element-by-text"></div>
418 | 
419 | ### Trouver Élément Par texte
420 | 
421 | 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é:
422 | 
423 | ```javascript
424 | var search = $('#search').val();
425 | $('div:not(:contains("' + search + '"))').hide();
426 | ```
427 | 
428 | <sup>[retour à la table des matières](#table-of-contents)</sup>
429 | 
430 | 
431 | <div id="trigger-on-visibility-change"></div>
432 | 
433 | ### Déclenchement de la visibilité Change
434 | 
435 | Trigger JavaScript lorsque l'utilisateur est plus axé sur un onglet, ou réoriente sur un onglet:
436 | 
437 | ```javascript
438 | $(document).on('visibilitychange', function (e) {
439 |   if (e.target.visibilityState === 'visible') {
440 |     console.log('Tab is now in view!');
441 |   } else if (e.target.visibilityState === 'hidden') {
442 |     console.log('Tab is now hidden!');
443 |   }
444 | });
445 | ```
446 | 
447 | <sup>[retour à la table des matières](#table-of-contents)</sup>
448 | 
449 | 
450 | <div id="ajax-call-error-handling"></div>
451 | 
452 | ### Gestion des erreurs Ajax Appel
453 | 
454 | 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:
455 | 
456 | ```javascript
457 | $(document).on('ajaxError', function (e, xhr, settings, error) {
458 |   console.log(error);
459 | });
460 | ```
461 | 
462 | <sup>[retour à la table des matières](#table-of-contents)</sup>
463 | 
464 | 
465 | <div id="chain-plugin-calls"></div>
466 | 
467 | ### appels Plugin Chain
468 | 
469 | 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:
470 | 
471 | ```javascript
472 | $('#elem').show();
473 | $('#elem').html('bla');
474 | $('#elem').otherStuff();
475 | ```
476 | 
477 | Cela pourrait être grandement améliorée en utilisant le chaînage:
478 | 
479 | ```javascript
480 | $('#elem')
481 |   .show()
482 |   .html('bla')
483 |   .otherStuff();
484 | ```
485 | 
486 | Une alternative consiste à mettre en cache l'élément dans une variable (avec le préfixe `$`):
487 | 
488 | ```javascript
489 | var $elem = $('#elem');
490 | $elem.hide();
491 | $elem.html('bla');
492 | $elem.otherStuff();
493 | ```
494 | 
495 | 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.
496 | 
497 | <sup>[retour à la table des matières](#table-of-contents)</sup>
498 | 
499 | 
500 | <div id="sort-list-items-alphabetically"></div>
501 | 
502 | ### Trier Liste Articles alphabétiquement
503 | 
504 | 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:
505 | 
506 | ```javascript
507 | var ul = $('#list'),
508 | lis = $('li', ul).get();
509 | 
510 | lis.sort(function (a, b) {
511 |   return ($(a).text().toUpperCase() < $(b).text().toUpperCase()) ? -1 : 1;
512 | });
513 | 
514 | ul.append(lis);
515 | ```
516 | 
517 | Voilà!
518 | 
519 | <sup>[retour à la table des matières](#table-of-contents)</sup>
520 | 
521 | 
522 | <div id="disable-right-click"></div>
523 | 
524 | ### Desactivar Botón Derecho del Ratón
525 | 
526 | Si desea desactivar botón derecho del ratón, se puede hacer por una página entera...
527 | 
528 | ```javascript
529 | $(document).ready(function () {
530 |   $(document).bind('contextmenu', function (e) {
531 |     return false;
532 |   })
533 | })
534 | ```
535 | 
536 | ...pero se puede hacer aussi la même para un elemento específico:
537 | 
538 | ```javascript
539 | $(document).ready(function () {
540 |   $('#submit').bind('contextmenu', function (e) {
541 |     return false;
542 |   })
543 | })
544 | ```
545 | 
546 | <sup>[retour à la table des matières](#table-of-contents)</sup>
547 | 
548 | 
549 | ## Soutien
550 | 
551 | Les versions actuelles de Chrome, Firefox, Safari, Opera, Edge, et IE11.
552 | 
553 | <sup>[retour à la table des matières](#table-of-contents)</sup>
554 | 


--------------------------------------------------------------------------------
/translations/hu-HU/README.md:
--------------------------------------------------------------------------------
  1 | # jQuery tippek, amiket mindenkinek tudni érdemes [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)
  2 | 
  3 | Egyszerű tippek gyűjteménye, a jQuery-ben való elmélyülésed  segítendő.
  4 | 
  5 | > További nagyszerű listákért tekintsd meg [@sindresorhus](https://github.com/sindresorhus/) válogatott [listáját](https://github.com/sindresorhus/awesome/).
  6 | 
  7 | ## Tartalomjegyzék
  8 | 
  9 | * [Tippek](#tippek)
 10 | * [Támogatás](#t%C3%A1mogat%C3%A1s)
 11 | * [Közreműködési útmutató (angolul)](../../CONTRIBUTING.md)
 12 | 
 13 | 
 14 | ## Tippek
 15 | 
 16 | 1. [Használat `noConflict()`](#használat-noconflict)
 17 | 1. [Betöltött-e a jQuery? - Ellenőrzés](#bet%C3%B6lt%C3%B6tt-e-a-jquery---ellen%C5%91rz%C3%A9s)
 18 | 1. [Ellenőrizze, hogy van-e elem](#ellenőrizze,-hogy-van-e-elem)
 19 | 1. [`.on()` binding ("kötés") használata `.click()` helyett](#on-binding-k%C3%B6t%C3%A9s-haszn%C3%A1lata-click-helyett)
 20 | 1. ['Vissza az elejére' gomb](#vissza-az-elej%C3%A9re-gomb)
 21 | 1. [Képek előbetöltése](#k%C3%A9pek-el%C5%91bet%C3%B6lt%C3%A9se)
 22 | 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)
 23 | 1. [Betölt(het)etlen képek automatikus javítása](#bet%C3%B6lthetetlen-k%C3%A9pek-automatikus-jav%C3%ADt%C3%A1sa)
 24 | 1. [Űrlap elküldése AJAX-al](#%C5%B1rlap-elk%C3%BCld%C3%A9se-ajax-al)
 25 | 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)
 26 | 1. [Beviteli mezők kikapcsolása](#beviteli-mez%C5%91k-kikapcsol%C3%A1sa)
 27 | 1. [Linkbetöltés megállítása](#linkbet%C3%B6lt%C3%A9s-meg%C3%A1ll%C3%ADt%C3%A1sa)
 28 | 1. [jQuery kiválasztók eltárolása](#jquery-kiv%C3%A1laszt%C3%B3k-elt%C3%A1rol%C3%A1sa)
 29 | 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)
 30 | 1. [Egyszerű accordion (harmonika-menü)](#egyszer%C5%B1-accordion-harmonika-men%C3%BC)
 31 | 1. [HTML div elemek egyező magassággal](#html-div-elemek-egyez%C5%91-magass%C3%A1ggal)
 32 | 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)
 33 | 1. [Elemek keresése szöveg alapján](#elemek-keres%C3%A9se-sz%C3%B6veg-alapj%C3%A1n)
 34 | 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)
 35 | 1. [AJAX hívások hibakezelése](#ajax-h%C3%ADv%C3%A1sok-hibakezel%C3%A9se)
 36 | 1. [Plugin hívások láncolása](#plugin-h%C3%ADv%C3%A1sok-l%C3%A1ncol%C3%A1sa)
 37 | 1. [Listaelemek sorba rendezése ABC szerint](#listaelemek-sorba-rendez%C3%A9se-abc-szerint)
 38 | 1. [Jobb egérkattintás kikapcsolása](#jobb-eg%C3%A9rkattint%C3%A1s-kikapcsol%C3%A1sa)
 39 | 
 40 | 
 41 | ### Használat `noConflict()`
 42 | 
 43 | 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:
 44 | 
 45 | ```javascript
 46 | jQuery.noConflict();
 47 | ```
 48 | 
 49 | 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:
 50 | 
 51 | ```javascript
 52 | let $x = jQuery.noConflict();
 53 | ```
 54 | 
 55 | <sup>[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k)</sup>
 56 | 
 57 | 
 58 | ### Betöltött-e a jQuery? - Ellenőrzés
 59 | 
 60 | Mielőtt bármihez is kezdhetnél a jQuery-vel, először biztosra kell menned abban, hogy betöltött:
 61 | 
 62 | ```javascript
 63 | if (typeof jQuery == 'undefined') {
 64 |   console.log('jQuery hasn\'t loaded');
 65 | } else {
 66 |   console.log('jQuery has loaded');
 67 | }
 68 | ```
 69 | 
 70 | Most, hogy elstartoltunk...
 71 | 
 72 | <sup>[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k)</sup>
 73 | 
 74 | 
 75 | ### Ellenőrizze, hogy van-e elem
 76 | 
 77 | A HTML elem használata előtt meg kell győződnie arról, hogy része a DOM-nak.
 78 | 
 79 | ```javascript
 80 | if ($("#selector").length) {
 81 |   //csinálj valamit az elemmel
 82 | }
 83 | ```
 84 | 
 85 | <sup>[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k)</sup>
 86 | 
 87 | 
 88 | ### `.on()` binding ("kötés") használata `.click()` helyett
 89 | 
 90 | 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...
 91 | 
 92 | ```javascript
 93 | .on('click tap hover')
 94 | ```
 95 | 
 96 | ...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)...
 97 | 
 98 | ...és a névterek felállításának lehetősége:
 99 | 
100 | ```javascript
101 | .on('click.menuOpening')
102 | ```
103 | 
104 | Névterek segítségével "lecsatolhatsz" egyes konkrét eseményeket (pl. `.off('click.menuOpening')`).
105 | 
106 | <sup>[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k)</sup>
107 | 
108 | 
109 | ### 'Vissza az elejére' gomb
110 | 
111 | 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:
112 | 
113 | 
114 | ```javascript
115 | // Back to top
116 | $('.container').on('click', '.back-to-top', function (e) {
117 |   e.preventDefault();
118 |   $('html, body').animate({scrollTop: 0}, 800);
119 | });
120 | ```
121 | 
122 | ```html
123 | <!-- Create an anchor tag -->
124 | <div class="container">
125 |   <a href="#" class="back-to-top">Back to top</a>
126 | </div>
127 | ```
128 | 
129 | 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.
130 | 
131 | **Megjegyzés:** Figyelj oda a `scrollTop` esetenkénti [bugos viselkedésére](https://github.com/jquery/api.jquery.com/issues/417).
132 | 
133 | <sup>[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k)</sup>
134 | 
135 | 
136 | ### Képek előbetöltése
137 | 
138 | If your web page uses a lot of images that aren't visible initially (e.g., on hover) it makes sense to preload them:
139 | 
140 | ```javascript
141 | $.preloadImages = function () {
142 |   for (var i = 0; i < arguments.length; i++) {
143 |     $('<img>').attr('src', arguments[i]);
144 |   }
145 | };
146 | 
147 | $.preloadImages('img/hover-on.png', 'img/hover-off.png');
148 | ```
149 | 
150 | <sup>[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k)</sup>
151 | 
152 | 
153 | ### Betöltöttek-e a képek? - Ellenőrzés
154 | 
155 | 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:
156 | 
157 | ```javascript
158 | $('img').on('load', function () {
159 |   console.log('image load successful');
160 | });
161 | ```
162 | 
163 | 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 `<img>` címkét egy megfelelő azonosíra (ID) vagy osztályra.
164 | 
165 | <sup>[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k)</sup>
166 | 
167 | 
168 | ### Betölt(het)etlen képek automatikus javítása
169 | 
170 | 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:
171 | 
172 | ```javascript
173 | $('img').on('error', function () {
174 |   if(!$(this).hasClass('broken-image')) {
175 |     $(this).prop('src', 'img/broken.png').addClass('broken-image');
176 |   }
177 | });
178 | ```
179 | 
180 | 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:
181 | 
182 | ```javascript
183 | $('img').on('error', function () {
184 |   $(this).hide();
185 | });
186 | ```
187 | 
188 | <sup>[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k)</sup>
189 | 
190 | 
191 | ### Űrlap elküldése AJAX-al
192 | 
193 | 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:
194 | 
195 | ```javascript
196 | $.post('sign_up.php', {
197 |   user_name: $('input[name=user_name]').val(),
198 |   email:     $('input[name=email]').val(),
199 |   password:  $('input[name=password]').val(),
200 | });
201 | ```
202 | 
203 | 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:
204 | 
205 | ```javascript
206 | $.post('sign_up', $('#sign-up-form').serialize());
207 | ```
208 | 
209 | <sup>[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k)</sup>
210 | 
211 | 
212 | ### CSS osztály aktiválása a kurzor hatására
213 | 
214 | 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)
215 | 
216 | 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:
217 | 
218 | ```javascript
219 | $('.btn').on('hover', function () {
220 |   $(this).addClass('hover');
221 | }, function () {
222 |   $(this).removeClass('hover');
223 | });
224 | ```
225 | 
226 | 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:
227 | 
228 | ```javascript
229 | $('.btn').on('hover', function () {
230 |   $(this).toggleClass('hover');
231 | });
232 | ```
233 | 
234 | **Megjegyzés:** a CSS gyorsabb megoldás lehet ebben az esetben, mindazonáltal érdemes tudnod róla, hogy ilyet is lehet.
235 | 
236 | <sup>[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k)</sup>
237 | 
238 | 
239 | ### Beviteli mezők kikapcsolása
240 | 
241 | 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:
242 | 
243 | ```javascript
244 | $('input[type="submit"]').prop('disabled', true);
245 | ```
246 | 
247 | Nem kell mást tenned, mint újra futtatni a `prop` eljárást az adott beviteli mező(kö)n, ezúttal `false` értékkel:
248 | 
249 | ```javascript
250 | $('input[type="submit"]').prop('disabled', false);
251 | ```
252 | 
253 | <sup>[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k)</sup>
254 | 
255 | 
256 | ### Linkbetöltés megállítása
257 | 
258 | 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:
259 | 
260 | ```javascript
261 | $('a.no-link').on('click', function (e) {
262 |   e.preventDefault();
263 | });
264 | ```
265 | 
266 | <sup>[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k)</sup>
267 | 
268 | 
269 | ### jQuery kiválasztók eltárolása
270 | 
271 | 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:
272 | 
273 | ```javascript
274 | var blocks = $('#blocks').find('li');
275 | ```
276 | 
277 | 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:
278 | 
279 | ```javascript
280 | $('#hideBlocks').on('click', function () {
281 |   blocks.fadeOut();
282 | });
283 | 
284 | $('#showBlocks').on('click', function () {
285 |   blocks.fadeIn();
286 | });
287 | ```
288 | A jQuery kiválasztók eltárolása egy roppant egyszerű teljesítményjavító technika.
289 | 
290 | <sup>[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k)</sup>
291 | 
292 | 
293 | ### Áttűnés/becsúszás effekt rögzítése
294 | 
295 | 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:
296 | 
297 | ```javascript
298 | // Fade
299 | $('.btn').on('click', function () {
300 |   $('.element').fadeToggle('slow');
301 | });
302 | 
303 | // Toggle
304 | $('.btn').on('click', function () {
305 |   $('.element').slideToggle('slow');
306 | });
307 | ```
308 | 
309 | <sup>[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k)</sup>
310 | 
311 | 
312 | ### Egyszerű accordion (harmonika-menü)
313 | 
314 | Íme egy egyszerá eljárás egy egyszerű harmonika-menü elkészítésére:
315 | 
316 | ```javascript
317 | // Close all panels
318 | $('#accordion').find('.content').hide();
319 | 
320 | // Accordion
321 | $('#accordion').find('.accordion-header').on('click', function () {
322 |   var next = $(this).next();
323 |   next.slideToggle('fast');
324 |   $('.content').not(next).slideUp('fast');
325 |   return false;
326 | });
327 | ```
328 | 
329 | 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.
330 | 
331 | <sup>[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k)</sup>
332 | 
333 | 
334 | ### HTML div elemek egyező magassággal
335 | 
336 | Néha szükséged lehet arra, hogy két HTML div elem egyforma magas legyen, függetlenül azok belső tartalmától:
337 | 
338 | ```javascript
339 | $('.div').css('min-height', $('.main-div').height());
340 | ```
341 | 
342 | 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.
343 | 
344 | 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:
345 | 
346 | ```javascript
347 | var $columns = $('.column');
348 | var height = 0;
349 | $columns.each(function () {
350 |   if ($(this).height() > height) {
351 |     height = $(this).height();
352 |   }
353 | });
354 | $columns.height(height);
355 | ```
356 | 
357 | Ha _minden_ minden oszop magasságát egyformára akarod:
358 | 
359 | ```javascript
360 | var $rows = $('.same-height-columns');
361 | $rows.each(function () {
362 |   $(this).find('.column').height($(this).height());
363 | });
364 | ```
365 | 
366 | **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.
367 | 
368 | <sup>[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k)</sup>
369 | 
370 | 
371 | ### Külső linkek megnyitása új fülön/ablakban
372 | 
373 | 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:
374 | 
375 | ```javascript
376 | $('a[href^="http"]').attr('target', '_blank');
377 | $('a[href^="//"]').attr('target', '_blank');
378 | $('a[href^="' + window.location.origin + '"]').attr('target', '_self');
379 | ```
380 | 
381 | **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.
382 | 
383 | <sup>[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k)</sup>
384 | 
385 | 
386 | ### Elemek keresése szöveg alapján
387 | 
388 | 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:
389 | 
390 | ```javascript
391 | var search = $('#search').val();
392 | $('div:not(:contains("' + search + '"))').hide();
393 | ```
394 | 
395 | <sup>[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k)</sup>
396 | 
397 | 
398 | ### Script aktiválás láthatóság változása esetén
399 | 
400 | Javascript aktiválásra amikor a felhasználó ellapoz egy fülről, vagy visszalép oda:
401 | 
402 | ```javascript
403 | $(document).on('visibilitychange', function (e) {
404 |   if (e.target.visibilityState === 'visible') {
405 |     console.log('Tab is now in view!');
406 |   } else if (e.target.visibilityState === 'hidden') {
407 |     console.log('Tab is now hidden!');
408 |   }
409 | });
410 | ```
411 | 
412 | <sup>[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k)</sup>
413 | 
414 | 
415 | ### AJAX hívások hibakezelése
416 | 
417 | 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:
418 | 
419 | ```javascript
420 | $(document).on('ajaxError', function (e, xhr, settings, error) {
421 |   console.log(error);
422 | });
423 | ```
424 | 
425 | <sup>[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k)</sup>
426 | 
427 | 
428 | ### Plugin hívások láncolása
429 | 
430 | 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:
431 | 
432 | ```javascript
433 | $('#elem').show();
434 | $('#elem').html('bla');
435 | $('#elem').otherStuff();
436 | ```
437 | 
438 | Ekkor igen komoly teljesítményövekedést érhetsz el láncolás használatával:
439 | 
440 | ```javascript
441 | $('#elem')
442 |   .show()
443 |   .html('bla')
444 |   .otherStuff();
445 | ```
446 | 
447 | Alternatívaként eltárolhatod az elemet egy változóban (`$` előtaggal):
448 | 
449 | ```javascript
450 | var $elem = $('#elem');
451 | $elem.hide();
452 | $elem.html('bla');
453 | $elem.otherStuff();
454 | ```
455 | 
456 | 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. 
457 | 
458 | <sup>[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k)</sup>
459 | 
460 | 
461 | ### Listaelemek sorba rendezése ABC szerint
462 | 
463 | 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:
464 | 
465 | ```javascript
466 | var ul = $('#list'),
467 | lis = $('li', ul).get();
468 | 
469 | lis.sort(function (a, b) {
470 |   return ($(a).text().toUpperCase() < $(b).text().toUpperCase()) ? -1 : 1;
471 | });
472 | 
473 | ul.append(lis);
474 | ```
475 | 
476 | Meg is volnánk!
477 | 
478 | <sup>[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k)</sup>
479 | 
480 | 
481 | ### Jobb egérkattintás kikapcsolása
482 | 
483 | Ha le szeretnéd tiltani a jobb-klikket, az egész oldalra megteheted...
484 | 
485 | ```javascript
486 | $(document).ready(function () {
487 |   $(document).bind('contextmenu', function (e) {
488 |     return false;
489 |   })
490 | })
491 | ```
492 | 
493 | ...de akár egy konkrét elemre is:
494 | 
495 | ```javascript
496 | $(document).ready(function () {
497 |   $('#submit').bind('contextmenu', function (e) {
498 |     return false;
499 |   })
500 | })
501 | ```
502 | 
503 | <sup>[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k)</sup>
504 | 
505 | 
506 | ## Támogatás
507 | 
508 | 
509 | 
510 | A Chrome, Firefox, Safari, Opera, Edge és IE11 böngészők jelenlegi verziói.
511 | 
512 | <sup>[vissza a tartalomjegyzékhez](#tartalomjegyz%C3%A9k)</sup>
513 | 


--------------------------------------------------------------------------------
/translations/ko-KR/README.md:
--------------------------------------------------------------------------------
  1 | # 모두가 알아야 할 jQuery 팁들 [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)
  2 | 
  3 | 당신의 jQuery 사용에 도움이 되는 간단한 팁들의 모음입니다.
  4 |  
  5 | > [@sindresorhus](https://github.com/sindresorhus/)이 엄선한 [awesome lists](https://github.com/sindresorhus/awesome/)의 다른 훌륭한 리스트들 확인해보세요.
  6 | 
  7 | ## 목차
  8 | 
  9 | * [팁](#팁)
 10 | * [지원](#지원)
 11 | * [컨트리뷰션시 지켜야 할 사항](../../CONTRIBUTING.md)
 12 | 
 13 | 
 14 | ## 팁
 15 | 
 16 | 1. [`noConflict()` 사용하기](#use-noconflict)
 17 | 1. [jQuery가 로드되었는지 확인하기](#checking-if-jquery-loaded)
 18 | 1. [엘리먼트가 존재하는지 확인하기](#check-whether-an-element-exists)
 19 | 1. [`.click()` 대신에 `.on()` 으로 바인딩 하기](#use-on-binding-instead-of-click)
 20 | 1. [처음으로 돌아가기 버튼](#back-to-top-button)
 21 | 1. [이미지 사전로드 시키기](#preload-images)
 22 | 1. [이미지들이 로드되었는지 확인하기](#checking-if-images-are-loaded)
 23 | 1. [손상된 이미지 자동으로 수정](#fix-broken-images-automatically)
 24 | 1. [AJAX 형식으로 게시하기](#post-a-form-with-ajax)
 25 | 1. [마우스를 올렸을 때 클래스 토글하기](#toggle-classes-on-hover)
 26 | 1. [입력 필드 비활성 하기](#disabling-input-fields)
 27 | 1. [링크의 로딩을 중지하기](#stop-the-loading-of-links)
 28 | 1. [jQuery 셀렉터를 캐시에 저장하기](#cache-jquery-selectors)
 29 | 1. [Fade/Slide 토글](#toggle-fadeslide)
 30 | 1. [아코디언 간단히 작성하기](#simple-accordion)
 31 | 1. [두 개의 Div를 같은 높이로 만들기](#make-two-divs-the-same-height)
 32 | 1. [새 탭/새 창에서 외부 링크 열기](#open-external-links-in-new-tabwindow)
 33 | 1. [텍스트로 엘리먼트 찾기](#find-element-by-text)
 34 | 1. [가시성 변화에 따른 작동](#trigger-on-visibility-change)
 35 | 1. [AJAX의 에러반환에 대한 핸들링](#ajax-call-error-handling)
 36 | 1. [체인 플러그인 호출](#chain-plugin-calls)
 37 | 1. [알파벳 순서로 아이템 목록 정렬하기](#sort-list-items-alphabetically)
 38 | 1. [우클릭 비활성화](#disable-right-click)
 39 | 
 40 | 
 41 | <div id="use-noconflict"></div>
 42 | 
 43 | ### `noConflict()`사용하기
 44 | 
 45 | jQuery에서 사용되는 `$` 와 같은 별명은 JavaScript의 다른 라이브러리에서도 사용됩니다. jQuery의 `$` 객체가 다른 라이브러리와 충돌하지 않게 하려면, 문서의 시작에 `coConflict()` 메소드를 사용하세요:
 46 | 
 47 | ```javascript
 48 | jQuery.noConflict();
 49 | ```
 50 | 
 51 | 이제 `$` 대신에 `jQuery` 변수 이름을 사용하여 jQuery 객체를 참조할 것입니다 (예를들어, `jQuery('div p').hide()`). 만일 같은 페이지에서 여러 버전의 jQuery를 사용한다면 (추천하지는 않습니다), `noConflict()` 를 사용하여 특정 버전에 별명을 설정할 수 있습니다:
 52 | 
 53 | ```javascript
 54 | let $x = jQuery.noConflict();
 55 | ```
 56 | 
 57 | <sup>[목차로 돌아가기](#목차)</sup>
 58 | 
 59 | <div id="checking-if-jquery-loaded"></div>
 60 | 
 61 | ### jQuery가 로드되었는지 확인하기
 62 | 
 63 | jQuery로 무엇이든 하기전에 jQuery가 확실히 로드되었는지 확인할 필요가 있습니다:
 64 | 
 65 | ```javascript
 66 | if (typeof jQuery == 'undefined') {
 67 |   console.log('jQuery hasn\'t loaded');
 68 | } else {
 69 |   console.log('jQuery has loaded');
 70 | }
 71 | ```
 72 | 
 73 | 이제 시작해 봅시다...
 74 | 
 75 | <sup>[목차로 돌아가기](#목차)</sup>
 76 | 
 77 | <div id="check-whether-an-element-exists"></div>
 78 | 
 79 | ### 엘리먼트가 존재하는지 확인하기
 80 | 
 81 | HTML 엘리먼트를 사용하기 전에 그 엘리먼트가 DOM의 일부인지 확인해야 합니다.
 82 | 
 83 | ```javascript
 84 | if ($("#selector").length) {
 85 |   //엘리먼트로 무언가를 해볼 것
 86 | }
 87 | ```
 88 | 
 89 | <sup>[목차로 돌아가기](#목차)</sup>
 90 | 
 91 | <div id="use-on-binding-instead-of-click"></div>
 92 | 
 93 | ### `.click()` 대신에 `.on()` 으로 바인딩 하기
 94 | 
 95 | `.on()` 을 사용하는 것은 `.click()` 에 비해 몇 가지 더 장점이 있습니다, 예를들면 여러 이벤트를 추가할 수 있는 점...
 96 | 
 97 | ```javascript
 98 | .on('click tap hover')
 99 | ```
100 | 
101 | ...동적으로 생성된 엘리먼트에 바인딩이 적용된다는 점, 뿐만 아니라 (동적으로 추가된 모든 DOM 요소에 각각 직접 바인딩할 필요가 없다는 점)...
102 | 
103 | ...그리고 네임스페이스 설정이 가능하다는 점:
104 | 
105 | ```javascript
106 | .on('click.menuOpening')
107 | ```
108 | 
109 | 네임스페이스는 특정 이벤트의 바인딩을 해제할 수도 있게 해줍니다 (예를들면, `.off('click.menuOpening')`).
110 | 
111 | <sup>[목차로 돌아가기](#목차)</sup>
112 | 
113 | <div id="back-to-top-button"></div>
114 | 
115 | ### 처음으로 돌아가기 버튼
116 | 
117 | jQuery에서 `animate` 와 `scrollTop` 메소드를 이용하면 처음으로 돌아가기 애니메이션을 만들기 위해 플러그인을 이용할 필요가 없습니다:
118 | 
119 | ```javascript
120 | // 처음으로 돌아가기
121 | $('.container').on('click', '.back-to-top', function (e) {
122 |   e.preventDefault();
123 |   $('html, body').animate({scrollTop: 0}, 800);
124 | });
125 | ```
126 | 
127 | ```html
128 | <!-- a 태그 만들기 -->
129 | <div class="container">
130 |   <a href="#" class="back-to-top">Back to top</a>
131 | </div>
132 | ```
133 | 
134 | `scrollTop`의 값을 원하는 곳으로 변경함으로서 스크롤바가 멈출 곳을 정할 수 있습니다. 그저 800밀리초 동안 문서의 처음으로 올라갈때까지 본문을 애니메이션으로 만드는 것만 하면 됩니다.
135 | 
136 | **메모:** `scrollTop` 의 몇 가지 [버그동작](https://github.com/jquery/api.jquery.com/issues/417) 을 보세요.
137 | 
138 | <sup>[목차로 돌아가기](#목차)</sup>
139 | 
140 | <div id="preload-images"></div>
141 | 
142 | ### 이미지 사전로드 시키기
143 | 
144 | 만일 웹페이지가 초기에 볼 수 없는 많은 이미지를 이용할 경우 (예를들어, 마우스를 올렸을 때) 이미지들을 사전로드 시키는 것이 옳은 방법입니다:
145 | 
146 | ```javascript
147 | $.preloadImages = function () {
148 |   for (var i = 0; i < arguments.length; i++) {
149 |     $('<img>').attr('src', arguments[i]);
150 |   }
151 | };
152 | 
153 | $.preloadImages('img/hover-on.png', 'img/hover-off.png');
154 | ```
155 | 
156 | <sup>[목차로 돌아가기](#목차)</sup>
157 | 
158 | <div id="checking-if-images-are-loaded"></div>
159 | 
160 | ### 이미지들이 로드되었는지 확인하기
161 | 
162 | 때로는 스크립트를 계속 진행하기 위해 이미지가 완전히 로드되었는지 확인해야 할 때도 있습니다:
163 | 
164 | ```javascript
165 | $('img').on('load', function () {
166 |   console.log('image load successful');
167 | });
168 | ```
169 | 
170 | 필요에따라 `<img>` 태그를 ID나 class로 변경하여 특정 이미지가 로드되었는지 체크할 수도 있습니다.
171 | 
172 | <sup>[목차로 돌아가기](#목차)</sup>
173 | 
174 | <div id="fix-broken-images-automatically"></div>
175 | 
176 | ### 손상된 이미지 자동으로 수정
177 | 
178 | 사이트에서 손상된 이미지들을 발견했을 때 그 이미지들을 하나하나 수정하는 것은 고통을 가져옵니다. 이 간단한 코드는 그러한 많은 두통을 겪지않게 할 수 있습니다:
179 | 
180 | ```javascript
181 | $('img').on('error', function () {
182 |   if(!$(this).hasClass('broken-image')) {
183 |     $(this).prop('src', 'img/broken.png').addClass('broken-image');
184 |   }
185 | });
186 | ```
187 | 
188 | 대체로, 손상된 이미지들을 숨기려할 때 이 스니펫이 그 부분을 도와줄 것입니다:
189 | 
190 | ```javascript
191 | $('img').on('error', function () {
192 |   $(this).hide();
193 | });
194 | ```
195 | 
196 | <sup>[목차로 돌아가기](#목차)</sup>
197 | 
198 | <div id="post-a-form-with-ajax"></div>
199 | 
200 | AJAX 형식으로 게시하기
201 | ### Post a Form with AJAX
202 | 
203 | jQuery의 AJAX 메소드는 text, HTML, XML 또는 JSON을 요청하는 일반적인 방법과 같습니다. 만일 AJAX 형식으로 보내기를 원한다면 사용자의 입력을 `val()` 메소드로 받을 수 있습니다:
204 | 
205 | ```javascript
206 | $.post('sign_up.php', {
207 |   user_name: $('input[name=user_name]').val(),
208 |   email:     $('input[name=email]').val(),
209 |   password:  $('input[name=password]').val(),
210 | });
211 | ```
212 | 
213 | 그러나 모든 `val()` 부름은 값을 많이 치뤄야 하고 `<textarea>` 에 `.val()` 을 사용하면 브라우저의 반환 값에서 줄바꿈 되는 문자가 제거됩니다. 따라서 사용자의 입력을 받는 더 좋은 방법은 `serialize()` 함수를 이용하여 문자열로 받는 것입니다:
214 | 
215 | ```javascript
216 | $.post('sign_up', $('#sign-up-form').serialize());
217 | ```
218 | 
219 | <sup>[목차로 돌아가기](#목차)</sup>
220 | 
221 | <div id="toggle-classes-on-hover"></div>
222 | 
223 | 
224 | ### 마우스를 올렸을 때 클래스 토글하기
225 | 
226 | 사용자가 페이지 중 클릭가능한 엘리먼트에 마우스를 올렸을 때 페이지가 시각적으로 바뀌는 것을 얘기해봅시다. 당신은 사용자가 엘리먼트에 마우스를 올렸을 때 그 엘리먼트에 클래스가 추가되도록 할 수 있습니다; 그리고 사용자가 엘리먼트에서 마우스를 내리면 클래스가 제거되도록 할 수 있습니다:
227 | 
228 | ```javascript
229 | $('.btn').on('hover', function () {
230 |   $(this).addClass('hover');
231 | }, function () {
232 |   $(this).removeClass('hover');
233 | });
234 | ```
235 | 
236 | `toggleClass` 메소드를 사용하기 위해 더 _간단한_ 방법을 원한다면. 당신은 필수적으로 CSS를 추가할 필요가 있습니다:
237 | 
238 | ```javascript
239 | $('.btn').on('hover', function () {
240 |   $(this).toggleClass('hover');
241 | });
242 | ```
243 | 
244 | **메모:** 이 예시에서는 CSS가 더 빠른 해결방법이 될 수 있지만 이 방법을 아는 것도 여전히 가치가 있습니다.
245 | 
246 | <sup>[목차로 돌아가기](#목차)</sup>
247 | 
248 | <div id="disabling-input-fields"></div>
249 | 
250 | ### 입력 필드 비활성 하기
251 | 
252 | 때때로 사용자가 특정 액션을 행할때까지 양식의 제출 버튼 또는 글 입력 필드가 비활성 되어있기를 바랄 수 있습니다 (예를들면, "조항을 읽었습니다" 의 체크박스를 체크할 때). 이런때에는 input에 `disabled` 속성을 추가함으로서 당신이 원할때 입력필드를 활성화시킬 수 있습니다:
253 | 
254 | ```javascript
255 | $('input[type="submit"]').prop('disabled', true);
256 | ```
257 | 
258 | 당신이 할 일은 input의 `prop` 메소드를 다시 실행시키되, `disabled` 의 값을 `false` 로 설정하는 것 뿐입니다:
259 | 
260 | ```javascript
261 | $('input[type="submit"]').prop('disabled', false);
262 | ```
263 | 
264 | <sup>[목차로 돌아가기](#목차)</sup>
265 | 
266 | <div id="stop-the-loading-of-links"></div>
267 | 
268 | 
269 | ### 링크의 로딩을 중지하기
270 | 
271 | 때때로 링크를 어떤 웹 페이지로 보내거나 페이지를 리로드하는 것을 원치 않을 때가 있습니다; 다른 스크립트를 띄우는 것과 같은 다른 것을 하기를 원할 때가 있습니다. 이 것은 기본적인 액션을 방지하는 트릭입니다:
272 | 
273 | ```javascript
274 | $('a.no-link').on('click', function (e) {
275 |   e.preventDefault();
276 | });
277 | ```
278 | 
279 | <sup>[목차로 돌아가기](#목차)</sup>
280 | 
281 | <div id="cache-jquery-selectors"></div>
282 | 
283 | ### jQuery 셀렉터를 캐시에 저장하기
284 | 
285 | 프로젝트에서 같은 셀렉터를 얼마나 많이 적어보게 되는지 생각해보세요. 모든 `$('.element')` 셀렉터는 이전에 실행되었는지에 상관없이 매번 모든 DOM을 검색해야 합니다. 이에대한 대안으로 셀렉터를 한번만 실행하고 그 결과를 변수에 저장할 수 있습니다:
286 | 
287 | ```javascript
288 | var blocks = $('#blocks').find('li');
289 | ```
290 | 
291 | 이제 매번 DOM을 검색하지 않아도 `blocks` 변수를 원하는 곳에서 사용할 수 있습니다:
292 | 
293 | ```javascript
294 | $('#hideBlocks').on('click', function () {
295 |   blocks.fadeOut();
296 | });
297 | 
298 | $('#showBlocks').on('click', function () {
299 |   blocks.fadeIn();
300 | });
301 | ```
302 | 
303 | jQuery 셀렉터를 캐시에 저장하는 것은 성능의 향상에 도움이 됩니다.
304 | 
305 | <sup>[목차로 돌아가기](#목차)</sup>
306 | 
307 | <div id="toggle-fadeslide"></div>
308 | 
309 | 
310 | ### Fade/Slide 토글
311 | 
312 | jQuery에서 sliding과 fading은 일반적인 애니메이션입니다. 당신은 사용자가 무언가를 클릭할 때, `fadeIn` 과 `slideDown` 메소드를 완벽하게 만들 수도 있지만, 첫번째 클릭에 엘리먼트가 나타나고 두번째 클릭에 사라지게 하는 것도, 제대로 작동하게 만들 수 있습니다:
313 | 
314 | ```javascript
315 | // Fade
316 | $('.btn').on('click', function () {
317 |   $('.element').fadeToggle('slow');
318 | });
319 | 
320 | // Toggle
321 | $('.btn').on('click', function () {
322 |   $('.element').slideToggle('slow');
323 | });
324 | ```
325 | 
326 | <sup>[목차로 돌아가기](#목차)</sup>
327 | 
328 | <div id="simple-accordion"></div>
329 | 
330 | ### 아코디언 간단히 작성하기
331 | 
332 | 이것은 빠르게 아코디언을 작성하기 위한 간단한 메소드입니다:
333 | 
334 | ```javascript
335 | // 모든 패널 닫기
336 | $('#accordion').find('.content').hide();
337 | 
338 | // 아코디언
339 | $('#accordion').find('.accordion-header').on('click', function () {
340 |   var next = $(this).next();
341 |   next.slideToggle('fast');
342 |   $('.content').not(next).slideUp('fast');
343 |   return false;
344 | });
345 | ```
346 | 
347 | 이 스크립트를 추가함으로서 당신이 할 일은 이 웹페이지가 작동하기위해 필수적인 HTML을 작성하는 것 뿐입니다.
348 | 
349 | <sup>[목차로 돌아가기](#목차)</sup>
350 | 
351 | <div id="make-two-divs-the-same-height"></div>
352 | 
353 | ### 두 개의 Div를 같은 높이로 만들기
354 | 
355 | 때때로 각 div의 내용에 상관없이 두 개의 div가 같은 높이이기를 원할때가 있을 것입니다:
356 | 
357 | ```javascript
358 | $('.div').css('min-height', $('.main-div').height());
359 | ```
360 | 
361 | 이 예시는 `min-height` 을 설정함으로서 main div보다 클 수는 있지만 결코 작아질 수 없도록 했습니다. 그러나, 더 유연한 메소드는 엘리먼트의 높이확인을 반복하여 가장 큰 엘리먼트의 높이로 `height` 을 설정하는 것입니다:
362 | 
363 | ```javascript
364 | var $columns = $('.column');
365 | var height = 0;
366 | $columns.each(function () {
367 |   if ($(this).height() > height) {
368 |     height = $(this).height();
369 |   }
370 | });
371 | $columns.height(height);
372 | ```
373 | 
374 | 만일 _모든_ 열의 높이를 같게 하고 싶다면:
375 | 
376 | ```javascript
377 | var $rows = $('.same-height-columns');
378 | $rows.each(function () {
379 |   $(this).find('.column').height($(this).height());
380 | });
381 | ```
382 | 
383 | **메모:** 이것은 [CSS를 이용해](http://codepen.io/AllThingsSmitty/pen/KMPqoO) 여러가지 방법으로 할 수 있습니다. 그러나 필요에 따라, jQuery로 이것을 핸들링하는 방법을 알아야 편리할 때도 있습니다.
384 | 
385 | <sup>[목차로 돌아가기](#목차)</sup>
386 | 
387 | <div id="open-external-links-in-new-tabwindow"></div>
388 | 
389 | ### 새 탭/새 창에서 외부 링크 열기
390 | 
391 | 브라우저의 새로운 탭 또는 새로운 창에서 외부 링크를 열고 같은 원본의 링크가 같은 탭 또는 창에서 열리는것을 보장함:
392 | 
393 | ```javascript
394 | $('a[href^="http"]').attr('target', '_blank');
395 | $('a[href^="//"]').attr('target', '_blank');
396 | $('a[href^="' + window.location.origin + '"]').attr('target', '_self');
397 | ```
398 | 
399 | **메모:** `window.location.origin` 은 IE10에서 작동하지 않습니다. [이 수정](http://tosbourn.com/a-fix-for-window-location-origin-in-internet-explorer/) 으로 문제가 해결되었습니다. 
400 | 
401 | <sup>[목차로 돌아가기](#목차)</sup>
402 | 
403 | <div id="find-element-by-text"></div>
404 | 
405 | ### 텍스트로 엘리먼트 찾기
406 | 
407 | jQuery에서 `contains()` 셀렉터를 사용하여 엘리먼트의 내용에서 텍스트를 찾을 수 있습니다. 만일 텍스트가 존재하지 않으면, 해당 엘리먼트는 숨겨질 것입니다:
408 | 
409 | ```javascript
410 | var search = $('#search').val();
411 | $('div:not(:contains("' + search + '"))').hide();
412 | ```
413 | 
414 | <sup>[목차로 돌아가기](#목차)</sup>
415 | 
416 | <div id="trigger-on-visibility-change"></div>
417 | 
418 | ### 가시성 변화에 따른 작동
419 | 
420 | 사용자가 더이상 탭에 초점을 맞추지 않거나 탭에 다시 포커스를 맞출 때 자바스크립트가 작동합니다:
421 | 
422 | ```javascript
423 | $(document).on('visibilitychange', function (e) {
424 |   if (e.target.visibilityState === 'visible') {
425 |     console.log('Tab is now in view!');
426 |   } else if (e.target.visibilityState === 'hidden') {
427 |     console.log('Tab is now hidden!');
428 |   }
429 | });
430 | ```
431 | 
432 | <sup>[목차로 돌아가기](#목차)</sup>
433 | 
434 | <div id="ajax-call-error-handling"></div>
435 | 
436 | ### AJAX의 에러반환에 대한 핸들링
437 | 
438 | AJAX의 반환값이 404 또는 500 에러일 때, 에러 핸들러가 실행될 것입니다. 만일 핸들러가 정의되지 않았다면, 다른 jQuery 코드가 계획대로 작동하지 않을 수 있습니다. 따라서 전역에 AJAX 오류 핸들러를 정의하려면:
439 | 
440 | ```javascript
441 | $(document).on('ajaxError', function (e, xhr, settings, error) {
442 |   console.log(error);
443 | });
444 | ```
445 | 
446 | <sup>[목차로 돌아가기](#목차)</sup>
447 | 
448 | <div id="chain-plugin-calls"></div>
449 | 
450 | ### 체인 플러그인 호출
451 | 
452 | jQuery는 여러 개체를 생성하고 반복적으로 DOM을 처리하는 과정을 완화하기 위해 플러그인 메소드의 호출을 "체이닝" 하는 것을 허용합니다. 다음 스니펫이 당신의 플러그인 메소드 호출을 나타낸다고 가정해봅시다:
453 | 
454 | ```javascript
455 | $('#elem').show();
456 | $('#elem').html('bla');
457 | $('#elem').otherStuff();
458 | ```
459 | 
460 | 이 스니펫은 체이닝을 통해 크게 개선될 수 있습니다:
461 | 
462 | ```javascript
463 | $('#elem')
464 |   .show()
465 |   .html('bla')
466 |   .otherStuff();
467 | ```
468 | 
469 | 대안 중 하나는 엘리먼트를 변수 안에 캐시하는 것입니다 (`$`를 앞에 붙인):
470 | 
471 | ```javascript
472 | var $elem = $('#elem');
473 | $elem.hide();
474 | $elem.html('bla');
475 | $elem.otherStuff();
476 | ```
477 | 
478 | jQuery에서 체이닝과 [캐싱](#cache-jquery-selectors) 메소드는 길이가 더 짧고 더 빠른 코드에 대한 최고의 예제입니다.
479 | 
480 | <sup>[목차로 돌아가기](#목차)</sup>
481 | 
482 | <div id="sort-list-items-alphabetically"></div>
483 | 
484 | ### 알파벳 순서로 아이템 목록 정렬하기
485 | 
486 | 하나의 목록에 아이템이 너무 많다고 가정해봅시다. 아마 컨텐츠는 CMS에 의해 생성되었을 것이고 당신은 알파벳순서로 정돈하기를 원할 것입니다:
487 | 
488 | ```javascript
489 | var ul = $('#list'),
490 | lis = $('li', ul).get();
491 | 
492 | lis.sort(function (a, b) {
493 |   return ($(a).text().toUpperCase() < $(b).text().toUpperCase()) ? -1 : 1;
494 | });
495 | 
496 | ul.append(lis);
497 | ```
498 | 
499 | 여기 있습니다!
500 | 
501 | <sup>[목차로 돌아가기](#목차)</sup>
502 | 
503 | <div id="disable-right-click"></div>
504 | 
505 | ### 우클릭 비활성화
506 | 
507 | 만일 우클릭을 비활성화 시키고 싶다면, 전체 페이지에 그것을 적용할 수 있습니다...
508 | 
509 | ```javascript
510 | $(document).ready(function () {
511 |   $(document).bind('contextmenu', function (e) {
512 |     return false;
513 |   })
514 | })
515 | ```
516 | 
517 | ...그리고 특정 엘리먼트에만 적용할 수도 있습니다:
518 | 
519 | ```javascript
520 | $(document).ready(function () {
521 |   $('#submit').bind('contextmenu', function (e) {
522 |     return false;
523 |   })
524 | })
525 | ```
526 | 
527 | <sup>[목차로 돌아가기](#목차)</sup>
528 | 
529 | 
530 | ## 지원
531 | 
532 | Chrome, Firefox, Safari, Opera, edge, and IE11의 최신버전.
533 | 
534 | <sup>[목차로 돌아가기](#목차)</sup>
535 | 


--------------------------------------------------------------------------------
/translations/pt-PT/README.md:
--------------------------------------------------------------------------------
  1 | # 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)
  2 | 
  3 | Uma  colecção de dicas simples para ajudar-te com a jQuery.
  4 | 
  5 | > Para outras grandes listas aqui visita [@sindresorhus](https://github.com/sindresorhus/)'s lista detalhada de [listas impresionantes](https://github.com/sindresorhus/awesome/).
  6 | 
  7 | 
  8 | <div id="table-of-contents"></div>
  9 | 
 10 | ## Tabela de conteúdo
 11 | 
 12 | * [Conselhos](#conselhos)
 13 | * [Apoio](#apoio)
 14 | * [Tabelas de contribuições](../../CONTRIBUTING.md)
 15 | 
 16 | 
 17 | ## Conselhos
 18 | 
 19 | 1. [Utilizar `noConflict()`](#utilizar-noconflict)
 20 | 1. [Verificando a jQuery Carrgada](#verificando-a-jquery-carrgada)
 21 | 1. [Verifique se existe um elemento](#verifique-se-existe-um-elemento)
 22 | 1. [Utiliza `.on()` No lugar de uniao `.click()`](#utiliza-on--no-lugar-de-uniao-click-)
 23 | 1. [Regressar a botao de inicio](#regressar-a-botao-de-inicio)
 24 | 1. [Carregar preview de imágens](#carregar-preview-de-imágens)
 25 | 1. [Comprovar Se as imagens carregaram](#comprovar-se-as-imagens-carregaram)
 26 | 1. [Corrigir imágens automáticamente crashadas](#corrigir-imágens-automáticamente-crashadas)
 27 | 1. [Publicar um formulario com AJAX](#publicar-um-formulario-com-ajax)
 28 | 1. [Alternar classes na libertacao](#alternar-classes-na-libertacao)
 29 | 1. [Desactivar campos de entrada](#desactivar-campos-de-entrada)
 30 | 1. [Deter a carga de Enlaces](#deter-a-carga-de-enlaces)
 31 | 1. [De caché de jQuery selectores](#de-caché-de-jquery-selectores)
 32 | 1. [Alavanca de fundo / Slide](#alavanca-de-fundo--slide)
 33 | 1. [Acordeao simples](#acordeao-simples)
 34 | 1. [Faz dois Divs na mesma altura](#faz-dois-divs-na-mesma-altura)
 35 | 1. [Abrir enlaces externos numa nova tab / janela](#abrir-enlaces-externos-numa-nova-tab--janela)
 36 | 1. [Buscar elemento Por Texto](#buscar-elemento-por-texto)
 37 | 1. [Visibilidade link de Cambio](#visibilidade-link-de-cambio)
 38 | 1. [Controlo de erros de chamada Ajax](#controlo-de-erros-de-chamada-ajax)
 39 | 1. [Chamadas Plugin Cadeia](#chamadas-plugin-cadeia)
 40 | 1. [Ordenar a lista de elementos alfabéticamente](#ordenar-a-lista-de-elementos-alfabéticamente)
 41 | 1. [Desactivar o click direito](#desactivar-o-click-direito)
 42 | 
 43 | 
 44 | ### Utilizar `noConflict()`
 45 | 
 46 | 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:
 47 | 
 48 | ```javascript
 49 | jQuery.noConflict();
 50 | ```
 51 | 
 52 | 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:
 53 | 
 54 | ```javascript
 55 | let $x = jQuery.noConflict();
 56 | ```
 57 | 
 58 | <sup>[Regressar ao índice de conteudos](#table-of-contents)</sup>
 59 | 
 60 | 
 61 | ### Verificando a jQuery Carrgada
 62 | 
 63 | Antes de fazeres alguma coisa com jQuery primeiro tens que asegurar-te de que esta carregado:
 64 | 
 65 | ```javascript
 66 | if (typeof jQuery == 'undefined') {
 67 |   console.log('jQuery hasn\'t loaded');
 68 | } else {
 69 |   console.log('jQuery has loaded');
 70 | }
 71 | ```
 72 | 
 73 | Agora que estás fora...
 74 | 
 75 | <sup>[Regressar ao índice de conteudos](#table-of-contents)</sup>
 76 | 
 77 | 
 78 | ### Verifique se existe um elemento
 79 | 
 80 | Antes de usar um elemento HTML, você precisa garantir que ele faça parte do DOM.
 81 | 
 82 | ```javascript
 83 | if ($("#selector").length) {
 84 |   //faça algo com element
 85 | }
 86 | ```
 87 | 
 88 | <sup>[Regressar ao índice de conteudos](#table-of-contents)</sup>
 89 | 
 90 | 
 91 | ### Utiliza `.on ()` No lugar de uniao `.click ()`
 92 | 
 93 | .en O uso de `()` da-lhe varias vantagens sobre o uso de `.click ()`, tais como a capacidade de agrupar varios eventos...
 94 | 
 95 | ```javascript
 96 | .on ('click tap hover')
 97 | ```
 98 | 
 99 | ...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) ...
100 | 
101 | ...E a posibilidade de configurar un espaco de nomes:
102 | 
103 | ```javascript
104 | .on('click.menuOpening')
105 | ```
106 | 
107 | Os espacos de nomes dao te o poder para desenlacar um evento específico (por exemplo,`.off('click.menuOpening')`).
108 | 
109 | <sup>[Regressar ao índice de conteudos](#table-of-contents)</sup>
110 | 
111 | 
112 | ### Regressar a botao de inicio
113 | 
114 | 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:
115 | 
116 | ```javascript
117 | // Back to top
118 | $('.container').on('click', '.back-to-top', function (e) {
119 |   e.preventDefault();
120 |   $('html, body').animate({scrollTop: 0}, 800);
121 | });
122 | ```
123 | 
124 | ```html
125 | <!-- Create an anchor tag -->
126 | <a class="top" href="#">Back to top</a>
127 | ```
128 | 
129 | 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.
130 | 
131 | **Nota:** Procura por algum [comportamento incorrecto](https://github.com/jquery/api.jquery.com/issues/417) com `scrollTop`.
132 | 
133 | <sup>[Regressar ao indice de conteudos](#table-of-contents)</sup>
134 | 
135 | 
136 | ### Carregar preview de imágens
137 | 
138 | 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:
139 | 
140 | ```javascript
141 | $.preloadImages = function () {
142 |   for (var i = 0; i < arguments.length; i++) {
143 |     $('<img>').attr('src', arguments[i]);
144 |   }
145 | };
146 | 
147 | $.preloadImages('img/hover-on.png', 'img/hover-off.png');
148 | ```
149 | 
150 | <sup>[Regressar ao índice de conteudos](#table-of-contents)</sup>
151 | 
152 | 
153 | ### Comprovar Se as imagens carregaram
154 | 
155 | As vezes pode ser preciso comprobar se as imagens carregaram completamente a fim de continuar com as sequencias de comandos:
156 | 
157 | ```javascript
158 | $('img').on('load', function () {
159 |   console.log('image load successful');
160 | });
161 | ```
162 | 
163 | Tambiem podes comprovar se uma imagen em particular carregou-se durante a troca da etiqueta `<img>` por um ID ou classe.
164 | 
165 | <sup>[Regressar ao índice de conteudos](#table-of-contents)</sup>
166 | 
167 | 
168 | ### Corrigir imágens automáticamente crashadas
169 | 
170 | 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:
171 | 
172 | ```javascript
173 | $('img').on('error', function () {
174 |   if(!$(this).hasClass('broken-image')) {
175 |     $(this).prop('src', 'img/broken.png').addClass('broken-image');
176 |   }
177 | });
178 | ```
179 | 
180 | Alternativamente, se desejas ocultar simplemente imagens crashadas, este fragmento encarregará-se disso:
181 | 
182 | ```javascript
183 | $('img').on('error', function () {
184 |   $(this).hide();
185 | });
186 | ```
187 | 
188 | <sup>[Regressar ao índice de conteudos](#table-of-contents)</sup>
189 | 
190 | 
191 | ### Publicar um formulario com AJAX
192 | 
193 | 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()`:
194 | 
195 | ```javascript
196 | $.post('sign_up.php', {
197 |   user_name: $('input[name=user_name]').val(),
198 |   email:     $('input[name=email]').val(),
199 |   password:  $('input[name=password]').val(),
200 | });
201 | ```
202 | 
203 | 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:
204 | 
205 | ```javascript
206 | $.post('sign_up', $('#sign-up-form').serialize());
207 | ```
208 | 
209 | <sup>[Regressar ao índice de conteudos](#table-of-contents)</sup>
210 | 
211 | 
212 | ### Alternar classes na libertacao
213 | 
214 | 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:
215 | 
216 | ```javascript
217 | $('.btn').on('hover', function () {
218 |   $(this).addClass('hover');
219 | }, function () {
220 |   $(this).removeClass('hover');
221 | });
222 | ```
223 | 
224 | Só tens que adicionar o CSS necessario. Se desejas uma forma mais simples, utiliza o método `toggleClass`:
225 | 
226 | ```javascript
227 | $('.btn').hover(function () {
228 |   $(this).toggleClass('hover');
229 | });
230 | ```
231 | 
232 | **Nota:** CSS pode ser uma solucao mais rápida neste caso, mas vale a pena saber isto.
233 | 
234 | <sup>[Regressar ao índice de conteudos](#table-of-contents)</sup>
235 | 
236 | 
237 | ### Desactivar campos de entrada
238 | 
239 | 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:
240 | 
241 | ```javascript
242 | $('input[type="submit"]').prop('disabled', true);
243 | ```
244 | 
245 | Tudo o que necessitas fazer e executar o método `prop` outra vez na entrada, e depois establecer o valor de `disabled` para `false`:
246 | 
247 | ```javascript
248 | $('input[type="submit"]').prop('disabled', false);
249 | ```
250 | 
251 | <sup>[Regressar ao índice de conteudos](#table-of-contents)</sup>
252 | 
253 | 
254 | ### Deter a carga de Enlaces
255 | 
256 | 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:
257 | 
258 | ```javascript
259 | $('a.no-link').on('click', function (e) {
260 |   e.preventDefault();
261 | });
262 | ```
263 | 
264 | <sup>[Regressar ao índice de conteudos](#table-of-contents)</sup>
265 | 
266 | 
267 | ### De caché de jQuery selectores
268 | 
269 | 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:
270 | 
271 | ```javascript
272 | var blocks = $('#blocks').find('li');
273 | ```
274 | 
275 | Agora pode-se utilizar a variavel `blocks` sempre que quiseres sem precisares de buscar el DOM em cada ocasiao:
276 | 
277 | ```javascript
278 | $('#hideBlocks').on('click', function () {
279 |   blocks.fadeOut();
280 | });
281 | 
282 | $('#showBlocks').on('click', function () {
283 |   blocks.fadeIn();
284 | });
285 | ```
286 | 
287 | O armaenamento em caché selectores de jQuery sao uma ganancia de rendimiento fácil.
288 | 
289 | <sup>[Regressar ao índice de conteudos](#table-of-contents)</sup>
290 | 
291 | 
292 | ### Alavanca de fundo / Slide
293 | 
294 | 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:
295 | 
296 | ```javascript
297 | // Fade
298 | $('.btn').on('click', function () {
299 |   $('.element').fadeToggle('slow');
300 | });
301 | 
302 | // Toggle
303 | $('.btn').on('click', function () {
304 |   $('.element').slideToggle('slow');
305 | });
306 | ```
307 | 
308 | <sup>[Regressar ao índice de conteudos](#table-of-contents)</sup>
309 | 
310 | 
311 | ### Acordeao simples
312 | 
313 | Este e um método simples para um acordeao rápido:
314 | 
315 | ```javascript
316 | // Close all panels
317 | $('#accordion').find('.content').hide();
318 | 
319 | // Accordion
320 | $('#accordion').find('.accordion-header').on('click', function () {
321 |   var next = $(this).next();
322 |   next.slideToggle('fast');
323 |   $('.content').not(next).slideUp('fast');
324 |   return false;
325 | });
326 | ```
327 | 
328 | 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.
329 | 
330 | <sup>[Regressar ao índice de conteudos](#table-of-contents)</sup>
331 | 
332 | 
333 | ### Faz dois Divs na mesma altura
334 | 
335 | As vezes, vais precisar de dois divs terem a mesma altura nao importa o conteudo:
336 | 
337 | ```javascript
338 | $('.div').css('min-height', $('.main-div').height());
339 | ```
340 | 
341 | 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:
342 | 
343 | ```javascript
344 | var $columns = $('.column');
345 | var height = 0;
346 | $columns.each(function () {
347 |   if ($(this).height() > height) {
348 |     height = $(this).height();
349 |   }
350 | });
351 | $columns.height(height);
352 | ```
353 | 
354 | Se deseja _todas_ columnas tenham a mesma altura:
355 | 
356 | ```javascript
357 | var $rows = $('.same-height-columns');
358 | $rows.each(function () {
359 |   $(this).find('.column').height($(this).height());
360 | });
361 | ```
362 | 
363 | **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.
364 | 
365 | <sup>[Regressar ao índice de conteudos](#table-of-contents)</sup>
366 | 
367 | 
368 | ### Abrir enlaces externos numa nova tab / janela
369 | 
370 | Abrir enlaces externos  numa nova tab ou janela do browser e garantir enlaces na mesma origem aberta na mesma tab ou janela:
371 | 
372 | ```javascript
373 | $('a[href^="http"]').attr('target', '_blank');
374 | $('a[href^="//"]').attr('target', '_blank');
375 | $('a[href^="' + window.location.origin + '"]').attr('target', '_self');
376 | ```
377 | 
378 | **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.
379 | 
380 | <sup>[Regressar ao índice de conteudos](#table-of-contents)</sup>
381 | 
382 | 
383 | ### Buscar elemento Por Texto 
384 | 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:
385 | 
386 | ```javascript
387 | var search = $('#search').val();
388 | $('div:not(:contains("' + search + '"))').hide();
389 | ```
390 | 
391 | <sup>[Regressar ao índice de conteudos](#table-of-contents)</sup>
392 | 
393 | 
394 | ### Visibilidade link de Cambio
395 | 
396 | Gatillo JavaScript quando o utilizador ja nao se concentra numa tab, ou volta a centrar-se numa tab:
397 | 
398 | ```javascript
399 | $(document).on('visibilitychange', function (e) {
400 |   if (e.target.visibilityState === 'visible') {
401 |     console.log('Tab is now in view!');
402 |   } else if (e.target.visibilityState === 'hidden') {
403 |     console.log('Tab is now hidden!');
404 |   }
405 | });
406 | ```
407 | 
408 | <sup>[Regressar ao índice de conteudos](#table-of-contents)</sup>
409 | 
410 | 
411 | ### Controlo de erros de chamada Ajax
412 | 
413 | 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:
414 | 
415 | ```javascript
416 | $(document).on('ajaxError', function (e, xhr, settings, error) {
417 |   console.log(error);
418 | });
419 | ```
420 | 
421 | <sup>[Regressar ao índice de conteudos](#table-of-contents)</sup>
422 | 
423 | 
424 | ### Chamadas Plugin Cadeia
425 | 
426 | 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:
427 | 
428 | ```javascript
429 | $('#elem').show();
430 | $('#elem').html('bla');
431 | $('#elem').otherStuff();
432 | ```
433 | 
434 | Isto poderia melhorar significativamente o uso de encadeamento:
435 | 
436 | ```javascript
437 | $('#elem')
438 |   .show()
439 |   .html('bla')
440 |   .otherStuff();
441 | ```
442 | 
443 | Uma alternativa e armazenar em caché o elemento numa variavel (com o prefixo `$`):
444 | 
445 | ```javascript
446 | var $elem = $('#elem');
447 | $elem.hide();
448 | $elem.html('bla');
449 | $elem.otherStuff();
450 | ```
451 | 
452 | 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.
453 | 
454 | <sup>[Regressar ao índice de conteudos](#table-of-contents)</sup>
455 | 
456 | 
457 | ### Ordenar a lista de elementos alfabéticamente
458 | 
459 | Digamos que tu terminas com demasiados elementos numa lista. Talvez o conteudo e produzido por um CMS e desejas ordenar por ordem alfabética:
460 | 
461 | ```javascript
462 | var ul = $('#list'),
463 | lis = $('li', ul).get();
464 | 
465 | lis.sort(function (a, b) {
466 |   return ($(a).text().toUpperCase() < $(b).text().toUpperCase()) ? -1 : 1;
467 | });
468 | 
469 | ul.append(lis);
470 | ```
471 | 
472 | Tem que ir!
473 | 
474 | <sup>[Regressar ao índice de conteudos](#table-of-contents)</sup>
475 | 
476 | 
477 | <div id="disable-right-click"></div>
478 | 
479 | 
480 | ### Desactivar o click direito
481 | 
482 | Se desejas desactivar o botao direito do rato, podes fazer-lo para uma página inteira...
483 | 
484 | ```javascript
485 | $(document).ready(function () {
486 |   $(document).bind('contextmenu', function (e) {
487 |     return false;
488 |   })
489 | })
490 | ```
491 | 
492 | ...mas também podes fazer o mesmo para um elemento específico:
493 | 
494 | ```javascript
495 | $(document).ready(function () {
496 |   $('#submit').bind('contextmenu', function (e) {
497 |     return false;
498 |   })
499 | })
500 | ```
501 | 
502 | <sup>[Regressar ao índice de conteudos](#table-of-contents)</sup>
503 | 
504 | 
505 | ## Apoio
506 | 
507 | As versoes actuais de Chrome, Firefox, Safari, Opera, Edge e EI11.
508 | 
509 | <sup>[Regressar ao índice de conteudos](#table-of-contents)</sup>
510 | 


--------------------------------------------------------------------------------
/translations/ru-RU/README.md:
--------------------------------------------------------------------------------
  1 | # Советы по jQuery, которые должен знать каждый [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)
  2 | 
  3 | Коллекция простых советов, чтобы помочь вашей работе с jQuery.
  4 | 
  5 | > Другие прекрасные списки, за которыми следит [@sindresorhus](https://github.com/sindresorhus/~~HEAD=dobj), можно увидеть [здесь](https://github.com/sindresorhus/awesome/).
  6 | 
  7 | 
  8 | <div id="table-of-contents"></div>
  9 | 
 10 | ## Содержание
 11 | 
 12 | * [Советы](#Советы)
 13 | * [Поддержка](#Поддержка)
 14 | * [Как сделать вклад](../../CONTRIBUTING.md)
 15 | 
 16 | 
 17 | ## Советы
 18 | 
 19 | 1. [Используйте `noConflict()`](#use-noconflict)
 20 | 1. [Проверка готовности jQuery](#checking-if-jquery-loaded)
 21 | 1. [проверить, существует ли элемент](#check-whether-an-element-exists)
 22 | 1. [Используйте `.on()` вместо `.click()`](#use-on-binding-instead-of-click)
 23 | 1. [Кнопка "вернуться к началу"](#back-to-top-button)
 24 | 1. [Предварительная загрузка изображений](#preload-images)
 25 | 1. [Проверка, загружаются ли изображения](#checking-if-images-are-loaded)
 26 | 1. [Автоматическое исправление сломанных изображений](#fix-broken-images-automatically)
 27 | 1. [Дать форму с помощью AJAX](#post-a-form-with-ajax)
 28 | 1. [Переключение классов по наведению](#toggle-classes-on-hover)
 29 | 1. [Отключение поля ввода](#disabling-input-fields)
 30 | 1. [Прерывание загрузки ссылки](#stop-the-loading-of-links)
 31 | 1. [Кэширование селекторов jQuery](#cache-jquery-selectors)
 32 | 1. [Переключение fade/slide](#toggle-fadeslide)
 33 | 1. [Простой аккордеон](#simple-accordion)
 34 | 1. [Сделать два элемента div одинаковой высотой](#make-two-divs-the-same-height)
 35 | 1. [Открывать внешние ссылки в новой вкладке или новом окне](#open-external-links-in-new-tabwindow)
 36 | 1. [Найти элемент по тексту](#find-element-by-text)
 37 | 1. [Запуск по изменению видимости](#trigger-on-visibility-change)
 38 | 1. [Обработка ошибок в AJAX-запросах](#ajax-call-error-handling)
 39 | 1. [Цепочка вызовов плагинов](#chain-plugin-calls)
 40 | 1. [Сортировка элементов списка по алфавиту](#sort-list-items-alphabetically)
 41 | 1. [Отключить правую кнопку мыши](#disable-right-click)
 42 | 
 43 | 
 44 | <div id="use-noconflict"></div>
 45 | 
 46 | ### Используйте `noConflict()`
 47 | 
 48 | Асимвол `$`, используемый jQuery, также используется другими библиотеками JavaScript. Чтобы гарантировать, что jQuery не конфликтует с объектом `$` из разных библиотек, используйте метод `noConflict()` в начале документа:
 49 | 
 50 | ```javascript
 51 | jQuery.noConflict();
 52 | ```
 53 | 
 54 | Теперь вы ссылаетесь на объект jQuery, используя имя переменной `jQuery` вместо `$` (например, `jQuery('div p').hide()`). Если у вас несколько версий jQuery на одной странице, вы можете использовать `noConflict ()` для установки псевдонима для определенной версии:
 55 | 
 56 | ```javascript
 57 | let $x = jQuery.noConflict();
 58 | ```
 59 | 
 60 | <sup>[вернуться к оглавлению](#table-of-contents)</sup>
 61 | 
 62 | 
 63 | <div id="checking-if-jquery-loaded"></div>
 64 | 
 65 | ### Проверка готовности jQuery
 66 | 
 67 | Перед тем, как сделать что-нибудь с помощью jQuery, необходимо убедиться в том, что он загружен:
 68 | 
 69 | ```javascript
 70 | if (typeof jQuery == 'undefined') {
 71 |   console.log('jQuery hasn\'t loaded');
 72 | } else {
 73 |   console.log('jQuery has loaded');
 74 | }
 75 | ```
 76 | 
 77 | Теперь вы можете продолжать ...
 78 | 
 79 | <sup>[вернуться к оглавлению](#table-of-contents)</sup>
 80 | 
 81 | 
 82 | <div id="check-whether-an-element-exists"></div>
 83 | 
 84 | ### Cпроверить, существует ли элемент
 85 | 
 86 | Прежде чем использовать элемент HTML, необходимо убедиться, что он является частью DOM.
 87 | 
 88 | ```javascript
 89 | if ($("#selector").length) {
 90 |   //сделать что-то с элементом
 91 | }
 92 | ```
 93 | 
 94 | <sup>[вернуться к оглавлению](#table-of-contents)</sup>
 95 | 
 96 | 
 97 | <div id="use-on-binding-instead-of-click"></div>
 98 | 
 99 | ### Используйте `.on()` вместо `.click()`
100 | 
101 | Использование `.on()` дает ряд преимуществ по сравнению с использованием `.click()`, например, возможность добавлять несколько событий...
102 | 
103 | ```javascript
104 | .on('click tap hover')
105 | ```
106 | 
107 | ...привязка применяется к динамически создаваемым элементам (нет необходимости вручную связывать каждый отдельный элемент, динамически добавленный к DOM)...
108 | 
109 | ...и возможность установить пространство имен:
110 | 
111 | ```javascript
112 | .on('click.menuOpening')
113 | ```
114 | 
115 | Пространства имен дают вам возможность отключать привязку к конкретному событию (например, `.off('click.menuOpening')`).
116 | 
117 | <sup>[вернуться к оглавлению](#table-of-contents)</sup>
118 | 
119 | 
120 | <div id="back-to-top-button"></div>
121 | 
122 | ### Кнопка "вернуться к началу"
123 | 
124 | С помощью методов `animate` и `scrollTop` в jQuery вам не нужен плагин, чтобы создать простую анимацию прокрутки вверх:
125 | 
126 | ```javascript
127 | // Вернуться к началу
128 | $('.container').on('click', '.back-to-top', function (e) {
129 |   e.preventDefault();
130 |   $('html, body').animate({scrollTop: 0}, 800);
131 | });
132 | ```
133 | 
134 | ```html
135 | <!-- Создаем элемент anchor -->
136 | <a class="top" href="#">Back to top</a>
137 | ```
138 | 
139 | Изменение значения `scrollTop` изменяет место, на котором прокрутка остановится. Все, что вы действительно делаете, это прокрутка документа на протяжении 800 миллисекунд, пока мы не окажемся в верхней части документа.
140 | 
141 | **Примечание:** Обратите внимание на некоторое [неправильное поведение](https://github.com/jquery/api.jquery.com/issues/417) `scrollTop`.
142 | 
143 | <sup>[вернуться к оглавлению](#table-of-contents)</sup>
144 | 
145 | 
146 | <div id="preload-images"></div>
147 | 
148 | ### Предварительная загрузка изображений
149 | 
150 | Если ваш веб-страница использует много изображений, которые не видны изначально (например, появлюятся при наведении курсора мыши), имеет смысл предварительно загрузить их:
151 | 
152 | ```javascript
153 | $.preloadImages = function () {
154 |   for (var i = 0; i < arguments.length; i++) {
155 |     $('<img>').attr('src', arguments[i]);
156 |   }
157 | };
158 | 
159 | $.preloadImages('img/hover-on.png', 'img/hover-off.png');
160 | ```
161 | 
162 | <sup>[вернуться к оглавлению](#table-of-contents)</sup>
163 | 
164 | 
165 | <div id="checking-if-images-are-loaded"></div>
166 | 
167 | ### Проверка, загружаются ли изображения
168 | 
169 | Иногда вам может понадобиться проверка того, что ваши изображения полностью загружены, перед тем как вы продолжите работу своего скрипта:
170 | 
171 | ```javascript
172 | $('img').on('load', function () {
173 |   console.log('image load successful');
174 | });
175 | ```
176 | 
177 | Вы также можете проверить, если одно конкретное изображение загружено, заменив тег `<img>` на идентификатор или класс.
178 | 
179 | <sup>[вернуться к оглавлению](#table-of-contents)</sup>
180 | 
181 | 
182 | <div id="fix-broken-images-automatically"></div>
183 | 
184 | ### Автоматическое исправление сломанных изображений
185 | 
186 | Если вам посчастливилось найти неработающие ссылки на изображения на вашем сайте, замена их по одной может утомить. Этот простой фрагмент кода поможет избежать этой головной боли:
187 | 
188 | ```javascript
189 | $('img').on('error', function () {
190 |   if(!$(this).hasClass('broken-image')) {
191 |     $(this).prop('src', 'img/broken.png').addClass('broken-image');
192 |   }
193 | });
194 | ```
195 | 
196 | В качестве альтернативы, если вы хотите просто скрыть сломанные изображения этот фрагмент будет заботиться о том, что для:
197 | 
198 | ```javascript
199 | $('img').on('error', function () {
200 |   $(this).hide();
201 | });
202 | ```
203 | 
204 | <sup>[вернуться к оглавлению](#table-of-contents)</sup>
205 | 
206 | 
207 | <div id="post-a-form-with-ajax"></div>
208 | 
209 | ### Дать форму с помощью AJAX
210 | 
211 | методы JQuery AJAX являются распространенным способом запросить текст, HTML, XML или JSON. Если вы хотите отправить форму через AJAX можно собирать пользовательские входные данные через `val()` метода:
212 | 
213 | ```javascript
214 | $.post('sign_up.php', {
215 |   user_name: $('input[name=user_name]').val(),
216 |   email:     $('input[name=email]').val(),
217 |   password:  $('input[name=password]').val(),
218 | });
219 | ```
220 | 
221 | Тем не менее, все эти `val()` звонки стоят дорого. Лучший способ сбора данных, вводимых пользователем использует `serialize()` функцию, которая собирает пользовательские входные данные в виде строки:
222 | 
223 | ```javascript
224 | $.post('sign_up', $('#sign-up-form').serialize());
225 | ```
226 | 
227 | <sup>[вернуться к оглавлению](#table-of-contents)</sup>
228 | 
229 | 
230 | <div id="toggle-classes-on-hover"></div>
231 | 
232 | ### Переключение классов по наведению
233 | 
234 | Допустим, вы хотите изменить визуальный интерактивный элемент на странице, когда пользователь наводит курсор над ним. Вы можете добавить класс к вашему элементу, когда пользователь навел курсор; когда пользователь уводит курсор, класс удаляется:
235 | 
236 | ```javascript
237 | $('.btn').on('hover', function () {
238 |   $(this).addClass('hover');
239 | }, function () {
240 |   $(this).removeClass('hover');
241 | });
242 | ```
243 | 
244 | Вам просто нужно добавить необходимые стили CSS. Если вы хотите _упростить_ логику, используйте метод `toggleClass`:
245 | 
246 | ```javascript
247 | $('.btn').hover(function () {
248 |   $(this).toggleClass('hover');
249 | });
250 | ```
251 | 
252 | **Примечание:** CSS может быть более быстрым решением в этом случае, но вам по-прежнему стоит знать об этом.
253 | 
254 | <sup>[вернуться к оглавлению](#table-of-contents)</sup>
255 | 
256 | 
257 | <div id="disabling-input-fields"></div>
258 | 
259 | ### Отключение поля ввода
260 | 
261 | Иногда вы можете захотеть отключить кнопку отправки формы или одно из его текстовых полей, до тех пор, пока пользователь не выполнил определенное действие (например, не отметил флаг "я прочитал условия"). Добавьте атрибут `disabled` на ваше поле ввода, отключив его, когда вы хотите:
262 | 
263 | ```javascript
264 | $('input[type="submit"]').prop('disabled', true);
265 | ```
266 | 
267 | Все, что вам нужно сделать, чтобы включить поле обратно, это запустить метод `prop` на том же поле ввода, но установить значение `disabled` к `false`:
268 | 
269 | ```javascript
270 | $('input[type="submit"]').prop('disabled', false);
271 | ```
272 | 
273 | <sup>[вернуться к оглавлению](#table-of-contents)</sup>
274 | 
275 | 
276 | <div id="stop-the-loading-of-links"></div>
277 | 
278 | ### Прерывание загрузки ссылки
279 | 
280 | Иногда вы не хотите, чтобы ссылки переводили пользователя на определенную веб-страницу или перезагружали страницу; Вы можете хотеть, чтобы они делали что-то еще, как спусковой крючок для какой-либо другого сценария. Этот скрипт предотвратит действие по умолчанию:
281 | 
282 | ```javascript
283 | $('a.no-link').on('click', function (e) {
284 |   e.preventDefault();
285 | });
286 | ```
287 | 
288 | <sup>[вернуться к оглавлению](#table-of-contents)</sup>
289 | 
290 | 
291 | <div id="cache-jquery-selectors"></div>
292 | 
293 | ### Кэширование селекторов jQuery
294 | 
295 | Подумайте, сколько раз вы пишете один и тот же селектор снова и снова в любом проекте. Каждый `$('.element')` селектор ищет по всему DOM каждый раз, независимо от того, был ли он использован раньше. Вместо этого запустите селектор один раз и сохраните его результаты в переменной:
296 | 
297 | ```javascript
298 | var blocks = $('#blocks').find('li');
299 | ```
300 | 
301 | Теперь вы можете использовать `blocks` переменную там, где вы хотите, без необходимости выполнять поиск по DOM каждый раз:
302 | 
303 | ```javascript
304 | $('#hideBlocks').on('click', function () {
305 |   blocks.fadeOut();
306 | });
307 | 
308 | $('#showBlocks').on('click', function () {
309 |   blocks.fadeIn();
310 | });
311 | ```
312 | 
313 | Кэширование jQuery селекторов позволяет получить выигрыш в производительности.
314 | 
315 | <sup>[вернуться к оглавлению](#table-of-contents)</sup>
316 | 
317 | 
318 | <div id="toggle-fadeslide"></div>
319 | 
320 | ### Переключение fade/slide
321 | 
322 | Slide и fade являются часто используемыми действиями в анимации с jQuery. Вы можете захотить, показать элемент, когда пользователь нажимает что-то, что делает методы `fadeIn` и `slideDown` хорошо подходящими. Но если вы хотите, чтобы этот элемент, появился на первый щелчок, а затем исчез на второй, то этот скрипт будет работать просто отлично:
323 | 
324 | ```javascript
325 | // Fade
326 | $('.btn').on('click', function () {
327 |   $('.element').fadeToggle('slow');
328 | });
329 | 
330 | // Toggle
331 | $('.btn').on('click', function () {
332 |   $('.element').slideToggle('slow');
333 | });
334 | ```
335 | 
336 | <sup>[вернуться к оглавлению](#table-of-contents)</sup>
337 | 
338 | 
339 | <div id="simple-accordion"></div>
340 | 
341 | ### Простой аккордеон
342 | 
343 | Метод для создания простого аккордеона:
344 | 
345 | ```javascript
346 | // Закрываем все панели
347 | $('#accordion').find('.content').hide();
348 | 
349 | // Аккордеон
350 | $('#accordion').find('.accordion-header').on('click', function () {
351 |   var next = $(this).next();
352 |   next.slideToggle('fast');
353 |   $('.content').not(next).slideUp('fast');
354 |   return false;
355 | });
356 | ```
357 | 
358 | Добавив этот скрипт все, что вам нужно сделать на вашей веб-странице, это найти необходимый HTML и поручить ему эту работу.
359 | 
360 | <sup>[вернуться к оглавлению](#table-of-contents)</sup>
361 | 
362 | 
363 | <div id="make-two-divs-the-same-height"></div>
364 | 
365 | ### Сделать два элемента div одинаковой высотой
366 | 
367 | Иногда вы будете хотеть две элемента div, которые имеют одинаковую высоту, независимо от содержания:
368 | 
369 | ```javascript
370 | $('.div').css('min-height', $('.main-div').height());
371 | ```
372 | 
373 | В этом примере задается `min-height`, что означает, что она может быть больше, чем основной DIV, но никогда меньше. Тем не менее, более гибкий метод должен был бы пройтись циклом по множеству элементов и установить высоту самого высокого элемента:
374 | 
375 | ```javascript
376 | var $columns = $('.column');
377 | var height = 0;
378 | $columns.each(function () {
379 |   if ($(this).height() > height) {
380 |     height = $(this).height();
381 |   }
382 | });
383 | $columns.height(height);
384 | ```
385 | 
386 | Если вы хотите, чтобы _все_ столбцы имели одинаковую высоту:
387 | 
388 | ```javascript
389 | var $rows = $('.same-height-columns');
390 | $rows.each(function () {
391 |   $(this).find('.column').height($(this).height());
392 | });
393 | ```
394 | 
395 | **Примечание:** Это можно сделать несколькими способами [в CSS](http://codepen.io/AllThingsSmitty/pen/KMPqoO), но в зависимости от ваших потребностей, стоит знать, как это сделать с помощью jQuery.
396 | 
397 | <sup>[вернуться к оглавлению](#table-of-contents)</sup>
398 | 
399 | 
400 | <div id="open-external-links-in-new-tabwindow"></div>
401 | 
402 | ### Открывать внешние ссылки в новой вкладке или новом окне
403 | 
404 | Открыть внешние ссылки в новой вкладке браузера или новом окне, и открывать внутренние ссылки в той же вкладке или окне:
405 | 
406 | ```javascript
407 | $('a[href^="http"]').attr('target', '_blank');
408 | $('a[href^="//"]').attr('target', '_blank');
409 | $('a[href^="' + window.location.origin + '"]').attr('target', '_self');
410 | ```
411 | 
412 | **Примечание:** `window.location.origin` не работает в IE10. [Это исправление](http://tosbourn.com/a-fix-for-window-location-origin-in-internet-explorer/) решает проблему.
413 | 
414 | <sup>[вернуться к оглавлению](#table-of-contents)</sup>
415 | 
416 | 
417 | <div id="find-element-by-text"></div>
418 | 
419 | ### Найти элемент по тексту
420 | 
421 | При использовании `contains()` селектора в jQuery вы можете найти текст в содержимом элемента. Если текст не существует, то этот элемент будет скрыт:
422 | 
423 | ```javascript
424 | var search = $('#search').val();
425 | $('div:not(:contains("' + search + '"))').hide();
426 | ```
427 | 
428 | <sup>[вернуться к оглавлению](#table-of-contents)</sup>
429 | 
430 | 
431 | <div id="trigger-on-visibility-change"></div>
432 | 
433 | ### Запуск по изменению видимости
434 | 
435 | Запуск скрипта, когда пользователь больше не фокусируется на вкладке или перефокусируется на вкладке:
436 | 
437 | ```javascript
438 | $(document).on('visibilitychange', function (e) {
439 |   if (e.target.visibilityState === 'visible') {
440 |     console.log('Tab is now in view!');
441 |   } else if (e.target.visibilityState === 'hidden') {
442 |     console.log('Tab is now hidden!');
443 |   }
444 | });
445 | ```
446 | 
447 | <sup>[вернуться к оглавлению](#table-of-contents)</sup>
448 | 
449 | 
450 | <div id="ajax-call-error-handling"></div>
451 | 
452 | ### Обработка ошибок в AJAX-запросах
453 | 
454 | Когда AJAX-запрос возвращает ошибку 404 или 500, будет выполняться обработчик ошибок. Если обработчик не определен, другой код jQuery может не работать после этого. Определить глобальный обработчик ошибок AJAX-запросов можно следующим образом:
455 | 
456 | ```javascript
457 | $(document).on('ajaxError', function (e, xhr, settings, error) {
458 |   console.log(error);
459 | });
460 | ```
461 | 
462 | <sup>[вернуться к оглавлению](#table-of-contents)</sup>
463 | 
464 | 
465 | <div id="chain-plugin-calls"></div>
466 | 
467 | ### Цепочка вызовов плагинов
468 | 
469 | jQuery позволяет выполнять "цепочки" методов, что упрощает процесс, однократно запрашивая DOM и не создавая несколько объектов jQuery. Скажем, следующий фрагмент кода представляет ваш метод:
470 | 
471 | ```javascript
472 | $('#elem').show();
473 | $('#elem').html('bla');
474 | $('#elem').otherStuff();
475 | ```
476 | 
477 | Он может быть значительно улучшен с помощью цепочки:
478 | 
479 | ```javascript
480 | $('#elem')
481 |   .show()
482 |   .html('bla')
483 |   .otherStuff();
484 | ```
485 | 
486 | Альтернативой является кэширование элемента в переменной (с приставкой `$`):
487 | 
488 | ```javascript
489 | var $elem = $('#elem');
490 | $elem.hide();
491 | $elem.html('bla');
492 | $elem.otherStuff();
493 | ```
494 | 
495 | И цепочки и [кэширование](#cache-jquery-selectors) в jQuery являются лучшими практиками, которые приводят к более короткому и быстрому код.
496 | 
497 | <sup>[вернуться к оглавлению](#table-of-contents)</sup>
498 | 
499 | 
500 | <div id="sort-list-items-alphabetically"></div>
501 | 
502 | ### Сортировка элементов списка по алфавиту
503 | 
504 | Допустим, в списке слишком много элементов. Возможно, содержание производится с помощью CMS, а вы хотите показать их в алфавитном порядке:
505 | 
506 | ```javascript
507 | var ul = $('#list'),
508 | lis = $('li', ul).get();
509 | 
510 | lis.sort(function (a, b) {
511 |   return ($(a).text().toUpperCase() < $(b).text().toUpperCase()) ? -1 : 1;
512 | });
513 | 
514 | ul.append(lis);
515 | ```
516 | 
517 | Такие дела!
518 | 
519 | <sup>[вернуться к оглавлению](#table-of-contents)</sup>
520 | 
521 | 
522 | <div id="disable-right-click"></div>
523 | 
524 | ### Отключить правую кнопку мыши
525 | 
526 | Если вы хотите отключить контекстное меню, вы можете сделать это для всей страницы...
527 | 
528 | ```javascript
529 | $(document).ready(function () {
530 |   $(document).bind('contextmenu', function (e) {
531 |     return false;
532 |   })
533 | })
534 | ```
535 | 
536 | ...но вы также можете сделать то же самое для конкретного элемента:
537 | 
538 | ```javascript
539 | $(document).ready(function () {
540 |   $('#submit').bind('contextmenu', function (e) {
541 |     return false;
542 |   })
543 | })
544 | ```
545 | 
546 | <sup>[вернуться к оглавлению](#table-of-contents)</sup>
547 | 
548 | 
549 | ## Поддержка
550 | 
551 | Текущие версии Chrome, Firefox, Safari, Opera, Edge, и IE11.
552 | 
553 | <sup>[вернуться к оглавлению](#table-of-contents)</sup>
554 | 


--------------------------------------------------------------------------------
/translations/zh-CN/README.md:
--------------------------------------------------------------------------------
  1 | # jQuery的提示大家应该知道 [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)
  2 | 
  3 | 简单的窍门的集合，以帮助您的jQuery的游戏。
  4 | 
  5 | > 对于其他大名单退房 [@sindresorhus](https://github.com/sindresorhus/)的策展的名单 [真棒名单](https://github.com/sindresorhus/awesome/).
  6 | 
  7 | 
  8 | <div id="table-of-contents"></div>
  9 | 
 10 | ## 目录
 11 | 
 12 | * [温馨提示](#提示)
 13 | * [支持](#support)
 14 | * [贡献指引](../../CONTRIBUTING.md)
 15 | 
 16 | 
 17 | <div id="tips"></div>
 18 | 
 19 | ## 提示
 20 | 
 21 | 1. [使用 `noConflict()`](#use-noconflict)
 22 | 1. [检查是否加载的jQuery](#checking-if-jquery-loaded)
 23 | 1. [检查元素是否存在](#check-whether-an-element-exists)
 24 | 1. [使用`.on()`绑定`.click()`代替](#use-on-binding-instead-of-click)
 25 | 1. [返回顶部按钮](#back-to-top-button)
 26 | 1. [预先载入图像](#preload-images)
 27 | 1. [检查，如果图像加载](#checking-if-images-are-loaded)
 28 | 1. [自动修复破碎的形象](#fix-broken-images-automatically)
 29 | 1. [发布的AJAX表单](#post-a-form-with-ajax)
 30 | 1. [悬停切换类](#toggle-classes-on-hover)
 31 | 1. [禁用输入字段](#disabling-input-fields)
 32 | 1. [停止路径的负载](#stop-the-loading-of-links)
 33 | 1. [缓存jquery选择](#cache-jquery-selectors)
 34 | 1. [淡入淡出切换/幻灯片](#toggle-fadeslide)
 35 | 1. [简单手风琴](#simple-accordion)
 36 | 1. [让两个div相同的高度](#make-two-divs-the-same-height)
 37 | 1. [打开外部链接在新标签/窗口](#open-external-links-in-new-tabwindow)
 38 | 1. [查找元素通过短信](#find-element-by-text)
 39 | 1. [可见性改变触发器](#trigger-on-visibility-change)
 40 | 1. [Ajax调用错误处理](#ajax-call-error-handling)
 41 | 1. [连锁插件调用](#chain-plugin-calls)
 42 | 1. [排序列表项按字母顺序](#sort-list-items-alphabetically)
 43 | 1. [禁用右键单击](#禁用右键单击)
 44 | 
 45 | 
 46 | <div id="use-noconflict"></div>
 47 | 
 48 | ### 使用 `noConflict()`
 49 | 
 50 | 其他JavaScript庫也使用jQuery使用的`$`別名。 為了確保jQuery不會與不同庫的`$`對象發生衝突，請在文檔的開頭使用`noConflict()`方法：
 51 | 
 52 | ```javascript
 53 | jQuery.noConflict();
 54 | ```
 55 | 
 56 | 現在，您將使用`jQuery`變量名稱而不是`$`來引用jQuery對象（例如，`jQuery('div p').hide()`）。如果你在同一頁面上有多個jQuery版本，你可以使用`noConflict（）`來設置一個特定版本的別名：
 57 | 
 58 | ```javascript
 59 | let $x = jQuery.noConflict();
 60 | ```
 61 | 
 62 | <sup>[回目录](#table-of-contents)</sup>
 63 | 
 64 | 
 65 | <div id="checking-if-jquery-loaded"></div>
 66 | 
 67 | ### 检查如果加载的jQuery
 68 | 
 69 | 之前，你可以使用jQuery做任何事情，你首先需要确保它加载：
 70 | 
 71 | ```javascript
 72 | if (typeof jQuery == 'undefined') {
 73 |   console.log('jQuery hasn\'t loaded');
 74 | } else {
 75 |   console.log('jQuery has loaded');
 76 | }
 77 | ```
 78 | 
 79 | 现在你是关闭...
 80 | 
 81 | <sup>[回目录](#table-of-contents)</sup>
 82 | 
 83 | 
 84 | <div id="check-whether-an-element-exists"></div>
 85 | 
 86 | ### 检查元素是否存在
 87 | 
 88 | 在使用HTML元素之前，您需要确保它是DOM的一部分。
 89 | 
 90 | ```javascript
 91 | if ($("#selector").length) {
 92 |   //do something with element
 93 | }
 94 | ```
 95 | 
 96 | <sup>[回目录](#table-of-contents)</sup>
 97 | 
 98 | 
 99 | <div id="use-on-binding-instead-of-click"></div>
100 | 
101 | ### 使用`.on()`绑定`.click()`代替
102 | 
103 | 使用`.on()`给你几个优点比使用`.click()`，如添加多个事件的能力...
104 | 
105 | ```javascript
106 | .on('click tap hover')
107 | ```
108 | 
109 | ...绑定适用于动态创建的元素，以及（有没有必要动态添加到DOM元素每一个元素手动绑定）...
110 | 
111 | ...和可能性来设置一个命名空间:
112 | 
113 | ```javascript
114 | .on('click.menuOpening')
115 | ```
116 | 
117 | 命名空间给你解除对特定事件（例如，`.off（'click.menuOpening'）`）的权力。
118 | 
119 | <sup>[回目录](#table-of-contents)</sup>
120 | 
121 | 
122 | <div id="back-to-top-button"></div>
123 | 
124 | ### 返回顶部按钮
125 | 
126 | 通过使用jQuery中的`animate`和`scrollTop`方法，你并不需要一个插件来创建一个简单的滚动到顶部动画：
127 | 
128 | ```javascript
129 | // Back to top
130 | $('.container').on('click', '.back-to-top', function (e) {
131 |   e.preventDefault();
132 |   $('html, body').animate({scrollTop: 0}, 800);
133 | });
134 | ```
135 | 
136 | ```html
137 | <!-- Create an anchor tag -->
138 | <a class="top" href="#">Back to top</a>
139 | ```
140 | 
141 | 改变，你想要滚动降落`scrollTop`价值的变化。所有你真的做的是动画文件的全身各处的800毫秒的过程中，直到它滚动到文档的顶部。
142 | 
143 | **注：** 观看一些 [错误行为](https://github.com/jquery/api.jquery.com/issues/417) 用 `scrollTop`。
144 | 
145 | <sup>[回目录](#table-of-contents)</sup>
146 | 
147 | 
148 | <div id="preload-images"></div>
149 | 
150 | ### 预先载入图像
151 | 
152 | 如果你的网页使用了大量不可见的开始（例如，悬停）图像是有意义的预加载它们：
153 | 
154 | ```javascript
155 | $.preloadImages = function () {
156 |   for (var i = 0; i < arguments.length; i++) {
157 |     $('<img>').attr('src', arguments[i]);
158 |   }
159 | };
160 | 
161 | $.preloadImages('img/hover-on.png', 'img/hover-off.png');
162 | ```
163 | 
164 | <sup>[回目录](#table-of-contents)</sup>
165 | 
166 | 
167 | <div id="checking-if-images-are-loaded"></div>
168 | 
169 | ### 检查如果图像加载
170 | 
171 | 有时你可能需要检查，如果您的影像出现，以便继续与脚本满载：
172 | 
173 | ```javascript
174 | $('img').on('load', function () {
175 |   console.log('image load successful');
176 | });
177 | ```
178 | 
179 | 您也可以检查，如果一个特定的形象已被用一个ID或类替换`<img>`标签加载。
180 | 
181 | <sup>[回目录](#table-of-contents)</sup>
182 | 
183 | 
184 | <div id="fix-broken-images-automatically"></div>
185 | 
186 | ### 自动修复破碎的形象
187 | 
188 | 如果你碰巧发现网站上的残缺的图像链接一个取代他们可以是一个痛苦。这一段简单的代码可以节省很多麻烦：
189 | 
190 | ```javascript
191 | $('img').on('error', function () {
192 |   if(!$(this).hasClass('broken-image')) {
193 |     $(this).prop('src', 'img/broken.png').addClass('broken-image');
194 |   }
195 | });
196 | ```
197 | 
198 | 另外，如果你想简单地隐藏破碎的形象这个片段将利用该护理：
199 | 
200 | ```javascript
201 | $('img').on('error', function () {
202 |   $(this).hide();
203 | });
204 | ```
205 | 
206 | <sup>[回目录](#table-of-contents)</sup>
207 | 
208 | 
209 | <div id="post-a-form-with-ajax"></div>
210 | 
211 | ### 发布的AJAX表单
212 | 
213 | jQuery的AJAX方法来请求文本，HTML，XML或JSON的常用方法。如果你想通过AJAX发送的形式，你可以通过`val()`方法收集用户输入：
214 | 
215 | ```javascript
216 | $.post('sign_up.php', {
217 |   user_name: $('input[name=user_name]').val(),
218 |   email:     $('input[name=email]').val(),
219 |   password:  $('input[name=password]').val(),
220 | });
221 | ```
222 | 
223 | 然而，所有这些`val()`调用的是昂贵的。收集用户输入的一个更好的办法是使用'的`serialize()`函数，它收集用户输入一个字符串：
224 | 
225 | ```javascript
226 | $.post('sign_up', $('#sign-up-form').serialize());
227 | ```
228 | 
229 | <sup>[回目录](#table-of-contents)</sup>
230 | 
231 | 
232 | <div id="toggle-classes-on-hover"></div>
233 | 
234 | ### 切换悬停类
235 | 
236 | 比方说，你想改变视觉可点击元素的页面上，当用户将鼠标悬停在它。您可以将类添加到你的元素，当用户徘徊;用户停止徘徊时删除类：
237 | 
238 | ```javascript
239 | $('.btn').on('hover', function () {
240 |   $(this).addClass('hover');
241 | }, function () {
242 |   $(this).removeClass('hover');
243 | });
244 | ```
245 | 
246 | 你只需要添加必要的CSS。如果你想要一个更_simpler_方式使用`toggleClass`方法：
247 | 
248 | ```javascript
249 | $('.btn').hover(function () {
250 |   $(this).toggleClass('hover');
251 | });
252 | ```
253 | 
254 | **注：** CSS可能在这种情况下，更快的解决方案，但它仍然是值得的知道这一点。
255 | 
256 | <sup>[回目录](#table-of-contents)</sup>
257 | 
258 | 
259 | <div id="disabling-input-fields"></div>
260 | 
261 | ### 禁用输入字段
262 | 
263 | 有时你可能要直到用户执行特定操作（例如，勾选“我已阅读条款”复选框）提交被禁用的形式或它的文本输入中的一个按钮。在`disabled`属性添加到您的输入，所以你可以在需要时启用它：
264 | 
265 | ```javascript
266 | $('input[type="submit"]').prop('disabled', true);
267 | ```
268 | 
269 | 所有你需要做的是在输入再次运行`prop`方法，但`disabled`的值设置为`false`：
270 | 
271 | ```javascript
272 | $('input[type="submit"]').prop('disabled', false);
273 | ```
274 | 
275 | <sup>[回目录](#table-of-contents)</sup>
276 | 
277 | 
278 | <div id="stop-the-loading-of-links"></div>
279 | 
280 | ### 停止路径的负载
281 | 
282 | 有时候，你不想链接到特定网页，也没有重新加载页面;你可能希望他们做别的事情一样触发一些其他的脚本。这将做防止默认操作的技巧：
283 | 
284 | ```javascript
285 | $('a.no-link').on('click', function (e) {
286 |   e.preventDefault();
287 | });
288 | ```
289 | 
290 | <sup>[回目录](#table-of-contents)</sup>
291 | 
292 | 
293 | <div id="cache-jquery-selectors"></div>
294 | 
295 | ### 高速缓存jquery选择
296 | 
297 | 想想有多少次你一遍又一遍地在任何项目中再次写入相同的选择。每个`$('.element')`选择有每次搜索整个DOM，如果不管选择以前有运行。相反，运行一次选择器和存储在变量的结果：
298 | 
299 | ```javascript
300 | var blocks = $('#blocks').find('li');
301 | ```
302 | 
303 | 现在你可以使用任何你想要的`blocks`变量，而不必每次搜索DOM：
304 | 
305 | ```javascript
306 | $('#hideBlocks').on('click', function () {
307 |   blocks.fadeOut();
308 | });
309 | 
310 | $('#showBlocks').on('click', function () {
311 |   blocks.fadeIn();
312 | });
313 | ```
314 | 
315 | 缓存jQuery选择器是一种简单的性能增益。
316 | 
317 | <sup>[回目录](#table-of-contents)</sup>
318 | 
319 | 
320 | <div id="toggle-fadeslide"></div>
321 | 
322 | ### 切换淡入/幻灯片
323 | 
324 | 滑动和衰落都是我们用很多东西在我们使用jQuery的动画。你可能只是想表明一个元素，当用户点击的东西，这使得`fadeIn`和`slideDown`方法完善。但是，如果你想要的元素出现在第一次点击，然后消失在第二本会工作得很好：
325 | 
326 | ```javascript
327 | // Fade
328 | $('.btn').on('click', function () {
329 |   $('.element').fadeToggle('slow');
330 | });
331 | 
332 | // Toggle
333 | $('.btn').on('click', function () {
334 |   $('.element').slideToggle('slow');
335 | });
336 | ```
337 | 
338 | <sup>[回目录](#table-of-contents)</sup>
339 | 
340 | 
341 | <div id="simple-accordion"></div>
342 | 
343 | ### 简单手风琴
344 | 
345 | 这是一个快速手风琴一个简单的方法：
346 | 
347 | ```javascript
348 | // Close all panels
349 | $('#accordion').find('.content').hide();
350 | 
351 | // Accordion
352 | $('#accordion').find('.accordion-header').on('click', function () {
353 |   var next = $(this).next();
354 |   next.slideToggle('fast');
355 |   $('.content').not(next).slideUp('fast');
356 |   return false;
357 | });
358 | ```
359 | 
360 | 通过添加这个脚本你真正需要在网页上做的是必要的HTML去得到这个工作。
361 | 
362 | <sup>[回目录](#table-of-contents)</sup>
363 | 
364 | 
365 | <div id="make-two-divs-the-same-height"></div>
366 | 
367 | ### 让两个div相同的高度
368 | 
369 | 有时候，你会想两个div具有相同的高度，无论他们有他们什么内容：
370 | 
371 | ```javascript
372 | $('.div').css('min-height', $('.main-div').height());
373 | ```
374 | 
375 | 本示例设置了`min-height`这意味着它可以比主分区越大，但从来没有变小。然而，更灵活的方法是循环在一组的元素，并设置高度最高的元件的高度：
376 | 
377 | ```javascript
378 | var $columns = $('.column');
379 | var height = 0;
380 | $columns.each(function () {
381 |   if ($(this).height() > height) {
382 |     height = $(this).height();
383 |   }
384 | });
385 | $columns.height(height);
386 | ```
387 | 
388 | 如果希望_all_列具有相同的高度：
389 | 
390 | ```javascript
391 | var $rows = $('.same-height-columns');
392 | $rows.each(function () {
393 |   $(this).find('.column').height($(this).height());
394 | });
395 | ```
396 | 
397 | **注：**这是可以做到几个方面[在CSS](http://codepen.io/AllThingsSmitty/pen/KMPqoO)，但根据您的需要是什么，知道如何在jQuery中做到这一点还是值得的。
398 | 
399 | <sup>[回目录](#table-of-contents)</sup>
400 | 
401 | 
402 | <div id="open-external-links-in-new-tabwindow"></div>
403 | 
404 | ### 在新标签中打开外部链接/窗
405 | 
406 | 打开外部链接在新的浏览器标签或窗口，并确保在同一起源于同一个标签或窗口打开链接：
407 | 
408 | ```javascript
409 | $('a[href^="http"]').attr('target', '_blank');
410 | $('a[href^="//"]').attr('target', '_blank');
411 | $('a[href^="' + window.location.origin + '"]').attr('target', '_self');
412 | ```
413 | 
414 | **注：** `window.location.origin`不IE10工作。 [此修复程序](http://tosbourn.com/a-fix-for-window-location-origin-in-internet-explorer/) 主罚问题的照顾。
415 | 
416 | <sup>[回目录](#table-of-contents)</sup>
417 | 
418 | 
419 | <div id="find-element-by-text"></div>
420 | 
421 | ### 查找元素通过短信
422 | 
423 | 通过jQuery中使用`contains()`选择，你可以找到在元素内容的文字。如果文本不存在，该元素将被隐藏：
424 | 
425 | ```javascript
426 | var search = $('#search').val();
427 | $('div:not(:contains("' + search + '"))').hide();
428 | ```
429 | 
430 | <sup>[回目录](#table-of-contents)</sup>
431 | 
432 | 
433 | <div id="trigger-on-visibility-change"></div>
434 | 
435 | ### 上触发能见度变化
436 | 
437 | 触发JavaScript的用户不再集中在选项卡上，或重新调整选项卡上：
438 | 
439 | ```javascript
440 | $(document).on('visibilitychange', function (e) {
441 |   if (e.target.visibilityState === 'visible') {
442 |     console.log('Tab is now in view!');
443 |   } else if (e.target.visibilityState === 'hidden') {
444 |     console.log('Tab is now hidden!');
445 |   }
446 | });
447 | ```
448 | 
449 | <sup>[回目录](#table-of-contents)</sup>
450 | 
451 | 
452 | <div id="ajax-call-error-handling"></div>
453 | 
454 | ### AJAX调用错误处理
455 | 
456 | 当Ajax调用返回404或500错误的错误处理程序将被执行。如果没有定义的处理程序，其他的jQuery代码可能就失效了。定义一个全局的Ajax错误处理程序：
457 | 
458 | ```javascript
459 | $(document).on('ajaxError', function (e, xhr, settings, error) {
460 |   console.log(error);
461 | });
462 | ```
463 | 
464 | <sup>[回目录](#table-of-contents)</sup>
465 | 
466 | 
467 | <div id="chain-plugin-calls"></div>
468 | 
469 | ### 连锁插件调用
470 | 
471 | jQuery的允许“链接”插件的方法调用，以减轻反复查询DOM并创建多个jQuery的对象的过程。比方说，下面的代码片段代表了你的插件方法调用：
472 | 
473 | ```javascript
474 | $('#elem').show();
475 | $('#elem').html('bla');
476 | $('#elem').otherStuff();
477 | ```
478 | 
479 | 这可以通过链接可以大大提高：
480 | 
481 | ```javascript
482 | $('#elem')
483 |   .show()
484 |   .html('bla')
485 |   .otherStuff();
486 | ```
487 | 
488 | 另一种方法是缓存元素的变量（用 `$` 前缀）：
489 | 
490 | 
491 | ```javascript
492 | var $elem = $('#elem');
493 | $elem.hide();
494 | $elem.html('bla');
495 | $elem.otherStuff();
496 | ```
497 | 
498 | 无论链接和jQuery的[缓存](#缓存的jQuery选择器)方法是导致更短，更快的代码的最佳实践。
499 | 
500 | <sup>[回目录](#table-of-contents)</sup>
501 | 
502 | 
503 | <div id="sort-list-items-alphabetically"></div>
504 | 
505 | ### 排序列表项按字母顺序
506 | 
507 | 比方说，你结束了在列表中的项目太多。也许内容是由CMS生成并希望他们字母顺序：
508 | 
509 | ```javascript
510 | var ul = $('#list'),
511 | lis = $('li', ul).get();
512 | 
513 | lis.sort(function (a, b) {
514 |   return ($(a).text().toUpperCase() < $(b).text().toUpperCase()) ? -1 : 1;
515 | });
516 | 
517 | ul.append(lis);
518 | ```
519 | 
520 | 你去那里！
521 | 
522 | <sup>[回目录](#table-of-contents)</sup>
523 | 
524 | 
525 | <div id="disable-right-click"></div>
526 | 
527 | ### 禁用右键单击
528 | 
529 | 
530 | 如果要禁用右键单击，您可以对整个页面进行操作...
531 | 
532 | ```javascript
533 | $(document).ready(function () {
534 |   $(document).bind('contextmenu', function (e) {
535 |     return false;
536 |   })
537 | })
538 | ```
539 | 
540 | ...但是您也可以为特定元素做同样的事情：
541 | 
542 | ```javascript
543 | $(document).ready(function () {
544 |   $('#submit').bind('contextmenu', function (e) {
545 |     return false;
546 |   })
547 | })
548 | ```
549 | 
550 | <sup>[回目录](#table-of-contents)</sup>
551 | 
552 | 
553 | ## 支持
554 | 
555 | 当前版本的Chrome，火狐，Safari，歌剧，EDGE和IE11的。
556 | 
557 | <sup>[回目录](#table-of-contents)</sup>
558 | 


--------------------------------------------------------------------------------
/translations/zh-TW/README.md:
--------------------------------------------------------------------------------
  1 | # 大家都應該知道的 jQuery 小技巧 [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)
  2 | 
  3 | 一些簡單的小技巧讓您對 jQuery 更得心應手。
  4 | 
  5 | > 也可以看看由 [@sindresorhus](https://github.com/sindresorhus/) 整理，一些其他很不錯的清單集合： [awesome lists](https://github.com/sindresorhus/awesome/).
  6 | 
  7 | 
  8 | ## 目錄
  9 | 
 10 | * [技巧](#技巧)
 11 | * [瀏覽器支援](#瀏覽器支援)
 12 | * [貢獻守則](../../CONTRIBUTING.md)
 13 | 
 14 | 
 15 | ## 技巧
 16 | 
 17 | 1. [使用 `noConflict()`](#使用-noconflict)
 18 | 1. [檢查 jQuery 是否成功載入](#檢查-jquery-是否成功載入)
 19 | 1. [檢查元素是否存在](#檢查元素是否存在)
 20 | 1. [使用 `.on()` 做 Binding，而不要使用 `.click()`](#使用-on-做-binding而不要使用-click)
 21 | 1. [返回最頂端的按鈕](#返回最頂端的按鈕)
 22 | 1. [預先載入圖片](#預先載入圖片)
 23 | 1. [檢查圖片是否成功載入](#檢查圖片是否成功載入)
 24 | 1. [自動修復載入失敗的圖片](#自動修復載入失敗的圖片)
 25 | 1. [發布的AJAX表單](#post-a-form-with-ajax)
 26 | 1. [透過 Hover 切換 Class](#透過-hover-切換-class)
 27 | 1. [讓 input field 無法輸入](#讓-input-field-無法輸入)
 28 | 1. [停止載入連結](#停止載入連結)
 29 | 1. [快取 jQuery 選擇器](#快取-jquery-選擇器)
 30 | 1. [切換 Fade/Slide](#切換-fadeslide)
 31 | 1. [簡單可收放元件(Accordion)](#簡單可收放元件accordion)
 32 | 1. [使兩個 Div 一樣高](#使兩個-div-一樣高)
 33 | 1. [在新分頁/視窗開啟外部連結](#在新分頁視窗開啟外部連結)
 34 | 1. [利用文字找到元素](#利用文字找到元素)
 35 | 1. [Visibility 改變時觸發事件](#visibility-改變時觸發事件)
 36 | 1. [Ajax 程序的錯誤處理](#ajax-程序的錯誤處理)
 37 | 1. [串連 Plugin 的函式呼叫](#串連-plugin-的函式呼叫)
 38 | 1. [照字母順序排序清單元素（list）](#照字母順序排清單元素list)
 39 | 1. [停用右鍵](#停用右鍵)
 40 | 
 41 | 
 42 | ### 使用 `noConflict()`
 43 | 
 44 | 其他JavaScript库也使用jQuery使用的`$`别名。 为了确保jQuery不会与不同库的`$`对象发生冲突，请在文档的开头使用`noConflict()`方法：
 45 | 
 46 | ```javascript
 47 | jQuery.noConflict();
 48 | ```
 49 | 
 50 | 现在，您将使用`jQuery`变量名称而不是`$`来引用jQuery对象（例如`jQuery('div p').hide()`）。如果你在同一页面上有多个jQuery版本，你可以使用`noConflict（）`来设置一个特定版本的别名：
 51 | 
 52 | ```javascript
 53 | let $x = jQuery.noConflict();
 54 | ```
 55 | 
 56 | <sup>[回到目錄](#目錄)</sup>
 57 | 
 58 | 
 59 | ### 檢查 jQuery 是否成功載入
 60 | 
 61 | 在你使用 jQuery 做任何事情之前，你應該先確定其是否成功載入：
 62 | 
 63 | ```javascript
 64 | if (typeof jQuery == 'undefined') {
 65 |   console.log('jQuery hasn\'t loaded');
 66 | } else {
 67 |   console.log('jQuery has loaded');
 68 | }
 69 | ```
 70 | 
 71 | <sup>[回到目錄](#目錄)</sup>
 72 | 
 73 | 
 74 | ### 檢查元素是否存在
 75 | 
 76 | 在使用HTML元素之前，您需要確保它是DOM的一部分。
 77 | 
 78 | ```javascript
 79 | if ($("#selector").length) {
 80 |   //do something with element
 81 | }
 82 | ```
 83 | 
 84 | <sup>[回到目錄](#目錄)</sup>
 85 | 
 86 | 
 87 | ### 使用 `.on()` 做 Binding，而不要使用 `.click()`
 88 | 
 89 | 使用 `.on()` 比起使用 `.click()` 多了一些好處，像是可以加上多個事件(events)...
 90 | 
 91 | ```javascript
 92 | .on('click tap hover')
 93 | ```
 94 | 
 95 | ...這樣的連結（binding）也會對動態產生的元素產生效用（不需要每產生一個 DOM element 就做一次連結)...
 96 | 
 97 | ...還能夠使用命名空間（namespace）:
 98 | 
 99 | ```javascript
100 | .on('click.menuOpening')
101 | ```
102 | 
103 | 命名空間讓你能取消對特定事件(event)的連結（例如： `.off('click.menuOpening')`）。
104 | 
105 | <sup>[回到目錄](#目錄)</sup>
106 | 
107 | 
108 | ### 返回最頂端的按鈕
109 | 
110 | 利用 jQuery 中 `animate` 以及 `scrollTop` 的函式， 你不需要外加特別的插件來完成「返回最頂端」的功能：
111 | 
112 | ```javascript
113 | // Back to top
114 | $('.container').on('click', '.back-to-top', function (e) {
115 |   e.preventDefault();
116 |   $('html, body').animate({scrollTop: 0}, 800);
117 | });
118 | ```
119 | 
120 | ```html
121 | <!-- Create an anchor tag -->
122 | <div class="container">
123 |   <a href="#" class="back-to-top">Back to top</a>
124 | </div>
125 | ```
126 | 
127 | 改變 `scrollTop` 的數值可以改變你希望捲軸停在哪裡，而你實際上是使用 `animate()` 函式以動畫的方式並花費 800 毫秒的時間滾動到文件的頂端。
128 | 
129 | **注意:** 看看一些使用 `scrollTop` 而導致的[奇怪行為](https://github.com/jquery/api.jquery.com/issues/417) 。
130 | 
131 | <sup>[回到目錄](#目錄)</sup>
132 | 
133 | 
134 | ### 預先載入圖片
135 | 
136 | 如果你的網頁有很多圖片並非一開始就是看得到的（例如：hover 才會看到），讓這些圖片預先載入是很合理的：
137 | 
138 | ```javascript
139 | $.preloadImages = function () {
140 |   for (var i = 0; i < arguments.length; i++) {
141 |     $('<img>').attr('src', arguments[i]);
142 |   }
143 | };
144 | 
145 | $.preloadImages('img/hover-on.png', 'img/hover-off.png');
146 | ```
147 | 
148 | <sup>[回到目錄](#目錄)</sup>
149 | 
150 | 
151 | ### 檢查圖片是否成功載入
152 | 
153 | 有時候你會想要確定圖片是否成功載入後再執行接下來的動作：
154 | 
155 | ```javascript
156 | $('img').on('load', function () {
157 |   console.log('image load successful');
158 | });
159 | ```
160 | 
161 | 你也可以透過替換 `<img>` 成其他 ID 或 class 來檢查特定圖片。
162 | 
163 | <sup>[回到目錄](#目錄)</sup>
164 | 
165 | 
166 | ### 自動修復載入失敗的圖片
167 | 
168 | 如果你覺得一個一個替換掉載入失敗的圖片連結很痛苦，這段程式碼可以讓你不會這麼頭痛：
169 | 
170 | ```javascript
171 | $('img').on('error', function () {
172 |   if(!$(this).hasClass('broken-image')) {
173 |     $(this).prop('src', 'img/broken.png').addClass('broken-image');
174 |   }
175 | });
176 | ```
177 | 
178 | 另外，如果你想简单地隐藏破碎的形象这个片段将利用该护理：
179 | 
180 | ```javascript
181 | $('img').on('error', function () {
182 |   $(this).hide();
183 | });
184 | ```
185 | 
186 | <sup>[回到目錄](#目錄)</sup>
187 | 
188 | 
189 | <div id="post-a-form-with-ajax"></div>
190 | ### 發布的AJAX表單
191 | 
192 | jQuery的AJAX方法來請求文本，HTML，XML或JSON的常用方法。如果你想通過AJAX發送的形式，你可以通過`val()`方法收集用戶輸入：
193 | 
194 | ```javascript
195 | $.post('sign_up.php', {
196 |   user_name: $('input[name=user_name]').val(),
197 |   email:     $('input[name=email]').val(),
198 |   password:  $('input[name=password]').val(),
199 | });
200 | ```
201 | 
202 | 然而，所有這些`val()`調用的是昂貴的。收集用戶輸入的一個更好的辦法是使用CSS`（）`函數，它收集用戶輸入一個字符串：
203 | 
204 | ```javascript
205 | $.post('sign_up', $('#sign-up-form').serialize());
206 | ```
207 | 
208 | <sup>[回到目錄](#目錄)</sup>
209 | 
210 | 
211 | ### 透過 Hover 切換 Class
212 | 
213 | 如果說你想要在一個可點擊元件的外貌被 hover 過的時候改變他的外貌，你可以在使用者 hover 時加上一個 class，當使用者停止 hover 時就移除該 class：
214 | 
215 | ```javascript
216 | $('.btn').on('hover', function () {
217 |   $(this).addClass('hover');
218 | }, function () {
219 |   $(this).removeClass('hover');
220 | });
221 | ```
222 | 
223 | 你只要加上必要的 CSS 即可。如果你想要使用更簡單的方法，可以使用 `toggleClass` 函式：
224 | 
225 | ```javascript
226 | $('.btn').on('hover', function () {
227 |   $(this).toggleClass('hover');
228 | });
229 | ```
230 | 
231 | **注意:** 使用 CSS 可能是更快的解決方法，但是這個方法還是值得我們學習。
232 | 
233 | <sup>[回到目錄](#目錄)</sup>
234 | 
235 | 
236 | ### 讓 input field 無法輸入
237 | 
238 | 常常你會希望在使用者進行一些特定動作前， input field 是無法輸入，或是一個 form 的 submit 按鈕是無法點擊的。（例如：點選「我已經閱讀條約。」的checkbox），在 input 加上 `disabled` 的屬性你就能夠在你想要時開啟權限：
239 | 
240 | ```javascript
241 | $('input[type="submit"]').prop('disabled', true);
242 | ```
243 | 
244 | 你只需要再執行一次 `prop` 函式，不過是將 `disabled` 的數值設成 `false`：
245 | 
246 | ```javascript
247 | $('input[type="submit"]').prop('disabled', false);
248 | ```
249 | 
250 | <sup>[回到目錄](#目錄)</sup>
251 | 
252 | 
253 | ### 停止載入連結
254 | 
255 | 有時候你不想讓連結連至特定網站或是重新載入頁面，你可能想要讓他們做一些其他行為，例如：觸發其他程式，以下將會避免預設的行為發生：
256 | 
257 | ```javascript
258 | $('a.no-link').on('click', function (e) {
259 |   e.preventDefault();
260 | });
261 | ```
262 | 
263 | <sup>[回到目錄](#目錄)</sup>
264 | 
265 | 
266 | ### 快取 jQuery 選擇器
267 | 
268 | 想想看你在同一個專案中寫了多少次樣的選擇器，每一個 `$('.element')` 選擇器每一次都會搜尋整個 DOM，不管該選擇器是否在之前執行過。因此，執行一次選擇器並且將結果存在變數中：
269 | 
270 | ```javascript
271 | var blocks = $('#blocks').find('li');
272 | ```
273 | 
274 | 現在你能夠在任何地方使用 `blocks` 變數而不用每一次都搜尋整個DOM：
275 | 
276 | ```javascript
277 | $('#hideBlocks').on('click', function () {
278 |   blocks.fadeOut();
279 | });
280 | 
281 | $('#showBlocks').on('click', function () {
282 |   blocks.fadeIn();
283 | });
284 | ```
285 | 
286 | 快取 jQuery 選擇器是能夠簡單又能增進效能的小技巧。
287 | 
288 | <sup>[回到目錄](#目錄)</sup>
289 | 
290 | 
291 | ### 切換 Fade/Slide
292 | 
293 | Sliding 以及 fading 是我們經常使用 jQuery 來完成的動畫效果。你可能只是想要在使用者點擊某個東西時秀出一個元件，此時 `fadeIn` 以及 `slideDown` 就是你的最佳選擇。如果你想要讓元件在第一次點擊時現身，並且在第二次點擊時消失，以下程式碼也可以很好地實現這個效果：
294 | 
295 | 
296 | ```javascript
297 | // Fade
298 | $('.btn').on('click', function () {
299 |   $('.element').fadeToggle('slow');
300 | });
301 | 
302 | // Toggle
303 | $('.btn').on('click', function () {
304 |   $('.element').slideToggle('slow');
305 | });
306 | ```
307 | 
308 | <sup>[回到目錄](#目錄)</sup>
309 | 
310 | 
311 | ### 簡單可收放元件(Accordion)
312 | 
313 | 這是一個簡單實現可收放元件（accordion）的做法：
314 | 
315 | ```javascript
316 | // Close all panels
317 | $('#accordion').find('.content').hide();
318 | 
319 | // Accordion
320 | $('#accordion').find('.accordion-header').on('click', function () {
321 |   var next = $(this).next();
322 |   next.slideToggle('fast');
323 |   $('.content').not(next).slideUp('fast');
324 |   return false;
325 | });
326 | ```
327 | 
328 | 加上這段程式碼後，你要做的只剩下加上必要的 HTML 即可。
329 | 
330 | <sup>[回到目錄](#目錄)</sup>
331 | 
332 | 
333 | ### 使兩個 Div 一樣高
334 | 
335 | 有時候不論兩個 Div 裡面的內容為何，你會希望他們有同樣的高度：
336 | 
337 | ```javascript
338 | $('.div').css('min-height', $('.main-div').height());
339 | ```
340 | 
341 | 這個例子設定 `min-height`，表示其只能比 `.main-div` 的 `height` 大，永遠不會比它小。然而，在一組元素中循環並將各元素之 `height` 調整至最高的元素高度為另一種更彈性的方法：
342 | 
343 | ```javascript
344 | var $columns = $('.column');
345 | var height = 0;
346 | $columns.each(function () {
347 |   if ($(this).height() > height) {
348 |     height = $(this).height();
349 |   }
350 | });
351 | $columns.height(height);
352 | ```
353 | 
354 | 如果你希望每一行都有同樣高度：
355 | 
356 | ```javascript
357 | var $rows = $('.same-height-columns');
358 | $rows.each(function () {
359 |   $(this).find('.column').height($(this).height());
360 | });
361 | ```
362 | 
363 | **注意:** 這件事可以使用幾種方法完成，[使用 CSS](http://codepen.io/AllThingsSmitty/pen/KMPqoO) 這跟你的需求有關，但也值得知道如何使用 jQuery完成。
364 | 
365 | <sup>[回到目錄](#目錄)</sup>
366 | 
367 | 
368 | ### 在新分頁/視窗開啟外部連結
369 | 
370 | 在瀏覽器新的分頁或視窗中開啟新的外部連結，並且確定同樣 host 的連結會在同樣的分頁或視窗開啟：
371 | 
372 | ```javascript
373 | $('a[href^="http"]').attr('target', '_blank');
374 | $('a[href^="//"]').attr('target', '_blank');
375 | $('a[href^="' + window.location.origin + '"]').attr('target', '_self');
376 | ```
377 | 
378 | **注意:** `window.location.origin` 在 IE 10 中無效。[這個方法](http://tosbourn.com/a-fix-for-window-location-origin-in-internet-explorer/) 可以解決這個問題。
379 | 
380 | <sup>[回到目錄](#目錄)</sup>
381 | 
382 | 
383 | ### 利用文字找到元素
384 | 
385 | 利用 jQuery 中 `contains()` 選擇器，你可以找到元素內容中的文字。如果沒有文字，該元素會被隱藏：
386 | 
387 | ```javascript
388 | var search = $('#search').val();
389 | $('div:not(:contains("' + search + '"))').hide();
390 | ```
391 | 
392 | <sup>[回到目錄](#目錄)</sup>
393 | 
394 | 
395 | ### Visibility 改變時觸發事件
396 | 
397 | 當使用者不再停留在某分頁，或是重新停留在某分頁，觸發 JavaScript：
398 | 
399 | ```javascript
400 | $(document).on('visibilitychange', function (e) {
401 |   if (e.target.visibilityState === 'visible') {
402 |     console.log('Tab is now in view!');
403 |   } else if (e.target.visibilityState === 'hidden') {
404 |     console.log('Tab is now hidden!');
405 |   }
406 | });
407 | ```
408 | 
409 | <sup>[回到目錄](#目錄)</sup>
410 | 
411 | 
412 | ### Ajax 程序的錯誤處理
413 | 
414 | 當一個 Ajax 程序呼叫後回傳 404 或是 500 錯誤，錯誤處理程序將會被執行。如果沒有定義錯誤處理程序，其他 jQuery 的程式碼可能不會運作。定義一個全域 Ajax 錯誤處理程序：
415 | 
416 | ```javascript
417 | $(document).on('ajaxError', function (e, xhr, settings, error) {
418 |   console.log(error);
419 | });
420 | ```
421 | 
422 | <sup>[回到目錄](#目錄)</sup>
423 | 
424 | 
425 | ### 串連 Plugin 的函式呼叫
426 | 
427 | jQuery 允許「串連」 plugin 函式的呼叫來減少重複搜尋 DOM 以及產生多個 jQuery 物件。以下的程式碼展示了 plugin 函式的呼叫：
428 | 
429 | ```javascript
430 | $('#elem').show();
431 | $('#elem').html('bla');
432 | $('#elem').otherStuff();
433 | ```
434 | 
435 | 可以利用串連來改進：
436 | 
437 | ```javascript
438 | $('#elem')
439 |   .show()
440 |   .html('bla')
441 |   .otherStuff();
442 | ```
443 | 
444 | 另外一種方法是利用一個變數來快取(cache)一個元素（在變數前面加上 `$`）：
445 | 
446 | ```javascript
447 | var $elem = $('#elem');
448 | $elem.hide();
449 | $elem.html('bla');
450 | $elem.otherStuff();
451 | ```
452 | 
453 | jQuery 中串連以及[快取](#cache-jquery-selectors)的方法是最簡潔且最快速的實作方式。
454 | 
455 | <sup>[回到目錄](#目錄)</sup>
456 | 
457 | 
458 | ### 照字母順序排清單元素（list）
459 | 
460 | 如果在清單中有太多元素，或許其內容是被ㄧ CMS 所製造的且你希望照字母順序來排序：
461 | 
462 | ```javascript
463 | var ul = $('#list'),
464 | lis = $('li', ul).get();
465 | 
466 | lis.sort(function (a, b) {
467 |   return ($(a).text().toUpperCase() < $(b).text().toUpperCase()) ? -1 : 1;
468 | });
469 | 
470 | ul.append(lis);
471 | ```
472 | 
473 | 就是這樣！
474 | 
475 | <sup>[回到目錄](#目錄)</sup>
476 | 
477 | ### 停用右鍵
478 | 
479 | 如果要停用右鍵，您可以對整個頁面這麼做...
480 | 
481 | ```javascript
482 | $(document).ready(function () {
483 |   $(document).bind('contextmenu', function (e) {
484 |     return false;
485 |   })
486 | })
487 | ```
488 | 
489 | ...而您也可以為特定元素做同樣的事情：
490 | 
491 | ```javascript
492 | $(document).ready(function () {
493 |   $('#submit').bind('contextmenu', function (e) {
494 |     return false;
495 |   })
496 | })
497 | ```
498 | 
499 | <sup>[回到目錄](#目錄)</sup>
500 | 
501 | 
502 | ## 瀏覽器支援
503 | 
504 | 現今版本的 Chrome，Firefox，Safari，Opera，Edge 以及 IE11。
505 | 
506 | <sup>[回到目錄](#目錄)</sup>
507 | 


--------------------------------------------------------------------------------