Achten Sie auf JQuery-Fähigkeiten und verbessern Sie JQuery-Fähigkeiten (muss für die Front-End-Entwicklung erlernt werden)_jquery

Eine Sammlung einfacher Tipps, die Ihnen helfen, Ihre jQuery-Kenntnisse zu verbessern.

Ein kleines Projekt, das von Matt Smith gestartet wurde, derzeit gibt es 14 Tipps. Bole Online wird weiterhin Updates veröffentlichen.

Schaltfläche „Zurück zum Anfang“
Bilder vorab laden
Überprüfen Sie, ob das Bild geladen ist
Beschädigte Bilder automatisch reparieren
Klassenschalter auf Hover
Eingabefelder deaktivieren
Laden des Links stoppen
Fade-/Schiebeschalter
Einfacher Falteffekt
Stellen Sie zwei Divs auf die gleiche Höhe ein
Externen Link in neuem Fenster öffnen
Suchen Sie das Textelement
Wechseln Sie zwischen sichtbaren und versteckten Auslösern

Schaltfläche „Zurück zum Anfang“

Durch die Verwendung der Methoden animate und scrollTop in jQuery können Sie eine einfache Back-to-Top-Animation erstellen, ohne dass ein Plugin erforderlich ist:

JavaScript

// Back to top
$('a.top').click(function (e) {
 e.preventDefault();
 $(document.body).animate({scrollTop: 0}, 800);
});

JavaScript

<!-- Create an anchor tag -->
<a class="top" href="#">Back to top</a>

Ändern Sie den Wert von scrollTop dahingehend, dass die Bildlaufleiste enden soll. Und dann stellen Sie es so ein, dass es in 800 Millisekunden wieder nach oben geht.

Bilder vorab laden

Wenn Ihre Seite viele Bilder verwendet, die zunächst nicht sichtbar sind (z. B. an den Mauszeiger gebunden sind), ist es sinnvoll, sie vorab zu laden:

JavaScript

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

Überprüfen Sie, ob das Bild geladen ist

Manchmal müssen Sie möglicherweise überprüfen, ob das Bild vollständig geladen ist, bevor Sie nachfolgende Vorgänge im Skript ausführen können:

JavaScript

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

Sie können auch überprüfen, ob ein bestimmtes Bild geladen wurde, indem Sie das img-Tag durch eine ID oder Klasse ersetzen.

Beschädigte Bilder automatisch reparieren

Wenn Sie feststellen, dass die Bildlinks auf Ihrer Website defekt sind, wird es mühsam, sie einzeln zu ersetzen. Dieser einfache Code kann sehr hilfreich sein:

JavaScript

$('img').on('error', function () {
 $(this).prop('src', 'img/broken.png');
});

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

Klassenwechsel bei Hover

Wenn die Maus des Benutzers über ein anklickbares Element auf der Seite fährt, möchten Sie die visuelle Darstellung dieses Elements ändern. Sie können den folgenden Code verwenden, um dem Element eine Klasse hinzuzufügen, wenn der Benutzer mit der Maus darüber fährt. Entfernen Sie die Klasse, wenn der Benutzer die Maus verlässt:

JavaScript

$('.btn').hover(function () {
 $(this).addClass('hover');
}, function () {
 $(this).removeClass('hover');
});

Sie müssen nur das erforderliche CSS hinzufügen. Wenn Sie einen einfacheren Weg benötigen, können Sie auch die toggleClass-Methode verwenden:

JavaScript

$('.btn').hover(function () {
 $(this).toggleClass('hover');
});

Hinweis: CSS ist für dieses Beispiel möglicherweise eine schnellere Lösung, aber es lohnt sich trotzdem, es zu wissen.

Eingabefeld deaktivieren

Manchmal möchten Sie möglicherweise die Schaltfläche „Senden“ oder das Texteingabefeld eines Formulars nicht verfügbar machen, bis der Benutzer eine bestimmte Aktion ausführt (z. B. das Kontrollkästchen „Ich habe die Bedingungen gelesen“ bestätigt). Fügen Sie Ihrer Eingabe das deaktivierte Attribut hinzu, um den gewünschten Effekt zu erzielen:

JavaScript

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

Wenn Sie den Wert von „disabled“ in „false“ ändern möchten, führen Sie einfach die Prop-Methode erneut für die Eingabe aus.

JavaScript

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

Laden des Links stoppen

Manchmal möchten Sie nicht, dass ein Link zu einer Seite springt oder die Seite neu lädt, sondern Sie möchten etwas anderes tun können, beispielsweise andere Skripte auslösen. Der folgende Code ist ein kleiner Trick, um das Standardverhalten zu deaktivieren:

JavaScript

$('a.no-link').click(function (e) {
 e.preventDefault();
});

Fade-/Schiebeschalter

Ein- und Ausblenden sowie Schieben sind Animationseffekte, die wir häufig mit jQuery erstellen. Vielleicht möchten Sie einfach nur ein Element anzeigen, wenn der Benutzer auf etwas klickt. Die Verwendung von fadeIn und slideDown ist beides großartig. Wenn Sie jedoch möchten, dass das Element beim ersten Klick erscheint und beim zweiten Klick verschwindet, kann der folgende Code die Aufgabe gut erfüllen:

JavaScript

// Fade
$('.btn').click(function () {
 $('.element').fadeToggle('slow');
});
// Toggle
$('.btn').click(function () {
 $('.element').slideToggle('slow');
});

Einfacher Akkordeoneffekt

Hier ist eine schnelle und einfache Möglichkeit, einen Akkordeoneffekt zu erzielen:

JavaScript

// Close all panels
$('#accordion').find('.content').hide();
 
// Accordion
$('#accordion').find('.accordion-header').click(function () {
 var next = $(this).next();
 next.slideToggle('fast');
 $('.content').not(next).slideUp('fast');
 return false;
});

Nachdem Sie dieses Skript hinzugefügt haben, müssen Sie nur noch prüfen, ob das Skript innerhalb des erforderlichen HTML ordnungsgemäß funktioniert.

Machen Sie die beiden Divs auf die gleiche Höhe

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

JavaScript

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

In diesem Beispiel wird die Mindesthöhe festgelegt, was bedeutet, dass sie größer als das Haupt-Div, aber niemals kleiner sein kann. Eine flexiblere Methode besteht jedoch darin, die Einstellungen einer Reihe von Elementen zu durchlaufen und die Höhe auf den höchsten Wert im Element festzulegen:

JavaScript

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:

JavaScript

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

在新标签/窗口打开站外链接
在一个新标签或者新窗口中打开外置链接，并确保站内链接会在相同的标签或窗口中打开：

JavaScript

$('a[href^="http"]').attr('target', '_blank');
$('a[href^="//"]').attr('target', '_blank');
$('a[href^="' + window.location.origin + '"]').attr('target', '_self');

注意：window.location.origin 在 IE 10 中不可用，该 issue 的修复方法。

通过文本找到元素

通过使用 jQuery 中的 contains() 选择器，你可以找到某个元素中的文本。如果文本不存在，该元素将会隐藏：

JavaScript

var search = $('#search').val();

$('div:not(:contains("' + search + '"))').hide();

视觉改变触发
当用户焦点在另外一个标签上，或重新回到标签时，触发 JavaScript：

JavaScript

$(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!');
 }
});

Ajax 调用的错误处理

当某次 Ajax 调用返回 404 或 500 错误，就会执行错误处理。但如果没有定义该处理，其他 jQuery 代码或许会停止工作。可以通过下面这段代码定义一个全局 Ajax 错误处理：

JavaScript

$(document).ajaxError(function (e, xhr, settings, error) {
 console.log(error);
});

全能程序员交流QQ群290551701，群内程序员都是来自，百度、阿里、京东、小米、去哪儿、饿了吗、蓝港等高级程序员 ，拥有丰富的经验。加入我们，直线沟通技术大牛，最佳的学习环境，了解业内的一手的资讯。如果你想结实大牛，那 就加入进来，让大牛带你超神！