jQuery メモ

jQueryでよく使う機能メモ。

jQueryの基本

documentのreadyの一番シンプルな書き方。

$(function(){
    // 処理内容
});

セレクタ

よく使う形式をまとめました。

$('div');      // タグ名="div"
$('.ex1');     // クラス名="ex1"
$('#ex2');     // ID="ex2"

$('div.ex1');  // タグ名="div" and クラス名="ex1" 
$('div#ex2');  // タグ名="div" and ID="ex2"
$('div,.ex');  // タグ名="div" or クラス名=ex1 
$('div,#ex2'); // タグ名="div" or ID="ex2"

$('div > .ex1'); // タグ名="div"直下のクラス名="ex1"（親⇔子関係）
$('div #ex1');   // タグ名="div"配下のID="ex2"（先祖⇔子孫関係）

// タグ名="input"のname属性フィルタ
$('input[name]');        // name属性を持つ
$('input[name="ex3"]');  // "ex3"と一致
$('input[name!="ex3"]'); // "ex3"と一致しない
$('input[name^="ex3"]'); // "ex3"と先頭一致
$('input[name$="ex3"]'); // "ex3"と末尾一致
$('input[name*="ex3"]'); // "ex3"と部分一致（曖昧）

$('input[type="checkbox"]:checked'); // チェックボックス(選択済)
$('input[type="radio"]:checked');    // ラジオボタン(選択済)
$('select > option:selected');       // リスト・コンボボックス内の選択済要素

クラスの追加・削除

クラスの追加・削除にはaddClass, removeClass, toggleClassを使用します。

// <div>要素にクラス'example'を追加
$('div').addClass('example');

// <div>要素にクラス'ex1','ex2'を追加
$('div').addClass('ex1 ex2');

// <div>要素からクラス'example'を削除
$('div').removeClass('example');

// <div>要素からクラス'ex1','ex2'を削除
$('div').removeClass('ex1 ex2');

// <div>要素のクラス'example'をトグル（指定した要素にclassがあれば削除、なければ追加）
$('div').toggleClass('example');

属性の取得・設定

属性の操作には attr を使用します。

// divから属性idを取得
var id = $('div').attr('id');
console.log(id);

// divに属性id="example"を設定
$('div').attr('id', 'example');

値の取得・設定

値の取得と設定には data を使用します。

// divからdataを取得
var data = $('div').data();
console.log(data);

// divにdata="example"を設定
$('div').data('example');

イベント関係(on)

対象となる要素にonを指定することでイベント処理を追加できます。

【構文】　.on( events [, selector] [, data], handler(eventObject) )

よく使う events （イベント名）は「change、click、blur 、focus」など。

// 引数がイベント名（click）、handlerのケース
$('button').on('click', function() {
    console.log('クリックされました。');
})

// 引数がイベント名（click）、data、handlerのケース
$('#ex').on('click', {ex1:'aaa', ex2:'bbb'}, show);
 
function show(e) {
    // "aaabbb"が出力されます。
    console.log(e.data.ex1 + e.data.ex2);
}

要素の表示／非表示

要素の表示と非表示には show と hide を使用します。

$('div').show(); // 表示
$('div').hide(); // 非表示