10 extraits de code jQuery pour un développement Web efficace

Au cours des dernières années, jQuery a été la bibliothèque de scripts JavaScript la plus utilisée. Aujourd'hui, nous fournirons aux développeurs Web les 10 extraits de code jQuery les plus pratiques, que les développeurs dans le besoin peuvent enregistrer. Les débutants peuvent également l'utiliser pour apprendre jQuery~

1. Détecter la version d'Internet Explorer
En matière de conception CSS, pour les développeurs et les concepteurs, Internet Explorer a a toujours été un problème. Même si l'âge sombre d'IE6 est révolu et qu'IE devient de moins en moins populaire, c'est toujours une bonne chose à détecter facilement. Bien entendu, le code ci-dessous peut également être utilisé pour détecter d’autres navigateurs.

$(document).ready(function() {
   if (navigator.userAgent.match(/msie/i) ){
    alert('I am an old fashioned Internet Explorer');
   }
});

2. Glissez en douceur vers le haut de la page
C'est l'effet jQuery le plus utilisé : cliquez sur un lien et cela déplacera la page en douceur vers le haut. Il n'y a rien de nouveau ici, mais chaque développeur doit occasionnellement écrire des fonctions similaires

$("a[href='#top']").click(function() {
 $("html, body").animate({ scrollTop: 0 }, "slow");
 return false;
});

3. Corrigé en haut
Code très utile extrait qui permet de fixer un élément au-dessus. Super utile pour les boutons de navigation, les barres d'outils ou les boîtes d'informations importantes.

$(function(){
 var $win = $(window)
 var $nav = $('.mytoolbar');
 var navTop = $('.mytoolbar').length && $('.mytoolbar').offset().top;
 var isFixed=0;
 processScroll()
 $win.on('scroll', processScroll)
 function processScroll() {
 var i, scrollTop = $win.scrollTop()
 if (scrollTop >= navTop && !isFixed) { 
 isFixed = 1
 $nav.addClass('subnav-fixed')
 } else if (scrollTop <= navTop && isFixed) {
 isFixed = 0
  $nav.removeClass(&#39;subnav-fixed&#39;)
 }
}

4. Remplacez la balise html par un autre contenu
jQuery facilite le remplacement de la balise html par autre chose. Les possibilités sont infinies.

$('li').replaceWith(function(){
 return $("<div />").append($(this).contents());
});

5. Détecter la largeur de la fenêtre
Maintenant que les appareils mobiles sont plus courants que les ordinateurs obsolètes, il est plus facile de détecter une taille plus petite. La largeur de la fenêtre d'affichage peut être utile. Heureusement, c'est très simple à faire avec jQuery.

var responsive_viewport = $(window).width();
/* if is below 481px */
if (responsive_viewport < 481) {
  alert(&#39;Viewport is smaller than 481px.&#39;);
} /* end smallest screen */

6. Localisez et réparez automatiquement les images endommagées
Si votre site est volumineux et déjà en ligne Après en l'exécutant pendant de nombreuses années, vous rencontrerez plus ou moins une image corrompue quelque part sur l'interface. Cette fonction utile peut aider à détecter une image corrompue et à la remplacer par votre image préférée, informant ainsi les visiteurs du problème.

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

7. Détecter les opérations de copier, coller et couper
En utilisant jQuery, vous pouvez facilement détecter selon vos besoins Copier, coller et opérations de coupe.

$("#textA").bind('copy', function() {
  $('span').text('copy behaviour detected!')
}); 
$("#textA").bind('paste', function() {
  $('span').text('paste behaviour detected!')
}); 
$("#textA").bind('cut', function() {
  $('span').text('cut behaviour detected!')
});

8. Lorsque vous rencontrez un lien externe, ajoutez automatiquement l'attribut de target="blank"
lors de la création de liens Lorsque vous accédez à un site externe, vous pouvez utiliser l'attribut target="blank" pour ouvrir le site dans une nouvelle interface. Le problème est que l'attribut target="blank" n'est pas un attribut W3C valide. Utilisons jQuery pour remédier à cela : le code suivant détectera si le lien est un lien externe, et si oui, il ajoutera automatiquement un attribut target="blank".

var root = location.protocol + '//' + location.host;
$('a').not(':contains(root)').click(function(){
  this.target = "_blank";
});

9. L'effet de transparence qui augmente ou diminue progressivement en restant sur l'image
Un autre code "classique", il Keep dans votre boîte à outils car vous devrez l'implémenter de temps en temps.

$(document).ready(function(){
  $(".thumbs img").fadeTo("slow", 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads
  $(".thumbs img").hover(function(){
    $(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
  },function(){
    $(this).fadeTo("slow", 0.6); // This should set the opacity back to 60% on mouseout
  });
});

10. Désactivez la barre d'espace lors de la saisie de texte ou de mots de passe
La barre d'espace n'est pas obligatoire dans de nombreux champs de formulaire, par exemple exemple, Email, nom d'utilisateur, mot de passe, etc. Voici une astuce simple que vous pouvez utiliser pour désactiver la barre d'espace dans l'entrée sélectionnée.

$('input.nospace').keydown(function(e) {
 if (e.keyCode == 32) {
 return false;
 }
});

Ce qui précède est tout le contenu de 10 extraits de code jQuery pour un développement Web efficace. Si vous en avez besoin, vous pouvez l'enregistrer

<.>Recommandations associées :

7 extraits de code jQuery utiles à share_jquery

Obtenez-le directement 15 extraits de code jQuery à utiliser_jquery

18 excellents extraits de code jQuery_jquery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!