jQuery
jQueryはJavaScriptのライブラリの1つです。
ユーザーのクリックに反応して表示されるフォームや、
アニメーションなど、HTMLとCSSだけでは実現できなか
った様々な動きを表現することができます。

jQueryの書き方
jQueryの操作は非常に直感的かつシンプルです。
jQueryの使い方は、①jQueryオブジェクトを作成し、
②そのjQueryオブジェクトに対してメソッド（機能）を呼び出す、
という2つが基本になります。

$("セレクタ").メソッド(引数);  ←セレクタで何を。メソッドでどうするか。

例
$("h1").hide();


jQueryオブジェクト
jQueryオブジェクトは$('セレクタ')とするだけで作成できます。
セレクタにはHTMLのタグ名やclass名などを指定し、
それに合致したHTMLの要素がjQueryオブジェクトになります。
セレクタはCSSセレクタ（CSSで使用するセレクタ）と同じなので
CSSの知識さえあれば直感的に操作できます。

jQueryメソッド
メソッドとは、便利な機能のことです。
jQueryのメソッドは前述のjQueryオブジェクトでしか
利用できません。メソッドを使うと、
jQueryオブジェクトの内容（HTMLの要素）を変更したり、
アニメーションをつけたりすることができます。
メソッドは$('セレクタ').メソッドというように、
ドットに続けて呼び出します。


classとidをセレクタにする
classとidをセレクタにするには
CSSのセレクタと同様にclass名の前にはドット（.）
id名の前にはシャープ（#）を用います。
idは同一ページに一箇所しか存在しないので、
jQueryの処理が高速化されます。セレクタにはなるべくidを使おう。

例
$("#list-item").css("color","red");


要素を隠す

hideメソッド
$("h1").hide();

アニメーション付きで要素を隠す
fadeOutメソッド
fadeOutメソッドを用いると、要素を隠す際に
アニメーションを付けることができます。
fadeOutメソッドは、後ろの()内に引数として
アニメーションの速度を指定できます。
ミリ秒での指定や、文字列での指定が可能です。
（slideUpメソッドを用いても、
アニメーション付きで要素を隠すことができます。
fadeOutと異なるアニメーションを実現できます。）

$("セレクタ").fadeOut();

例
$("img").fadeOut(1500);



要素を表示
displayプロパティ
隠れた要素を表示するメソッドとして、
showメソッドがあります。表示したい要素に対し、
$('セレクタ').show();と指定で隠れた要素を表示できます。
hideメソッドと合わせてセットで覚えるとよいでしょう。

例
$("img").show();

アニメーション付きで要素を表示
fadeOutの反対としてfadeInメソッド、
slideUpメソッドの反対としてslideDownメソッドがあります。
どちらもアニメーション付きで隠れた要素を表示できます。
また、アニメーション付きの場合、アニメーション速度を
slowで「ゆっくり」指定もできる。

例
$("セレクタ").fadeIn("slow");


イベント
イベントを用いると、ある処理を行うタイミングを設定できます。
WEBページ内で、ユーザーによってクリックなどの操作が行われた時、あらかじめイベント内に指定した処理を実行します。
イベントの構文は、$('セレクタ').イベント名(function(){ });の
ように書きます。

$("セレクタ").イベント名(function(){
    イベント発生時に実行させたい処理
});


clickイベント
clickイベントを用いると、
「セレクタがクリックされた時に処理をする」ことができます。
例えば、ボタンをクリックしたときに関連する文章を表示する、
といったイベントを設定できます。下図の例では、
ボタンをクリックすると文章を隠すというイベントを作成しています。

例
$("#hide-text").click(function(){
    $("#text").hide;                ←#hide-textがクリックされた時に#textを隠す
});


CSSメソッドとは
CSSメソッドは、CSSを変更できるメソッドです。
1つ目の引数にCSSのプロパティを、
2つ目の引数にプロパティの値をいれます。

$("セレクタ").css("プロパティ名","値");


cssメソッドの具体例を見てみましょう。
cssメソッドで要素の文字の色を変更したいときは、
$('セレクタ').css('color', 'red');のように記述します。
widthやfont-sizeなど他のプロパティもすべてcssメソッドで
変更することができます。下記は色を変えている。

$("p").css("color","red");


cssメソッドで要素を隠す、表示する
cssメソッドでdisplayプロパティの値を変更することもできます。
$('セレクタ').css('display', 'none');はhideメソッドと全く
同じです。このようにhideメソッドやshowメソッドは、
実はdisplayプロパティの値を変更しているだけということ
覚えておきましょう。

$("p").css("display","none");      ←pを隠す
$("p").css("display","block");     ←pを表示


例
$(function() {
    $('#change-css').click(function() {
        $('#text').css('color', 'red');
        $('#text').css('font-size', '50px');
    });
});


HTMLを変更する
①textメソッド
jQueryはCSSだけでなく、textメソッドを用いることで
HTMLそのものを変更することも出来ます。
textメソッドは、$('セレクタ').text('書き換える文字列');
のように記述します。

例
$("p").text('こんばんは');    ←pの文字をこんばんはに変更する


②htmlメソッド
htmlメソッドは、要素の中身のHTMLを書き換えることが出来ます。
textメソッドと違い、htmlメソッドの引数は、単なる文字列では
なくHTMLだということです。例えば下図の例をtextメソッドで
行うと、<span>タグもそのまま文字列としてブラウザに表示され
ますが、htmlメソッドなら<span>タグがHTMLタグと認識され
ブラウザには「こんばんは」とだけ表示されます。

$("p").html("<h1>こんばんは</h1>");  


thisの構文
$(this)はイベントの中で、そのイベントが起こった要素を
取得することができます。$()の中でthisをクォーテーショ
ン（"や'）で囲まないことに注意してください。$(this)は
非常に重要な概念なので覚えておきましょう。
例えば下図のように、複数存在するli要素にclickイベント
が設定されていた場合、クリックされた時に、実際にクリッ
クされたli要素にだけ処理を行いたい場合があります。この
ようなときはthisを用いて、実際にイベントが起こった要素
を取得しましょう。


$("li").click(function(){
    $(this).css("color","red");
});


変数を使おう
同じjQueryオブジェクトを複数回使用する時は変数にしましょう。
コードが見やすくなる上、jQueryの処理が高速化されます。
JavaScriptと同じく、jQueryで変数宣言にはvarを用います。
変数には文字列や数値、jQueryオブジェクトなどを格納す
ることができますが、jQueryオブジェクトを格納する時は、
わかりやすいように変数の頭に$を付けるのが慣例となっています。

var $変数名 = $("変数にしたいもの");

例
$("div").css("color","red");
$("div").html("waai");
$("div").fadeOut();
↓
var $div = $("div");
$div.css("color","red");
$div.html("waai");
$div.fadeOut();



メソッドチェーンを使おう
同じjQueryオブジェクトを複数回使用する時は、
メソッドチェーンを用いても処理を高速化できます。 
メソッドチェーンとは1つのjQueryオブジェクトに連続して
メソッドが利用できる構文です。
$('セレクタ').メソッド().メソッド()...のように書くことで、
ドットに続けてそれぞれのメソッドを呼び出す。

$("div").css("color","red").html("jQuery");

例
$(function() {
    $('.btn').click(function() {
        var $title = $('#title');
        $title.css('color', 'red');
        $title.html('こんばんは、にんじゃわんこさん');
        $title.fadeOut(1000);
        $('#text').css('color', 'blue').html('<h3>jQueryをマスターしましょう！</h3>').fadeOut(1000);
    });
});


子要素を取得しよう
①findメソッド
findメソッドは、すべての子孫要素(自分よりも下の階層の全要素）の中から、
指定したセレクタを持つ要素を取得したいときに用います。
下図の例では、<div id="wrapper">から</div>の中にあるすべての<a>要素
を取得することができます。

②childrenメソッド
childrenメソッドは、指定したセレクタが持つ子要素（一階層だけ下）の中から
指定したセレクタに合致した要素を取得したいときに用います。
下の例では<div id="wrapper">の子要素は<a>と<p>なので<a>タグが1つ取得
されます。


$(function() {
    $('#find-method').click(function() {
      $('#wrapper').find('a').css('color', 'red');
    });
    $('#children-method').click(function() {
      $('#wrapper').children('a').fadeOut();
    });
  });


  hoverイベント
  
hoverイベントとは、要素にマウスが乗った時、
外れた時に指定した処理を行うイベントです。
clickイベントと違い、引数を2つ書くことに注意しましょう。
引数の間はコンマで区切ります。


$('セレクタ').hover(
    function(){
        マウスをのせた時の処理
    },
    function(){
        マウスをはずした時の処理
    }
);

例
$(function() {
    $('#language-wrapper').hover(
      function() {
        $('.language-text').fadeIn();
      },
      function() {
        $('.language-text').fadeOut();
      }
    );
  });