◆jQueryの基本的な形
jQueryの基本的な形は$("セレクタ").メソッド(引数);
で表せる。
なお、$()だけでもオブジェクトは取得できる。
◆セレクタとは
セレクタとはHTMLタグ(H3やPなど)や、そのタグに付与されたIDを指す。もっと言えば、HTMLソース上の要素を特定するために指定する。
◆メソッド(またはプロパティ)とは
次にメソッドとは、どんな処理をするか?を表す。「マウスオーバーしたとき(hover)」や「クリックしたとき(click)」などのイベントを指定したり、
「要素を付与する(add)」や「CSSを設定する(css)」などの変更内容を指定したりする。
全般的にメソッドと書くとやや語弊がある。
情報を取得する(要素数を取得するlengthなど)ものは「プロパティ」と呼ぶ。
◆引数とは
最後の引数は、引数を必要とするメソッドの場合に指定する。CSSの要素を指定する場合や、toggleメソッドの描画速度などを指定する。
◆セレクタの種類
サンプルコード | セレクタの種類 | 説明 |
---|---|---|
$("p") | 要素セレクタ | HTMLタグの要素を選択 |
$("#top-table") | IDセレクタ | ID属性が指定した値と一致する要素を選択 |
$(".class1") | クラスセレクタ | CLASS名(例:class1)の要素を選択 |
$("li a") | 子孫セレクタ | 先祖要素(例:li)を持つ、子孫要素(例:a)を選択 |
$("#top-table, #buttom-table") | グループセレクタ | 指定したセレクタにマッチする要素をまとめて選択 |
$("h2 + h3") | 隣接セレクタ | 前後関係になっている後方(例:h3)の要素を選択 |
$("li > ul") | 子セレクタ | 親要素(例:li)を持つ子要素(例:ul)を選択 |
$("p").siblings() | 兄弟セレクタ | 指定した要素の兄弟で、それに続く要素を選択 |
などがある。
その他にもいろいろなセレクタがあるので、
詳細は本家のリファレンス(http://api.jquery.com/category/selectors/)を参照した方が良い。
日本語訳されたサイトもあるが、各人が開発中のバージョンと異なる場合もあるので閲覧するときは注意が必要。
◆メソッドの種類
「CSSを操作するメソッド」、「HTMLの属性を操作するメソッド」、
「描画(エフェクト)に関するメソッド」などがある。
上にも書いたが、
オブジェクトの属性情報を取得するものは「プロパティ」と呼ぶ。
・CSSを操作するメソッド・・・例:css()メソッド
上のセレクタの説明の背景色を奇数行のみ変更します。
$("table#stripe-table tr:odd").css("background", "#FF2222");
・HTMLの属性を操作するメソッド・・・例:text()メソッド
ここに書いてある文字を変更します。
$("#text_chg").text("文字は書き換わりましたか??");
・描画(エフェクト)に関するメソッド・・・例:toggle()メソッド
ここのエリアを閉じます。
ちなみに、toggle()内の"slow"が引数に当たる。
ちなみに、toggle()内の"slow"が引数に当たる。
$("#toggle_chg").toggle("slow");
その他にも多くのメソッドが存在します。
今後学んでいく課程で少しずつまとめていきたいと思います。