ホームページ > 記事 > ウェブフロントエンド > JS を jQuery の Read() メソッドに置き換える方法

JS を jQuery の Read() メソッドに置き換える方法

php中世界最好的语言オリジナル: 2018-04-23 17:10:061182ブラウズ

今回は、jQueryのRead()メソッドがJSを置き換える方法を紹介します。jQueryのRead()メソッドがJSを置き換える場合の注意点は何ですか?実際のケースを見てみましょう。 jQuery の Ready メソッドは、ダウンロードが完了するとすぐに DOM 内のコードを実行することはよく知られています。指定された関数を実行する前にすべての DOM 要素がロードされるのを待機するため、要素ノードを操作してアクセスしようとするメソッドが確実に実行されます。この記事では、ネイティブ JS の代わりに jQuery の Read() メソッドを使用する方法を紹介します。見てみましょう。

jQuery 3.0 バージョンより前は、ready の古典的な使用法は、次のような

匿名関数

を使用することでした。次のメソッド: これは準備完了メソッドです: ドキュメント要素の操作: $(document).ready(handler);

空の要素の操作: $().ready (handler); または、直接操作します (つまり、特定の要素ではなく): $(handler); 上記の名前付きバリアントはすべて機能的に同等です。どの要素であっても、DOM がロードされた後に、指定されたハンドラーが呼び出されます。つまり、ここでの DOM ロードの完了は、ドキュメント内の特定の要素 (img 要素など) がロードされたことを意味するものではありません。逆に、ここで意味するのは、DOM ツリー全体がロードされたということです。

jQuery 3.0 では、$(handler) を除くすべての Ready メソッドが非推奨になりました。

$(document).ready(handler);

在空元素上操作: $().ready(handler);

或者直接（即不在一个具体的元素上）操作: $(handler);

上述所有命名的变种在功能上是等价的。无论是哪个元素，在DOM加载完毕之后其指定的处理程序都将会被调用。换句话说，这里的DOM加载完毕并不表示在文档中的某个具体的元素，比如img元素，加载完毕。相反，这里表示的是整个DOM树加载完毕。

在jQuery 3.0中,除了$(handler) 其他的ready方法都被弃用。

官方声明为此：

这是因为选择器并没有和ready()建立联系，不仅低效而且会导致浏览器引擎对该方法的行为进行不正确的假设。

ready 事件和 load 事件的区别

当DOM加载完毕且元素能够被安全访问时就会触发ready事件。另一方面，load事件却在DOM和所有资源加载后触发。

可以像下面这样使用load事件：

$(document).ready(function() {
 // Handler for .ready() called.
});

这样的话，不仅仅要等到DOM结构能完全访问，而且还需要等到所有的图片资源完全加载完毕（加载时间取决于图片文件大小）才能执行函数。

正常的DOM操作你可能不需要load事件,但是如果你想要在所有的资源被加载完毕之前展示一个旋转的加载器样式，比如，又或者你想要用JS计算一下图片的大小，这可能是一个好的选择。

你可能不需要jQuery.ready()

ready 方法可以确保代码只在所有DOM元素能被安全操纵时才执行。但这意味着什么呢？这意味着当你要执行的js代码嵌在HTML中某个片段中时，浏览器也要加载完以下元素才能执行。

就像下面这个例子一样:

$(window).on("load", function(){
 // Handler when all assets (including images) are loaded
});

如果你要执行的javascript代码放在body末尾，你就可能不需要使用ready()方法，因为浏览器解析到javascript时你可能试图操纵和访问的DOM元素已经被加载完了：

<!doctype html>
<html>
 <head>
 <meta charset="utf-8">
 <title>.ready() tutorial</title>
 <script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
 <script>
  $(function(){ // .ready() callback, is only executed when the DOM is fully loaded
  var length = $("p").length;
  // The following will log 1 to the console, as the paragraph exists.
  // This is the evidence that this method is only called when the
  // DOM is fully loaded
  console.log(length);
  });
 </script>
 </head>
 <body>
 <p>I'm the content of this website</p>
 </body>
</html>

原生JavaScript ready()替代

对于现代浏览器以及IE9+，你可以通过监听 DOMContentLoaded 事件实现ready()公式声明:

これは、セレクターがready()に接続されていないためであり、非効率であるだけでなく、ブラウザエンジンがこのメソッドの動作について誤った想定を行う原因になります。

readyイベントとloadイベントの違い

readyイベントは、DOMがロードされ、要素に安全にアクセスできるときにトリガーされます。一方、load イベントは、DOM とすべてのリソースがロードされた後にトリガーされます。次のようにロードイベントを使用できます:

<!doctype html>
<html>
 <head>
 <meta charset="utf-8">
 <title>.ready() tutorial</title>
 </head>
 <body>
 <p>I'm the content of this website</p>
 <script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
 <script>
  var length = $("p").length;
  // The following will log 1 to the console, as the paragraph exists.
  console.log(length);
 </script>
 </body>
</html>

この場合、DOM 構造に完全にアクセスできるようになるまで待つ必要があるだけでなく、すべての画像リソースが完全にロードされるまで待つ必要もあります (読み込み関数が実行されるまでの時間は画像ファイルのサイズによって異なります)。

通常の DOM 操作にはロードイベントは必要ないかもしれませんが、たとえば、すべてのリソースがロードされる前に回転ローダースタイルを表示したい場合や、JS を使用して画像のサイズを計算したい場合は、これが必要になる可能性があります。良い選択。 🎜🎜🎜🎜jQuery.ready() は必要ない場合があります🎜🎜🎜🎜ready メソッドは、すべての DOM 要素が安全に操作できる場合にのみコードが実行されるようにします。しかし、これは何を意味するのでしょうか？つまり、実行したい JS コードが HTML の特定のフラグメントに埋め込まれている場合、ブラウザは実行前に次の要素も読み込む必要があります。 🎜🎜次の例のように:🎜

document.addEventListener("DOMContentLoaded", function(){
 // Handler when the DOM is fully loaded
});

🎜javascript🎜を実行する場合、コードは次の場所に配置されます。本文最後に、ready() メソッドを使用する必要はありません。これは、操作およびアクセスしようとしている DOM 要素は、ブラウザが JavaScript を解析するときにすでに読み込まれているためです: 🎜

var callback = function(){
 // Handler when the DOM is fully loaded
};
if (
 document.readyState === "complete" ||
 (document.readyState !== "loading" && !document.documentElement.doScroll)
) {
 callback();
} else {
 document.addEventListener("DOMContentLoaded", callback);
}

🎜🎜🎜ネイティブJavaScriptのready()の代替🎜🎜🎜🎜最新のブラウザとIE9以降では、DOMContentLoadedイベントをリッスンすることでready()と同じ機能を実現できます: 🎜

document.attachEvent("onreadystatechange", function(){
 // check if the DOM is fully loaded
 if(document.readyState === "complete"){
 // remove the listener, to make sure it isn't fired in future
 document.detachEvent("onreadystatechange", arguments.callee);
 // The actual handler...
 }
});

🎜 ただし、次の点に注意してください。イベントがすでに発行されている場合、コールバックは実行されません。コールバックが常に実行されるようにするために、jQuery はドキュメント参照の "readyState" プロパティをチェックし、プロパティ値が変更されて完了した場合はすぐに 🎜コールバック関数 🎜 を実行します。 🎜rrreee🎜 には、このソリューションを実装した domReady ライブラリが含まれています。 🎜🎜🎜🎜古いバージョンの🎜IEブラウザ🎜🎜🎜🎜🎜ブラウザIE8以下の場合、onreadystatechangeイベントを使用してドキュメントのreadyState属性を監視できます: 🎜

document.attachEvent("onreadystatechange", function(){
 // check if the DOM is fully loaded
 if(document.readyState === "complete"){
 // remove the listener, to make sure it isn't fired in future
 document.detachEvent("onreadystatechange", arguments.callee);
 // The actual handler...
 }
});

或者你可以使用Load事件，如jQuery，这样可以在任何浏览器上运行。这也会导致一个时间延迟，因为它会等待所有的资产被加载。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

JS を jQuery の Read() メソッドに置き換える方法

関連記事