2015年5月9日土曜日

jQueryを基本から学ぶ

◆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_chg").toggle("slow");


その他にも多くのメソッドが存在します。
今後学んでいく課程で少しずつまとめていきたいと思います。

Previous Post
Next Post

post written by: