astuces jquery et jquery trois abréviations que tout le monde dans le développement frontal WEB devrait connaître_jquery

Une collection de conseils simples pour vous aider à améliorer vos compétences jQuery. À l'heure actuelle, l'éditeur a compilé pour vous 14 astuces jquery.

Structure des répertoires

1 Bouton Retour en haut
2 images préchargées
3 Vérifiez si l'image est chargée
4 Réparez automatiquement les images endommagées
Changement de classe sur 5Hover
6Désactiver le champ de saisie
7Arrêtez le chargement du lien
8 interrupteurs fondu/glissière
9 effets de pliage simples
10Réglez deux Divs à la même hauteur
11Ouvrir le lien externe dans une nouvelle fenêtre
12 Recherchez l'élément de texte
13Commutez les déclencheurs visibles et cachés

Ce qui suit vous présentera la signification spécifique de chaque astuce.

1. Bouton Retour en haut

En utilisant les méthodes animate et scrollTop dans jQuery, vous pouvez créer une animation simple de retour en haut sans avoir besoin d'un plugin :

 // Back to top
 $('a.top').click(function (e) {
 e.preventDefault();
 $(document.body).animate({scrollTop: 0}, 800);
 });
 <!-- Create an anchor tag -->
 <a class="top" href="#">Back to top</a>

Modifiez la valeur de scrollTop à l'endroit où vous souhaitez que la barre de défilement s'arrête. Et puis ce que vous faites, c'est le configurer pour qu'il revienne au sommet dans 800 millisecondes.

2. Précharger les images

Si votre page utilise beaucoup d'images qui ne sont pas visibles initialement (par exemple liées au survol), il est utile de les précharger :

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

3. Vérifiez si l'image est chargée

Parfois, vous devrez peut-être vérifier si l'image est complètement chargée avant de pouvoir effectuer des opérations ultérieures dans le script :

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

Vous pouvez également vérifier si une image spécifique a été chargée en remplaçant la balise img par un identifiant ou une classe.

4. Réparer automatiquement les images endommagées

Si vous constatez que les liens d'images sur votre site Web sont rompus, il sera difficile de les remplacer un par un. Ce code simple peut beaucoup aider :

 $('img').on('error', function () {
 $(this).prop('src', 'img/broken.png');
});

Même si vous n’avez aucun lien rompu, l’ajout de ce code n’aura aucun impact.

5. Allumage de classe en survol

Si la souris de l'utilisateur survole un élément cliquable de la page, vous souhaitez modifier la représentation visuelle de cet élément. Vous pouvez utiliser le code suivant pour ajouter une classe à l'élément lorsque l'utilisateur le survole ; supprimer la classe lorsque l'utilisateur quitte la souris :

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

Il vous suffit d'ajouter le CSS nécessaire. Si vous avez besoin d'un moyen plus simple, vous pouvez également utiliser la méthode toggleClass :

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

Remarque : CSS peut être une solution plus rapide pour cet exemple, mais cela vaut quand même la peine de le savoir.

6. Désactiver le champ de saisie

Parfois, vous souhaiterez peut-être rendre le bouton d'envoi d'un formulaire ou sa zone de saisie de texte indisponible jusqu'à ce que l'utilisateur effectue une action spécifique (comme confirmer la case à cocher « J'ai lu les conditions »). Ajoutez un attribut désactivé à votre entrée pour obtenir l'effet souhaité :

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

Lorsque vous souhaitez changer la valeur de désactivé en faux, exécutez simplement à nouveau la méthode prop sur l'entrée.

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

7. Arrêter le chargement du lien

Parfois, vous ne voulez pas qu'un lien renvoie vers une page ou recharge la page, mais vous voulez pouvoir faire autre chose, comme déclencher d'autres scripts. Le code suivant est une petite astuce pour désactiver le comportement par défaut :

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

8.Interrupteur fondu/glissier

Les fondus entrants et sortants et les diapositives sont des effets d'animation que nous utilisons souvent jQuery pour créer. Peut-être souhaitez-vous simplement révéler un élément lorsque l'utilisateur clique sur quelque chose, l'utilisation de fadeIn et slideDown est toutes deux excellente. Mais si vous souhaitez que l'élément apparaisse au premier clic et disparaisse au deuxième clic, le code suivant peut bien faire l'affaire :

// Fade
 $('.btn').click(function () {
 $('.element').fadeToggle('slow');
 });
// Toggle
$('.btn').click(function () {
 $('.element').slideToggle('slow');
});

9. Effet accordéon simple

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

 // Close all panels
 $('#accordion').find('.content').hide(); 
 // Accordion
 $('#accordion').find('.accordion-header').click(function () {
 var next = $(this).next();
 next.slideToggle('fast');
 $('.content').not(next).slideUp('fast');
 return false;
 });

Après avoir ajouté ce script, tout ce que vous avez à faire est de voir si le script fonctionne correctement dans le HTML nécessaire.

10. Faire en sorte que les deux Divs aient la même hauteur

Parfois, vous souhaiterez peut-être que deux divs aient la même hauteur, quel que soit le contenu qu'ils contiennent :

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

Cet exemple définit la hauteur minimale, ce qui signifie qu'elle peut être plus grande que le div principal, mais jamais plus petite. Mais une méthode plus flexible consiste à parcourir les paramètres d'un ensemble d'éléments et à définir la hauteur sur la valeur la plus élevée de l'élément :

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

Si vous souhaitez que toutes les colonnes aient la même hauteur :

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

11. Ouvrir le lien externe dans un nouvel onglet/fenêtre

Ouvrez les liens externes dans un nouvel onglet ou une nouvelle fenêtre et assurez-vous que les liens internes s'ouvrent dans le même onglet ou la même fenêtre :

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

注意：window.location.origin 在 IE 10 中不可用，该 issue 的修复方法。

12.通过文本找到元素

通过使用 jQuery 中的 contains() 选择器，你可以找到某个元素中的文本。如果文本不存在，该元素将会隐藏：

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

13.视觉改变触发

当用户焦点在另外一个标签上，或重新回到标签时，触发 JavaScript：

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

Ajax 调用的错误处理

当某次 Ajax 调用返回 404 或 500 错误，就会执行错误处理。但如果没有定义该处理，其他 jQuery 代码或许会停止工作。可以通过下面这段代码定义一个全局 Ajax 错误处理：

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

14.插件链式调用

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小技巧之三个简写

简洁写法如下所示：

对象的简写

在过去，如果你想创建一个对象，你需要这样：

var car = new Object(); 
car.colour = 'red'; 
car.wheels = 4; 
car.hubcaps = 'spinning'; 
car.age = 4;

下面的写法能够达到同样的效果：

var car = { 
colour:'red', 
wheels:4, 
hubcaps:'spinning', 
age:4 
}

这样就简单多了，你不需要反复使用这个对象的名称。
这样 car 就定义好了，也许你会遇到 invalidUserInSession 的问题，这只有你在使用IE时会碰到，只要记住一点，不要右大括号前面写分号，你就不会有麻烦。

数组的简写

传统的定义数组的方法是这样：

var moviesThatNeedBetterWriters = new Array(
  'Transformers','Transformers2','Avatar','Indiana Jones 4');

简写版是这样：

var moviesThatNeedBetterWriters = [
  'Transformers','Transformers2','Avatar','Indiana Jones 4']; 

对于数组，这里有个问题，其实没有什么图组功能。但你会经常发现有人这样定义上面的 car ，就像这样：

var car = new Array(); 
car['colour'] = 'red'; 
car['wheels'] = 4; 
car['hubcaps'] = 'spinning'; 
car['age'] = 4;

数组不是万能的；这样写不对，会让人困惑。图组实际上是对象的功能，人们混淆了这两个概念。

三元条件符号的简写

另外一个非常酷的简写方法是使用与三元条件符号。
你不必写成下面的样子：

var direction; 
if(x < 200){ 
  direction = 1; 
}
else { 
  direction = -1; 
}

你可以使用三元条件符号简化它：

var direction = x < 200 &#63; 1 : -1;

当条件为true 时取问号后面的值，否则取冒号后面的值。