Compétences pratiques essentielles de jQuery (Partie 2)_jquery

Les exemples de cet article résument les techniques classiques et pratiques de développement de code jQuery. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

12. Précharger les images
Si votre page utilise beaucoup d'images invisibles (telles que l'affichage au survol), vous devrez peut-être les précharger :

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

13. Vérifiez si l'image est chargée
Parfois, vous devez vous assurer que l'image est chargée afin de pouvoir effectuer les opérations suivantes :

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

Vous pouvez remplacer img par un autre identifiant ou classe pour vérifier si l'image spécifiée est chargée.
14. Modifier automatiquement les images endommagées
Si vous trouvez des liens d'images brisés sur votre site Web, vous pouvez les remplacer par une image qui ne peut pas être facilement remplacée. L'ajout de ce code simple peut vous éviter bien des ennuis :

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

Même si votre site Web ne contient pas de liens d’images rompus, il n’y a aucun mal à ajouter ce code.
15. Changer d'attribut de classe en survolant la souris
Si vous souhaitez modifier l'effet lorsque l'utilisateur passe la souris sur un élément cliquable, le code suivant peut ajouter un attribut de classe lorsque l'utilisateur survole l'élément. Lorsque l'utilisateur quitte la souris, puis la classe. l'attribut sera automatiquement annulé :

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

Il vous suffit d'ajouter le code CSS nécessaire. Si vous voulez un code plus propre, vous pouvez utiliser la méthode toggleClass :

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

Remarque : utiliser CSS directement pour obtenir cet effet peut être une meilleure solution, mais vous devez quand même connaître la méthode.
16. Désactiver le champ de saisie
Parfois, vous devrez peut-être désactiver le bouton d'envoi d'un formulaire ou un champ de saisie jusqu'à ce que l'utilisateur effectue une action (par exemple, cocher la case « Conditions lues »). Vous pouvez ajouter l'attribut désactivé jusqu'à ce que vous souhaitiez l'activer :

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

18. Changer de fondu/glissade
Le fondu et le glissement sont des effets d'animation que nous utilisons souvent dans jQuery. Ils peuvent améliorer l'affichage des éléments. Mais si vous souhaitez que l'élément utilise le premier effet lorsqu'il apparaît et le deuxième effet lorsqu'il disparaît, vous pouvez faire ceci :
// Fondu

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

19.Effet accordéon simple
Voici un moyen simple et rapide d’obtenir un effet accordéon :
// Ferme tous les panneaux

$('#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;
});

20. Faites en sorte que les deux DIV aient la même hauteur
Parfois, vous devez créer deux divs de la même hauteur, quel que soit le contenu qu'ils contiennent. Vous pouvez utiliser l'extrait de code suivant :

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

Ce code parcourra un ensemble d'éléments et définira leur hauteur sur la hauteur maximale parmi les éléments.
21. Vérifiez si l'élément est vide
Cela vous permettra de vérifier si un élément est vide.

$(document).ready(function() {
 if ($('#id').html()) {
 // do something
 }
});

22. Remplacer les éléments
Vous voulez remplacer un div, ou autre chose ?

$(document).ready(function() {
 $('#id').replaceWith('
<DIV>I have been replaced</DIV>

');
});

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.