JQuery – Onload, Ready-Methode im Detail erklärt-js-Tutorial-php.cn

JQuery – Onload, Ready-Methode im Detail erklärt

巴扎黑

Freigeben： 2017-06-25 10:29:45

Original

1386 Leute haben es durchsucht

Es gibt zwei Ereignisse, wenn die Seite geladen wird. Eines ist bereit, was anzeigt, dass die Dokumentstruktur geladen wurde (ausgenommen Nicht-Text-Mediendateien wie Bilder), und das andere ist onload, was anzeigt, dass alle Elemente der Seite, einschließlich Bilder und andere Dateien, geladen wurden. (Man kann sagen: Bereit wird vor dem Laden geladen!!!)

Allgemeine Stilkontrolle, wie z. B. Bildgrößenkontrolle, wird platziert in onload Loading;
Die durch das jS-Ereignis ausgelöste Methode kann in ready geladen werden;

Viele Leute, die jQ verwenden, beginnen, Skripte wie dieses zu schreiben:

Normalerweise geschrieben
```
$(function(){
	// do something
});
```
Nach dem Login kopieren
Tatsächlich ist dies jq ready() In Kurz gesagt, es entspricht:
```
$(document).ready(function(){
	//do something
})
```
Nach dem Login kopieren
ist auch äquivalent zu Bei der folgenden Methode sind die Standardparameter von jQuer: „document“; document).Ready() method VS OnLoad event VS $(window).load() method
```
$().ready(function(){
	//do something
})
```
Nach dem Login kopieren

Kontakt

JQueryIm Allgemeinen lernt es als Erstes, wann das Ereignis gestartet werden soll. Lange Zeit wurden Ereignisse, die nach dem Laden der Seite ausgelöst wurden, im Onload-Ereignis von „Body“ geladen. Für das Onload-Ereignis von Body und JQuery im Vergleich zu Ready Methode gibt es viele Nachteile. Zum Beispiel:

für das Body.Onload-Ereignis, Es wird erst ausgelöst, nachdem der gesamte Seiteninhalt geladen wurde, einschließlich Bilder, Flash usw. Wenn die Seite viel Inhalt hat, muss der Benutzer lange warten. Lange Zeit.

Und für $(Dokument ).ready()-Methode, diese Methode wird erst ausgelöst, nachdem das gesamte DOM der Seite geladen wurde, was die Webseite zweifellos erheblich beschleunigen wird 🎜>

在Onload事件中只能这样加载，很丑陋…
而在JQuery中你可以利用多个JQuery.Ready()方法，它们会按次序依次执行

加载多个函数的问题
代码和内容不分离
这个貌似不用说了，让人深恶痛绝-.-!!
执行先后顺序不同

但是对于一些特殊应用，比如图片的放大缩小，图片的剪裁。需要网页所有的内容加载完毕后才执行的呢？我推荐使用$(window).load()方法，这个方法会等到页面所有内容加载完毕后才会触发，并且同时又没有OnLoad事件的弊端.

<script type="text/javascript">
    $(window).load(function() {
         alert("hello");
    });
    $(window).load(function() {
        alert("hello again");
    });
</script>

Nach dem Login kopieren

上面的代码会在页面所有内容加载完成后按先后顺序依次执行.
当然不要忘了与之对应的Unload方法

<script type="text/javascript">
	$(window).unload(function() {
	    alert("good bye");
	});
</script>

Nach dem Login kopieren

上面代码会在页面关闭时引发.

在所有DOM加载之前引发JS代码
这个方法是我在调试的时候最喜欢的，有时候开发的时候也用这种方法

<body>
    <script type="text/javascript">
        (function() {
            alert("hi");
        })(jQuery)
    </script>
</body>

Nach dem Login kopieren

对，就是利用js闭包的形式将js代码嵌入body，这段代码会自动执行，当然也可以直接嵌入js代码,这种方式要注意顺序问题，如下：

<body>
<p id="test">this is the content</p>
    <script type="text/javascript">

        alert($("#test").html());//I Can display the content
        
    </script>
</body>
<body>
   <script type="text/javascript">

        alert($("#test").html());//I Can&#39;t display the content
        
    </script>
    <p id="test">this is the content</p>
</body>

Nach dem Login kopieren

上面两段代码, 第二段代码当中因为只能解释到当前代码之前的DOM,而test并不存在于已经解析的DOM数.所以第二段代码无法正确显示.

Das obige ist der detaillierte Inhalt vonJQuery – Onload, Ready-Methode im Detail erklärt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!