トップページ -> 研究道具箱と教材 -> JavaScript を用いた Web ページ作成 -> jQuery のインストール
[サイトマップへ]  

jQuery のインストール

http://jquery.com とは,・・・.

Web サーバは使わずに,パソコンにファイルを置いていろいろと試してみる.


jQeury のダウンロード

  1. jQuery の Web ページを開く

    http://jquery.com

  2. Download」をクリック

  3. Tutorials」をクリック

  4. Getting Started with jQuery」をクリック

  5. Downloading jQuery」をクリック

  6. ダウンロードしたいので,「http://code.jquery.com/jquery-1.4.2.min.js」をクリック

  7. Web ブラウザで,前のページに戻る

  8. ダウンロードしたいので,「jQuery Starterkit」をクリック

  9. ダウンロードした jquery-1.4.2.min.js は jquery.js という名前でコピー

  10. ダウンロードした Jquery-starterkit.zip は展開

    展開すると,jquery-starterkit という名前でディレクトリができる.

  11. ファイル jquery,js を jquery-starterkit/starterkit の下にコピー

    これで,「スターターキット」の準備ができた.

  12. Web ブラウザで starterkit.html を開く

  13. 次のような画面が現れる.

    これでダウンロードはうまくいったことが確認できる.


「スターターキット」を使った演習

■ 最初,custom.js は次のようになっています(つまりです). この custom.js を書き換えて,jQuery のいろいろな機能を試してみます

■ クリック時のアラート表示

例えば,a 要素のクリック時に,アラート (alert) 表示


jQuery(document).ready(function() {
 $(document).ready(function() {
   $("a").click(function() {
     alert("Hello world!");
   });
 })
});
 

■ 実行結果の例

どこでもいいのでリンクをクリックすると,アラートが出る.

■ クラスの追加

#orderedlist」と記述しているので,idorderedlistであるものが対象になる.

■ 要するに,タグの中で「id="orderedlist"」と書いている部分にマッチするということ.

それを,スタイルシートに記述された クラス「red」に変化させる(だから赤く表示される).starterkit のファイル screen.css にすでにクラス「red」が記述済みであることに注意.


jQuery(document).ready(function() {
 $(document).ready(function() {
   $("#orderedlist").addClass("red");
 });
});

■ 実行結果の例

今度は「blue」も追加.


jQuery(document).ready(function() {
 $(document).ready(function() {
   $("#orderedlist").addClass("red");
   $("#orderedlist > li").addClass("blue");
 });
});

■ 実行結果の例

最終要素への hover 時のクラスの追加

li:last」なので,li の最終要素


jQuery(document).ready(function() {
 $(document).ready(function() {
   $("#orderedlist li:last").hover(function() {
     $(this).addClass("green");
   },function(){
     $(this).removeClass("green");
   });
 });
});

■ 実行結果の例

「3. Third element」にマウスカーソルを合わせると色が変わる

■ 繰り返し処理とクラスの追加

まずは,繰り返し処理の例。

.find("li").each(function(i)」なので,繰り返し処理


$(document).ready(function() {
  $("#orderedlist").find("li").each(function(i) {
    $(this).append( " BAM! " + i );
  });
});

■ 実行結果の例

「BANG ...」のような文字列が追加されている.

繰り返し処理,フィルタ

ある文字をクリックすると,フォームデータが消えるような処理.


jQuery(document).ready(function() {
 $(document).ready(function() {
   // use this to reset several forms at once
   $("#reset").click(function() {
     $("form").each(function() {
       this.reset();
     });
   });
 });
});

■ 実行結果の例

「Reset!」をクリックするとデータが消える.

not を用いた除外

not を使い処置対象を除外.下記の例では,ul 要素をに持つもの除外している。


$(document).ready(function() {
  $("li").not(":has(ul)").css("border", "1px solid black");
});

■ 実行結果の例

「Li with child ul」は除外ざれている.

XPath の例

XPath を書いて要素を指定.「[name]」の部分が XPath


$(document).ready(function() {
   $("a[name]").css("background", "#f00" );
 });

■ 実行結果の例

「Go to button」の行のみが色が変わる.

親要素


$(document).ready(function(){
  $("a").hover(function(){
    $(this).parents("p").addClass("highlight");
  },function(){
    $(this).parents("p").removeClass("highlight");
  });
});

■ 実行結果の例


テーブルのソート

書きかけ


<script src="jquery.tablesorter.js"></script>


$(document).ready(function(){
  $("#large").tablesorter();
});


$(document).ready(function() {
  $("#large").tablesorter({
    // striping looking
    widgets: ['zebra']	
  });
});