jqueryコードがどのように実行されるか

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

このように書くと無効になってしまいます

何故なら、 js スクリプト、本文のコンテンツ ページはまだレンダリングされていないため、$('#list>li') は要素をまったく取得できません

したがって、ページのレンダリングが完了した後でのみ有効になります。DOM ツリーは生成されて実行されます

では、どうすればヘッド内で実行できるのでしょうか? 方法は 2 つあります:

1. window オブジェクトの onload イベントを使用します。ページ要素が読み込まれた後、この JS スクリプトを呼び出します (遅延呼び出し)。 )

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

では、jquery に同じ機能を持つメソッドはありますか? もちろん、利用できるだけでなく、より効率的なメソッドもあります:ready()

$(document).ready(function () {
$('#list > li').addClass('horiz')
})

略語:

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

もちろん、jquery コードを作成する場合は、 HTML ドキュメントの下部にあるので、それほど面倒ではありませんが、それでも $(function() {}) カプセル化を使用することをお勧めします

$(document).ready() メソッドがより効率的であるのはなぜですかwindow.onload イベントは

HTML ページの生成は 2 つのステップに分かれています:

1. DOM ツリーを生成します: HTML ファイル内にある要素の数と要素間の関係をブラウザーに伝えます

2. 外部リソースを読み込みます:画像、外部ファイルなど

window.onload イベントは dom ツリーで生成される必要があり、すべての外部リソースがロードされた後にのみトリガーできます

$().ready() イベント: DOM が作成されるとすぐにトリガーできます。特に大きな画像やファイルがある場合、すべての要素がロードされるまで待つ必要はありません。

以上がjqueryコードがどのように実行されるかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。