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

イベント関連

イベントの取り付け
// イベントリスナの登録
$("#element").on("event", function(){ //HOGE });
// イベントリスナの解除
$("#element").off("event"); // 全部消える？

jquery on のイベント一覧

jqueryでinput要素の入力可否を設定
// 入力不可
$('#hoge').prop('disabled', true);
// 入力可
$('#hoge').prop('disabled', false);

javascript 本来の処理をキャンセルする
$('.clearForm').bind('click', function(e){
// プルダウン選択肢を初期化
e.preventDefault();
});

jqueryでイベントの取得、削除、再登録
// 取得
var events = [];
Object.keys($._data($("#hoge").get(0), "events")).forEach(function(k) {
events[k].forEach(function(o) {
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)')
左辺の集合から右辺の集合を取り除くイメージ

相対セレクタ（トラバース）
// 子孫の検索
$('.parent').find('.child');
// 直下の子の検索
$('.parent').children('.child');
// 親要素の取得
$('.child').parent();
// 指定子を子に持つ要素から検索（虫食い検索っぽい）
$('.child').parent('.finder');
// 先祖要素から検索
$('.mine').parents('.finder');
// 兄弟要素から検索
$('.mine').siblings('.other');

jQueryのdom操作まとめ
エレメント取得 `$('#grid1').get(0);`
複製 `$('.hogehoge').clone();`
innerText `$('#button').text();`
input value `$('input').val();`
inputTypeRadio(ラジオボタン) `$('input[type="radio"]).prop('checked');`

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部を生で取り出し
$.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プラグイン作成
内部のメソッド呼び出し方式にコツがある
$.fn.tooltip = function( method ) {
if ( methods[method] ) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.tooltip' );
}
};

Ajax

チェックボックスをラジオボタン的な動きにする
$('.js-checkbox-2-radio').on('click', function (e) {
var chekced = $(this).prop('checked');
$('[name="' + this.name + '"]').prop('checked', false);
$(this).prop('checked', chekced);
});

data-hogehoge='fuga' みたいなやつ
$('#fruit').data('number')
$('#fruit').data('number', '02')

ラジオボタンの選択状に応じて、テキストボックスの入力可否を切り替え
$form.on('change', 'input[name="applications_payee_approval[corporate_case]"]:radio', function () {
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でスタイルシートの制御
$('div').css('display', 'none');
$('div').css({
display: 'none',
fontSize: '32px'
});

jQueryで要素の新規作成
$('<div></div>');
※ $('div') だとただのセレクタで新規作成ではない
作った要素は $parent.append($elem) , や $elem.appendTo($parent) でDOMに組み込める

Related
  • Created by javel
  • Updated by javel
  • Views: 38
  • Page rank: 10.6