Résumé de quelques techniques couramment utilisées dans jQuery_jquery

Présentation

L'existence de jQuery permet aux personnes qui apprennent le développement front-end de se lancer de plus en plus facilement dans le front-end. Ils peuvent répondre à leurs besoins avec seulement quelques lignes de code. Cependant, savez-vous vraiment comment le faire. utilisez jQuery ? Vous ne pouvez pas voir le code après son exécution. Pensez-vous qu'il y a quelque chose qui ne va pas avec jQuery en fonction de l'effet attendu ? En fait, le problème réside dans votre capacité à l'utiliser. Voici quelques exemples d'applications souvent rencontrés en développement, et découvrez un monde différent de jQuery.

Bouton Retour en haut

En utilisant les méthodes animate et scrollTop dans jQuery, vous n'avez pas besoin d'utiliser de plug-ins pour créer de simples animations de défilement vers le haut.

$('.top').click(function (e) {
 e.preventDefault();
 $('html, body').animate({scrollTop: 0}, 800);
});

Modifiez la position vers laquelle vous souhaitez faire défiler en utilisant la valeur de scrollTop. En gros, c'est ce que vous faites : laissez la page défiler pendant les 800 millisecondes suivantes jusqu'à ce qu'elle défile vers le haut du document.

Préchargement des images

Si votre page Web utilise beaucoup de fichiers images cachés (par exemple : images affichées au survol de la souris), alors le préchargement des images est logique :

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

Déterminer si l'image est chargée

Parfois, vous devrez peut-être vérifier si l'image a été chargée afin de pouvoir continuer à exécuter le code js correspondant :

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

Scénarios d'utilisation que j'ai rencontrés : Certains éléments doivent être dimensionnés en fonction de la taille réelle de l'image et placés dans une disposition absolue. Le paramètre de taille de l'élément peut être calculé une fois l'image chargée.

Réparer automatiquement les images endommagées

Si vous trouvez des liens d'images brisés sur votre site Web, il peut être difficile de les remplacer un par un. Ce code simple peut éviter bien des ennuis :

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

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

Désactiver la saisie

Parfois, vous devrez peut-être utiliser le bouton d'envoi d'un formulaire ou un champ de saisie jusqu'à ce que l'utilisateur effectue une action (comme cocher la case « J'ai lu les conditions »). Définissez l'attribut désactivé dans votre zone de saisie, puis activez-le lorsque vous en avez besoin :

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

Tout ce que vous avez à faire est d'exécuter à nouveau la méthode prop sur la zone de saisie, mais de définir la valeur désactivée sur false :

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

Pour les développeurs jQuery qui ne comprennent pas la fonction prop, la fonction la plus couramment utilisée est la fonction attr. Ils peuvent développer de nombreux programmes sans rencontrer de problèmes. Cependant, lors du développement de cases à cocher, de radio et de sélection, vous trouverez cet attr. est utilisé. Je n'arrive pas à faire prendre effet aux attributs. Je pense que c'est un bug de jQuery. Voici quelques suggestions pour utiliser attr et prop :

Quand il s'agit d'obtenir ou de définir des attributs tels que vérifié, sélectionné, en lecture seule et désactivé, il est évidemment préférable d'utiliser la méthode prop

Faire en sorte que les deux DIV aient la même hauteur

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

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

Cet exemple définit la hauteur minimale du DIV, ce qui signifie que sa hauteur ne peut être que supérieure à la hauteur définie mais pas inférieure. Cependant, une approche plus flexible consiste à parcourir un ensemble d'éléments et à définir la hauteur de l'élément le plus haut :

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

Obtenir des éléments basés sur du texte

Vous pouvez trouver le contenu du texte dans un élément via le sélecteur contain() dans jQuery. Si le texte n'existe pas, cet élément sera masqué :

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

Déclencheur de changements visibles

Déclencher javascript lorsque l'utilisateur défocalise ou recentre un onglet :

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