Grundlegende praktische jQuery-Kenntnisse (Teil 2)_jquery

Die Beispiele in diesem Artikel fassen klassische und praktische jQuery-Code-Entwicklungstechniken zusammen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

12. Bilder vorladen
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++) {
 $('<img>').attr('src', arguments[i]);
 }
};
$.preloadImages('img/hover1.png', 'img/hover2.png');

13. Überprüfen Sie, ob das Bild geladen ist
Manchmal müssen Sie sicherstellen, dass das Bild geladen ist, damit Sie nachfolgende Vorgänge ausführen können:

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

Sie können img durch eine andere ID oder Klasse ersetzen, um zu überprüfen, ob das angegebene Bild geladen ist.
14. Beschädigte Bilder automatisch ändern
Wenn Sie auf Ihrer Website defekte Bildlinks 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.
15. Klassenattribut durch Mauszeiger wechseln
Wenn Sie den Effekt ändern möchten, wenn der Benutzer mit der Maus über ein anklickbares Element fährt, kann der folgende Code ein Klassenattribut hinzufügen, wenn der Benutzer mit der Maus über das Element fährt, dann die Klasse Attribut wird automatisch gelöscht:

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

Sie müssen nur den notwendigen 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 jedoch die Methode kennen.
16. Eingabefeld 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“ aktivieren). Sie können das deaktivierte Attribut hinzufügen, bis Sie es aktivieren möchten:

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

18. Einblenden/Schieben 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 das Element den ersten Effekt verwendet, wenn es erscheint, und den zweiten Effekt, wenn es verschwindet, können Sie Folgendes tun:
// Verblassen

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

19. Einfacher Akkordeoneffekt
Hier ist eine schnelle und einfache Möglichkeit, einen Akkordeoneffekt zu erzielen:
// Alle Panels schließen

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

20. Machen Sie die beiden DIVs auf die gleiche Höhe
Manchmal müssen Sie zwei Divs auf die gleiche Höhe bringen, unabhängig vom Inhalt darin. Sie können den folgenden Codeausschnitt 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 Reihe von Elementen und setzt deren Höhe auf die maximale Höhe unter den Elementen.
21. Überprüfen Sie, ob das Element leer ist
Damit können Sie überprüfen, ob ein Element leer ist.

$(document).ready(function() {
 if ($('#id').html()) {
 // do something
 }
});

22. Elemente ersetzen
Möchten Sie ein Div oder etwas anderes ersetzen?

$(document).ready(function() {
 $('#id').replaceWith('
<DIV>I have been replaced</DIV>

');
});

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.