Compétences Jquery (doit maîtriser)_jquery

Vérifiez si jQuery est chargé

Avant de faire quoi que ce soit avec jQuery, vous devez vous assurer qu'il est chargé :

if (typeof jQuery == 'undefined') {
console.log('jQuery hasn\'t loaded');
} else {
console.log('jQuery has loaded');
}

Bouton Retour en haut

En utilisant les méthodes animate et scrollTop dans jQuery, vous pouvez créer un simple effet de défilement vers le haut sans plug-in :

// 返回顶部
$('a.top').click(function (e) {
e.preventDefault();
$(document.body).animate({scrollTop: 0}, 800);
});
<!-- 设置锚 -->
<a class="top" href="#">Back to top</a>

Ajustez la valeur de scrollTop pour modifier la position d'atterrissage du défilement. En réalité, vous définissez continuellement la position du corps du document sur 800 millisecondes jusqu'à ce qu'il défile vers le haut.

Précharger les images

Si votre page Web utilise de nombreuses images qui ne sont pas immédiatement visibles (telles que des images déclenchées par le survol de la souris), alors il est logique de précharger ces images :

$.preloadImages = function () {
for (var i = 0; i < arguments.length; i++) {
$('<img>').attr('src', arguments[i]);
}
};

$.preloadImages('img/hover-on.png', 'img/hover-off.png');

Déterminer si l'image est chargée

Dans certains cas, afin de continuer l'exécution du script, vous devez vérifier si l'image a été entièrement chargée :

$('img').load(function () {
console.log('image load successful');
});

De même, en utilisant une balise avec un attribut id ou class, vous pouvez également vérifier si une image spécifique a été chargée.

Réparer automatiquement les images échouées

Si vous trouvez des liens d'images brisés sur votre site Web, les remplacer un par un sera une corvée. Ce code simple peut grandement soulager la douleur :

$('img').on('error', function () {
if(!$(this).hasClass('broken-image')) {
$(this).prop('src', 'img/broken.png').addClass('broken-image');
}
});

Même si vous n’avez pas encore de liens rompus, vous n’avez rien à perdre en ajoutant ce code.

Classe de changement de souris

Si vous souhaitez modifier l'effet visuel d'un élément cliquable lorsque l'utilisateur le survole, vous pouvez ajouter une classe à l'élément lorsqu'il est survolé, et lorsque la souris ne survole plus, déplacer Sauf cette classe :

$('.btn').hover(function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});

Si vous recherchez un itinéraire plus simple, vous pouvez utiliser la méthode toggleClass et ajouter simplement le CSS nécessaire :

$('.btn').hover(function () {
$(this).toggleClass('hover');
});

Remarque : L'utilisation de CSS peut être une solution plus rapide dans ce cas, mais cette méthode mérite quand même un peu de connaissances.

Désactiver le champ de saisie

De temps en temps, vous souhaiterez peut-être désactiver le bouton d'envoi d'un formulaire ou désactiver l'un de ses champs de saisie jusqu'à ce que l'utilisateur termine une action spécifique (par exemple, cocher la case de confirmation « J'ai lu les conditions »). Vous pouvez ajouter l'attribut désactivé à votre champ de saisie, puis l'activer si nécessaire :

$('input[type="submit"]').prop('disabled', true);

Vous venez d'exécuter à nouveau la méthode prop sur le champ de saisie, mais cette fois, changez la valeur désactivée en false :

$('input[type="submit"]').prop('disabled', false);

Bloquer le chargement du lien

Parfois, vous ne souhaitez pas créer de lien vers une page spécifique ou recharger la page actuelle, mais vous souhaitez qu'ils fassent autre chose, comme déclencher d'autres scripts. Cela nécessite de faire un travail sur le blocage des actions par défaut :

$('a.no-link').click(function (e) {
e.preventDefault();
});

Mise en cache des sélecteurs jQuery

Pensez au nombre de sélecteurs identiques que vous écrivez encore et encore dans vos projets. Chaque $('.element') doit interroger l'intégralité du DOM une fois, qu'il ait déjà été exécuté en tant que tel ou non. Au lieu de cela, nous exécutons simplement le sélecteur une fois et stockons le résultat dans une variable :

var blocks = $('#blocks').find('li');

Vous pouvez désormais utiliser la variable blocs n'importe où sans interroger le DOM à chaque fois :

$('#hideBlocks').click(function () {
blocks.fadeOut();
});
$('#showBlocks').click(function () {
blocks.fadeIn();
});

La mise en cache des sélecteurs jQuery est une simple amélioration des performances.

Basculer le fondu/le glissement

Le fondu et le glissement sont deux effets que nous utilisons beaucoup dans jQuery. Vous souhaiterez peut-être afficher un élément uniquement lorsque l'utilisateur clique dessus, auquel cas les méthodes fadeIn et slideDown sont parfaites. Mais si vous souhaitez que l'élément apparaisse au premier clic et disparaisse au prochain clic, ce code est utile :

// 淡出
$('.btn').click(function () {
$('.element').fadeToggle('slow');
});

// 切换
$('.btn').click(function () {
$('.element').slideToggle('slow');
});

Effet accordéon simple

Voici un moyen simple et rapide d’obtenir un effet accordéon :

// 关闭所有面板
$('#accordion').find('.content').hide();

// 手风琴效果
$('#accordion').find('.accordion-header').click(function () {
var next = $(this).next();
next.slideToggle('fast');
$('.content').not(next).slideUp('fast');
return false;
});

En ajoutant ce script, tout ce que vous faites est de fournir les éléments HTML nécessaires à son bon fonctionnement.

Faire que les deux divs aient la même hauteur

Parfois, vous souhaitez que deux divs aient toujours la même hauteur, quel que soit le contenu qu'ils contiennent :

$('.div').css('min-height', $('.main-div').height());

这个例子设置了 min-height，意味着高度可以大于主 div 而不能小于它。然而，更灵活的方法是遍历一组元素，然后将高度设置为最高元素的高度：

var $columns = $('.column');
var height = 0;
$columns.each(function () {
if ($(this).height() > height) {
height = $(this).height();
}
});
$columns.height(height);

如果你希望所有列高度相同：

var $rows = $('.same-height-columns');
$rows.each(function () {
$(this).find('.column').height($(this).height());
});

在新标签页 / 新窗口打开外部链接

在一个新的浏览器标签页或窗口中打开外部链接，并确保相同来源的链接在同一个标签页或者窗口中打开：

$('a[href^="http"]').attr('target', '_blank');
$('a[href^="//"]').attr('target', '_blank');
$('a[href^="' + window.location.origin + '"]').attr('target', '_self');

注： window.location.origin 在 IE10 中不可用. 这个修复方案 正是关注于该问题。

通过文本查找元素

通过使用 jQuery 的 contains() 选择器，你能够查找元素内容中的文本。若文本不存在，该元素将被隐藏：

var search = $('#search').val();
$('div:not(:contains("' + search + '"))').hide();

在 visibility 属性变化时触发

当用户的焦点离开或者重新回到某个标签页时，触发 Javasrcipt：

$(document).on('visibilitychange', function (e) {
if (e.target.visibilityState === "visible") {
console.log('Tab is now in view!');
} else if (e.target.visibilityState === "hidden") {
console.log('Tab is now hidden!');
}
});

Ajax 调用错误处理

当一个 Ajax 调用返回 404 或 500 错误时，错误处理程序将被执行。若错误处理未被定义，其它 jQuery 代码可能不再有效。所以定义一个全局的 Ajax 错误处理：

$(document).ajaxError(function (e, xhr, settings, error) {
console.log(error);
});

链式插件调用

jQuery 允许通过“链式”插件调用的方法，来缓解反复查询 DOM 和创建多个 jQuery 对象的过程。例如，下面的代码代表着你的插件调用：

$('#elem').show();
$('#elem').html('bla');
$('#elem').otherStuff();

通过使用链式操作，有了显著的改善:

$('#elem')
.show()
.html('bla')
.otherStuff();

另一种方法是在变量（以 $ 为前缀）中，对元素进行缓存：

var $elem = $('#elem');
$elem.hide();
$elem.html('bla');
$elem.otherStuff();

无论是链式操作，还是缓存元素，都是 jQuery 中用以简化和优化代码的最佳实践。

这里收集了一些简单的窍门，助你玩转 jQuery。

检查 jQuery 是否加载

在使用 jQuery 进行任何操作之前，你需要先确认它已经加载：

if (typeof jQuery == 'undefined') {
console.log('jQuery hasn\'t loaded');
} else {
console.log('jQuery has loaded');
}

返回顶部按钮

利用 jQuery 中的 animate 和 scrollTop 方法，你无需插件就可以创建简单的 scroll up 效果:

// 返回顶部
$('a.top').click(function (e) {
e.preventDefault();
$(document.body).animate({scrollTop: 0}, 800);
});
<!-- 设置锚 -->
<a class="top" href="#">Back to top</a>

调整 scrollTop 的值即可改变滚动着陆位置。你实际所做的是在 800 毫秒内不断设置文档主体的位置，直到它滚动到顶部。

预加载图片

如果你的网页使用了大量并非立即可见的图片（例如悬停鼠标触发的图片），那么预加载这些图片就显得很有意义了:

$.preloadImages = function () {
for (var i = 0; i < arguments.length; i++) {
$('<img>').attr('src', arguments[i]);
}
};
$.preloadImages('img/hover-on.png', 'img/hover-off.png');

判断图片是否加载完成

在有些情况下，为了继续执行脚本，你需要检查图片是否已经完全加载:

$('img').load(function () {
console.log('image load successful');
});

同样，换用一个带有 id 或者 class 属性的 标签，你也可以检查特定图片是否加载完成。

自动修复失效图片

如果你在你的网站上发现了失效的图片链接，逐个去替换它们将会是个苦差。这段简单的代码可以很大程度地减轻痛苦：

$('img').on('error', function () {
if(!$(this).hasClass('broken-image')) {
$(this).prop('src', 'img/broken.png').addClass('broken-image');
}
});

即使你暂无任何失效的链接，添加这段代码也不会有任何损失。

鼠标悬停切换 class

如果你希望在用户将鼠标悬停在某个可点击元素上时改变它的视觉效果，你可以在该元素被悬停时给它添加一个 class，当鼠标不再悬停时，移除这个 class：

$('.btn').hover(function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});

如果你还寻求更简单的途径，可以使用 toggleClass 方法，仅需添加必要的 CSS：

$('.btn').hover(function () {
$(this).toggleClass('hover');
});

注：在这种情况下，使用 CSS 或许是一个更快速的解决方案，但这种方法仍然值得稍作了解。

禁用输入字段

有时，你可能希望在用户完成特定操作（例如，勾选“我已阅读条例”的确认框）前禁用表单的提交按钮或禁用其中某个输入框。你可以在你的输入字段上添加disabled 属性，而后你能在需要时启用它：

$('input[type="submit"]').prop('disabled', true);

你只需在输入字段上再次运行 prop 方法, 但是这一次把 disabled 值改为 false：

$('input[type="submit"]').prop('disabled', false);

阻止链接加载

有时你不希望链接到指定页面或者重载当前页面，而是想让它们干些别的，例如触发其它脚本。这需要在阻止默认动作上做些文章：

$('a.no-link').click(function (e) {
e.preventDefault();
});

缓存 jQuery 选择器

想想你在项目中一次又一次地写了多少相同的选择器吧。每个 $('.element') 都必须查询一次整个 DOM,不管它是否曾这样执行过。作为代替，我们只运行一次选择器，并把结果储存在一个变量中：

var blocks = $('#blocks').find('li');

现在你能在任何地方使用 blocks 变量而无需每次查询 DOM 了:

$('#hideBlocks').click(function () {
blocks.fadeOut();
});
$('#showBlocks').click(function () {
blocks.fadeIn();
});

缓存 jQuery 的选择器是种简单的性能提升。

切换淡出 / 滑动

淡出和滑动都是我们在 jQuery 中大量使用的效果。你可能只想在用户点击后展现某个元素，此时用 fadeIn 和 slideDown 方法就很完美。但是如果你希望这个元素在首次点击时出现，再次点击时消失，这段代码就很有用了：

// 淡出
$('.btn').click(function () {
$('.element').fadeToggle('slow');
});

// 切换
$('.btn').click(function () {
$('.element').slideToggle('slow');
});

简单的手风琴效果

这是一个快速实现手风琴效果的简单方法:

// 关闭所有面板
$('#accordion').find('.content').hide();
// 手风琴效果
$('#accordion').find('.accordion-header').click(function () {
var next = $(this).next();
next.slideToggle('fast');
$('.content').not(next).slideUp('fast');
return false;
});

通过添加这段脚本，你实际要做的只是提供必要的 HTML 元素以便它正常运行。

使两个 div 等高

有时你希望无论两个 div 各自包含什么内容，它们总有相同的高度：

$('.div').css('min-height', $('.main-div').height());

这个例子设置了 min-height，意味着高度可以大于主 div 而不能小于它。然而，更灵活的方法是遍历一组元素，然后将高度设置为最高元素的高度：

var $columns = $('.column');
var height = 0;
$columns.each(function () {
if ($(this).height() > height) {
height = $(this).height();
}
});
$columns.height(height);

如果你希望所有列高度相同：

var $rows = $('.same-height-columns');
$rows.each(function () {
$(this).find('.column').height($(this).height());
});

在新标签页 / 新窗口打开外部链接

在一个新的浏览器标签页或窗口中打开外部链接，并确保相同来源的链接在同一个标签页或者窗口中打开：

$('a[href^="http"]').attr('target', '_blank');
$('a[href^="//"]').attr('target', '_blank');
$('a[href^="' + window.location.origin + '"]').attr('target', '_self');

注： window.location.origin 在 IE10 中不可用. 这个修复方案 正是关注于该问题。

通过文本查找元素

通过使用 jQuery 的 contains() 选择器，你能够查找元素内容中的文本。若文本不存在，该元素将被隐藏：

var search = $('#search').val();
$('div:not(:contains("' + search + '"))').hide();

在 visibility 属性变化时触发

当用户的焦点离开或者重新回到某个标签页时，触发 Javasrcipt：

$(document).on('visibilitychange', function (e) {
if (e.target.visibilityState === "visible") {
console.log('Tab is now in view!');
} else if (e.target.visibilityState === "hidden") {
console.log('Tab is now hidden!');
}
});

Ajax 调用错误处理

当一个 Ajax 调用返回 404 或 500 错误时，错误处理程序将被执行。若错误处理未被定义，其它 jQuery 代码可能不再有效。所以定义一个全局的 Ajax 错误处理：

$(document).ajaxError(function (e, xhr, settings, error) {
console.log(error);
});

链式插件调用

jQuery 允许通过“链式”插件调用的方法，来缓解反复查询 DOM 和创建多个 jQuery 对象的过程。例如，下面的代码代表着你的插件调用：

$('#elem').show();
$('#elem').html('bla');
$('#elem').otherStuff();

通过使用链式操作，有了显著的改善:

$('#elem')
.show()
.html('bla')
.otherStuff();

另一种方法是在变量（以 $ 为前缀）中，对元素进行缓存：

var $elem = $('#elem');
$elem.hide();
$elem.html('bla');
$elem.otherStuff();

无论是链式操作，还是缓存元素，都是 jQuery 中用以简化和优化代码的最佳实践。