8 astuces pratiques jQuery_jquery-js tutoriel-php.cn

8 astuces pratiques jQuery_jquery

WBOY

Libérer： 2016-05-16 16:57:26

original

1061 Les gens l'ont consulté

1) Désactivez la fonction de clic droit
Si vous souhaitez protéger les informations du site Web pour les utilisateurs, les développeurs peuvent utiliser ce code - désactivez la fonction de clic droit.

Copier le code Le code est le suivant :

$(document).ready(function( ) {
//attrapez le menu contextuel du clic droit
$(document).bind("contextmenu",function(e) {
//invite d'avertissement - facultatif
alert("Pas de droit -en cliquant! ");

//supprimer le menu contextuel par défaut
return false;
});
});

2) Utilisez jQuery pour définir la taille du texte
Grâce à ce code, l'utilisateur peut redimensionner le texte (augmenter ou diminuer) selon ses besoins.

Copier le code Le code est le suivant :

$(document).ready(function( ) {
//trouver la taille de police actuelle
var originalFontSize = $('html').css('font-size');

//Augmente la taille du texte
$(".increaseFont").click(function() {
var currentFontSize = $('html').css('font-size');
var currentFontSizeNumber = parseFloat(currentFontSize, 10);

var newFontSize = currentFontSizeNumber*1.2;
$('html').css('font-size', newFontSize);
return false;
});

//Diminuer la taille du texte
$(".decreaseFont").click(function() {
var currentFontSize = $('html').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);

var newFontSize = currentFontSizeNum*0.8;
$('html').css('font-size', newFontSize);
return false;
});

// Réinitialiser la taille de la police
$(".resetFont").click(function(){
$('html').css('font-size', originalFontSize);
} );
});

3) Ouvrir le lien dans une nouvelle fenêtre
L'utilisation de ce code aidera les utilisateurs à ouvrir le lien dans une nouvelle fenêtre et à offrir aux utilisateurs une meilleure Expérience utilisateur.

Copier le code Le code est le suivant :

$(document).ready(function( ) {
 //sélectionnez toutes les balises d'ancrage qui ont http dans le href
 //et appliquez le target=_blank
 $("a[href^='http']").attr('target ',' _blank');
});

4) Modifier la liste de styles
Utilisez ce code pour vous aider à modifier la liste de styles.

Copier le code Le code est le suivant :

$(document).ready(function() {
 $ ("a.cssSwap").click(function() { 
 //échangez l'attribut link rel avec la valeur dans le rel 
 $('link[rel=stylesheet]').attr( 'href' , $(this).attr('rel')); 
 }); 
});

5) Retour au lien supérieur
Ce code est pour Il est très utile de cliquer longtemps sur une seule page, et vous pouvez cliquer sur la fonction "retour en haut" aux moments importants.

Copier le code Le code est le suivant :

$(document).ready(function( ) {
 //lorsque vous cliquez sur le lien id="top"
 $('#top').click(function() {
 //faites défiler la page vers le haut
 $ (document) .scrollTo(0,500);
 }
});

6) Récupérer l'axe X/Y du pointeur de la souris

Copier le code Le code est le suivant :

$().mousemove(function(e){
 //afficher le x et les valeurs de l'axe y à l'intérieur de l'élément P 
 $('p').html("X Axis : " e.pageX " | Y Axis " e.pageY);
});

7) Détecter les coordonnées actuelles de la souris
En utilisant ce script, vous pouvez obtenir les coordonnées de la souris dans n'importe quel navigateur Web.

Copier le code Le code est le suivant :

$(document).ready(function() {
$ ().mousemove(function(e)
{
 $('# MouseCoordonnées ').html("Position de l'axe X = " e.pageX " et Position de l'axe Y = " e.pageY); 
 });

8) Préchargement des images
Ce code aide les utilisateurs à charger rapidement des images ou des pages Web.

Copier le code Le code est le suivant :

jQuery.preloadImagesInWebPage = function() 
{
 for(var ctr = 0; ctr {
 jQuery("").attr("src", arguments[ctr]);
 }
} 
Pour utiliser la méthode ci-dessus, vous pouvez utiliser le morceau de code suivant :
$.preloadImages("image1.gif", "image2.gif", "image3.gif");
 Pour vérifier si une image a été chargée, vous pouvez utiliser le morceau de code suivant :
$('#imageObject').attr('src', 'image1.gif').load(function() {
 alert( 'L'image a été chargée…');
});