jQueryドキュメント対応機能をJavaScriptに置き換えます-jsチュートリアル-php.cn

jQueryドキュメント対応機能をJavaScriptに置き換えます

Lisa Kudrow

リリース： 2025-02-17 09:56:10

オリジナル

439 人が閲覧しました

Replace the jQuery Document Ready Function with JavaScript

jQueryの$(document).ready()メソッドは、DOMが完全にロードされた後にコードを実行するために使用されます。すべてのDOM要素が利用可能な場合、指定された関数を実行するため、要素にアクセスまたは操作しようとすることが保証されます。

jQuery 3.0の前に、匿名関数を使用する典型的な使用法は次のとおりです。

$(document).ready(function() {
  // .ready() 的处理程序被调用。
});

ログイン後にコピー

キーポイント

メソッドは、すべてのDOM要素が安全で実行可能な場合にのみコードが実行されることを保証しますが、jQuery 3.0で大幅に変更されており、すべての構文メソッド（document.readyを除く）が非推奨です。 $(handler);
イベントは、最新のブラウザーおよびIE9で使用できるDOMContentLoadedメソッドの純粋なJavaScriptの代替品です。 IEの古いバージョンの場合、jQuery readyイベントを使用できます。 onreadystatechange
</body> JQuery 3.0

への変更 `ready()`バージョン3.0をリリースする前に、いくつかの方法で

メソッドを呼び出すことができます：

ready ドキュメント要素について：

$(document).ready(handler);
$().ready(handler);
上記のバリアントはすべて機能的に同等です。どの要素が呼び出されるかに関係なく、DOMが完全にロードされている限り、指定されたハンドラーが呼び出されます。言い換えれば、画像要素$(handler);でそれを呼び出すことは、ドキュメント要素でそれを呼び出すことと変わりません。また、コールバック関数のトリガー時間は、指定された要素の負荷とは何の関係もありません。代わりに、DOM全体が完全にロードされた後に呼び出されます。

jQuery 3.0では、

を除く他のすべての構文法は非推奨です。公式の理由は次のとおりです $("img") これは、選択が非効率であり、メソッドの動作に関する誤った仮定につながる可能性がある

メソッドの動作とは何の関係もないためです。

$(handler); イベントと

の違い

DOMが完全にロードされ、要素が安全にアクセス可能である場合、.ready()
イベントが起動されます。一方、DOMとすべてのリソースがロードされた後、

イベントが発射されます。

`readyload`イベントは次のように使用できます

これは、DOMが相互作用の準備が整うだけでなく、画像が完全にロードされるのを待つだけでなく（画像サイズに応じて時間がかかる場合があります）。 ready load通常のDOM操作の場合、

イベントは必要ありませんが、すべてのリソースがロードされる前にロードスピナーを表示する場合、または画像サイズでいくつかの計算を行う場合は、正しい場合があります。選択。

jquery.ready（）

は必要ないかもしれません

readyメソッドは、すべてのDOM要素が安全で実行可能な場合にのみコードが実行されることを保証します。しかし、これはどういう意味ですか？ HTMLドキュメントの<body>部分でJavaScriptコードを実行すると、ブラウザが後続のすべての要素をロードした後にコードが実行されることが保証されます（たとえば、 <code><p>要素）：<<

$(document).ready(function() {
  // .ready() 的处理程序被调用。
});

ログイン後にコピー

javaScriptコードを最後のものとして<body>として実行する場合、操作またはアクセスを試みることができるすべての要素がロードされているため、おそらくready()でラップする必要はありません。

$(window).on("load", function(){
  // 所有资源（包括图像）加载完毕时的处理程序
});

ログイン後にコピー

純粋なjavascript

代替`ready()`

最新のブラウザとIE9の場合、

イベントを聴くことができます：DOMContentLoaded

ただし、イベントが起動された場合、コールバック関数は実行されないことに注意してください。コールバック関数が常に実行されることを確認するために、jQueryはドキュメントの

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>.ready() 教程</title>
  <🎜>
</head>
<body>
  <🎜>
  <p>我是这个网站的内容</p>
</body>
</html>

ログイン後にコピー

（参照）をチェックし、完了した場合にコールバック関数をすぐに実行します。

readyStateこのソリューションを既に実装しているdomreadyライブラリを含めることもできます。

インターネットエクスプローラーの古いバージョン

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>.ready() 教程</title>
</head>
<body>
  <p>我是这个网站的内容</p>
  <🎜>
  <🎜>
</body>
</html>

ログイン後にコピー

IEバージョンの場合は8以下の場合、

イベントを使用して、ドキュメントの

：

を検出できます。 onreadystatechange readyStateまたは、jQueryのような

イベントを使用できます。これは、どのブラウザでも機能するためです。また、すべてのリソースがロードされるのを待つため、時間遅延も発生します。また、上記のように、イベントが起動されていてもコールバック関数が実行されていることを確認するために、

document.addEventListener("DOMContentLoaded", function(){
  // DOM 完全加载时的处理程序
});

ログイン後にコピー

を確認する必要があることに注意してください。

load結論readyState

メソッドに代わる純粋なjavaScriptを探している場合は、

イベントを使用できます。システムの要件にIEが含まれている場合、

イベントまたはイベントを使用する必要がある場合があります。 ready DOMContentLoadedプロジェクトでjQueryを使用している場合、jqueryのonreadystatechange関数を安全に使用し続けることができますが、前述の要素に（たとえばload）に（非推奨）メソッドを使用しないことを忘れないでください。

最後に、多くの場合、これらのソリューションのいずれも必要ないかもしれないことを忘れないでください。JavaScriptコードを最終タグに移動し、DOMがロードされていることを確認できます。 document.ready ready() jquery$(document).ready()から純粋なjavascriptへの移行に関するfaq

jQueryの

以上がjQueryドキュメント対応機能をJavaScriptに置き換えますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。