jQuery使ってみた - Fukusanの日記らしきもの

始めに

皆さんいかがお過ごしでしょうか。
Fukusan(「福さん」でもある)です。
今回、部活のアドベントカレンダーに参加するという形で
生まれて初めて、ブログなるものを書いております。
www.adventar.org

さっそく本題

今回の内容は題名の通り「jQuery」です(今更)。
jQueryについて、ざっくり説明すると、JavaScriptのライブラリーで、
これを使うことによりJavaScriptをより扱いやすくすることが出来ます。
今回は、jQueryの書き方などについて自分の分かる範囲で書いていきたいと思います。

jQueryの読み込み

jQueryを使うには、まずjQueryライブラリーを読み込む必要があります。
読み込み型には、主に次の2つがあります。

Web上からソースを読み込む
ダウンロードしてローカルから読み込む

まず、1の方法から

読み込みたいHTMLソースに以下のように書き込むだけ

例(jQuery1.9.1を読み込む)
※JavaScriptを読み込む(書き込む)前に書き込んでください

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

次に、2の方法

まず、jQueryの公式サイト
http://jquery.com/download/(公式サイト)
から、jQueryライブラリーをダウンロードします。
バージョンはjQuery1.x系と、jQuery2.x系がありますが、jQuery2.x系は、IE6,7,8をサポートしていません。
なので、理由がないのなら、jQuery1.x系でいいと思います。
次に、HTMLに読み込みます。
以下のようなソースを読み込みたいHTML に書き込みましょう。
※JavaScriptを読み込む(書き込む)前に書き込んでください

<script type="text/javascript" src="格納場所/jquery.min.js"></script>

jQueryの書き方

基本形

まずは、jQueryの基本形です。

$(function(){
  // 内容
});

これは、「内容」をhtmlを読み込んでから処理を実行する
という意味です。

「要素」を選択する

要素を選ぶ部分を「セレクタ」と言います、jQueryのセレクタの書き方はcssのセレクタと似ています。
ここでは、基本的なセレクタを紹介します。

$(function(){ 
  $('#element').click(function(){
    $(this).text("クリックされたよ～");
  });
});
/*このプログラムで言う$('#element')の部分のこと*/

idセレクタ

$(function(){
  /*id="element"の要素を選択する*/
  $('#element').click(function(){
    $(this).text("クリックされたよ～");
  });
});

classセレクタ

$(function(){
  /*class="element"の要素を選択する*/
  $('.element').click(function(){
    $(this).text("クリックされたよ～");
  });
});

要素セレクタ

$(function(){
  /*p要素を選択する*/
  $('p').click(function(){
    $(this).text("クリックされたよ～");
  });
});

子孫セレクタ

$(function(){
  /*div内のp要素を選択する*/
  $('div p').click(function(){
    $(this).text("クリックされたよ～");
  });
});

実行するタイミングを書く

実行するタイミングを決める部分を「イベント」と言います。
ここでは、基本的なマウス操作関係のイベントを紹介します。

$(function(){
  $('#element').click(function(){
    $(this).text("クリックされたよ～");
  });
});
/*このプログラムで言う.click()の部分のこと*/

クリックイベント

$(function(){
  $('#element').click(function(){
    $(this).text("クリックされたよ～");
  });
});

マウスオーバーイベント

$(function(){
  $('#element').mouseover(function(){
    $(this).text("マウスカーソル乗ったよ～");
  });
});

マウスアウトイベント

$(function(){
  $('#element').mouseout(function(){
    $(this).text("マウスカーソル降りたよ～");
  });
});

実行する処理を書く

jQueryでは、要素のcssを書き換えたり、要素を動かしたり、要素を追加したりなど、様々な処理をする事ができます。
ここでは、その中からいくつかを紹介します。

$(function(){ 
  $('#element').click(function(){
    $(this).text("クリックされたよ～");
  });
});
/*このプログラムで言う.text()の部分のこと*/

cssを変更する(ここでは、背景色を変更しています)

$(function(){ 
  $('#element').click(function(){
    $(this).css("background-color","#fff");
  });

要素を動かす(ここでは、要素を500ミリ秒かけて、leftを50pxの位置に不透明度を1に変化させています)

$(function(){ 
  $('#element').click(function(){
    $(this).animate({
      left: 50, opacity: 1
    },500);
  });

要素を追加する(ここでは、id="#element"の要素の後に新しいdiv要素を作っています)

$(function(){ 
  $('#element').click(function(){
    $(this).after('<div>test</div>');
  });
});

最後に

簡単な説明でしたが、jQueryについて、少しでも興味を持っていただけたら幸いです。
この記事に書いた内容は、jQueryの書き方のほんの一部です。
もし、興味を持っていただけたのなら、ぜひ自分で調べて、書いて、学んでください。
ここに書いていない、新しいjQueryの書き方に出会うことができると思います。