Heim > Artikel > Web-Frontend > Wie JQuery-Code ausgeführt wird

Wie JQuery-Code ausgeführt wird

无忌哥哥Original: 2018-06-29 10:57:171770Durchsuche

$('#list > li').addClass('horiz')

Wenn Sie es hier eingeben, ist es ungültig, wenn Sie es so schreiben

Aus diesem Grund wurde die Seite im Hauptteil nicht gerendert, wenn der Code im js-Skript ausgeführt wird, und $('#list>li') kann das Element

überhaupt nicht abrufen. Es muss also ausgeführt werden, nachdem das Rendern der Seite abgeschlossen ist, und der DOM-Baum wird wirksam.

Wie kann es also im Kopf ausgeführt werden:

1 . Verwenden Sie das Onload-Ereignis des Fensterobjekts: Rufen Sie es erneut auf, nachdem das Seitenelement geladen wurde.

window.onload = function () {
$(&#39;#list > li&#39;).addClass(&#39;horiz&#39;)
}

Gibt es also eine Methode mit derselben Funktion in jquery? , das gibt es nicht nur, es ist auch effizienter: ready()

$(document).ready(function () {
$(&#39;#list > li&#39;).addClass(&#39;horiz&#39;)
})

Abkürzung:

$(function(){
//jq代码
$(&#39;#list > li&#39;).addClass(&#39;horiz&#39;)
})

Natürlich hat es gewonnen, wenn Sie den JQuery-Code am Ende des HTML-Dokuments schreiben Das ist nicht so mühsam, aber es wird trotzdem empfohlen, den Code mit $(function(){}) zu kapseln.

Warum ist die Methode $(document).ready() effizienter? als das window.onload-Ereignis?

Die HTML-Seitengenerierung ist in zwei Schritte unterteilt:

1. DOM-Baum generieren: Erzählen Sie, wie viele Elemente in der Browser-HTML-Datei vorhanden sind und welche Beziehung zwischen ihnen besteht

2. Laden Sie externe Ressourcen: wie Bilder, externe Dateien usw.

Das window.onload-Ereignis muss sein. Wenn der DOM-Baum generiert wird, muss das

Das Ereignis $().ready() kann erst ausgelöst werden, nachdem alle externen Ressourcen geladen wurden: Es kann ausgelöst werden, solange das DOM erstellt wird, ohne auf das Laden aller Elemente warten zu müssen, insbesondere bei größeren Bildern oder Dateien , der Effekt ist sehr offensichtlich

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery代码的执行方式</title>
<style type="text/css">
.horiz {
float:left;
list-style: none;
margin: 10px;
}
</style>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(function(){
    //jq代码
    $(&#39;#list > li&#39;).addClass(&#39;horiz&#39;)
    })
</script>
</head>
<body>
<h2>购物清单</h2>
<ul id="list">
<li>生活用品
<ul>
<li><a href="">淘宝</a></li>
<li>箱包</li>
<li>衣服</li>
<li>鞋子</li>
</ul>
</li>
<li>数码产品
<ul>
<li><a href="">京东</a></li>
<li>笔记本电脑</li>
<li>显示器</li>
</ul>
</li>
<li>食品保健
<ul>
<li><a href="">拼多多</a></li>
<li>奶粉</li>
<a href="">玩具</a>
</ul>
</li>
</ul>
<!-- <script type="text/javascript" src="../js/jquery-3.3.1.js"></script> -->
<script type="text/javascript">
// $(&#39;#list > li&#39;).addClass(&#39;horiz&#39;)
// $(document).ready(function(){
// //这里放jQuery代码:将列表水平摆放
// $(&#39;#list > li&#39;).addClass(&#39;horiz&#39;)
// })
</script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonWie JQuery-Code ausgeführt wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

jquery html 封装 JS function 对象事件 dom li

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Einführung in das Vue-Webapp-Projekt, das native APPs über HBulider verpacktNächster Artikel：Einführung in das Vue-Webapp-Projekt, das native APPs über HBulider verpackt

In Verbindung stehende Artikel

Mehr sehen