From 38299ed60ccf4baa37ded5192386400b62b62268 Mon Sep 17 00:00:00 2001 From: Yves-X Date: Sat, 26 Dec 2015 02:19:16 +0800 Subject: [PATCH 1/8] Translated. --- TODO/jQuery-Tips-Everyone-Should-Know.md | 134 +++++++++++------------ 1 file changed, 67 insertions(+), 67 deletions(-) diff --git a/TODO/jQuery-Tips-Everyone-Should-Know.md b/TODO/jQuery-Tips-Everyone-Should-Know.md index 1906c72566f..d2ec89bccaf 100644 --- a/TODO/jQuery-Tips-Everyone-Should-Know.md +++ b/TODO/jQuery-Tips-Everyone-Should-Know.md @@ -1,37 +1,37 @@ > * 原文链接 : [jquery-tips-everyone-should-know](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/blob/master/README.md) * 原文作者 : [AllThingsSmitty (Matt Smith)](https://github.com/AllThingsSmitty) * 译文出自 : [掘金翻译计划](https://github.com/xitu/gold-miner) -* 译者 : +* 译者 : Yves X * 校对者: * 状态 : 待定 -# jQuery Tips Everyone Should Know +# 人人须知的jQuery技巧 -A collection of simple tips to help up your jQuery game. +这里收集了一些简单的窍门，助你玩转 jQuery。 -1. [Back to Top Button](#back-to-top-button) -1. [Preload Images](#preload-images) -1. [Checking If Images Are Loaded](#checking-if-images-are-loaded) -1. [Fix Broken Images Automatically](#fix-broken-images-automatically) -1. [Toggle Classes on Hover](#toggle-classes-on-hover) -1. [Disabling Input Fields](#disabling-input-fields) -1. [Stop the Loading of Links](#stop-the-loading-of-links) -1. [Toggle Fade/Slide](#toggle-fadeslide) -1. [Simple Accordion](#simple-accordion) -1. [Make Two Divs the Same Height](#make-two-divs-the-same-height) -1. [Open External Links in New Tab/Window](#open-external-links-in-new-tabwindow) -1. [Find Element By Text](#find-element-by-text) -1. [Trigger on Visibility Change](#trigger-on-visibility-change) -1. [Ajax Call Error Handling](#ajax-call-error-handling) -1. [Chain Plugin Calls](#chain-plugin-calls) +1. [返回顶部按钮](#返回顶部按钮) +1. [预加载图片](#预加载图片) +1. [判断图片是否加载完成](#判断图片是否加载完成) +1. [自动修复失效图片](#自动修复失效图片) +1. [鼠标悬停切换class](#鼠标悬停切换class) +1. [禁用输入字段](#禁用输入字段) +1. [阻止链接加载](#阻止链接加载) +1. [切换淡出/滑动](#切换淡出/滑动) +1. [简单的手风琴效果](#简单的手风琴效果) +1. [使两个div等高](#使两个div等高) +1. [在新标签页/新窗口打开外部链接](#在新标签页/新窗口打开外部链接) +1. [通过文本查找元素](#通过文本查找元素) +1. [在visibility属性变化时触发](#在visibility属性变化时触发) +1. [Ajax调用错误处理](#Ajax调用错误处理) +1. [链式插件调用](#链式插件调用) -### Back to Top Button +### 返回顶部按钮 -By using the `animate` and `scrollTop` methods in jQuery you don't need a plugin to create a simple scroll-to-top animation: +利用 jQuery 中的 `animate` 和 `scrollTop` 方法，你无需插件就可以创建简单的 scroll up 效果: ```javascript -// Back to top +// 返回顶部 $('a.top').click(function (e) { e.preventDefault(); $(document.body).animate({scrollTop: 0}, 800); @@ -39,16 +39,15 @@ $('a.top').click(function (e) { ``` ```html - + Back to top ``` -Changing the `scrollTop` value changes where you wants the scrollbar to land. All you're really doing is animating the body of the document throughout the course of 800 milliseconds until it scrolls to the top of the document. +调整 `scrollTop` 的值即可改变滚动着陆位置。你实际所做的是在 800 毫秒内设置文档主体的效果，直到滚动到顶部。 +### 预加载图片 -### Preload Images - -If your web page uses a lot of images that aren't visible initially (e.g., on hover) it makes sense to preload them: +如果你的网页使用了大量并非立即可见的图片（例如悬停鼠标触发的图片），那么预加载这些图片就显得很有意义了: ```javascript $.preloadImages = function () { @@ -61,9 +60,9 @@ $.preloadImages('img/hover-on.png', 'img/hover-off.png'); ``` -### Checking If Images Are Loaded +### 判断图片是否加载完成 -Sometimes you might need to check if your images have fully loaded in order to continue on with your scripts: +在有些情况下，为了继续执行脚本，你需要检查图片是否已经完全加载: ```javascript $('img').load(function () { @@ -71,12 +70,11 @@ $('img').load(function () { }); ``` -You can also check if one particular image has loaded by replacing the `` tag with an ID or class. - +同样，换用一个带有 id 或者 class 属性的 `` 标签，你也可以检查特定图片是否加载完成。 -### Fix Broken Images Automatically +### 自动修复失效图片 -If you happen to find broken image links on your site replacing them one by one can be a pain. This simple piece of code can save a lot of headaches: +如果你在你的网站上发现了失效的图片链接，逐个去替换它们将会是个苦差。这段简单的代码可以很大程度地减轻痛苦： ```javascript $('img').on('error', function () { @@ -86,12 +84,12 @@ $('img').on('error', function () { }); ``` -Even if you don't have any broken links, adding this won't do any harm. +即使你暂无任何失效的链接，添加这段代码也不会有任何损失。 -### Toggle Classes on Hover +### 鼠标悬停切换class -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: +如果你希望在用户将鼠标悬停在某个可点击元素上时，改变它的视觉效果，你可以给该元素在悬停时添加一个class，当鼠标不再悬停时，移除这个class： ```javascript $('.btn').hover(function () { @@ -101,7 +99,7 @@ $('.btn').hover(function () { }); ``` -You just need to add the necessary CSS. If you want an even _simpler_ way use the `toggleClass` method: +如果你还寻求_更简单_的途径，可以使用 `toggleClass` 方法，仅需添加必要的 CSS： ```javascript $('.btn').hover(function () { @@ -109,27 +107,27 @@ $('.btn').hover(function () { }); ``` -**Note**: CSS may be a faster solution in this case but it's still worthwhile to know this. +**注**：CSS 在这种情况下使用是一个更快速的解决方案，但依然值得稍作了解。 -### Disabling Input Fields +### 禁用输入字段 -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: +有时，你可能希望表单的提交按钮或其中某个输入框在用户完成特定操作前不可见（例如，勾选“我已阅读条例”的确认框）。你可以在你的输入字段上添加 `disabled` 属性，以便你在需要时启用它： ```javascript $('input[type="submit"]').prop('disabled', true); ``` -All you need to do is run the `prop` method again on the input, but set the value of `disabled` to `false`: +你只需在输入字段上再次运行 `prop` 方法, 但是这一次把 `disabled` 值改为 `false`： ```javascript $('input[type="submit"]').prop('disabled', false); ``` -### Stop the Loading of Links +### 阻止链接加载 -Sometimes you don't want links to go to a certain web page nor reload the page; you might want them to do something else like trigger some other script. This will do the trick of preventing the default action: +有时你不希望链接到指定页面或者重载当前页面，而是想让它们干些别的，例如触发其它脚本。这需要在阻止默认动作上做些文章： ```javascript $('a.no-link').click(function (e) { @@ -138,32 +136,32 @@ $('a.no-link').click(function (e) { ``` -### Toggle Fade/Slide +### 切换淡出/滑动 -Slideing and fading are something we use plenty in our animations with jQuery. You might just want to show an element when a user clicks something, which makes the `fadeIn` and `slideDown` methods perfect. But if you want that element to appear on the first click and then disappear on the second this will work just fine: +淡出和滑动都是我们在 jQuery 中大量使用的效果。你可能只想在用户点击后展现某个元素，此时用 `fadeIn` 和 `slideDown` 方法就很完美。但是如果你希望这个元素在首次点击时出现，在再次点击时消失，这段代码就很有用了： ```javascript -// Fade +// 淡出 $('.btn').click(function () { $('.element').fadeToggle('slow'); }); -// Toggle +// 切换 $('.btn').click(function () { $('.element').slideToggle('slow'); }); ``` -### Simple Accordion +### 简单的手风琴效果 -This is a simple method for a quick accordion: +这是一个快速实现手风琴效果的简单方法: ```javascript -// Close all panels +// 关闭所有面板 $('#accordion').find('.content').hide(); -// Accordion +// 手风琴效果 $('#accordion').find('.accordion-header').click(function () { var next = $(this).next(); next.slideToggle('fast'); @@ -172,18 +170,18 @@ $('#accordion').find('.accordion-header').click(function () { }); ``` -By adding this script all you really needs to do on your web page is the necessary HTML go get this working. +通过添加这段脚本，你实际要做的只是提供必要的 HTML 元素以便它正常运行。 -### Make Two Divs the Same Height +### 使两个div等高 -Sometimes you'll want two divs to have the same height no matter what content they have in them: +有时你希望无论两个 div 各自包含什么内容，它们总有相同的高度： ```javascript $('.div').css('min-height', $('.main-div').height()); ``` -This example sets the `min-height` which means that it can be bigger than the main div but never smaller. However, a more flexible method would be to loop over a set of elements and set the height to the height of the tallest element: +这个例子设置了 `min-height`，意味着高度可以大于主 div 而不能小于它。然而，更灵活的方法是遍历一组元素，然后将高度设置为最高元素的高度： ```javascript var $columns = $('.column'); @@ -196,7 +194,7 @@ $columns.each(function () { $columns.height(height); ``` -If you want _all_ columns to have the same height: +如果你希望_所有_列高度相同： ```javascript var $rows = $('.same-height-columns'); @@ -206,9 +204,9 @@ $rows.each(function () { ``` -### Open External Links in New Tab/Window +### 在新标签页/新窗口打开外部链接 -Open external links in a new browser tab or window and ensure links on the same origin open in the same tab or window: +在一个新的浏览器标签页或窗口中打开外部链接，并确保相同来源的链接在同一个标签页或者窗口中打开： ```javascript $('a[href^="http"]').attr('target', '_blank'); @@ -216,21 +214,21 @@ $('a[href^="//"]').attr('target', '_blank'); $('a[href^="' + window.location.origin + '"]').attr('target', '_self'); ``` -**Note:** `window.location.origin` doesn't work in IE10. [This fix](http://tosbourn.com/a-fix-for-window-location-origin-in-internet-explorer/) takes care of the issue. +**注：** `window.location.origin` 在 IE10 中不可用. [这个修复](http://tosbourn.com/a-fix-for-window-location-origin-in-internet-explorer/) 正是关注于该问题。 -### Find Element By Text +### 通过文本查找元素 -By using the `contains()` selector in jQuery you can find text in content of an element. If text doesn't exists, that element will be hidden: +通过使用 jQuery 的 `contains()` 选择器，你能够查找元素内容中的文本。若文本不存在，该元素将被隐藏： ```javascript var search = $('#search').val(); $('div:not(:contains("' + search + '"))').hide(); ``` -### Trigger on Visibility Change +### 在visibility属性变化时触发 -Trigger JavaScript when the user is no longer focusing on a tab, or refocuses on a tab: +当用户的焦点离开或者重新回到某个标签页时，触发 Javasrcipt： ```javascript $(document).on('visibilitychange', function (e) { @@ -243,9 +241,9 @@ $(document).on('visibilitychange', function (e) { ``` -### Ajax Call Error Handling +### Ajax调用错误处理 -When an Ajax call returns a 404 or 500 error the error handler will be executed. If the handler isn't defined, other jQuery code might not work anymore. Define a global Ajax error handler: +当一个 Ajax 调用返回 404 或 500 错误时，错误处理程序将被执行。若错误处理未被定义，其它 jQuery 代码可能不再有效。所以定义一个全局的 Ajax 错误处理： ```javascript $(document).ajaxError(function (e, xhr, settings, error) { @@ -254,9 +252,9 @@ $(document).ajaxError(function (e, xhr, settings, error) { ``` -### Chain Plugin Calls +### 链式插件调用 -jQuery allows for the "chaining" of plugin method calls to mitigate the process of repeatedly querying the DOM and creating multiple jQuery objects. Let's say the following snippet represents your plugin method calls: +jQuery 允许通过“链式”插件调用的方法，来缓解反复查询 DOM 和创建多个 jQuery 对象的过程。例如，下面的代码代表着你的插件调用： ```javascript $('#elem').show(); @@ -264,7 +262,7 @@ $('#elem').html('bla'); $('#elem').otherStuff(); ``` -This could be vastly improved by using chaining: +通过使用链式操作，有了显著的改善: ```javascript $('#elem') @@ -274,6 +272,7 @@ $('#elem') ``` An alternative is to cache the element in a variable (prefixed with `$`): +另一种方法是在变量（以 `$` 为前缀）中，对元素进行缓存： ```javascript var $elem = $('#elem'); @@ -283,3 +282,4 @@ $elem.otherStuff(); ``` Both chaining and caching methods in jQuery are best practices that lead to shorter and faster code. +无论是链式操作，还是缓存元素，都是 jQuery 中用以简化和优化代码的极佳方法。 From cad32d4c2bb494772236a8c2ed24a9deb786fb0c Mon Sep 17 00:00:00 2001 From: Yves-X Date: Sat, 26 Dec 2015 02:24:52 +0800 Subject: [PATCH 2/8] Fixed. Deleted duplicate words and add some spaces between Chinese and English characters. --- TODO/jQuery-Tips-Everyone-Should-Know.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/TODO/jQuery-Tips-Everyone-Should-Know.md b/TODO/jQuery-Tips-Everyone-Should-Know.md index d2ec89bccaf..d800835a858 100644 --- a/TODO/jQuery-Tips-Everyone-Should-Know.md +++ b/TODO/jQuery-Tips-Everyone-Should-Know.md @@ -89,7 +89,7 @@ $('img').on('error', function () { ### 鼠标悬停切换class -如果你希望在用户将鼠标悬停在某个可点击元素上时，改变它的视觉效果，你可以给该元素在悬停时添加一个class，当鼠标不再悬停时，移除这个class： +如果你希望在用户将鼠标悬停在某个可点击元素上时，改变它的视觉效果，你可以给该元素在悬停时添加一个 class，当鼠标不再悬停时，移除这个 class： ```javascript $('.btn').hover(function () { @@ -271,7 +271,6 @@ $('#elem') .otherStuff(); ``` -An alternative is to cache the element in a variable (prefixed with `$`): 另一种方法是在变量（以 `$` 为前缀）中，对元素进行缓存： ```javascript @@ -281,5 +280,4 @@ $elem.html('bla'); $elem.otherStuff(); ``` -Both chaining and caching methods in jQuery are best practices that lead to shorter and faster code. 无论是链式操作，还是缓存元素，都是 jQuery 中用以简化和优化代码的极佳方法。 From 528ca57e19f7c71c92120156e42ea2d1e3ed971e Mon Sep 17 00:00:00 2001 From: Yves-X Date: Thu, 31 Dec 2015 00:21:52 +0800 Subject: [PATCH 3/8] =?UTF-8?q?=E6=A0=A1=E6=AD=A3#1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. 校正了一些错误。 2. 补充了翻译计划没有提供，但事实上原文确有的一个段落。 3. 统一了标题和正文的中英文混排格式格式。 以上感谢非常认真的校对者~ --- TODO/jQuery-Tips-Everyone-Should-Know.md | 65 ++++++++++++++++-------- 1 file changed, 44 insertions(+), 21 deletions(-) diff --git a/TODO/jQuery-Tips-Everyone-Should-Know.md b/TODO/jQuery-Tips-Everyone-Should-Know.md index d800835a858..7adba0c2183 100644 --- a/TODO/jQuery-Tips-Everyone-Should-Know.md +++ b/TODO/jQuery-Tips-Everyone-Should-Know.md @@ -1,9 +1,9 @@ > * 原文链接 : [jquery-tips-everyone-should-know](https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know/blob/master/README.md) * 原文作者 : [AllThingsSmitty (Matt Smith)](https://github.com/AllThingsSmitty) * 译文出自 : [掘金翻译计划](https://github.com/xitu/gold-miner) -* 译者 : Yves X -* 校对者: -* 状态 : 待定 +* 译者 : [Yves X](https://github.com/Yves-X) +* 校对者: [sqrthree(根号三)](https://github.com/sqrthree) +* 状态 : 第一次校对 # 人人须知的jQuery技巧 @@ -13,16 +13,17 @@ 1. [预加载图片](#预加载图片) 1. [判断图片是否加载完成](#判断图片是否加载完成) 1. [自动修复失效图片](#自动修复失效图片) -1. [鼠标悬停切换class](#鼠标悬停切换class) +1. [鼠标悬停切换 class](#鼠标悬停切换 class) 1. [禁用输入字段](#禁用输入字段) 1. [阻止链接加载](#阻止链接加载) -1. [切换淡出/滑动](#切换淡出/滑动) +1. [缓存 jQuery 选择器](#缓存 jQuery 选择器) +1. [切换淡出 / 滑动](#切换淡出 / 滑动) 1. [简单的手风琴效果](#简单的手风琴效果) -1. [使两个div等高](#使两个div等高) -1. [在新标签页/新窗口打开外部链接](#在新标签页/新窗口打开外部链接) +1. [使两个 div 等高](#使两个 div 等高) +1. [在新标签页 / 新窗口打开外部链接](#在新标签页 / 新窗口打开外部链接) 1. [通过文本查找元素](#通过文本查找元素) -1. [在visibility属性变化时触发](#在visibility属性变化时触发) -1. [Ajax调用错误处理](#Ajax调用错误处理) +1. [在 visibility 属性变化时触发](#在 visibility 属性变化时触发) +1. [Ajax 调用错误处理](#Ajax 调用错误处理) 1. [链式插件调用](#链式插件调用) @@ -43,7 +44,7 @@ $('a.top').click(function (e) { Back to top ``` -调整 `scrollTop` 的值即可改变滚动着陆位置。你实际所做的是在 800 毫秒内设置文档主体的效果，直到滚动到顶部。 +调整 `scrollTop` 的值即可改变滚动着陆位置。你实际所做的是在 800 毫秒内不断设置文档主体的位置，直到它滚动到顶部。 ### 预加载图片 @@ -87,9 +88,9 @@ $('img').on('error', function () { 即使你暂无任何失效的链接，添加这段代码也不会有任何损失。 -### 鼠标悬停切换class +### 鼠标悬停切换 class -如果你希望在用户将鼠标悬停在某个可点击元素上时，改变它的视觉效果，你可以给该元素在悬停时添加一个 class，当鼠标不再悬停时，移除这个 class： +如果你希望在用户将鼠标悬停在某个可点击元素上时改变它的视觉效果，你可以在该元素被悬停时给它添加一个 class，当鼠标不再悬停时，移除这个 class： ```javascript $('.btn').hover(function () { @@ -107,12 +108,12 @@ $('.btn').hover(function () { }); ``` -**注**：CSS 在这种情况下使用是一个更快速的解决方案，但依然值得稍作了解。 +**注**：在这种情况下，使用 CSS 或许是一个更快速的解决方案，但这种方法仍然值得稍作了解。 ### 禁用输入字段 -有时，你可能希望表单的提交按钮或其中某个输入框在用户完成特定操作前不可见（例如，勾选“我已阅读条例”的确认框）。你可以在你的输入字段上添加 `disabled` 属性，以便你在需要时启用它： +有时，你可能希望在用户完成特定操作（例如，勾选“我已阅读条例”的确认框）前禁用表单的提交按钮或禁用其中某个输入框。你可以在你的输入字段上添加 `disabled` 属性，而后你能在需要时启用它： ```javascript $('input[type="submit"]').prop('disabled', true); @@ -125,6 +126,28 @@ $('input[type="submit"]').prop('disabled', false); ``` +### 缓存 jQuery 选择器 + +想想你在项目中一次又一次地写了多少相同的选择器吧。每个 `$('.element')` 都必须查询一次整个 DOM,不管它是否曾这样执行过。作为代替，我们只运行一次选择器，并把结果储存在一个变量中： + +```javascript +var blocks = $('#blocks').find('li'); +``` + +现在你能在任何地方使用 `blocks` 变量而无需每次查询 DOM 了: + +```javascript +$('#hideBlocks').click(function () { + blocks.fadeOut(); +}); + +$('#showBlocks').click(function () { + blocks.fadeIn(); +}); +``` + +缓存 jQuery 的选择器是种简单的性能提升。 + ### 阻止链接加载 有时你不希望链接到指定页面或者重载当前页面，而是想让它们干些别的，例如触发其它脚本。这需要在阻止默认动作上做些文章： @@ -136,7 +159,7 @@ $('a.no-link').click(function (e) { ``` -### 切换淡出/滑动 +### 切换淡出 / 滑动 淡出和滑动都是我们在 jQuery 中大量使用的效果。你可能只想在用户点击后展现某个元素，此时用 `fadeIn` 和 `slideDown` 方法就很完美。但是如果你希望这个元素在首次点击时出现，在再次点击时消失，这段代码就很有用了： @@ -173,7 +196,7 @@ $('#accordion').find('.accordion-header').click(function () { 通过添加这段脚本，你实际要做的只是提供必要的 HTML 元素以便它正常运行。 -### 使两个div等高 +### 使两个 div 等高 有时你希望无论两个 div 各自包含什么内容，它们总有相同的高度： @@ -204,7 +227,7 @@ $rows.each(function () { ``` -### 在新标签页/新窗口打开外部链接 +### 在新标签页 / 新窗口打开外部链接 在一个新的浏览器标签页或窗口中打开外部链接，并确保相同来源的链接在同一个标签页或者窗口中打开： @@ -214,7 +237,7 @@ $('a[href^="//"]').attr('target', '_blank'); $('a[href^="' + window.location.origin + '"]').attr('target', '_self'); ``` -**注：** `window.location.origin` 在 IE10 中不可用. [这个修复](http://tosbourn.com/a-fix-for-window-location-origin-in-internet-explorer/) 正是关注于该问题。 +**注：** `window.location.origin` 在 IE10 中不可用. [这个修复方案](http://tosbourn.com/a-fix-for-window-location-origin-in-internet-explorer/) 正是关注于该问题。 ### 通过文本查找元素 @@ -226,7 +249,7 @@ var search = $('#search').val(); $('div:not(:contains("' + search + '"))').hide(); ``` -### 在visibility属性变化时触发 +### 在 visibility 属性变化时触发 当用户的焦点离开或者重新回到某个标签页时，触发 Javasrcipt： @@ -241,7 +264,7 @@ $(document).on('visibilitychange', function (e) { ``` -### Ajax调用错误处理 +### Ajax 调用错误处理 当一个 Ajax 调用返回 404 或 500 错误时，错误处理程序将被执行。若错误处理未被定义，其它 jQuery 代码可能不再有效。所以定义一个全局的 Ajax 错误处理： @@ -280,4 +303,4 @@ $elem.html('bla'); $elem.otherStuff(); ``` -无论是链式操作，还是缓存元素，都是 jQuery 中用以简化和优化代码的极佳方法。 +无论是链式操作，还是缓存元素，都是 jQuery 中用以简化和优化代码的最佳实践。 From e0298c6de70641ce8da4d372595c5a6a1c09fba0 Mon Sep 17 00:00:00 2001 From: Yves-X Date: Thu, 31 Dec 2015 00:38:43 +0800 Subject: [PATCH 4/8] Fixed. --- TODO/jQuery-Tips-Everyone-Should-Know.md | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/TODO/jQuery-Tips-Everyone-Should-Know.md b/TODO/jQuery-Tips-Everyone-Should-Know.md index 7adba0c2183..1460888f00f 100644 --- a/TODO/jQuery-Tips-Everyone-Should-Know.md +++ b/TODO/jQuery-Tips-Everyone-Should-Know.md @@ -13,17 +13,17 @@ 1. [预加载图片](#预加载图片) 1. [判断图片是否加载完成](#判断图片是否加载完成) 1. [自动修复失效图片](#自动修复失效图片) -1. [鼠标悬停切换 class](#鼠标悬停切换 class) +1. [鼠标悬停切换 class](#鼠标悬停切换_class) 1. [禁用输入字段](#禁用输入字段) 1. [阻止链接加载](#阻止链接加载) -1. [缓存 jQuery 选择器](#缓存 jQuery 选择器) -1. [切换淡出 / 滑动](#切换淡出 / 滑动) +1. [缓存 jQuery 选择器](#缓存_jQuery_选择器) +1. [切换淡出 / 滑动](#切换淡出_/_滑动) 1. [简单的手风琴效果](#简单的手风琴效果) -1. [使两个 div 等高](#使两个 div 等高) -1. [在新标签页 / 新窗口打开外部链接](#在新标签页 / 新窗口打开外部链接) +1. [使两个 div 等高](#使两个_div_等高) +1. [在新标签页 / 新窗口打开外部链接](#在新标签页_/_新窗口打开外部链接) 1. [通过文本查找元素](#通过文本查找元素) -1. [在 visibility 属性变化时触发](#在 visibility 属性变化时触发) -1. [Ajax 调用错误处理](#Ajax 调用错误处理) +1. [在 visibility 属性变化时触发](#在_visibility_属性变化时触发) +1. [Ajax 调用错误处理](#Ajax_调用错误处理) 1. [链式插件调用](#链式插件调用) @@ -148,6 +148,7 @@ $('#showBlocks').click(function () { 缓存 jQuery 的选择器是种简单的性能提升。 + ### 阻止链接加载 有时你不希望链接到指定页面或者重载当前页面，而是想让它们干些别的，例如触发其它脚本。这需要在阻止默认动作上做些文章： From 0d7b73717a5c92c2384499f904422658a8b3ebdb Mon Sep 17 00:00:00 2001 From: Yves-X Date: Thu, 31 Dec 2015 01:17:24 +0800 Subject: [PATCH 5/8] Revert "Fixed." This reverts commit e0298c6de70641ce8da4d372595c5a6a1c09fba0. --- TODO/jQuery-Tips-Everyone-Should-Know.md | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/TODO/jQuery-Tips-Everyone-Should-Know.md b/TODO/jQuery-Tips-Everyone-Should-Know.md index 1460888f00f..7adba0c2183 100644 --- a/TODO/jQuery-Tips-Everyone-Should-Know.md +++ b/TODO/jQuery-Tips-Everyone-Should-Know.md @@ -13,17 +13,17 @@ 1. [预加载图片](#预加载图片) 1. [判断图片是否加载完成](#判断图片是否加载完成) 1. [自动修复失效图片](#自动修复失效图片) -1. [鼠标悬停切换 class](#鼠标悬停切换_class) +1. [鼠标悬停切换 class](#鼠标悬停切换 class) 1. [禁用输入字段](#禁用输入字段) 1. [阻止链接加载](#阻止链接加载) -1. [缓存 jQuery 选择器](#缓存_jQuery_选择器) -1. [切换淡出 / 滑动](#切换淡出_/_滑动) +1. [缓存 jQuery 选择器](#缓存 jQuery 选择器) +1. [切换淡出 / 滑动](#切换淡出 / 滑动) 1. [简单的手风琴效果](#简单的手风琴效果) -1. [使两个 div 等高](#使两个_div_等高) -1. [在新标签页 / 新窗口打开外部链接](#在新标签页_/_新窗口打开外部链接) +1. [使两个 div 等高](#使两个 div 等高) +1. [在新标签页 / 新窗口打开外部链接](#在新标签页 / 新窗口打开外部链接) 1. [通过文本查找元素](#通过文本查找元素) -1. [在 visibility 属性变化时触发](#在_visibility_属性变化时触发) -1. [Ajax 调用错误处理](#Ajax_调用错误处理) +1. [在 visibility 属性变化时触发](#在 visibility 属性变化时触发) +1. [Ajax 调用错误处理](#Ajax 调用错误处理) 1. [链式插件调用](#链式插件调用) @@ -148,7 +148,6 @@ $('#showBlocks').click(function () { 缓存 jQuery 的选择器是种简单的性能提升。 - ### 阻止链接加载 有时你不希望链接到指定页面或者重载当前页面，而是想让它们干些别的，例如触发其它脚本。这需要在阻止默认动作上做些文章： From f1d2d0b91035c2e02fcc4de8c0e341152ac7e2e7 Mon Sep 17 00:00:00 2001 From: Yves-X Date: Thu, 31 Dec 2015 01:23:18 +0800 Subject: [PATCH 6/8] Fixed. --- TODO/jQuery-Tips-Everyone-Should-Know.md | 37 ++++++++++++------------ 1 file changed, 19 insertions(+), 18 deletions(-) diff --git a/TODO/jQuery-Tips-Everyone-Should-Know.md b/TODO/jQuery-Tips-Everyone-Should-Know.md index 7adba0c2183..15d697f097f 100644 --- a/TODO/jQuery-Tips-Everyone-Should-Know.md +++ b/TODO/jQuery-Tips-Everyone-Should-Know.md @@ -5,7 +5,7 @@ * 校对者: [sqrthree(根号三)](https://github.com/sqrthree) * 状态 : 第一次校对 -# 人人须知的jQuery技巧 +# 人人须知的 jQuery 技巧 这里收集了一些简单的窍门，助你玩转 jQuery。 @@ -13,17 +13,17 @@ 1. [预加载图片](#预加载图片) 1. [判断图片是否加载完成](#判断图片是否加载完成) 1. [自动修复失效图片](#自动修复失效图片) -1. [鼠标悬停切换 class](#鼠标悬停切换 class) +1. [鼠标悬停切换 class](#鼠标悬停切换-class) 1. [禁用输入字段](#禁用输入字段) 1. [阻止链接加载](#阻止链接加载) -1. [缓存 jQuery 选择器](#缓存 jQuery 选择器) -1. [切换淡出 / 滑动](#切换淡出 / 滑动) +1. [缓存 jQuery 选择器](#缓存-jQuery-选择器) +1. [切换淡出 / 滑动](#切换淡出-/-滑动) 1. [简单的手风琴效果](#简单的手风琴效果) -1. [使两个 div 等高](#使两个 div 等高) -1. [在新标签页 / 新窗口打开外部链接](#在新标签页 / 新窗口打开外部链接) +1. [使两个 div 等高](#使两个-div-等高) +1. [在新标签页 / 新窗口打开外部链接](#在新标签页-/-新窗口打开外部链接) 1. [通过文本查找元素](#通过文本查找元素) -1. [在 visibility 属性变化时触发](#在 visibility 属性变化时触发) -1. [Ajax 调用错误处理](#Ajax 调用错误处理) +1. [在 visibility 属性变化时触发](#在-visibility-属性变化时触发) +1. [Ajax 调用错误处理](#Ajax-调用错误处理) 1. [链式插件调用](#链式插件调用) @@ -126,6 +126,17 @@ $('input[type="submit"]').prop('disabled', false); ``` +### 阻止链接加载 + +有时你不希望链接到指定页面或者重载当前页面，而是想让它们干些别的，例如触发其它脚本。这需要在阻止默认动作上做些文章： + +```javascript +$('a.no-link').click(function (e) { + e.preventDefault(); +}); +``` + + ### 缓存 jQuery 选择器 想想你在项目中一次又一次地写了多少相同的选择器吧。每个 `$('.element')` 都必须查询一次整个 DOM,不管它是否曾这样执行过。作为代替，我们只运行一次选择器，并把结果储存在一个变量中： @@ -148,16 +159,6 @@ $('#showBlocks').click(function () { 缓存 jQuery 的选择器是种简单的性能提升。 -### 阻止链接加载 - -有时你不希望链接到指定页面或者重载当前页面，而是想让它们干些别的，例如触发其它脚本。这需要在阻止默认动作上做些文章： - -```javascript -$('a.no-link').click(function (e) { - e.preventDefault(); -}); -``` - ### 切换淡出 / 滑动 From 8cbd26140ab3735cfc70fc4ee84e5dac2c4be3aa Mon Sep 17 00:00:00 2001 From: Yves-X Date: Thu, 31 Dec 2015 01:25:50 +0800 Subject: [PATCH 7/8] An ugly fix. --- TODO/jQuery-Tips-Everyone-Should-Know.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/TODO/jQuery-Tips-Everyone-Should-Know.md b/TODO/jQuery-Tips-Everyone-Should-Know.md index 15d697f097f..2165826b03e 100644 --- a/TODO/jQuery-Tips-Everyone-Should-Know.md +++ b/TODO/jQuery-Tips-Everyone-Should-Know.md @@ -17,10 +17,10 @@ 1. [禁用输入字段](#禁用输入字段) 1. [阻止链接加载](#阻止链接加载) 1. [缓存 jQuery 选择器](#缓存-jQuery-选择器) -1. [切换淡出 / 滑动](#切换淡出-/-滑动) +1. [切换淡出 / 滑动](#切换淡出--滑动) 1. [简单的手风琴效果](#简单的手风琴效果) 1. [使两个 div 等高](#使两个-div-等高) -1. [在新标签页 / 新窗口打开外部链接](#在新标签页-/-新窗口打开外部链接) +1. [在新标签页 / 新窗口打开外部链接](#在新标签页--新窗口打开外部链接) 1. [通过文本查找元素](#通过文本查找元素) 1. [在 visibility 属性变化时触发](#在-visibility-属性变化时触发) 1. [Ajax 调用错误处理](#Ajax-调用错误处理) From b6d4b4d862e14c252b5c34e3eeec204ffc50098d Mon Sep 17 00:00:00 2001 From: Yves-X Date: Thu, 14 Jan 2016 20:34:06 +0800 Subject: [PATCH 8/8] Addition. --- TODO/jQuery-Tips-Everyone-Should-Know.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/TODO/jQuery-Tips-Everyone-Should-Know.md b/TODO/jQuery-Tips-Everyone-Should-Know.md index 2165826b03e..b8894228728 100644 --- a/TODO/jQuery-Tips-Everyone-Should-Know.md +++ b/TODO/jQuery-Tips-Everyone-Should-Know.md @@ -9,6 +9,7 @@ 这里收集了一些简单的窍门，助你玩转 jQuery。 +1. [检查 jQuery 是否加载](#检查-jQuery-是否加载) 1. [返回顶部按钮](#返回顶部按钮) 1. [预加载图片](#预加载图片) 1. [判断图片是否加载完成](#判断图片是否加载完成) @@ -27,6 +28,17 @@ 1. [链式插件调用](#链式插件调用) +### 检查 jQuery 是否加载 + +在使用 jQuery 进行任何操作之前，你需要先确认它已经加载： +```javascript +if (typeof jQuery == 'undefined') { + console.log('jQuery hasn\'t loaded'); +} else { + console.log('jQuery has loaded'); +} +``` + ### 返回顶部按钮 利用 jQuery 中的 `animate` 和 `scrollTop` 方法，你无需插件就可以创建简单的 scroll up 效果: