はじめに
実は今までちゃんと使ったことがなかったので、
私のようなド素人向けに基本的なセレクタとイベントハンドラをまとめます。
※このレベルで今までどうやって生きてきたのか、やってこれたことが奇跡だよなあと恥を忍んで書いています。
はじめにちゃんと書くやつ
「htmlを読み込んでから処理を実行する」という意味です。
詳細は面倒なので省きますが、忘れないようするべきまじないだと思えばまあいいのではと思います。
詳細が知りたい場合はググりましょう。
<script type="text/javascript">
$(function(){
//ここに実行させるjQueryのコードを書く
})
</script>
セレクタ
要素を選ぶための記述。 いくつか種類があるのでよく使いそうなものをまとめておきます。
IDセレクタ
要素のIDで指定します。IDは要素は一意なので、決め打ちでこれってときに使います。
//赤くする
$('#item1').css('color','red');
nameセレクタ
要素のnameで指定します。
同じnameの要素は複数存在する場合もありますが、
その場合は該当する全ての項目に反映されます。
//この名前のやつは全て赤くする
$('item').css('color','red');
classセレクタ
要素のclassで指定します。クラス名に一致する要素すべてに反映されます。
//青いやつはもれなく赤くする
$('.blue').css('color','red');
属性フィルター
特定の属性をもつ要素を取得します。結構細かく指定できます。
//name=radio1のラジオボタンからチェックされているvalueをとる。
$('input[name=radio1]:checked').val();
実行イベント
jQueryではとある要素がこんなことされたときのイベントはこんな処理という実装ができます。
その「こんなこと」にはクリックとかマウスオーバーとかフォーカスとか色々あります。
クリックしたとき
おそらく最も使うんじゃないだろうか、というやつです。
$('button').on('click', function() {
alert('クリックされました');
});
キー押下、ペーストなど （複数指定の場合）
キー押下：keyup
ペースト：paste
ちなみに複数のイベントタイプを半角スペースで区切って指定することで、
複数のイベントに対して一括して、同じイベントを定義することができます。
// text1に対してキー入力またはコピペされたときに発動する処理
$('#text1').on('keyup paste', function() {
// 処理、たとえば入力チェック
});