15 häufig verwendete JQuery-Code-Snippets_jquery

In diesem Artikel werden 15 häufig verwendete JQuery-Code-Schnipsel für alle als Referenz bereitgestellt. Der spezifische Inhalt lautet wie folgt:

1. 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 ohne Plugin erstellen:

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

 <!-- 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.

2. Bilder vorladen
Wenn Ihre Seite viele Bilder verwendet, die zunächst nicht sichtbar sind (z. B. an einen Hover gebunden), ist es sinnvoll, diese vorab zu laden:

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

3. Ü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:

 $('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.

4. Beschädigte Bilder reparieren
Wenn Sie feststellen, dass die Bildlinks auf Ihrer Website defekt sind, ist es sehr mühsam, sie einzeln zu ersetzen. Dieser einfache Code kann sehr hilfreich sein:

 $('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.

5. 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:

 $('.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:

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

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

6. 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:

Code kopieren Der Code lautet wie folgt:

$('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.

Code kopieren Der Code lautet wie folgt:

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

7. 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:

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

8. 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:

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

9. Einfacher Akkordeoneffekt
So erzielen Sie schnell und einfach einen Akkordeoneffekt:

 // 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.

10. Machen Sie die beiden Divs auf die gleiche Höhe
Manchmal möchten Sie möglicherweise, dass zwei Divs unabhängig vom darin enthaltenen Inhalt die gleiche Höhe haben:

Code kopieren Der Code lautet wie folgt:

('.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 sein kann, jedoch niemals kleiner. 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:

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

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

$('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 的修复方法。

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

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

13、视觉改变触发
当用户焦点在另外一个标签上，或重新回到标签时，触发 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!');
 }
 });
 

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

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

15、插件链式调用
jQuery 支持链式调用插件，以减缓反复查询 DOM，并创建多个 jQuery 对象。看下面示例代码：

 $('#elem').show();
 $('#elem').html('bla');
 $('#elem').otherStuff();

上面这段代码，可以通过链式操作大大改进：

 $('#elem')
 .show()
 .html('bla')
 .otherStuff();

还有另外一种方法，把元素缓存在变量中（前缀是  $ ）：

 var $elem = $('#elem');
 $elem.hide();
 $elem.html('bla');
 $elem.otherStuff();

jQuery 中的链式操作和缓存方法，都极大精简和提速了代码。
以上就是本文的全部内容，希望对大家的学习有所帮助。