HOWTO · jQuery
ページ読み込み後に jQuery を実行する
このチュートリアルでは、ページの読み込み後に jQuery を実行する方法を示します。
このチュートリアルでは、ページの読み込み後に jQuery を実行する方法を示します。
ページを読み込んだ後に jQuery コードを実行するには、2つの方法を使用します。 1つは ready() メソッドで、もう 1つは load イベントを伴う on() メソッドです。
read() を使用して、ページの読み込み後に jQuery を実行する
jQuery の ready() メソッドは、完全にロードされた DOM の後でのみ jQuery コードを実行します。 ready() は組み込みの jQuery メソッドで、DOM が完全にロードされた後に jQuery コードを呼び出します。 画像や動画などの重いファイルが完全に読み込まれるのを待ちません。
ready() メソッドは、<body onload = ""> イベントでは使用されません。 このメソッドの構文は次のとおりです。
$(document).ready(function)
ready() メソッドは、現在のドキュメントに対してのみ使用できます。この関数は、ページが読み込まれた後に実行する jQuery コードです。 この方法の例を試してみましょう。
<!DOCTYPE html>
<html>
<head>
<title> jQuery ready() function </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#h1").css({"font-size": "80px", "color": "lightblue", "background": "darkblue", "fontWeight": "bold"});
$("#h2").css({"fontSize": "50px", "fontWeight": "bold", "color": "lightblue"});
$("#para").css({"color": "blue"});
});
});
</script>
</head>
<body>
<h1 id = "h1"> Delftstack.com </h1>
<h2 id = "h2"> Example of $(document).ready() from Delftstack. </h2>
<p id = "para"> </p>
<p> This is an example for ready() method in jQuery </p>
<button> After Page Load </button>
</body>
</html>
ご覧のとおり、ここでは click イベントを使用しています。 この クリック は、DOM がロードされた後にのみ機能します。
出力を参照してください。
on() を使用して、ページの読み込み後に jQuery を実行する
on() メソッドを load イベントと共に使用して、ページの読み込み後に jQuery コードを実行できます。 load を使用した on() メソッドは、画像や動画などの重いオブジェクトを含むページ全体が読み込まれるときに機能します。
on() メソッドは、さまざまな操作のための組み込みの jQuery メソッドです。 このメソッドの構文は次のとおりです。
$(selector).on(event, childSelector, data, function, map)
どこ：
eventは必須パラメーターです。 私たちの場合、それはloadになります。childSelectorは、イベントが関連付けられる子要素を指定するためのオプションのパラメーターです。dataは、イベントがトリガーされたときに渡されるデータに使用されるオプションのパラメーターでもあります。functionは、イベントがトリガーされたときに呼び出されるオプションのパラメーターでもあります。mapはイベントマップです。
それでは、ページがロードされた後に jQuery コードを実行する on() メソッドの例を試してみましょう。
<!DOCTYPE html>
<html>
<head>
<title>jQuery on(load) method</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<h1 id = "h1"> Delftstack.com </h1>
<h2 id = "h2"> Example of $(document).ready() from Delftstack. </h2>
<p id = "para"> </p>
<p> This is an example for ready() method in jQuery </p>
<button> After Page Load </button>
<script type="text/javascript">
$(window).on('load', DemoFunction());
function DemoFunction() {
$("#h1").css({"font-size": "80px", "color": "lightblue", "background": "darkblue", "fontWeight": "bold"});
$("#h2").css({"fontSize": "50px", "fontWeight": "bold", "color": "lightblue"});
$("#para").css({"color": "blue"});
}
</script>
</body>
</html>
上記のコードは、ページが完全に読み込まれたときに CSS の変更を行います。 出力を参照してください。
