Search on the blog

2012年3月1日木曜日

jQueryチートシート

 いつも同じようなことを調べている気がしたのでまとめました。自分用チートシート。

セレクタの指定方法

表記意味
$("#hoge")idがhogeのオブジェクト
$(".hoge")クラス名がhogeのオブジェクト
$("div")divタグ
$("div.hoge")クラス名がhogeのdivタグ
$("p")pタグ
$("p.hoge")クラス名がhogeのpタグ
$("*")すべてのタグ
$("div,span,p")divタグとspanタグとpタグ
$("div p") divの子孫のpタグ
$("div>p")divの子のpタグ(※直接の子タグだけ。孫以下は含まない。)
$("div+p")divの直後にあるpタグ
$("div", this)thisの子孫のdivタグ
$("div", $(this).parent())thisの親の子孫のdivタグ(※同様に、siblings()やprev()などでthisの○○の△△という指定ができる。)


DOM操作

メソッド意味
html("val")指定した要素にvalをセットする。(セットした文字列はHTMLとして解釈される。)
text("val")指定した要素にvalをセットする。(セットした文字列はplain textとして解釈される。)
append("val")指定した要素にvalを追記する。(追記した文字列はHTMLとして解釈される。)

スタイルシート操作


メソッド意味
css("color", "red")指定した要素の文字色を赤に変更する。
css("background-color", "blue")指定した要素の背景色を青に変更する。
css({ "color" : "red", "background-color" : "blue"});指定した要素の複数のプロパティを一括変更する。
addClass("hoge")指定した要素にhogeクラスを追加する。
removeClass("hoge")指定した要素からhogeクラスを取り除く。
toggleClass("hoge")指定した要素にhogeクラスがあれば取り除く。無ければ追加する。

イベント処理


メソッド意味
ready(function(){//処理})DOMがロードされたときに実行する処理を指定する。
click(function(){//処理})指定した要素がクリックされたときに実行する処理を指定する。(※ready()内に書くこと。以下のコールバック指定も同様。)
mouseover(function(){//処理})指定した要素にマウスオーバーしたときに実行する処理を指定する。
mouseout(function(){//処理})指定した要素にマウスアウトしたときに実行する処理を指定する。
hover(function(){//処理1}, function(){//処理2})マウスオーバーしたときの処理を処理1に、マウスアウトしたときの処理を処理2に指定する。

非同期通信


メソッド意味
load("file")指定した要素にファイルから読み込んだ値をセットする。
jQuery.get("url","data",function(){//処理})urlにgetで値dataを送信し、帰ってきた内容に対してコールバック関数で設定した処理を適用する。
jQuery.post("url","data",function(){//処理})urlにpostで値dataを送信し、帰ってきた内容に対してコールバック関数で設定した処理を適用する。

0 件のコメント:

コメントを投稿