8 codes de fonction jQuery super pratiques à share_jquery

Dans cet article, nous partagerons 8 conseils super pratiques pour les utilisateurs de jQuery. jQuery est l'une des meilleures bibliothèques pour JavaScript. Elle est principalement utilisée pour le traitement des animations et des événements et prend en charge les clients de script Ajax et HTML. De plus, jQuery dispose également de divers plug-ins pour aider les développeurs à créer rapidement des sites Web/pages Web dans les plus brefs délais.

J'espère que ces codes pratiques partagés dans cet article vous plairont.

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

Copier le code Le code est le suivant :

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

//supprime le menu contextuel par défaut
retourner faux ;
});
});

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);
retourner faux ;
});

//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);
retourner faux ;
});

// 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 des liens dans de nouvelles fenêtres et à offrir aux utilisateurs une meilleure expérience utilisateur.

Copier le code Le code est le suivant :

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

4) Changer 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() {
// échange 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 très utile pour les clics à long terme sur une seule page. Vous pouvez cliquer sur la fonction « Retour en haut » à des moments importants.

Copier le code Le code est le suivant :

$(document).ready(function() {
//quand on clique sur le lien id="top"
$('#top').click(function() {
//faire 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 les valeurs des axes x et y à l'intérieur de l'élément P
$('p').html("Axe X : " e.pageX " | Axe Y " 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()
{
pour(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…');
});