ドキュメント

チュートリアル: jQuery の動作の概要

出典: jQuery JavaScript ライブラリ

jQuery、および jQuery を使う上で知っておく必要があるコンセプトの簡単な紹介

オリジナル http://docs.jquery.com/Tutorials:How_jQuery_Works
作者: John Resig.

類似のチュートリアル: jQuery Core, Selectors, CSS, Traversing, Manipulation, Events, Effects

目次

[edit]

jQuery の基礎

このドキュメントは、まだ jQuery を使ったことのないユーザーが jQuery を使い始めることができるようにするための簡単なチュートリアルです。テストページをまだ用意していない場合は、次のような内容で新しい HTML ページを作成してください。 

<!doctype html>
<html>
  <head>
    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">
      
    </script>
  </head>
  <body>
    <a href="http://jquery.com/">jQuery</a>
  </body>
</html>

script タグの src 属性を編集し、jquery.js のコピーがある場所を指すようにしてください。たとえば、jquery.js が HTML ファイルと同じディレクトリにある場合には、次のようにします。 

 <script type="text/javascript" src="jquery.js"></script>

jQuery のコピーは jQuery のダウンロードページからダウンロードできます。

[edit]

ドキュメントが ready になった時点でのコードの実行

たいていの JavaScript プログラマが最初にするのは、プログラムに次のようなコードを追加することです。 

 window.onload = function(){ alert("welcome"); }

関数内部に記述されているのは、ページが読み込まれたときに実行したいコードです。しかしやっかいなことに、JavaScript コードは、すべての画像 (バナー広告なども含みます) のダウンロードが終わるまで実行されません。そもそも、window.onload を最初に使うのは、HTML「ドキュメント」の読み込みがまだ完了していないときにコードを実行したいからです。

このジレンマを回避するために、jQuery では document をチェックし、document を操作できるようになるまで、すなわち ready イベントが発生するまで待機するシンプルなステートメントを用意しています。 

 $(document).ready(function(){
   // ここにコードを記述
 });

ready イベントの内部に、リンクへのクリックハンドラを追加します。 

 $(document).ready(function(){
   $("a").click(function(event){
     alert("Thanks for visiting!");
   });
 });

テストページにハンドラを追加して HTML ファイルを保存し、ブラウザでテストページをリロードします。ページ上のリンクをクリックすると、メインの jQuery ページに移動する前に、ブラウザの警告ダイアログがポップアップされるはずです。

クリックやその他のほとんどのイベントでは、イベントハンドラの中で event.preventDefault() を呼び出すことで、デフォルトの動作 (現在の例では、jquery.com へのリンクをたどる動作) を行わないようにすることができます。 

 $(document).ready(function(){
   $("a").click(function(event){
     alert("As you can see, the link no longer took you to jquery.com");
     event.preventDefault();
   });
 });
[edit]

HTML ファイルでのスクリプトの使用例

次に示すのは、自分の作成したファイルでスクリプトを使う場合、HTML ファイル全体はどのようになるかの実例です。この例では、Google の CDN へのリンクを使って jQuery コアファイルをロードしていることに注意してください。また、この例では独自のスクリプトを <head> 内に組み込んでいますが、一般に望ましいのは、スクリプトを独立したファイルに置いて、このファイルを script 要素の src 属性で参照する方法です。 

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
   <script type="text/javascript">
     $(document).ready(function(){
       $("a").click(function(event){
         alert("As you can see, the link no longer took you to jquery.com");
         event.preventDefault();
       });
     });
     
   </script>
 </head>
 <body>
   <a href="http://jquery.com/">jQuery</a>
 </body>
 </html>
[edit]

HTML クラスの追加と削除

重要: 以後の jQuery の例はいずれも、ドキュメントの操作が可能になった時点で実行できるよう、ready イベントの中に置く必要があります。詳細については、上の「ドキュメントが ready になった時点でのコードの実行」を参照してください。

class の追加 (または削除) も、一般的な操作の 1 つです。

最初に、ドキュメントの <head> にスタイル情報を追加します。たとえば、次のようにします。 

 <style type="text/css">
    a.test { font-weight: bold; }
 </style>

次に、addClass の呼び出しをスクリプトに追加します。 

  $("a").addClass("test");

これで、すべての a 要素がボールドになります。

class を削除するには、removeClass を使います。 

 $("a").removeClass("test");
  • (HTML では、1 つの要素に複数のクラスを追加できます。)
[edit]

特殊効果

jQuery には、Web サイトの見ばえをよくするために手軽に使うことができるエフェクト (効果) がいくつか用意されています。この機能をテストするには、上で追加したクリックハンドラを次のように変更します。 

 $("a").click(function(event){
   event.preventDefault();
   $(this).hide("slow");
 });

今度はリンクをクリックすると、リンクが徐々に消えていくようになるはずです。

[edit]

コールバックと関数

コールバックとは、ほかの関数の引数として渡される関数で、親関数の実行が完了した後に実行されるものをいいます。コールバックが特別なのは、「親」の後に現れる一連の関数を、コールバックが実行される前に実行できる点です。

コールバックについて知っておくべきもう 1 つの重要なことは、コールバックの適切な渡し方です。自分も、正しい構文をよく忘れてしまいます。

[edit]

引数のないコールバック

引数のないコールバックは、次のようにして渡します。 

 $.get('myhtmlpage.html', myCallBack);

2 番目のパラメータが単に関数名になっていること (ただし、文字列ではなく、かっこもないこと) に注意してください。JavaScript の関数は「第一級オブジェクト」なので、変数の参照と同様に渡して、あとで実行することができます。

[edit]

引数のあるコールバック

「渡したい引数があるときはどうすればよいのですか」、きっと今、このような疑問がわいていると思います。実例を示します。

[edit]

間違ったやり方

次に示すのは、間違った方法です (うまく動作しません)。 

 $.get('myhtmlpage.html', myCallBack(param1, param2));


なぜ動作しないかといえば、このコードは次のものを呼び出し、 

myCallBack(param1, param2)

ついで、その戻り値を $.get() の 2 番目のパラメータとして渡すからです。

[edit]

正しいやり方

上の例で問題なのは、myCallBack(param1, param2) が、関数として渡される前に評価されてしまう点です。JavaScript、およびその延長としての jQuery では、このような場合に期待されているのは、setTimeout 関数などの関数へのポインタです。

次に示す例では、無名関数を作成し (単なるステートメントブロック)、これをコールバック関数として登録しています。'function(){' としていることに注目してください。無名関数が行うのは次のことだけ、すなわち、外側のスコープで param1 と param2 の値とともに myCallBack を呼び出すことだけです。 

$.get('myhtmlpage.html', function(){
  myCallBack(param1, param2);
});

param1 と param2 は、'$.get' がページを取得したときに、コールバックとして評価されます。

[edit]

さらに理解を深めるには

jQuery ユーザーによって作成された数々の有益なチュートリアルは、jQuery 初心者がこのライブラリの使い方を学ぶのに大いに役立ちます。もし jQuery ライブラリの特徴が適切に記述されていないと感じたら、遠慮なく私たちにそう言ってください。

おそらくこのページを読んだ後は、ドキュメントのほかの部分を参照することになるでしょう。ドキュメントでは、jQuery のあらゆる側面について非常に詳しく取り上げられています。もし疑問が生じたら、ためらわずにメーリングリストに投稿してください。

Retrieved from "http://docs.jquery.com/Tutorials:How_jQuery_Works"