15 bekannte JQuery-Tipps zur Verbesserung Ihrer jQuery-Anwendung, teilen Sie sie mit allen
1. Schaltfläche „Zurück zum Anfang“
Mit den Methoden animate und scrollTop in jQuery müssen Sie keine Plug-Ins verwenden, um einfache Scroll-to-Top-Animationen zu erstellen.
// Back to top
$('.top').click(function (e) {
e.preventDefault();
$('html, body').animate({scrollTop: 0}, 800);
});
<!-- Create an anchor tag -->
<a class="top" href="#">Back to top</a>
Ändern Sie die Position, zu der Sie scrollen möchten, indem Sie den Wert von scrollTop verwenden. Im Wesentlichen ist das, was Sie tun: Lassen Sie die Seite die nächsten 800 Millisekunden lang scrollen, bis sie zum Anfang des Dokuments scrollt.
Hinweis: Werfen wir einen Blick auf einige der ungezogenen Verhaltensweisen von scrollTop.
2. Bild vorab laden
Wenn Ihre Webseite viele versteckte Bilddateien verwendet (z. B. Bilder, die beim Mouseover angezeigt werden), ist das Vorladen von Bildern sinnvoll:
$.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. Bestimmen Sie, ob das Bild geladen ist
Manchmal müssen Sie möglicherweise überprüfen, ob das Bild geladen wurde, damit Sie den entsprechenden js-Code weiterhin ausführen können:
$('img').load(function () {
console.log('image load successful');
});
Sie können auch überprüfen, ob ein bestimmtes Bild geladen und durch ein -Tag mit einer ID oder Klasse ersetzt wurde.
4. Beschädigte Bilder automatisch reparieren
Wenn Sie auf Ihrer Website defekte Bildlinks finden, kann es mühsam sein, sie einzeln zu ersetzen. Dieser einfache Code kann viel Ärger ersparen:
$('img').on('error', function () {
if(!$(this).hasClass('broken-image')) {
$(this).prop('src', 'img/broken.png').addClass('broken-image');
}
});Auch wenn Sie keine defekten Links haben, hat das Hinzufügen dieses Codes keine Auswirkungen.
5. Hover-Switching-Klasse
Angenommen, Sie möchten den visuellen Effekt eines Elements auf Ihrer Seite ändern, wenn ein Benutzer mit der Maus darüber fährt. Wenn der Benutzer mit der Maus über ein Element fährt, können Sie dem Element eine Klasse hinzufügen und die Klasse entfernen, wenn die Maus nicht mehr darüber schwebt:
$('.btn').hover(function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});
Wenn Sie die toggleClass-Methode einfacher verwenden möchten, fügen Sie einfach das erforderliche CSS hinzu:
$('.btn').hover(function () {
$(this).toggleClass('hover');
});Hinweis: CSS ist in diesem Fall eine schnelle Lösung, aber es lohnt sich trotzdem, es zu wissen.
6. Eingabe deaktivieren
Manchmal müssen Sie möglicherweise die Schaltfläche „Senden“ eines Formulars oder ein Eingabefeld verwenden, bis der Benutzer eine Aktion ausführt (z. B. das Kontrollkästchen „Ich habe die Bedingungen gelesen“ aktiviert). Legen Sie das Attribut „Disabled“ in Ihrem Eingabefeld fest und aktivieren Sie es dann, wenn Sie es benötigen:
Manchmal möchten Sie nicht auf eine bestimmte Webseite verlinken oder die Seite neu laden. Möglicherweise möchten Sie, dass sie etwas anderes tun, beispielsweise ein anderes Skript auslösen. Hier finden Sie Tipps zur Vermeidung von Vertragsverletzungsklagen:
$('a.no-link').click(function (e) {
e.preventDefault();
});
8. Ein-/Ausblenden umschalten
Gleiten und Ein-/Ausblenden sind Animationen, die wir in jQuery häufig häufig verwenden. Möglicherweise möchten Sie ein Element nur anzeigen, wenn der Benutzer bestimmte Klickereignisse ausführt. In diesem Fall ist eine Ein-/Ausblend- oder Gleitmethode erforderlich. Wenn Sie jedoch möchten, dass dieses Element angezeigt wird, wenn Sie zum ersten Mal darauf klicken, und verschwindet, wenn Sie zum zweiten Mal darauf klicken, lautet der Code wie folgt:
// Fade
$('.btn').click(function () {
$('.element').fadeToggle('slow');
});
// Toggle
$('.btn').click(function () {
$('.element').slideToggle('slow');
});
9. Einfaches Akkordeon
Hier ist eine schnelle und einfache Möglichkeit, ein Akkordeon zu erstellen:
// 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;
});
通过添加这个脚本，你需要做的则是必要的HTML操作在你的页面上。
10、使两个DIV同等高度
有时你会想要两个DIV有相同的高度，无论他们都有什么内容：
var $columns = $('.column');
var height = 0;
$columns.each(function () {
if ($(this).height() > height) {
height = $(this).height();
}
});
$columns.height(height);
如果你想要所有的列有相同的高度：
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 在IE10不工作。
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缓存方法是最好的做法，导致更短、更快的代码。
以上就是本文的全部内容，希望帮助大家提高jQuery应用能力。
