jQueryの実行タイミング

jQueryは基本的に.ready()という関数を使用して実行させます。
それは何故かというと、
ブラウザは通常HTMLのソースコードを上から下の順に読み込んで表示させます。
下記のようなHTMLがある場合、<p class=”blue”>表示内容</p>の部分が表示されてから、
jQueryが実行されます。


<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”js/jquery.min.js”></script>
$(document).ready(function(){
    jQueryの処理
});
<title>無題ドキュメント</title>
</head>
<body>
<p class=”blue”>表示内容</p>
</body>
</html>


例えば<p class=”blue”>のCSSの要素をjQueryで変えたい場合、
先にjQueryを実行させると、<p class=”blue”>の要素が見つからない事になり、
jQueryが実行されません。


ですのでjQueryをページ読み込みの最後に実行させるということが、
基本となっています。


.ready()の関数は下記のようにも省略できます。


$(function(){
    jQueryの処理
});


もし、ページ読み込み完了前にjavascriptを実行させたい場合は、
普通のJavaScriptの書き方で実行させるという手もあります。
<script type”text/javascript”>
alert(“Hello”)
</script>

投稿者:

kishiken

企業務めのWEBデザイナーです。