Zusammenfassung einiger häufig verwendeter Techniken in jQuery_jquery

Einführung

Die Existenz von jQuery macht es für Leute, die die Front-End-Entwicklung erlernen, immer einfacher. Sie können ihre Anforderungen mit nur wenigen Codezeilen erfüllen Verwenden Sie jQuery? Sie können den Code nach der Ausführung nicht sehen. Glauben Sie, dass mit jQuery etwas nicht stimmt? Das Problem liegt tatsächlich darin, ob Sie wissen, wie man es verwendet. Hier finden Sie einige Anwendungsbeispiele, die in der Entwicklung häufig anzutreffen sind, und entdecken Sie eine andere Welt von jQuery.

Schaltfläche „Zurück zum Anfang“

Mit den Methoden animate und scrollTop in jQuery müssen Sie keine Plug-Ins verwenden, um einfache Scroll-to-Top-Animationen zu erstellen.

$('.top').click(function (e) {
 e.preventDefault();
 $('html, body').animate({scrollTop: 0}, 800);
});

Ändern Sie die Position, zu der Sie scrollen möchten, indem Sie den Wert von scrollTop verwenden. Im Wesentlichen ist das, was Sie tun: Lassen Sie die Seite die nächsten 800 Millisekunden lang scrollen, bis sie an den Anfang des Dokuments scrollt.

Bild vorab laden

Wenn Ihre Webseite viele versteckte Bilddateien verwendet (z. B. Bilder, die beim Mouseover angezeigt werden), ist das Vorladen von Bildern sinnvoll:

$.preloadImages = function () {
 for (var i = 0; i < arguments.length; i++) {
 $('<img>').attr('src', arguments[i]);
 }
};
$.preloadImages('img/hover-on.png', 'img/hover-off.png');<br />

Bestimmen Sie, ob das Bild geladen ist

Manchmal müssen Sie möglicherweise überprüfen, ob das Bild geladen wurde, damit Sie den entsprechenden js-Code weiterhin ausführen können:

$('img').load(function () {
 console.log('image load successful');
});

Nutzungsszenarien, auf die ich gestoßen bin: Einige Elemente müssen entsprechend der tatsächlichen Größe des Bildes dimensioniert und in einer absoluten Anordnung platziert werden. Die Größeneinstellung des Elements kann nach dem Laden des Bildes berechnet werden.

Beschädigte Bilder automatisch reparieren

Wenn Sie auf Ihrer Website defekte Bildlinks finden, kann es mühsam sein, diese einzeln zu ersetzen. Dieser einfache Code kann viel Ärger ersparen:

$('img').on('error', function () {
 if(!$(this).hasClass('broken-image')) {
 $(this).prop('src', 'img/broken.png').addClass('broken-image');
 }
});

Auch wenn Sie keine defekten Links haben, hat das Hinzufügen dieses Codes keine Auswirkungen.

Eingabe deaktivieren

Manchmal müssen Sie möglicherweise die Schaltfläche „Senden“ eines Formulars oder ein Eingabefeld verwenden, bis der Benutzer eine Aktion ausführt (z. B. das Kontrollkästchen „Ich habe die Bedingungen gelesen“ aktiviert). Legen Sie das Attribut „Disabled“ in Ihrem Eingabefeld fest und aktivieren Sie es dann, wenn Sie es benötigen:

$('input[type="submit"]').prop('disabled', true);

Alles, was Sie tun müssen, ist, die Prop-Methode erneut im Eingabefeld auszuführen, aber den Wert „disabled“ auf „false“ zu setzen:

$('input[type="submit"]').prop('disabled', false);

Für jQuery-Entwickler, die die Prop-Funktion nicht verstehen, ist die Attr-Funktion die am häufigsten verwendete. Sie können viele Programme entwickeln, ohne dass Probleme auftreten. Bei der Entwicklung von Kontrollkästchen, Radio und Auswahl werden Sie jedoch feststellen, dass Attr wird verwendet. Ich denke, es handelt sich um einen jQuery-Fehler. Hier sind einige Vorschläge für die Verwendung von attr und prop:

Wenn es darum geht, Attribute wie aktiviert, ausgewählt, schreibgeschützt und deaktiviert abzurufen oder festzulegen, ist es offensichtlich besser, die Prop-Methode zu verwenden

Machen Sie die beiden DIVs auf die gleiche Höhe

Manchmal möchten Sie, dass zwei DIVs die gleiche Höhe haben, unabhängig davon, welchen Inhalt sie enthalten:

$('.div').css('min-height', $('.main-div').height());

In diesem Beispiel wird die Mindesthöhe des DIV festgelegt, was bedeutet, dass seine Höhe nur größer als die eingestellte Höhe, aber nicht kleiner sein kann. Ein flexiblerer Ansatz besteht jedoch darin, eine Reihe von Elementen zu durchlaufen und die Höhe des höchsten Elements als Höhe festzulegen:

var $columns = $('.column');
var height = 0;
$columns.each(function () {
 if ($(this).height() > height) {
 height = $(this).height();
 }
});
$columns.height(height);

Wenn Sie möchten, dass alle Spalten die gleiche Höhe haben:

var $rows = $('.same-height-columns');
$rows.each(function () {
 $(this).find('.column').height($(this).height());
});

Erhalten Sie Elemente basierend auf Text

Sie können den Textinhalt innerhalb eines Elements über den enthält()-Selektor in jQuery finden. Wenn der Text nicht vorhanden ist, wird dieses Element ausgeblendet:

var search = $('#search').val();
$('div:not(:contains("' + search + '"))').hide();

Auslöser sichtbarer Veränderungen

Javascript auslösen, wenn der Benutzer einen Tab defokussiert oder neu fokussiert:

$(document).on('visibilitychange', function (e) {
 if (e.target.visibilityState === "visible") {
 console.log('Tab is now in view!');
 } else if (e.target.visibilityState === "hidden") {
 console.log('Tab is now hidden!');
 }
});