Conseils pratiques sur jQuery

Cet article partage principalement avec vous un article sur les techniques pratiques de jQuery. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde. Suivons l’éditeur et jetons un coup d’œil. Les dix exemples jQuery suivants peuvent aider chacun à améliorer l'efficacité de ses projets de conception Web.

Détecter le navigateur IE

Lors de la conception CSS, le navigateur IE est très utile pour les développeurs et il est sans aucun doute un problème pour les designers. Bien que l’âge sombre d’IE6 soit révolu et que la popularité de la famille des navigateurs IE soit en déclin, nous devons encore le détecter. Bien entendu, l’extrait suivant 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'); 
 
      } 
 
});

Faites défiler doucement vers le haut de la page

Ce qui suit est l'effet jQuery le plus courant : cliquez sur un lien pour faire défiler doucement vers le haut de la page . Bien qu’il n’y ait rien de nouveau, presque tous les développeurs peuvent l’utiliser.

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

Rester toujours en haut de la page

L'extrait de code suivant permet à un élément de toujours être en haut de la page. Comme vous pouvez l'imaginer, il est idéal pour gérer les menus de navigation, les barres d'outils ou d'autres 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 <p style="margin-bottom:25px;line-height:28.8px;color:rgb(64,64,64);"><strong>Remplacer les balises html</strong></p><p style="margin-bottom:25px;line-height:28.8px;color:rgb(64,64,64);">jQuery peut facilement remplacer les balises html, et cela nous apportera également de nouvelles possibilités. </p><pre style="overflow:auto;" class="brush:php;toolbar:false;">$('li').replaceWith(function(){ 
 
  return $("<p></p>").append($(this).contents()); 
 
});

Détection de la largeur de l'écran

Maintenant que la popularité des appareils mobiles a presque dépassé celle des ordinateurs traditionnels, il est très important de détecter la taille des petits écrans . Heureusement, nous pouvons facilement réaliser cette fonctionnalité en utilisant jQuery.

var responsive_viewport = $(window).width(); 
 
/* if is below 481px */ 
 
if (responsive_viewport <p style="margin-bottom:25px;line-height:28.8px;color:rgb(64,64,64);"><strong>Réparer automatiquement les images endommagées</strong></p><p style="margin-bottom:25px;line-height:28.8px;color:rgb(64,64,64);">Si votre site est très volumineux et est en ligne depuis plusieurs années, il y aura des images plus ou moins endommagées. Cette fonctionnalité détecte les images corrompues et les remplace selon notre choix. </p><pre style="overflow:auto;" class="brush:php;toolbar:false;">$('img').error(function(){ 
 
$(this).attr('src', 'img/broken.png'); 
 
});

Détecter les opérations de copier, coller et couper

En utilisant jQuery, vous pouvez facilement détecter les opérations de copier, coller et couper des éléments sélectionnés.

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

Ajouter automatiquement l'attribut target="blank" aux liens externes

Lorsque vous créez des liens vers des sites externes, vous souhaiterez peut-être utiliser l'attribut target="blank" pour Assurez-vous d'ouvrir la page dans un nouvel onglet. Le problème est que l'attribut target="blank" n'est pas certifié W3C. jQuery peut beaucoup aider : l'extrait suivant détecte si le lien actuel pointe vers l'extérieur et, si c'est le cas, y ajoute automatiquement l'attribut target="blank".

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

Fade in/out au survol

Un autre effet "classique" que vous pouvez utiliser à tout moment à l'aide du clip suivant.

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

Désactivez les espaces dans la saisie de texte/mot de passe

De nombreux champs courants ne nécessitent pas d'espaces, qu'il s'agisse d'un e-mail, d'un nom d'utilisateur ou d'un mot de passe. Le code suivant désactive facilement tous les espaces dans l'entrée sélectionnée.

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

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!