JavaScriptとJQueryの関数呼び出しの違い
JavaScriptとjQueryの両方で、ページ読み込み後に動的コンテンツを作成する関数を呼び出す方法を示す簡単な例です。
1. JavaScript
ページが読み込まれた後に関数を呼び出すために、JavaScriptは ”
window.onload
“と ”
innerHTML
“を使用してコンテンツを動的に作成します。
window.onload = function(){ document.getElementById('msgid3') .innerHTML = "This is Hello World by JavaScript"; }
2. jQuery
ページが読み込まれた後に関数を呼び出すために、jQueryはコンテンツを動的に作成するために ”
$(document).ready
“と ”
html()
“を使用します。
$(document).ready(function(){ $("#msgid1").html("This is Hello World by JQuery 1<BR>"); });
例
<html> <head> <title>jQuery Hello World</title> </head> <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <body> <script type="text/javascript"> $(document).ready(function(){ $("#msgid1").html("This is Hello World by JQuery 1<BR>"); }); $(function(){ $("#msgid2").html("This is Hello World by JQuery 2<BR>"); }); window.onload = function(){ document.getElementById('msgid3').innerHTML = "This is Hello World by JavaScript"; } </script> This is Hello World by HTML <div id="msgid1"> </div> <div id="msgid2"> </div> <div id="msgid3"> </div> </body> </html>