jquery-Tipps und jquery drei Abkürzungen, die jeder in der WEB-Front-End-Entwicklung kennen sollte_jquery

Eine Sammlung einfacher Tipps, die Ihnen helfen, Ihre jQuery-Kenntnisse zu verbessern. Derzeit hat der Herausgeber 14 JQuery-Tipps für Sie zusammengestellt.

Verzeichnisstruktur

1 Schaltfläche „Zurück zum Anfang“
2 vorinstallierte Bilder
3 Überprüfen Sie, ob das Bild geladen ist
4 Beschädigte Bilder automatisch reparieren
Klassenschalter auf 5Hover
6Eingabefeld deaktivieren
7Laden des Links stoppen
8 Fade-/Schiebeschalter
9 einfache Falteffekte
10Setzen Sie zwei Divs auf die gleiche Höhe
11Externen Link in neuem Fenster öffnen
12 Suchen Sie das Textelement
13Sichtbare und versteckte Auslöser wechseln

Im Folgenden wird Ihnen die spezifische Bedeutung der einzelnen Tipps vorgestellt.

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 erstellen, ohne dass ein Plugin erforderlich ist:

 // 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 den Mauszeiger gebunden sind), ist es sinnvoll, sie 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 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:

 $('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 für dieses Beispiel möglicherweise eine schnellere Lösung, 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:

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

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

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

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 vielleicht, 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 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:

 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. Externen Link in neuem Tab/Fenster öffnen

Öffnen Sie externe Links in einem neuen Tab oder Fenster und stellen Sie sicher, dass interne Links im selben Tab oder Fenster geöffnet werden:

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

Ajax 调用的错误处理

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

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

14.插件链式调用

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 中的链式操作和缓存方法，都极大精简和提速了代码。

下面给大家介绍jquery小技巧之三个简写

简洁写法如下所示：

对象的简写

在过去，如果你想创建一个对象，你需要这样：

var car = new Object(); 
car.colour = 'red'; 
car.wheels = 4; 
car.hubcaps = 'spinning'; 
car.age = 4;

下面的写法能够达到同样的效果：

var car = { 
colour:'red', 
wheels:4, 
hubcaps:'spinning', 
age:4 
}

这样就简单多了，你不需要反复使用这个对象的名称。
这样 car 就定义好了，也许你会遇到 invalidUserInSession 的问题，这只有你在使用IE时会碰到，只要记住一点，不要右大括号前面写分号，你就不会有麻烦。

数组的简写

传统的定义数组的方法是这样：

var moviesThatNeedBetterWriters = new Array(
  'Transformers','Transformers2','Avatar','Indiana Jones 4');

简写版是这样：

var moviesThatNeedBetterWriters = [
  'Transformers','Transformers2','Avatar','Indiana Jones 4']; 

对于数组，这里有个问题，其实没有什么图组功能。但你会经常发现有人这样定义上面的 car ，就像这样：

var car = new Array(); 
car['colour'] = 'red'; 
car['wheels'] = 4; 
car['hubcaps'] = 'spinning'; 
car['age'] = 4;

数组不是万能的；这样写不对，会让人困惑。图组实际上是对象的功能，人们混淆了这两个概念。

三元条件符号的简写

另外一个非常酷的简写方法是使用与三元条件符号。
你不必写成下面的样子：

var direction; 
if(x < 200){ 
  direction = 1; 
}
else { 
  direction = -1; 
}

你可以使用三元条件符号简化它：

var direction = x < 200 &#63; 1 : -1;

当条件为true 时取问号后面的值，否则取冒号后面的值。