前回のメモで書き忘れたことがたくさんあるので、補足しながらさらにメモる。
JQueryが動かない。。。コンフリクトを避ける方法。
前回のメモからの流れと違いますが、かなり重要なのでここらへんに書いておきます。jQueryのコードを前回のメモのように書いていくと「動かない！」って時が必ず来ます。。。すみません。理由はいろいろあると思いますが、ここでは他のライブラリとの競合（コンフリクト）について書きますね。そもそもどのへんがマズいのかというと、
$(document).ready(function(){
// 処理を記述。
});
の「 $() 」の部分ですね。コードは間違ってはないんですよ。。ただこの「 $() 」を他で読み込んだライブラリで使用している場合に動かなくなります。
解決方法としては、$()をjQuery()に変更する。
jQuery(document).ready(function(){
// 処理を記述。
});
他にも、
var $j = jQuery.noConflict();
$j(document).ready(function(){
// 処理を記述。
});
と書いてもオッケーです。
あと、カプセル化という手法もあるそうです。
jQueryをmootoolsなどの他のライブラリと干渉しないようにする方法まとめ
とりあえず覚えておきたいコード
each(callback)
jQueryで使うeachには、$(”セレクタ”).each(callback)とjQuery.each(object, callback)の二つがあるのですが、セレクタを指定してeachをかける前者の方が使用頻度は断然多いと思います。スクリプトを書いたことがある人にはおなじみの処理ですが、たまにつまづくので改めてメモることに。
要は、繰り返し処理の一つなのですが、この場合セレクタで指定したエレメントが見つかるごとに関数を実行します。
その際に、関数内でthisポインタはセレクタで指定した各DOMエレメントを指します。
thisをjQueryオブジェクトとして扱いたい場合は、$(this) とします。
コールバック関数の第一引数に、エレメントセットの中での、ゼロから始まるインデックスを受け取ることもできます。
$("span").click(function () { // スパンをクリックしたら、
$("li").each(function(){ // li が見つかるごとに（すべてのliにってことになる）
$(this).toggleClass("example"); // 見つかった li のクラスにexampleをトグル。
});
});
応用編。上記に追加で、liにindex番号をテキストとして追加したい場合。
$("span").click(function () {
$("li").each(function(index, domEle){
// domEle == this
$(domEle).toggleClass("example").text("index-" + index);
});
});
セレクタの使い方＜応用編＞
セレクタの記述方法で、ORとANDの条件で指定できます。前回の書き忘れです。
OR条件。どちらかにあてはまる要素を選択します。
$(".sample1, .sample2").each(function () { });
AND条件。どちらともにあてはまる要素を選択します。
ただ、完全一致ではなく、部分一致です。指定したもの以外のクラスがあっても選択されます。
$(".sample1.sample2").each(function () { });
コンテクストの中でセレクタにあてはまる要素を選択します。
第一引数がセレクタ、第二引数がコンテクストです。
$(".sample1", ".sample2").each(function () { });
// .sample2 の中にある .sample1 を選択。