jQueryでコードを読むときや簡単なギミックを作るときなど、よく使われるメソッド(手法)をまとめてみました。
ここにない記述もたくさんありますが、独断で選別しています。
また詳しく書くとややこしくなるので、なるべく一文で説明しています。
とっかかりの参考になれば幸いです。
初級者向けにJavaScriptの記述の基本も記載します。
var abc;
abcは変数ですという宣言です。
変数:アルファベットの単語、造語でもいい半角英数字です。
var my_value = "abc";
変数に文字列をセットしてます。
文字列内に「"」を使うとエラーになります。
var my_value = 'abc';
シングルクォート「'」で囲うと「"」が使えます。
var my_width = 10+20;
演算:足し算、引き算などの結果がセットされます。
発動、発火系
$(document).ready(function(){
});
HTMLが読み込まれたら発動
(imgやiframeはそのあと読み込まれる)
$(window).load(function(){
});
HTMLとimg,iframeなどの要素がすべて読み込まれたら発動
デバッグ系
console.log(my_width);
変数をコンソールに出力する
主語、セレクタ
$("#hoge")
IDがhogeの要素、ページ内に1つ
$(".hoge")
クラスがhogeの要素、ページ内に複数
$(".hoge li p")
hogeクラスの子のli要素の子のp要素
hlp = ".hoge li p"
$(hlp)
変数で指定することも可能
きっかけ、トリガー、引き金
.click()
.on("click",function(){
});
どちらもクリックされたら発動する処理を間に書きます。
値の追加、削除
.html()
要素の(間の)値を取得
.html(123)
要素の(間に)値をセット
.append('hoge')
要素の最後に値を追加
.empty()
hogeクラスの(間の)値を削除
.remove('.hoge')
hogeクラスごと削除
演出、アニメーション
.slideUp()
スライドアップして閉じる
.slideDown()
スライドダウンして開く
.fadeIn()
フェードインで現れる
.fadeOut()
フェードアウトで消える
.animate({ height: 100px}, 700 );
heightを0.7秒かけて100pxにする
クラスの操作
.hasClass("hoge")
hogeクラスを持っていたら
.removeClass()
クラスを削除する
.addClass()
クラスを追加する
属性の操作
.attr("id")
id属性の値を読み込む
.attr("href","abc")
href属性の値を書き込む
.removeAttr("id")
id属性を削除する
よく使う数値、数値型
.width()
幅を取得
.height()
高さを取得
.css('width',100)
cssのwidthに100pxを指定する
.offset().top;
要素のHTMLの縦位置を取得
.length
要素の文字数を取得
.parseInt(aaa,10)
aaaの値を10進数にする
主語、セレクタの応用
.parent()
1つ上の親の要素を
.closest(".slide")
親の要素たちの中の最も近いslideクラスを
.children('ul')
子供のul要素を
.find(".txt")
配下のtxtクラスを探す
複数の要素の操作
$('.slide_box').each(function() {
});
slide_boxクラスがついている要素すべてに対して
.index('li')
何番目のliか数字をとる
.eq(i)
i番目の要素の
条件分岐
if(a > 0){
...もしaが0より大きければ実行
}else{
...それ以外なら実行
}
if(a > 0 && f > 0){
}
さらに...ならば
関数、機能のまとめ書き
function hoge(){ ... }
hoge();と書いて実行される命令文の塊
function hoge(a){ ... }
falseを返す、functionを抜ける
return true;
true(またはfalse)を返して、functionを抜ける
return hoge;
変数hogeの値を返す、functionを抜ける