Heim >Web-Frontend >js-Tutorial >jQuery auf einfache Weise beherrschen: Core jQuery
jQuery auf einfache Weise beherrschen: Core jQuery
- 王林Original
- 2023-09-04 19:49:071032Durchsuche
Grundlegende Konzepte hinter jQuery
Während es einige konzeptionelle Variationen in der jQuery-API gibt (z. B. Funktionen wie $.ajax), ist das zentrale Konzept hinter jQuery „etwas finden, etwas tun“. Genauer gesagt: Wählen Sie DOM-Elemente aus einem HTML-Dokument aus und verwenden Sie dann jQuery-Methoden, um bestimmte Vorgänge an ihnen auszuführen. Das ist das Gesamtkonzept.
Um dieses Konzept gründlich zu verstehen, betrachten Sie den folgenden Code.
<!DOCTYPE html>
<html lang="en">
<body>
<!-- jQuery will change this -->
<a href=""></a>
<!-- to this <a href="https://www.jquery.com">jQuery</a> -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
jQuery('a').text('jQuery').attr('href', 'https://www.php.cn/link/51ef70624ca791283ec434a52da0d4e2');
</script>
</body>
</html>
Bitte beachten Sie, dass wir in diesem HTML-Dokument jQuery verwenden, um DOM-Elemente auszuwählen (<a></a>)。选择某些内容后，我们然后通过调用 jQuery 方法 text()、attr() 和 appendTo(), um einige Operationen an der Auswahl durchzuführen.
text 方法在包装的 <a></a> 元素上调用，并将该元素的显示文本设置为“jQuery”。 attr 调用将 href Eigenschaft auf jQuery-Website festgelegt.
Das Verständnis des Grundkonzepts „etwas finden, etwas tun“ ist entscheidend für den Fortschritt als jQuery-Entwickler.
Konzept, hinter dem Konzept, hinter jQuery
Während das Auswählen und Ausführen von etwas die Kernkonzepte von jQuery sind, wollte ich dieses Konzept um das Erstellen von etwas erweitern. Daher können die Konzepte hinter jQuery dahingehend erweitert werden, dass man zunächst etwas Neues erstellt, es auswählt und dann etwas damit macht. Wir können es das Konzept hinter jQuery nennen, das Konzept hinter dem Konzept.
Der Punkt, den ich hervorheben möchte, ist, dass Sie nicht nur auswählen, was bereits im DOM ist. Ein weiterer wichtiger Punkt bei grok ist, dass jQuery zum Erstellen neuer DOM-Elemente und zum anschließenden Ausführen bestimmter Operationen an diesen Elementen verwendet werden kann.
Im folgenden Codebeispiel erstellen wir ein neues <a></a> Element, das sich nicht im DOM befindet. Sobald es erstellt ist, wird es ausgewählt und bearbeitet.
<!DOCTYPE html>
<html lang="en">
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
jQuery('<a>jQuery</a>').attr('href', 'https://www.php.cn/link/51ef70624ca791283ec434a52da0d4e2').appendTo('body');
</script>
</body>
</html>
Das Schlüsselkonzept, das es hier zu verstehen gilt, besteht darin, dass wir das <a></a>-Element dynamisch erstellen und es dann so manipulieren, als ob es bereits im DOM wäre.
jQuery erfordert, dass HTML im Standardmodus oder im nahezu standardisierten Modus ausgeführt wird
Es gibt ein bekanntes Problem mit jQuery-Methoden, die nicht richtig funktionieren, wenn der Browser HTML-Seiten im seltsamen Modus rendert. Stellen Sie sicher, dass der Browser bei Verwendung von jQuery HTML im Standardmodus oder nahezu im Standardmodus interpretiert, indem er einen gültigen Dokumenttyp verwendet.
Um eine korrekte Funktionalität sicherzustellen, verwenden die Codebeispiele in diesem Buch den Dokumenttyp HTML 5.
<!DOCTYPE html>
Warten, bis das DOM fertig ist
Wenn das DOM geladen ist und zur Bearbeitung verfügbar ist, löst jQuery ein benutzerdefiniertes Ereignis mit dem Namen ready aus. Code, der das DOM manipuliert, kann im Handler dieses Ereignisses ausgeführt werden. Dies ist ein häufiges Muster bei der Verwendung von jQuery.
Die folgenden Beispiele zeigen drei Codierungsbeispiele dieses benutzerdefinierten Ereignisses im Einsatz.
<!DOCTYPE html>
<script>
// Standard
jQuery(document).ready(function () { alert('DOM is ready!'); });
// Shortcut, but same thing as above
jQuery(function () { alert('No really, the DOM is ready!'); });
// Shortcut with fail-safe usage of $. Keep in mind that a reference
// to the jQuery function is passed into the anonymous function.
jQuery(function ($) {
alert('Seriously its ready!');
// Use $() without fear of conflicts
});
</script>
Denken Sie daran, dass Sie Ihrem Dokument so viele ready() Ereignisse hinzufügen können, wie Sie möchten. Sie sind nicht auf nur einen beschränkt. Sie werden in der Reihenfolge ausgeführt, in der sie hinzugefügt werden.
JQuery-Code ausführen, wenn das Browserfenster vollständig geladen ist
Normalerweise möchten wir nicht auf das window.onload-Ereignis warten. Dies ist der Sinn der Verwendung eines benutzerdefinierten Ereignisses wie window.onload 事件。这就是使用像 ready(), das Code ausführt, bevor das Fenster geladen wird und nachdem das DOM zum Durchqueren und Bearbeiten bereit ist.
Aber manchmal möchten wir warten. Während sich benutzerdefinierte ready()-Ereignisse hervorragend zum Ausführen von Code eignen, nachdem das DOM verfügbar ist, können wir jQuery auch verwenden, um Code auszuführen, nachdem die gesamte Webseite, einschließlich aller Ressourcen, vollständig geladen wurde.
Dies kann durch Anhängen des Loading-Event-Handlers an das window 对象来完成。 jQuery 提供了 load() 事件方法，可用于在窗口完全加载后调用函数。下面，我提供了 load()Anwendungsbeispiel der Event-Methode erfolgen.
<!DOCTYPE html>
<script>
// Pass window to the jQuery function and attach
// event handler using the load() method shortcut
jQuery(window).load(function(){ alert('The page and all its assets are loaded!'); });
</script>
Fügen Sie alle CSS-Dateien ein, bevor Sie jQuery einbinden
Ab jQuery 1.3 garantiert die Bibliothek nicht mehr, dass alle CSS-Dateien geladen werden, bevor das benutzerdefinierte ready()-Ereignis ausgelöst wird. Aufgrund dieser Änderung in jQuery 1.3 sollten Sie immer alle CSS-Dateien vor jedem jQuery-Code einbinden. Dadurch wird sichergestellt, dass der Browser das CSS analysiert hat, bevor er zu JavaScript weiterleitet, das später im HTML-Dokument enthalten ist. Natürlich können Bilder, auf die über CSS verwiesen wird, heruntergeladen werden, wenn der Browser das JavaScript analysiert.
Verwenden Sie die gehostete Version von jQuery
Beim Einbetten von jQuery in eine Webseite entscheiden sich die meisten Leute dafür, den Quellcode herunterzuladen und von einer persönlichen Domain/einem persönlichen Host darauf zu verlinken. Es gibt jedoch auch andere Optionen, bei denen jemand anderes den jQuery-Code für Sie hosten muss.
Google hostet mehrere Versionen des jQuery-Quellcodes, die jeder nutzen kann. Das ist eigentlich sehr praktisch. Im folgenden Codebeispiel verwende ich das <script></script>-Element, um eine minimierte Version von jQuery einzubinden, die von Google gehostet wird.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
Google 还托管了多个以前版本的 jQuery 源代码，并且对于每个版本，都提供了缩小版和非缩小版变体。我建议在开发过程中使用非缩小变体，因为在处理非缩小代码时调试错误总是更容易。
使用 Google 托管版本的 jQuery 的一个好处是它可靠、快速并且可以缓存。
不使用 Ready() 解析 DOM 时执行 jQuery 代码
并不完全需要自定义 ready() 事件。如果您的 JavaScript 代码不影响 DOM，您可以将其包含在 HTML 文档中的任何位置。这意味着如果您的 JavaScript 代码不依赖于完整的 DOM，您可以完全避免 ready() 事件。
现在大多数 JavaScript，尤其是 jQuery 代码，都会涉及到操作 DOM。这意味着 DOM 必须由浏览器完全解析才能进行操作。这就是为什么开发人员几年来一直陷在 window.onload 过山车上的原因。
为了避免对 DOM 操作的代码使用 ready() 事件，您只需将代码放在 HTML 文档中的
Das obige ist der detaillierte Inhalt vonjQuery auf einfache Weise beherrschen: Core jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!