jQuery - user000422/0 GitHub Wiki

// readyメソッド HTML読み込み後に実行 ※基本的にjQueryはreadyメソッドに記述すること
$(document).ready(function() { /* inner */ });

// readyメソッドは省略可
$(function() {
  // inner
});

$('div').css('color', 'red');            // 要素セレクター（HTML要素を指定）
$('#sample').css('color', 'red');        // IDセレクター（id属性を指定）
$('.sample').css('color', 'red');        // クラスセレクター（class属性を指定）
$('.sample > div').css('color', 'red');  // 子セレクター（セレクターの直下の要素を指定）
$('.sample div').css('color', 'red');    // 子孫セレクター（セレクターの内側の要素を指定）
$('#sample, #test').css('color', 'red'); // グループセレクター（複数のセレクターを指定）

// nth-child疑似セレクター（複数のうち特定のセレクターを指定）
$('li:nth-child(odd)').css('color', 'red');  // nth-child(odd) 奇数位置のセレクターを指定
$('li:nth-child(even)').css('color', 'red'); // nth-child(even) 偶数位置のセレクターを指定

// 属性セレクター
$('[name="sample"]').css('color', 'red');      // name属性を指定
$('input[type="submit"]').css('color', 'red'); // type属性を指定（submit）

// jQuery独自セレクター
$('li:first').css('color', 'red'); // セレクターのうち最初の要素
$('li:last').css('color', 'red');  // セレクターのうち最後の要素
$('li:eq(2)').css('color', 'red'); // セレクターのうち指定した順番に位置する要素（インデックスは「0」から始まる）
$('li:lt(2)').css('color', 'red'); // セレクターのうち指定した順番より前の要素（インデックスは「0」から始まる）
$('li:gt(2)').css('color', 'red'); // セレクターのうち指定した順番より後の要素（インデックスは「0」から始まる）

$(':checked').css('color', 'red');  // チェックされている要素を指定（チェックボックス、ラジオボタン）
$(':selected').css('color', 'red'); // 選択されている要素を指定（セレクトボックス）

// その他のセレクター（参考書では触れなかった）
$('.sample').eq(0).css('color', 'red'); // インデックス指定
$('input:disabled').css('color', 'red'); // 非活性（input要素で非活性なもの）
$('.sample:disabled').css('color', 'red'); // 非活性（class属性で非活性なもの）
$('.sample:not(:disabled)').css('color', 'red'); // 非活性ではないもの（class属性で非活性なもの）
$('○○○').next().css('color', 'red'); // 指定要素の次の要素を指定（ position干渉悩みで使いました ）

$('#sample').text('Hello'); // テキストを変更
$('#sample').text();        // テキストを取得

$('#sample').html('<span>Hello</span>');   // 対象要素内のHTML構造を変更
$('#sample').html();                       // 対象要素内のHTML構造を取得
$('#sample').append('<span>Hello</span>'); // 対象要素内の最後（終了タグの直前）にHTML構造を追加
$('#sample').after('<div>Hello</div>');    // 対象要素の後ろにHTML構造を追加

$('#sample').remove(); // セレクターで指定した要素を削除

$('#sample').attr('href', 'sample/sample.php'); // 対象要素の属性値を変更
$('#sample').attr('href');                      // 対象要素の属性値を取得
$('#sample').attr('id');                        // 対象要素のid名を取得 応用
$('#sample').removeAttr('target');              // 対象要素の属性を削除

$('#sample').addClass('sample-class');    // class属性を追加
$('#sample').removeClass('sample-class'); // class属性を削除

// val
$('#sample').val();         // value属性の値を取得
$('select#sample').val();   // value属性の値を取得（selectboxの場合は選択値を取得）
$('textarea#sample').val(); // value属性の値を取得（textareaの場合は入力値を取得）
$('#sample').val('');     // value属性の値を削除

// each 指定したセレクタに該当する要素が複数ある場合に使える
$('.sample').each(function(){
  $(this).css('color', 'red'); // thisをよく使う
});

// アニメーション
$('#sample').show();       // 非表示状態の要素を表示する（ display:block と同等 ）
$('#sample').hide();       // 表示状態の要素を非表示にする（ display:none と同等 ）
$('#sample').show('slow'); // 変化速度を設定（「slow」、「fast」、1000ミリ秒）

$('#sample').toggle();       // 要素の表示非表示を切り替える
$('#sample').toggle("slow"); // 変化速度を設定（「slow」、「fast」、1000ミリ秒）

// fade ※Toはエリアが確保される、Outはエリアごと消える
$('#sample').fadeIn();     // 要素をフェードインさせる（ opacity と同等 ）
$('#sample').fadeOut();    // 要素をフェードアウトさせる（ opacity と同等 ）（ 最終的には display:none ）
$('#sample').fadeIn(1000); // 変化速度を設定（「slow」、「fast」、1000ミリ秒）
$('#sample').fadeTo("slow", 0); // 要素をフェードアウトさせる 引数で最終透明度を設定（ opacity と同等 ）


// 下記独学
Math.ceil(99.1); // 小数点切り上げ

$('指定先').animate({width:'toggle'}); // display: none; と display: block; 切り替え & 横からスライド表示

// 基本型 単一のcssプロパティ
$('#sample').css('color', 'red');

// 複数のcssプロパティ
$('#sample').css({
  'color' : 'red',
  'background-color' : 'yellow'
});

// 必ずready（ここでは省略形）の内側で定義すること
$(function() {

// onメソッド
$('li').on('click', function(){ /* inner */ });     // 基本型
$('ul').on('click', li, function(){ /* inner */ }); // 子要素指定

$('#sample').off('click', function(){ /* inner */ }); // offメソッド イベント処理を取り消す

$('#sample').on('click', function(){ /* inner */ }); // 対象がクリックされた時（マウスの左ボタン）

// ドラッグ＆ドロップ用
$('#sample').on('mousedown', function(){ /* inner */ }); // 対象がクリックされた時（マウスの何らかのボタン）
$('#sample').on('mouseup', function(){ /* inner */ });   // 対象がクリックされた状態からクリックが解除された時（マウスの何らかのボタン）

// ロールオーバー用 ※mouseover/mouseoutは、バブリングが発生するので非推奨という説もある
$('#sample').on('mouseover', function(){ /* inner */ }); // 対象にマウスカーソルが重なった時
$('#sample').on('mouseout', function(){ /* inner */ });  // 対象にマウスカーソルが重なった状態からマウスカーソルが離れた時

$('#sample').one('click', function(){ /* inner */ }); // one 一度だけイベントを発生させる

// フォーカス用 メソッドチェーン込でよく使われる
$('#sample').on('focus', function(){
  // focus フォーカス状態になった時（マウスやタブキーで）
}).on('blur', function(){
  // blur フォーカス状態が解除された時
});

// change フォーム部品の値が変更された時（例はセレクトボックス応用）
$('select#sample').on('change', function(){
  var sample = $(this).val(); // 変更後のoption属性の値を取得
});

$('form#sample').on('submit', function(){ /* inner */ }); // フォームの送信を感知し、送信される前に処理を行う

});

// 下記は独学

// onメソッド重複処理対処（offメソッドを前に配置する）
$(document).off('click', '#sample-btn');
$(document).on('click', '#sample-btn', function(){ /* 内容 */ });

// マウスオーバーイベント（mouseover/mouseout はバブリングが発生するので非推奨）
$(document).on('mouseenter', '#sample-btn', function(){ /* 内容 */ });
$(document).on('mouseleave', '#sample-btn', function(){ /* 内容 */ });

setTimeout(function(){ … },指定秒数); // 指定秒数後 に 実行

// checkbox を クリックしたとき チェックされてるか
$('input[type="checkbox"]').click(function() {
	if($(this).prop('checked')){
	}
});

$('a').click(function(){
  // 処理
  return false; // 処理の最後に return false
});

var 変数名 = location.pathname
変数名.match('○○○.jsp') // URL に ○○○.jsp の文字列が含まれているページ

var sample = "Hello";

var array = []; // 宣言

array.splice(0, 1); // インデックス指定で要素削除（第一引数でインデックス、第二引数で削除個数）

if(true === flg) { /* */ } // イコール3つで型と値をセットで比較（イコール2つの場合は値のみ）

if($('#sample').length) { /* */ } // 要素の存在判定

if($('.sample-checkbox').prop('checked')){ … } // チェックボックスにチェックが入っていた場合

if($('指定先').css('display') == 'none'){ … } // 指定先が display: none; の場合

// 基本型
for(var i = 0; i < $('#sample').length; i++) { /* */ }

// 基本型
$.ajax({
  url: './sample.php' // 送信先（Javaの場合はアクションクラスなど）
  ,type: 'POST' // メソッド
  ,dataType: 'json' // 送信するデータのタイプ
  ,data: xxx // 送信するデータ
  ,contentType: false // リクエスト時に使用するContent-Typeヘッダー（基本は何もしなくていい）
});

// 要素追加（要素、属性を同時に指定可）
$('<input>', {
  type: hidden,
  id: sample
}).appendTo('body');