jQuery概要

——edted by李家優
原文の住所:http://javascript.ruanyifeng.com/jquery/basic.html
jQueryは現在最も広く使われているJavaScript関数ライブラリです。統計によると、世界57.5%のウェブサイトでjQueryが使われており、JavaScript関数ライブラリを使ったウェブサイトでは、93.0%がjQueryを使用している。開発者が習得しなければならないスキルになりました。
jQueryの最大の強みは二つあります。まず，基本的にはDOM操作ツールであり，DOMオブジェクトの操作を非常に容易にすることができる。第二に、別のブラウザのAPIインターフェースを統一しています。コードはすべての現代のブラウザで実行できます。開発者はブラウザ間の違いを心配しなくてもいいです。
jQueryのロード
普通は次のような書き方をして、ホームページにjQueryをロードします。

<span class="na" style="color:rgb(166,226,46)">type=</span><span class="s" style="color:rgb(230,219,116)">"text/javascript"</span> <span class="na" style="color:rgb(166,226,46)">src=</span><span class="s" style="color:rgb(230,219,116)">"//code.jquery.com/jquery-1.11.0.min.js"</span><span class="nt" style="color:rgb(249,38,114)">>

window.jQuery || document.write('<\/script>'</span><span class="p" style="">)</span>
<span class="nt" style="color:rgb(249,38,114)">

上のコードには2つの注意が必要です。一つはCDNローディングを採用することです。CDNのロードが失敗したら、ローカルローディングに戻ります。第二に、httpプロトコルとhttpsプロトコルをサポートしています。
このコードはホームページの最後に置いたほうがいいです。IE 6/7/8をサポートする必要があれば、jQuery 1.x版を使用します。そうでなければ最新版を使用します。
jQueryベース
jQuery対象
jQueryの最も重要な概念は、jQueryの対象です。これはグローバルオブジェクトです。ドル記号で簡単に書くことができます。つまり、jQueryと米ドルの両方は等価です。
jQuery関数ライブラリをホームページに読み込むと、jQueryオブジェクトが使えます。jQueryの全ての方法は、この対象の上に定義されています。

var listItems = jQuery('li');
// or
var listItems = $('li');

上の2行のコードは等価で、選択されたページのすべてのli要素を表します。
jQueryコンストラクター
jQueryオブジェクトは本質的には構築関数であり、主な役割はjQueryオブジェクトのインスタンスに戻ることである。例えば、上のコードの表面ではli要素が選択されていますが、実際にはli要素に対応するjQueryのインスタンスが返されます。このようにしてこそ、DOMオブジェクトにjQueryが提供する様々な方法を使用することができるからです。

$('body').nodeType
// undefined

$('body') instanceof jQuery
// true

上のコードによると、jQueryはDOMオブジェクトではないので、DOM属性のnodeTypeはありません。これはjQueryオブジェクトの例を返します。
(1)パラメータとしてCSSセレクタ
jQueryコンストラクタのパラメータは主にCSSセレクタで、上の例のようです。次は別のCSSセレクタの例です。

$("*")
$("#lastname")
$(".intro")
$("h1,div,p")
$("p:last")
$("tr:even")
$("p:first-child")
$("p:nth-of-type(2)")
$("div + p")
$("div:has(p)")
$(":empty")
$("[title^='Tom']")

この本はCSSセレクタについて説明しませんので、本とjQueryの文書を参考にしてください。
（2）DOMオブジェクトをパラメータとして
jQueryコンストラクタのパラメータはDOMオブジェクトでもいいです。jQueryオブジェクトの例にもなります。

$(document.body) instanceof jQuery
// true

上記のコードでは、jQueryのパラメータはCSSセレクタではなく、DOMオブジェクトであり、依然としてjQueryオブジェクトの例を返します。
複数のDOM要素がjQueryオブジェクトに変換される場合、DOM要素を1つの配列に入れて、jQueryコンストラクタを入力することができます。

$([document.body, document.head]) 

（3）HTMLコードをパラメータとする
jQueryコンストラクションに直接HTMLコードを入力すると、戻ってくるのもjQueryの例です。

$('
test')

上のコードはHTMLコードからjQueryのインスタンスを生成しました。CSSセレクタから生成されたjQueryのインスタンスと全く同じです。唯一の違いは、対応するDOM構造が現在の文書に属さないことです。
上のコードも下記のように書くことができます。

$( '
', {
  html: 'test',
  'class': 'greet'
});

上のコードの中で、クラスはjavaScriptの保留字ですので、引用符に入れるしかないです。
（4）2番目のパラメータ
デフォルトでは、jQueryは文書のルート要素（html）をマッチング対象を探す起点としています。検索の起点となるウェブ要素（例えば、あるdiv要素）を指定すると、jQuery関数の2番目のパラメータに置くことができます。

$('li', someElement);

上のコードによると、someElementの対象に属するli元素だけを探しています。some ElementはjQueryオブジェクトの一例であっても良いし、DOMオブジェクトであっても良い。
jQueryコンストラクターが返した結果集
jQueryの核心的な考えは「いくつかのページの要素を先に選択して、それを何らかの処理に移す」ということです。つまり、先に選択してから処理するのがjQueryの基本的な操作モードです。したがって、ほとんどのjQuery操作はセレクタから始まり、選択された結果セットに戻ります。
(1)length属性
jQueryオブジェクトが返された結果セットは、選択されたウェブページ要素のすべてを含む類似の配列のオブジェクトです。このオブジェクトのlength属性を調べて、どれぐらいの結果が選択されているかを知ることができます。

if ( $('li').length === 0 ) {
    console.log('  li  ');
}

上のコードは、ウェブページにli要素がない場合、オブジェクトのlength属性は0に等しいと表しています。これは選択された標準方法があるかどうかをテストすることです。
ですから、jQueryが該当する元素を選択しているかどうかを知りたいなら、次のように書くことはできません。

if ($('div.foo')) { ... }

なぜなら、jQueryコンストラクタは選択されていなくてもインスタンスオブジェクトに戻ります。オブジェクトのブール値は常にtrueです。length属性を使うことが、選択されているかどうかを判断する正しい方法です。

if ($('div.foo').length) { ... }

(2)下付き演算子
jQueryセレクタは同じ配列のオブジェクトを返します。しかし、下付き演算子を用いて取り出した単一のオブジェクトは、jQueryオブジェクトの例ではなく、DOMオブジェクトである。

$('li')[0] instanceof jQuery // false
$('li')[0] instanceof Element // true

上のコードは、下付き演算子が取り出されたのは、Elementノードの例を示しています。したがって、通常は、下付き演算子を使用して、jQueryインスタンスをDOMオブジェクトに転送する。
(3)isの方法
is方法は、選択した結果が条件に合うかどうかを示すブール値を返します。この検証のための条件は、CSSセレクタであっても良いし、関数であっても良いし、DOM要素とjQueryの例であっても良い。

$('li').is('li') // true

$('li').is($('.item')) 

$('li').is(document.querySelector('li'))

$('li').is(function() {
      return $("strong", this).length === 0;
});

(4)get方法
jQueryの例のget方法は、下付き演算子の別の書き方です。

$('li').get(0) instanceof Element // true

(5)eq方法
結果セットでjQueryオブジェクトの一例を取り出す場合、DOMオブジェクトを取り出す必要がない場合、eq方法を使用して、そのパラメータは結果セットにおけるインスタンスの位置である（0から開始する）。

$('li').eq(0) instanceof jQuery // true

eq方法はjQueryの例を返すので、リターン結果にjQueryのインスタンスオブジェクトの方法を使用することができる。
（6）each方法、map方法
これらの2つの方法は、結果セットを巡回するために使用され、各メンバに対して何らかの動作を行う。
each法は一つの関数をパラメータとして受け入れて、セット内の各要素を順次処理します。

$('li').each(function( index, element) {
  $(element).prepend( '' + index + ': ' );
});

// 
Hello
// 
World
//   
// 
0: Hello
// 
1: World

上記のコードから、eachメソッドパラメータの関数として、自身は2つのパラメータがあり、最初は現在の要素のセット内の位置、2番目は現在の要素に対応するDOMオブジェクトであることが分かります。
map方法の使い方はeach方法と全く同じで、each方法は戻り値がないという違いがあります。各要素に対してある操作を行うだけで、map方法は新しいjQueryオブジェクトを返します。

$("input").map(function (index, element){
    return $(this).val();
})
.get()
.join(", ")

上のコードは、すべてのinput要素を順次に値を取り出し、これらの値を含む配列をget法で得て、最後に配列のjin方法でカンマ分割された文字列を返します。
（8）内蔵サイクル
jQueryはデフォルトでは現在の結果集を循環処理していますので、jQueryに内蔵されている方法をそのまま使うと、eachとmapの方法は必要ありません。

$(".class").addClass("highlight");

上のコードは内部ループを実行して、選択した要素ごとにaddClass操作を行います。このため、上の操作にeach方法を加える必要はありません。

$(".class").each(function(index,element){
     $(element).addClass("highlight");
});

//   

$(".class").each(function(){
    $(this).addClass("highlight");
});

上のコードのeachメソッドは、すべて使う必要がありません。
内蔵サイクルの存在により、性能から考えて、必要でない操作ステップをできるだけ減らすべきです。

$(".class").css("color", "green").css("font-size", "16px");

//     

$(".class").css({ 
  "color": "green",
  "font-size": "16px"
});

チェーン操作
jQueryが一番便利なのは、ほとんどの方法でjQueryオブジェクトに戻るので、チェーン操作ができます。つまり、後の方法は前の方法の後に続くことができます。

$('li').click(function (){
    $(this).addClass('clicked');
})
.find('span')
.attr( 'title', 'Hover over me' );

ドル(document).ready()
ドル(document).ready方法は、関数をパラメータとして受け入れ、このパラメータをdocumentオブジェクトのDOMContentLoadedイベントのコールバック関数として使用する。つまり、ページ解析が完了すると