jQueryで利用できるイベント

jQueryで利用できるイベント

イベント名と発生するタイミングについてのメモ

click
要素をクリックした

dbclick
要素をダブルクリックした

mousedown
マウスのボタンを押した

mousemove
要素の中をマウスポインターが移動した

mouseout
要素からマウスポインターが離れた

mouseover
要素にマウスポインターがあたった

mouseup
マウスのボタンを離した

keydown
キーを押した

keypress
キーが押されている

keyup
キーを離した

blur
要素からフォーカスが外れた

change
要素の値(input select textareaなどの)を変更した

focus
要素にフォーカスが移った

select
テキストボックス、テキストエリア
のテキストを選択した

submit
フォームを送信した

load
ページや画像、フレームを読み込んだ

resize
ウィンドウのサイズを変更した

scroll
ページや要素をスクロールした

unload
ページをアンロードした

error
画像の読み込みに失敗した


たぶん、一番使うのは
マウス関連のイベント

ページの読み込みとイベント

ページの読み込みとイベント

ページの読み込みもイベントになる
じつは
よく使う
$(function(){
実行コード
});
という書き方は

ページを読み込まれたタイミングで
コード実行という意味だった

そして、これは実は省略した形で
正確には
$(function(){ ... });
は
$(document).ready(function(){
....
});
となります

$(document)
の
document
は
ブラウザーに表示されるページを表す
Java script のオブジェクト

これを
$()
で囲むことで
ページそのものを表す
jQueryオブジェクトになります

そして
ready()

これは
ページの読み込み準備完了したら
処理実行という関数

function(){ .... }
は
Java script での
処理の塊を表します

cとかJavaをやっていると
スコープの概念があるから
わかりやすいかも

マウスポインタの出入りのタイミングで処理実行

マウスポインタの出入りのタイミングで処理実行

マウスが重なったら実行するというなら
mouseover()
を使います

逆にマウスポインタが外れたとき
処理実行するなら
mouseout()
を使います

mouseover()
と
mouseout()
は
ほとんどの場合対になる

なぜなら
mouseover()
で実行した処理を
mouseout()
でもとに戻すから

使い方は
$(セレクター)
.mouseover(){function(){
マウスを乗せたときの状態
})
.mouseout(){function(){
マウスを離したときの状態
});
});

となります

最初の
マウスを乗せたときの処理で ; がないのは
メソッドチェーンを使っているからです

jQueryでは要素を挿入する別の方法

jQueryでは要素を挿入する別の方法として
before()
after()
append()
prepend()

があります

insertBefore()
insertAfter()
prependTo()
appendTo()
との違いは
オブジェクトと引数の関係が逆転しているということ

insertBefore()
insertAfter()
prependTo()
appendTo()
の構文は

$('挿入する要素').メソッド名('挿入先を表すセレクター');

これに対して

before()
after()
prepend()
append()
だと

$('挿入先を表すセレクター').メソッド名('挿入する要素');

となります

ちょっとわかりにくいかも

メソッドの意味は

before()
要素を挿入先の前に挿入

after()
要素を挿入先の後に挿入

prepend()
要素を挿入先の子要素の先頭に挿入

append()
要素を挿入先の子要素の末尾に挿入

スタイルクラスの追加と削除

を参考に jQuery の勉強を始めました

java script をある程度行っているなら
比較的覚えやすいと思います

最近では スマホサイト作成に jQuery Mobileを使うため
覚えておくと役立ちそうです

今回はちょっとメモしたかったのが
スタイルクラスの適用する
addClass メソッド

そして
スタイルクラスを除外する
removeClass メソッドです

<style type="text/css">
.sample{
CSS 設定
};
<style>

の設定を
$('li.js').addClass('sample');
で適用

$('li.js').removeClass('sample');
で除外となります

そして、マウスクリックのときに使えそうなのが
toggleClass メソッドです

これは最初に記述すると適用
次は除外
というように交互に作動するものです

$('li.js').toggleClass('sample');
で適用
$('li.js').toggleClass('sample');
で今度は除外となります

ちょっとわかりにくいですが、あとあと使うことが多くなりそうです