Partagez 15 astuces jquery que tout le monde connaît_jquery

15 conseils jquery bien connus pour vous aider à améliorer votre application jQuery, partagez-les avec tout le monde

• Bouton Retour en haut
• Préchargement des images
• Déterminer si l'image a été chargée
• Réparer automatiquement les images endommagées
• Classe de commutateur de survol
• Désactiver la saisie
• Arrêter de charger les liens
• basculer le fondu/le glissement
• Accordéon simple
• Faire deux DIV de la même hauteur
• Ouvrir le lien externe dans l'onglet du navigateur/nouvelle fenêtre
• Obtenir des éléments basés sur du texte
• Déclencheur de changements visibles
• Gestion des erreurs d'appel Ajax
• Fonctionnement en chaîne
  

1. 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.

// Back to top

$('.top').click(function (e) {

 e.preventDefault();

 $('html, body').animate({scrollTop: 0}, 800);

});

<!-- Create an anchor tag -->

<a class="top" href="#">Back to top</a>

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.

Remarque : Jetons un coup d'œil à certains des comportements coquins de scrollTop.

2. 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');

3. Déterminez 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');
});

Vous pouvez également vérifier si une image spécifique a été chargée et remplacée par une balise

4. Réparer automatiquement les images endommagées

Si vous trouvez des liens d'images brisés sur votre site, 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.

5. Classe de changement de survol

Disons que vous souhaitez modifier l'effet visuel d'un élément de votre page lorsqu'un utilisateur le survole. Lorsque l'utilisateur passe la souris sur un élément, vous pouvez ajouter une classe à l'élément et supprimer la classe lorsque la souris arrête de survoler :

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

Si vous souhaitez une manière plus simple d'utiliser la méthode toggleClass, ajoutez simplement le CSS nécessaire :

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

Remarque : CSS est une solution rapide dans ce cas, mais cela vaut quand même la peine de le savoir.

6. 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 (par exemple : 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 :

Copier le code Le code est le suivant :

$('input[type="submit"]' ).prop ("désactivé", vrai);

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 :

Copier le code Le code est le suivant :

$('input[type="submit"]' ).prop ("désactivé", faux);

7. Arrêtez de charger les liens

Parfois, vous ne souhaitez pas créer un lien vers une page Web spécifique ou recharger la page ; vous souhaiterez peut-être qu'ils fassent autre chose, comme déclencher un autre script ; Voici des conseils pour prévenir les actions en cas de rupture de contrat :

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

8. basculer entre fondu/diapositive

Le glissement et le fondu d'entrée/sortie sont des animations que nous utilisons souvent beaucoup dans jQuery. Vous souhaiterez peut-être afficher un élément uniquement lorsque l'utilisateur effectue certains événements de clic, auquel cas une méthode de fondu entrant/sortant ou de glissement est requise. Mais si vous avez besoin que cet élément apparaisse lorsque vous cliquez dessus pour la première fois et disparaisse lorsque vous cliquez dessus pour la deuxième fois, le code est le suivant :

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

9. Accordéon simple

Voici un moyen simple et rapide de créer un 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;
});

通过添加这个脚本，你需要做的则是必要的HTML操作在你的页面上。

10、使两个DIV同等高度

有时你会想要两个DIV有相同的高度，无论他们都有什么内容：

复制代码 代码如下:

$('.div').css('min-height', $('.main-div').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());
});

11、在浏览器标签/新窗口打开外部链接

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

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

备注：window.location.origin 在IE10不工作。

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

14、Ajax调用错误处理

当一个Ajax调用返回一个404或500的错误时，将执行该错误处理。如果该处理未定义，则其他jQuery代码便可能不会执行了。定义一个全局Ajax错误处理程序：

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

15、链式操作

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应用能力。