- jQuery(セレクタ)は対応する要素を取得するために使用されますが、それらの要素は返されません。
- 代わりに、jQueryで構築されたオブジェクトと呼ばれるオブジェクトを返します。
- このオブジェクトは、対応する要素を操作することができます。
- jQueryは新規に追加する必要のないコンストラクタです。
- jQueryオブジェクトは、jQuery関数によって構築されたオブジェクトを指すという口頭での合意。
ウェブ要素の選択
ウェブ要素を選択し、それを使って何かをすること
- 一般的には、コンストラクタjQuery()に選択式を入れ、選択された要素を操作できるjQueryオブジェクトを取得します。
- 式の値は通常
$(document) //ドキュメントオブジェクト全体を選択する
$('#myId') //IDがmyIdのウェブ要素を選択する
$('div.myClass') // myClass クラスを持つ div 要素を選択する
$('input[name=first]') // name属性がfirstに等しい入力要素を選択する
結果セットの変更
- jQueryは、結果セットをフィルタリングするための強力なAPIを提供します。
- 結果セットに関連する要素も操作できます。
$('div').has('p'); // p要素を含むdiv要素を選択する
$('div').filter('.myClass'); //クラスが myClass と等しい div 要素を選択する
$('div').parent(); //div 要素の親を選択する
$('div').children(); //div のすべての子要素を選択する
操作の連鎖
- 最終的にウェブ要素が選択されると、その要素に対して一連の操作を実行することができます。
- 各jQuery操作はjQueryオブジェクトを返すので、異なる操作を連結することができます。
$('div') //div要素を見つける
   .find('h3') //h3要素の1つを選択する
   .eq(2) //3番目のh3要素を選択する
   .html('Hello'); //内容をHelloに変更する
値の要素のオーバーロードと代入
- $
- 値の取得と代入には同じ関数を使用します。
- 「取る側」と「代入する側」がひとつになったもの。関数が値を取るか値を代入するかは、関数のパラメータによって決まります。
- 結果セットには複数の要素が含まれるため、値を代入する場合はすべての要素に代入され、値を取得する場合は最初の要素の値のみを取り出します。
- 例外は .text() で、これはすべての要素のテキスト内容を受け取ります。
$('h1').html(); //html()パラメータなしとは、h1の値を取り出すことを意味する。
$('h1').html('Hello'); //html()パラメータHelloで、つまりh1に値を代入する
要素の移動
- ウェブページ内の要素の動きを操作する2つの方法を提供します。
- 要素を直接動かすか、他の要素を動かして同じ効果を得ます。
//例:要件:p要素をdiv要素に挿入する
1. .append(),p要素をdiv要素に挿入する
$('div').append($('p'))
2. .appendTo(),p要素をdiv要素に挿入する
$('p').appendTo($('div')
- この2つの方法は同じ効果をもたらしますが、異なるのは、異なる視点から操作し、異なる要素を返すという点です。
- 一つ目は div 要素を返します。二つ目は p 要素を返します。
- このモデルには4組の操作方法があります:
  .insertAfter() .after()既存の要素の外側に、後ろから要素を挿入する
  .insertBefore() .before(): 既存の要素の外側に、前面から要素を挿入する
  .appendTo() .append()既存の要素の中に、後ろから要素を挿入する
  .prependTo() .prepend()既存の要素の中に、前方から要素を挿入する。
エレメントの作成、削除、空コピー
- 作成:新しい要素をjQueryのコンストラクタに渡します。
- 削除: と
- 前者は削除された要素のイベントを保持しませんが、後者はドキュメントを再挿入するためにイベントを保持します。
- 空: delete とは異なります。
クロージャで詳細を隠す