Maison > interface Web > js tutoriel > Conseils pratiques sur jQuery

Conseils pratiques sur jQuery

零到壹度
Libérer: 2018-03-28 10:31:45
original
1185 Les gens l'ont consulté

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.

Conseils pratiques sur jQuery

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'); 
 
      } 
 
});
Copier après la connexion

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; 
 
});
Copier après la connexion

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()); 
 
});
Copier après la connexion

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'); 
 
});
Copier après la connexion

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!') 
 
});
Copier après la connexion

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"; 
 
});
Copier après la connexion

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 
 
    }); 
 
});
Copier après la connexion

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; 
 
} 
 
});
Copier après la connexion


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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal