8 superpraktische jQuery-Funktionscodes für share_jquery

In diesem Artikel geben wir 8 superpraktische Tipps für jQuery-Benutzer. jQuery ist eine der besten Bibliotheken für JavaScript. Sie wird hauptsächlich für die Animations- und Ereignisverarbeitung verwendet und unterstützt Ajax- und HTML-Skript-Clients. Darüber hinaus verfügt jQuery auch über verschiedene Plug-Ins, die Entwicklern dabei helfen, Websites/Webseiten in kürzester Zeit schnell zu erstellen.

Ich hoffe, dass Ihnen die in diesem Artikel vorgestellten praktischen Codes gefallen.

1) Rechtsklickfunktion deaktivieren
Wenn Sie Website-Informationen für Benutzer speichern möchten, können Entwickler diesen Code verwenden – deaktivieren Sie die Rechtsklick-Funktionalität.

Code kopieren Der Code lautet wie folgt:

$(document).ready(function() {
//Fangen Sie das Kontextmenü mit der rechten Maustaste ab
$(document).bind("contextmenu",function(e) {
//Warnungsaufforderung – optional
warning("Kein Rechtsklick!");

//Standardkontextmenü löschen
return false;
});
});

2) Verwenden Sie jQuery, um die Textgröße festzulegen

Mit diesem Code kann der Benutzer die Textgröße entsprechend seinen Anforderungen ändern (vergrößern oder verkleinern).

Code kopieren Der Code lautet wie folgt:

$(document).ready(function() {
//Finde die aktuelle Schriftgröße
var originalFontSize = $('html').css('font-size');

//Erhöhen Sie die Textgröße
$(".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;
});

//Verringern Sie die Textgröße
$(".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;
});

// Schriftgröße zurücksetzen
$(".resetFont").click(function(){
$('html').css('font-size', originalFontSize);
});
});

3) Öffnen Sie den Link in einem neuen Fenster

Die Verwendung dieses Codes hilft Benutzern beim Öffnen von Links in neuen Fenstern und bietet Benutzern eine bessere Benutzererfahrung.

Code kopieren Der Code lautet wie folgt:

$(document).ready(function() {
// alle Ankertags auswählen, die http im href enthalten
//und wenden Sie target=_blank
an $("a[href^='http']").attr('target','_blank');
});

4) Stilliste ändern

Verwenden Sie diesen Code, um die Stilliste zu ändern.

Code kopieren Der Code lautet wie folgt:

$(document).ready(function() {
$("a.cssSwap").click(function() {
// Tauschen Sie das Link-Rel-Attribut mit dem Wert im rel
aus $('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));
});
});

5) Zurück zum oberen Link

Dieser Code ist sehr nützlich für langfristige Klicks auf eine einzelne Seite. An wichtigen Stellen können Sie auf die Funktion „Zurück nach oben“ klicken.

Code kopieren Der Code lautet wie folgt:

$(document).ready(function() {
//wenn auf den Link id="top" geklickt wird
$('#top').click(function() {
//scrollen Sie die Seite zurück nach oben
$(document).scrollTo(0,500);
}
});

6) Ermitteln Sie die X/Y-Achse des Mauszeigers

Code kopieren Der Code lautet wie folgt:

$().mousemove(function(e){
//zeige die x- und y-Achsenwerte innerhalb des P-Elements an
$('p').html("X-Achse: " e.pageX " | Y-Achse " e.pageY);
});

7) Aktuelle Mauskoordinaten erkennen

Mit diesem Skript können Sie Mauskoordinaten in jedem Webbrowser abrufen.

Code kopieren Der Code lautet wie folgt:

$(document).ready(function() {
$().mousemove(function(e)
{
$('# MouseCoordinates ').html("X-Achsenposition = " e.pageX " und Y-Achsenposition = " e.pageY);
});

8) Vorladen von Bildern

Dieser Code hilft Benutzern, Bilder oder Webseiten schnell zu laden.

Code kopieren Der Code lautet wie folgt:

jQuery.preloadImagesInWebPage = function()
{
for(var ctr = 0; ctr {
jQuery("").attr("src", arguments[ctr]);
}
}
Um die obige Methode zu verwenden, können Sie den folgenden Code verwenden:
$.preloadImages("image1.gif", "image2.gif", "image3.gif");
Um zu überprüfen, ob ein Bild geladen wurde, können Sie den folgenden Code verwenden:
$('#imageObject').attr('src', 'image1.gif').load(function() {
warning('Das Bild wurde geladen…');
});