Wie JQuery-Code ausgeführt wird-js-Tutorial-php.cn

Wie JQuery-Code ausgeführt wird

无忌哥哥

Freigeben： 2018-06-29 10:57:17

Original

1750 Leute haben es durchsucht

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Abkürzung:

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!