PmTea

jQueryの勉強。。。

とりあえず　つれづれ。。。

〜jQuery 覚え書き〜

・ページが読み込まれたら処理を行う
■$(document).ready();
ショートカット
■$();

・アクセスする。
■$(document.body)
BODYタグにアクセス
■$(“.className”)
class=”className”
■$(document)
function changeTitle(){
$(document).title(new Date());
}
<title>ここにアクセスされるて、日付に変わる</title>

・要素を検索する。
■$(tagName, base)
要素を検索するには2つのパラメーターを指定する。
最初のパラメーター検索するタグ名、2番目のパラメーターには検索する基準位置（ノード）
$(“div”,  document.body);
ボディ−の中にある、DIVを検索してくる。
■$(“tagName > tagName”)
ショートカット
■$(“tagName tagName”")
特定の階層条件（絞り込み）のタグにアクセスする。
$(“div > p”)
divの中のpにアクセスする。
$(“#main>spna”)
ClassやIDにも使える。
■$(tagName).get()
タグの情報を取得して、配列格納されます。

・内容を書き換える
■$(〜).html(text)
$(“div”).html(“書き換え”);
■$(〜).text(text)
$(“div”).text(“書き換え”);
■$(〜).html()
htmll形式で取得してくる。
■$(〜).text()
text形式で取得してくる。

・タグの数を取得
■$(tagName).size()

・繰り返し処理(each)
■$(~).each(func)
$(“li”).echi(function(){
$(“li”).html(変換);
});

・クラス
■$(〜).addClass(className)
クラスの追加。
$(“#main”).addClass(“clearfix”);
ID要素mainにclearfixのクラスを追加。
■$(〜).background(color)
■$(〜).background()
■$(〜).color(color)
■$(〜).color()
■$(〜).float(type)
■$(〜).float()
■$(〜).height(value)
■$(〜).height()
■$(〜).width(value)
■$(〜).width()
■$(〜).left(value)
■$(〜).left()
■$(〜).top(value)
■$(〜).top()
■$(〜).overflow(value)
■$(〜).overflow()
■$(〜).position(value)
■$(〜).position()
■$(〜).removeClass(className)
クラスを削除する。
■$(〜).toggleClass(className)
スタイルシートを交互に切替える。
$(“#main”).toggleClass(“class2″);
<div id=”#main”>切り替え</div>
class1のスタイルシートを取得保持して、class2に置き換わる。

・DOM
■$(element).after(data)
エレメントの後にデータを追加する事ができます。
$(“#main”).after(“文字を追加します。”);
こちらはただ単に追加。
■$(element).append(data)
エレメントの後にデータを追加する事ができます。
$(“#main”).append(“文字を追加します。”);
こちらは要素を引き抜いてきて、追加する。
■$(element).before(data)
エレメントの前に挿入する。
■prepend(content))
引数で指定したコンテンツを各要素の先頭に挿入する。
■prependTo(content)
$(A).prepend(B) とした場合にAにBが挿入されるのに対して、$(A).prependTo(B) ではBにAが挿入される。

・DOM属性参照
■$(〜).attr({attrName: value})
$(“#main > img”).attr({ src : “pic2.jpg”, alt : “ピクチャー2″});
#Mainの中のimg がpic2.jpgの画像に入れ替わる、altも同様に入れ替わる。
■$(〜).attr(attrName, value)
■$(〜).attr()

・エレメントを複製する。
■$(element).clone()
$(“#main”).clone();

■closest([expr])
指定要素から最も近い親要素を選択する。
<div id=”main”>
<ul>
<li></li>
<li></li>
</ul>
</div>
liをクリックするように設定した場合、一番近い親の要素mainを選択します。