回答:
あなたは複数のものを持つことができますが、それは常に最も卑劣なことではありません。読みやすさに深刻な影響を与えるため、使いすぎないようにしてください。それ以外は、完全に合法です。以下を参照してください。
http://www.learningjquery.com/2006/09/multiple-document-ready
これを試してください：
$(document).ready(function() {
alert('Hello Tom!');
});
$(document).ready(function() {
alert('Hello Jeff!');
});
$(document).ready(function() {
alert('Hello Dexter!');
});
これと同等であることがわかります。実行の順序に注意してください。
$(document).ready(function() {
alert('Hello Tom!');
alert('Hello Jeff!');
alert('Hello Dexter!');
});
また、ある$(document).readyブロック内で定義された関数を別の$(document).readyブロックから呼び出すことはできません。このテストを実行しただけです。
$(document).ready(function() {
alert('hello1');
function saySomething() {
alert('something');
}
saySomething();
});
$(document).ready(function() {
alert('hello2');
saySomething();
});
出力は：
hello1
something
hello2
複数使用できます。ただし、1つのdocument.ready内で複数の関数を使用することもできます。
$(document).ready(function() {
// Jquery
$('.hide').hide();
$('.test').each(function() {
$(this).fadeIn();
});
// Reqular JS
function test(word) {
alert(word);
}
test('hello!');
});
はい、複数の$（document）.ready（）呼び出しを持つことが可能です。ただし、どのように実行されるかはわかりません。（ソース）
Ready handlers bound this way are executed after any bound by the other three methods above.
はい、可能ですが、div #mydivを使用して両方を使用することをお勧めします
$(document).ready(function(){});
//and
$("#mydiv").ready(function(){});
はい、できます。
複数のドキュメント準備セクションは、他のモジュールがそれを使用する同じページから離れている場合に特に役立ちます。古いwindow.onload=func宣言では、呼び出す関数を指定するたびに、古い関数が置き換えられました。
これで、指定されたすべての関数は、それらが指定されたドキュメント準備セクションに関係なく、キュー/スタックされます（誰かが確認できますか？）。
名前付き関数に切り替えるのがより良い方法だと思います（この問題については、このオーバーフローを確認してください）。そうすれば、単一のイベントからそれらを呼び出すことができます。
そのようです：
function firstFunction() {
console.log("first");
}
function secondFunction() {
console.log("second");
}
function thirdFunction() {
console.log("third");
}そうすれば、それらを単一のレディ関数にロードできます。
jQuery(document).on('ready', function(){
firstFunction();
secondFunction();
thirdFunction();}）;
これにより、以下がconsole.logに出力されます。
first
second
thirdこの方法で、他のイベントに関数を再利用できます。
jQuery(window).on('resize',function(){
secondFunction();
});これは合法ですが、望ましくない動作を引き起こす場合があります。例として、MagicSuggestライブラリを使用して、プロジェクトのページに2つのMagicSuggest入力を追加し、入力の初期化ごとに個別のドキュメント対応関数を使用しました。最初の入力の初期化は機能しましたが、2番目の初期化は機能せず、エラーも発生しませんでした。第2の入力は表示されませんでした。したがって、常に1つのドキュメント準備機能を使用することをお勧めします。
インクルードされたhtmlファイル内にドキュメント対応関数をネストすることもできます。jqueryを使用した例を次に示します。
ファイル：test_main.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>
<body>
<div id="main-container">
<h1>test_main.html</h1>
</div>
<script>
$(document).ready( function()
{
console.log( 'test_main.html READY' );
$("#main-container").load("test_embed.html");
} );
</script>
</body>
</html>ファイル：test_embed.html
<h1>test_embed.html</h1>
<script>
$(document).ready( function()
{
console.log( 'test_embed.html READY' );
} );
</script>コンソール出力：
test_main.html READY test_main.html:15
test_embed.html READY (program):4ブラウザは示しています：
test_embed.html
次の方法でも実行できます。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("#test").hide();
});
$("#show").click(function(){
$("#test").show();
});
});
</script>
</head>
<body>
<h2>This is a test of jQuery!</h2>
<p id="test">This is a hidden paragraph.</p>
<button id="hide">Click me to hide</button>
<button id="show">Click me to show</button>
</body>以前の回答では、単一の.readyブロック内で複数の名前付き関数を使用するか、.readyブロック内で単一の名前なし関数を使用し、.readyブロックの外側で別の名前付き関数を使用することを示しました。.readyブロック内に複数の名前のない関数を含める方法があるかどうかを調べているときに、この質問を見つけました-構文を正しく取得できませんでした。私は最終的にそれを理解し、私のテストコードを投稿することで、私が持っていた同じ質問への答えを探している他の人を助けることを望みました