動くきっかけの指定記述
サイト内でどの操作をしたときに、jQueryを発火させるのか!代表的な記述の仕方を学んでいく。
画面の読み込み
$(function() {
//画面の読み込み時に動かしたいソースコードを記述
});
//画面の読み込み時に動かしたいソースコードを記述
});
画面が読み込まれた後
$(window).on('load',function() {
//画面が読み込まれた後に動かしたいソースコードを記述
});
//画面が読み込まれた後に動かしたいソースコードを記述
});
画面のスクロール
$(window).on('scroll', function () {
//画面がスクロールされたら動かしたいソースコードを記述
});
//画面がスクロールされたら動かしたいソースコードを記述
});
画面のリサイズ
$(window).on('resize', function () {
//画面がリサイズされたら動かしたいソースコードを記述する
});
//画面がリサイズされたら動かしたいソースコードを記述する
});
要素やクラス・ID名をクリック
$('●●').on('click', function() {
//クリックしたら動かしたいソースコードを記述する
})
//クリックしたら動かしたいソースコードを記述する
})
要素やクラス・ID名にマウスが乗ったり外れたりした時
$('●●').on('mouseenter', function () {
//マウスが乗ったら動かしたいソースコードを記述
})
$('●●').on('mouseleave', function () {
//マウスが外れたら動かしたいソースコードを記述
})
//マウスが乗ったら動かしたいソースコードを記述
})
$('●●').on('mouseleave', function () {
//マウスが外れたら動かしたいソースコードを記述
})
要素やクラス・ID名がタッチされたり外れたりした時
$('●●').on('touchstart', function () {
//タッチされた時に動かしたいソースコードを記述する
});
$('●●').on('touchend', function () {
//タッチして指が離れた時に動かしたいソースコードを記述する
});
//タッチされた時に動かしたいソースコードを記述する
});
$('●●').on('touchend', function () {
//タッチして指が離れた時に動かしたいソースコードを記述する
});
マウスが移動
$(window).on('mousemove', function () {
//マウスが移動したら動かしたいソースコードを記述する
});
//マウスが移動したら動かしたいソースコードを記述する
});
要素やクラス・ID名のCSSアニメーションが終わった後
$('●●').on('animationend', function () {
//CSSアニメーションが終わった後に動かしたいソースコードを記述する
})
//CSSアニメーションが終わった後に動かしたいソースコードを記述する
})
〇秒遅れて動く
setTimeout(function () {
//時間を遅らせて動かしたいソースコードを記述する
}, 1000);//この場合1秒後
//時間を遅らせて動かしたいソースコードを記述する
}, 1000);//この場合1秒後
WordPressのjQueryを利用して自作のJSを読み込むときの書き方
jQuery(function($){
// この中に$マークからはじまる記述
});
自作のJavaScriptの中に$マークからはじまる記述があると動かない場合があります。その時はソースコード全体を、上記のコードでくくると解決する
// この中に$マークからはじまる記述
});