jQuery

DOM操作簡単にしてくれるやつ。もう結構枯れてる。

イベント関連

イベントの取り付け

code:on

// イベントリスナの登録

$("#element").on("event", function(){ //HOGE });

// イベントリスナの解除

$("#element").off("event"); // 全部消える？

jquery on のイベント一覧

jqueryでinput要素の入力可否を設定

code:js

// 入力不可

$('#hoge').prop('disabled', true);

// 入力可

$('#hoge').prop('disabled', false);

javascript 本来の処理をキャンセルする

code:js

$('.clearForm').bind('click', function(e){

// プルダウン選択肢を初期化

e.preventDefault();

});

jqueryでイベントの取得、削除、再登録

code:js

// 取得

var events = [];

Object.keys($._data($("#hoge").get(0), "events")).forEach(function(k) {

events.push(o.handler);

});

});

// 削除

$("#hoge").off("click");

// 再登録

events.forEach(function(e) {

$("#hoge").on("click", e);

});

// ajaxで追加した要素への自動イベント登録

$('#content').on('click', '.js-box', function(){

console.log('boxをクリックしました！');

});

jQueryでのObjectのマージ

jQuery.extend(target[, object1][, objectN])

notセレクタ

$('.hogehoge:not(.fuga)')

左辺の集合から右辺の集合を取り除くイメージ

相対セレクタ（トラバース）

code:js

// 子孫の検索

$('.parent').find('.child');

// 直下の子の検索

$('.parent').children('.child');

// 親要素の取得

$('.child').parent();

// 指定子を子に持つ要素から検索（虫食い検索っぽい）

$('.child').parent('.finder');

// 先祖要素から検索

$('.mine').parents('.finder');

// 兄弟要素から検索

$('.mine').siblings('.other');

jQueryのdom操作まとめ

table:jQueryによるDOM操作

selectタグの内容を個別に差し替える

追加

$('#cn3').append($('<option>').attr({ value: '値' }).text('選択肢の名前'));

削除

$('#cn3').children('[value=01]').remove();

$('#cn3').children('[value=]').remove();

$('#cn3').children().remove();

選択要素それぞれに処理を行う（each

$('.find').each(function(i){ // Do something });

jqueryのAjaxで応答Body部を生で取り出し

code:js

$.ajax({

url: ajax_url,

type: 'post',

processData: false,

contentType: false,

data: formData,

success: function (data, dataType) {

$('tbody').before(data).remove();

},

error: function (request, status, error) {

var message = request.responseText;

var header_text = '<div class="alert alert-danger">' + message + '</div>';

$('tbody').html('');

$('#content-header').html(header_text);

}

});

jqueryプラグイン作成

内部のメソッド呼び出し方式にコツがある

code:js

$.fn.tooltip = function( method ) {

} else if ( typeof method === 'object' || ! method ) {

return methods.init.apply( this, arguments );

} else {

$.error( 'Method ' + method + ' does not exist on jQuery.tooltip' );

}

};

Ajax

チェックボックスをラジオボタン的な動きにする

code:js

$('.js-checkbox-2-radio').on('click', function (e) {

var chekced = $(this).prop('checked');

$(this).prop('checked', chekced);

});

$('#fruit').data('number')

$('#fruit').data('number', '02')

ラジオボタンの選択状に応じて、テキストボックスの入力可否を切り替え

code:js

if ($(this).val() == 'person') {

$form.find('.person_only').removeAttr('disabled');

$form.find('.person_only').removeClass('disabled');

} else {

$form.find('.person_only').val('');

$form.find('.person_only').attr('disabled', 'disabled');

$form.find('.person_only').addClass('disabled');

}

})

jQueryでクラスの制御

$('div').addClass('classname');

$('div').removeClass('classname');

jQueryでスタイルシートの制御

code:js

$('div').css('display', 'none');

$('div').css({

display: 'none',

fontSize: '32px'

});

jQueryで要素の新規作成

$('<div></div>');