スポンサーサイト





上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

タグ :

   印刷ボタン       この記事に拍手する       このエントリーをはてなブックマークに追加

Return to page top

  • Comments (Close): -
  • TrackBack (Close): -

ready()関数

  • Posted by: javascriptmania
  • 2011-05-12 Thu 16:24:42
  • jQuery




ready()関数は、jQueryの基本の「き」といっていい重要な関数で、DOMがロードされて操作・解析が可能になったタイミングで実行されます。

前回勉強したGoogleAPIを利用してこの関数を使ってみましょう。

JSSample.html
<html>

<head>

</head>

<body>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js">
</script>
<script type="text/javascript">

jQuery(document).ready(function(){
alert("Hello");
});

</script>


</body>

</html>



まず、Google APIはフルパスで指定しました。

ready()関数の書き方は何種類もあって、今回は一番ていねいな書き方です。

jQuery(document).ready(function(){
処理;
});

Documentがreadyになったらfunction()を行う、といった意味合いになるでしょうか。

次に、jQuery の部分を $ という文字(エイリアスと呼ばれます)に書き換えます。エイリアスとは「別名」という意味です。

<html>

<head>

</head>

<body>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

google.load("jquery", "1");
google.setOnLoadCallback(function() {

$(document).ready(function(){
alert("Hello");
});

});

</script>

</body>

</html>


Google APIは Google.load()で指定しました。

ここで、Google.load()を使う場合の注意点として、jQueryファイルが完全に読み込まれた後にJavaScriptスクリプトが実行されるように google.setOnLoadCallback を使用しなければなりません。

jQueryの関数は、エイリアスを使っています。

ready()関数の書き方は他にもあります。「document」を省く書き方。

$().ready(function(){
   処理;
});



「ready」も省けます。

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

ここまでくると、ほぼ無名関数の書き方ですね。この書き方がわりと一般的なようです。

達人レベルになると、

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

の書き方がよさそうです。

なぜなら、エイリアス $ はprototype.jsのような他のJavaScriptライブラリでも使われているため、複数のライブラリを利用する場合に衝突する可能性がないともいえないからです。

ひと目でjQueryと分かる書き方をすれば、安心していろんなライブラリを利用できます。

関連記事

タグ :

   印刷ボタン       この記事に拍手する       このエントリーをはてなブックマークに追加

Return to page top

Comments:

Comment Form
Only inform the site author.

Trackback+Pingback:

TrackBack URL for this entry
http://javascriptmania.blog111.fc2.com/tb.php/37-34618d61
  • 閉じるボタン
月別アーカイブ
リンク
カテゴリ
RSSリンクの表示
QRコード
QR
最新コメント
最新トラックバック
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。