web制作

jQueryでできる基礎的な処理をまとめた

最近jQueryで色々と処理をすることが増えてきたので、よく使うモジュールを自分用にメモ。

特定の動作が行われた時に実行させる系

ページを読み込んだ時に読み込む


$(window).load(function () {

//ページ読み込み時に実行したい内容を入れる

});

ページがスクルールした時にj読み込む


$(window).scroll(function () {

//ウィンドウをスクロールした時に実行したい内容を入れる

});

ウィンドウ幅が変わった時に読み込む


$(window).resize(function () {

//ウィンドウ幅が変わった時に実行したい内容を入れる

});

上の3つはそれぞれまとめれます

ちなみに上の3つはそれぞれまとめれて


$(window).on(‘load resize’, function () {

//ページ読み込み時とウィンドウ幅が変わった時に実行したい内容を入れる

});

という風にできたりします。

 

if関連でよく使う系

ウィンドウ幅で判定


if ($(window).width() < 751) {

//ウィンドウ幅が751px以下になった時に実行

});

ただし、こいつは


$(window).on(‘resize’, function () {

if ($(window).width() < 751) {

//ウィンドウが読み込まれた時のウィンドウ幅が751px以下になった時に実行したい条件

}

});

という感じにして使わないと発動しません。
これがというかif関連は全てですかね。
resizeをloadだったり、scrollでもOK。その時は発動する前提が変わるので、コードの意味も変わります。

スクロールした量で判定


if ($(window).scrollTop() > 200) {

//スクロールした量が200pxを越えると実行する

});