10 JQuery-Tipps, die Sie beherrschen müssen

10 jQuery-Tipps/Code-Snippets gesammelt, die Ihnen bei der schnellen Entwicklung helfen.

1. Schaltfläche „Zurück zum Anfang“

Sie können animate und scrollTop verwenden, um die Animation für die Rückkehr nach oben zu implementieren, ohne andere Plug-Ins zu verwenden.

// Back to top
$('a.top').click(function () {
  $(document.body).animate({scrollTop: 0}, 800);
  return false;
});
<!-- Create an anchor tag -->
<a class="top" href="#">Back to top</a>

Durch Ändern des Werts von scrollTop kann der Abstand zwischen der Rückkehr und der Oberseite angepasst werden, und der zweite Parameter von animate ist die Zeit, die zum Ausführen der Rückkehraktion erforderlich ist (Einheit: Millisekunden).

2. Bilder vorab laden

Wenn Ihre Seite viele unsichtbare Bilder verwendet (z. B. Hover-Anzeige), müssen Sie diese möglicherweise vorab laden:

$.preloadImages = function () {
  for (var i = 0; i < arguments.length; i++) {
    $(&#39;<img>&#39;).attr(&#39;src&#39;, arguments[i]);
  }
};
$.preloadImages(&#39;img/hover1.png&#39;, &#39;img/hover2.png&#39;);

3. Überprüfen Sie, ob das Bild geladen ist

Manchmal müssen Sie sicherstellen, dass das Bild geladen ist, um nachfolgende Vorgänge ausführen zu können:

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

Sie können img durch eine andere ID oder ersetzen Klasse, um zu prüfen, ob das angegebene Bild geladen ist.

4. Defekte Bilder automatisch ändern

Wenn Sie defekte Bildlinks auf Ihrer Website finden, können Sie diese durch ein Bild ersetzen, das nicht einfach ersetzt werden kann. Das Hinzufügen dieses einfachen Codes kann Ihnen viel Ärger ersparen:

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

Auch wenn Ihre Website keine defekten Bildlinks enthält, kann das Hinzufügen dieses Codes nicht schaden.

5. Ändern Sie das Klassenattribut, wenn Sie mit der Maus darüber fahren.

Wenn Sie den Effekt ändern möchten, wenn der Benutzer mit der Maus über ein anklickbares Element fährt, kann der folgende Code so aussehen: Es fügt ein Klassenattribut hinzu, wenn Wenn der Benutzer mit der Maus über das Element fährt, wird das Klassenattribut automatisch gelöscht:

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

Sie müssen nur den erforderlichen CSS-Code hinzufügen. Wenn Sie saubereren Code wünschen, können Sie die toggleClass-Methode verwenden:

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

Hinweis: Die direkte Verwendung von CSS zur Erzielung dieses Effekts ist möglicherweise eine bessere Lösung, Sie müssen die Methode jedoch trotzdem kennen.

6. Eingabefelder deaktivieren

Manchmal müssen Sie möglicherweise die Senden-Schaltfläche eines Formulars oder ein Eingabefeld deaktivieren, bis der Benutzer eine Aktion ausführt (z. B. das Kontrollkästchen „Bedingungen lesen“ aktiviert). . Sie können das deaktivierte Attribut hinzufügen, bis Sie es aktivieren möchten:

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

Sie müssen lediglich die Methode „removeAttr“ ausführen und das zu entfernende Attribut als Parameter übergeben:

$('input[type="submit"]').removeAttr('disabled');

7. Verhindern Sie das Laden von Links

Manchmal möchten Sie nicht, dass eine Seite etwas anderes tut oder andere Skripte auslöst Dies:

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

8. Fade/Slide umschalten

Fade und Slide sind Animationseffekte, die wir häufig in jQuery verwenden. Sie können die Anzeige von Elementen verbessern. Wenn Sie jedoch möchten, dass der erste Effekt verwendet wird, wenn das Element angezeigt wird, und der zweite Effekt, wenn es verschwindet, können Sie Folgendes tun:

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

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

10. Machen Sie zwei DIVs mit der gleichen Höhe

Manchmal müssen Sie zwei Divs erstellen die gleiche Höhe, unabhängig davon, wie viel Inhalt sie enthalten. Sie können das folgende Code-Snippet verwenden:

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

Dieser Code durchläuft eine Gruppe von Elementen und setzt deren Höhe auf die maximale Höhe unter den Elementen.

Englischer Originaltext: jQuery-Tipps, die jeder kennen sollte