カテゴリー: 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では要素を挿入する別の方法として
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’);
で今度は除外となります
ちょっとわかりにくいですが、あとあと使うことが多くなりそうです