● Select2のドロップダウンの文字サイズを変更する

.select2 {
    font-size: 12px;
}
.select2-results__option {
    font-size: 12px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
   line-height: 1.5 !important;
}

● Select2のボックスの高さを変更する （すべての select2 の高さを変更）

.select2-selection__rendered {
    line-height: 28px !important;
}
.select2-container .select2-selection--single {
    height: 32px !important;
}
.select2-selection__arrow {
    height: 31px !important;
}

● Select2のボックスの高さを変更する （指定したselect2 の高さを変更）

#my-select+.select2-selection__rendered {
    line-height: 25px !important;
}
#my-select+.select2-container .select2-selection--single {
    height: 29px !important;
}
#my-select+.select2-selection__arrow {
    height: 28px !important;
}

● Select2のドロップダウンのリストの高さを変更する

.select2-results , .select2-results__options {
    max-height: 500px !important;
    height: 500px !important;
}

● Select2のドロップダウンリストの好きな位置にhtmlタグを設定する

function formatState (state) {
  if (!state.id) {
    return state.text;
  }
  var baseUrl = "/user/pages/images/flags";
  var $state = $(
    '<span><img src="' + baseUrl + '/' + state.element.value.toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>'
  );
  return $state;
};

$(".js-example-templating").select2({
  templateResult: formatState
});

● 全角を2文字　半角を1文字 として文字数を計算する

            /**
             * 全角を2文字　半角を1文字 として文字数を計算する
             */
            textLength = function(text) {
                // return text.length;
                var regexp = /[\x01-\x7E\u{FF65}-\u{FF9F}]/mu;

                var len = 0;
                for(var i = 0; i < text.length; i++){
                var ch = text[i];
                len += regexp.test(new String(ch)) ? 1 : 2;
                }
                return len;
            } ,

● jQueryで特定のタグのみ削除する

元の要素

<div>
   <p class="active"><a href="#">子要素のaタグのみ削除したい</a></p>
</div>

削除コマンド unwrap()

unwrap() は指定要素を囲むタグを削除する事ができるメソッドです。

  // 子要素のタグのみ削除
  $('.active').children().contents().unwrap();

削除後

<div>
  <p class="active">子要素のaタグのみ削除したい</p>
</div>

● unwrap()の例1.

<div>
	<div>
		<div>
			<span id="hoge">アイウエオ</span>			
		</div>
	</div>
</div>

　　　↓ unwrap() を1回実行すると

	$('#hoge').unwrap();

　　　↓ こうなります

<div>
	<div>
		<span id="hoge">アイウエオ</span>			
	</div>
</div>

● unwrap()の例2. DIV タグを削除して BR タグにします。

元のhtml

<div id="test">
	<div>
		<span style="color:red;">1行目のテスト</span>
	</div>
	<div>
		2行目のテスト
	</div>
</div>

unwrap() 実行

	$('#test').find('div').each(function(index, element){
		$(element).contents().unwrap().append('<br>');
	});

実行後のhtml

<div id="test">
		<span style="color:red;">1行目のテスト<br></span>
		2行目のテスト
</div>

● テキストエリアに「改行禁止」制限を加える

https://programming.sincoston.com/cancel-enter/ https://programming.sincoston.com/remove-line/

● テキストエリアに「文字数」制限を加える

https://www.webdlab.com/labs/form-textarea-maxlength/

● 全ての列が空のテーブル列を非表示にする

テーブルが複数あっても動作します。

<script>
$('table').each(function(index,element) {
    $(element).find('th').each(function(i) {
        var remove = 0;

        var tds = $(this).parents('table').find('tr td:nth-child(' + (i + 1) + ')')
        tds.each(function(j) { 
            // console.log( this.innerText );
            if (this.innerText == ''){
                remove++; 
                console.log( 'remove!' );
            } 
        });

        // console.log( remove, ($(element).find('tr').length - 1) );

        if (remove == ($(element).find('tr').length - 1)) {
            $(this).hide();
            tds.hide();
        }
    });
});
</script>

https://bit.ly/37wHbz0

● jQuery Dirty

https://www.jqueryscript.net/form/alert-form-changed-dirty.html

こちらを実行して監視を開始します

    $(function() {
        $("#input-form").dirty({
            preventLeaving: true,
            leavingMessage: 'NO SAVE',
            onDirty: function(){
                alert("フォームが変更されています。ページを離れますか？")
            }
        });
    });

他にも便利なメソッドがあります

// detects if a form has been modified
// returns true or false
$("#form").dirty("isDirty");

// detects if a form is Clean
// returns true or false
$("#form").dirty("isClean");

// refreshes events
$("#form").dirty("refreshEvents");

// resets the form
$("#form").dirty("resetForm");

// sets the state to Clean
$("#form").dirty("setAsClean"); 

// shows modified form fields
$("#form").dirty("showDirtyFields");

● jQuery Dirtyと iCheckとの共存

iCheckではチェックボックスやラジオボタンをクリックしたときに ifClicked() イベントが走るのでその中で、onchange() イベントを発火してやればOKです。

<script type="text/javascript">
$(function() {
    // 1. iCheckの初期化
    $('input[type=checkbox],input[type=radio]').iCheck({});

    // 2. iCheckクリック時に onchange() イベント発火する
    $('input[type=checkbox],input[type=radio]').on('ifClicked', function(event) {
        setTimeout(() => {
            $(this).change();
        }, 10);
    });
})
</script>

● jQueryで prop を使ってチェックボックスなどの値を変更した時に on change イベントを発火させる

$(this).attr("checked", "checked");

　　　　　　　　　↓

$(this).attr("checked", "checked").change();

change() メソッドを加えます。 これだけでOK!

● jQueryでdata属性を扱う

● jQueryでdata属性を扱う方法

・data属性の取得

jQueryでdata-keyword属性を取得します。

$('#hoge').attr('data-keyword');

・data属性のセット

jQueryでdata-keyword属性を設定します。

$('#hoge').attr('data-keyword', 'テストテスト');

● $('.hoge').data() は使用しない事

$('.hoge').data()を使用すると次のような問題点に出会うことになります。

・htmlに 反映されない。
・jQueryの キャッシュ問題に悩まされる

● html

<input name="sold_flag" type="hidden" value="0">
<label>
    <input class="" checked="checked" name="sold_flag" type="checkbox" value="1">
    売約済み
</label>
<label>
    <input class="" name="sold_flag" type="checkbox" value="9">
    商談中
</label>

● javascript

            $("[name='sold_flag']").on("click", function(){
                if ($(this).prop('checked')){
                    $("[name='sold_flag']").prop('checked', false);
                    $(this).prop('checked', true);
                }
            });

● jQuery で スマホ / PC を判別する

if (window.matchMedia("(max-width: 767px)").matches) {
    console.log( "モバイルです" );
} else {
    console.log( "PCです" );
}

● jQuery Plugin For Repeatable Form fields - infinity

https://www.jqueryscript.net/form/jQuery-Repeatable-Form-fields-infinity.html

● jQuery Plugin To Dynamically Add More Form Fields - czMore

https://www.jqueryscript.net/form/jQuery-Plugin-To-Dynamically-Add-More-Form-Fields-czMore.html

● カレンダーで日付と時刻を入力させる jquery プラグイン

https://xdsoft.net/jqplugins/datetimepicker/

● jQuery で現在登録されている onclick等のイベントを表示

class=menu のオブジェクトのイベントを表示します。

console.log( '===== .menu_base__mypage のイベント =====' );
console.log( jQuery._data($(".menu").get(0)).events );
console.log( '===== .menu_base__mypage のイベント =====' );

● jQuery で現在登録されている onclick等のイベントを削除

class=menu のオブジェクトのクリックイベントを削除します。

$('.menu').unbind('click');

● jQuery で onclick等のイベントを追加

class=menu のオブジェクトへクリックイベントを追加します。

$('.menu_base__mypage').bind( "click", function() {
    alert('new event !!!');
});

● jQueryのマルチセレクト系プラグイン

オススメは https://select2.org/getting-started/basic-usage

● 他にはこちらで紹介されています。

https://www.jqueryscript.net/blog/Best-Multiple-Select-jQuery-Plugins.html
https://bit.ly/3jcCb8n

● jquery-textarea-form-submit-cmd-enter.js

A. 「Command ( Control 」＋「Enter」のショートカットキーで、フォーカスが当たっているフォーム部品の親フォーム送信をする

 $(function() {
     $(document).on('keydown', 'body', function(e) {
		if ( !(e.key == 'Enter' && (e.metaKey == true || e.ctrlKey == true ) ) ) return;

         var $target = $(e.target);
         if ($target.is('input') || $target.is('textarea') || $target.is('select')) {
             $target.closest('form').trigger("submit");
         }
     });
 });

B. 「Command ( Control 」＋「Enter」のショートカットキーで、 class="notrepeat" をクリックさせる

 $(function() {
     $(document).on('keydown', 'body', function(e) {
		if ( !(e.key == 'Enter' && (e.metaKey == true || e.ctrlKey == true ) ) ) return;

         var $target = $(e.target);
         if ($target.is('input') || $target.is('textarea') || $target.is('select')) {
          $target.closest('form').find('.notrepeat').trigger("click");
         }
     });
 });

● フォームの種類を判別する（ 例 : checkbox か radioか）

alert( $('#hoge').prop('type') );

● タグ名からフォームの種類を判別する（ 例 : ＜SELECT name="yoyaku"＞ を判別 ）

if ( $("[name='yoyaku']").prop("tagName") == 'SELECT' ){
//処理
}

● name="xxxx" の部分一致

前方一致

$("[name^='yoyaku']")

yoyaku_01 , yoyaku_02 などにマッチします。

後方一致

$("[name$='_01']")

name="data_01" や name="hoge_01" などにマッチします。

部分一致

$("[name*='at']")

name="created_at" や name="atmark" などにマッチします。

● 1行テキストエリア（id="hoge"）の値を取得する

<input type="text" name="hoge" id="hoge" value="999" >

//  jQuery
var v = $('#hoge').val();
// JavaScriptのみ
var v = document.getElementById('hoge').value;

● 1行テキストエリア（id="hoge"）へ値（'test_string'）をセットする

//  jQuery
$('#hoge').val('test_string');

● ドロップダウンリストの（id="hoge"）の値を取得する

var v = $('#hoge').val();

● ドロップダウンリストの選択された option のテキストを取得する

  var select_obj = $("[name='school_id']");
  var selected_option_text = select_obj.children(':selected').text();

● ドロップダウンリスト の選択状態を変更する

currency_unit 設定した値を持つドロップダウンリストを選択状態にします

$('.hoge').val(currency_unit);

● ラジオボタンの値の取得

var data = $("input:radio[name='my_radio']:checked").val();

● ラジオボタンのチェックを外して未選択にする

$( "[name='my_radio']" ).prop('checked', false);

// ↑ これで動かない場合は attr を使用する
$( "[name='my_radio']" ).attr('checked', false);

● 単一チェックボックス（id=cb1）の値の取得

<input type="checkbox" id="cb1_id" name="cb1" value="あいうえお">あいうえお

var v = $('#cb1_id:checked').val();      // IDでアクセスする場合
var v = $("input[name='cb1']:checked").val();     // nameでアクセスする場合
alert(v);

● checkboxにチェックがついているかどうかを調べる

true ,false が帰ってきます。

var flag = $("[name=checkbox1]").prop("checked");

● checkboxにjQueryでチェックをつける

<input type="checkbox" id="cb1_id" name="cb1" value="あいうえお">

// name が「cb1」 valueが「あいうえお」のチェックボックスにチェックを付ける
$('input[type="checkbox"][name="cb1"][value="あいうえお"]').prop("checked",true);

// 全てのチェックボックのチェックを外す
$("input:checbox").attr('checked', false);

● 「全てを選択する」ボタンを押すと全てのチェックボックスのチェックを付ける

id="all_check_on”な要素をクリックするとname = ”user_id[]" のチェックボックス全てにチェックをつける（または解除）します
html

<label><input type="checkbox" id="all_check_on">全て選択する</label>
<input type="checkbox" name="user_id[]" value="1">
<input type="checkbox" name="user_id[]" value="2">
<input type="checkbox" name="user_id[]" value="3">

js

$("#all_check_on").click(function() {
    if ($(this).prop("checked")) {
        $('[name="user_id[]"]').prop("checked", true);
    } else {
        $('[name="user_id[]"]').prop("checked", false);
    }
});

● チェックされている複数チェックボックスの値をURLパラメーターの形式で取得する

name = ”user_id[]" のチェックされている全てのチェックボックスの値をURLに渡せる形式で取得します。 js

param = $('[name="user_id[]"]:checked').map(function(){
	return this.name + '=' + $(this).val();
}).get().join('&');

console.log( param );

表示結果

user_id[]=1&user_id[]=2

● フォームをサブミットする

<form id="FM"></form>

 $('#FM').submit();

● （id="input_button"）の送信ボタンを押せないようにする

$('#input_button').prop('disabled', true); // 押せない
$('#input_button').prop('disabled', false); // 押せる

● ドロップダウンリスト（class="my_list"）を選択できないようにする

$('.my_list').prop('disabled', true); // 押せない
$('.my_list').prop('disabled', false); // 押せる

● フォーム要素一括セレクタ

$(":input")		// 全てのフォーム要素
$(":button")	// 全てのボタン要素

$(":text")		// テキストボックス
$(":password")	// パスワード入力ボックス
$(":radio")		// ラジオボタン
$(":checkbox")	// チェックボックス
$(":file")		// ファイル選択ボックス
$(":submit")	// 送信ボタン
$(":image")		// 画像ボタン
$(":reset")		// リセットボタン

例：全てのフォーム要素にアクセスする

$(":input").each(function(index, el) {
    console.log(el.name);
});

● セレクトボックス（ドロップダウンリスト）が変更されたら実行

<script type="text/javascript">
$(document).ready(function() {
	$("[name='mt_payment_id']").change(function() {
		console.log( '変更されました' );
	});	
});
</script>

ドロップダウンリストの項目があまりに置いときにテキスト入れを用意しておいて絞り込み検索を行いたいと言った時があります。 その時は以下の様にすればいいでしょう

● JavaScriptでドロップダウンリストの絞り込みを行うのデモ

JavaScript（jquery）でドロップダウンリストの絞り込みを行うのデモ

● コード

・ html

<select name="" id="user_list_men" style="margin-bottom: 5px;">
<option value="">===選択してください===</option>
<option value="Craig Ball">Craig Ball</option>
<option value="Barney Bigard">Barney Bigard</option>
<option value="Don Byron">Don Byron</option>
<option value="Evan Christopher">Evan Christopher</option>
</select>
<input type="text" id="user_list_search_men">絞込検索欄

・ JavaScript

class ListChanger {
    constructor(idName) {
        this.selectBox = document.getElementById(idName);
    }
    change(value) {
        const items = this.selectBox.children;
        const reg = new RegExp(".*" + value + ".*", "i");

        let i;

        if ( value === ''){
	        for ( i = 0 ; i < items.length; i++) {
                items[i].style.display = "";
	        }
        	return;
        }

        for ( i = 0 ; i < items.length; i++) {
            if (items[i].textContent.match(reg)) {
                items[i].style.display = "";
            } else {
                items[i].style.display = "none";
            }
            items[i].selected = false;
        }
        // 選択状態にする
        for (i = 0; i < this.selectBox.length; i++) {
            if (this.selectBox[i].textContent.match(reg)) {
                this.selectBox[i].selected = true;
                break;
            }
        }
    }
}

const menObj = new ListChanger('user_list_men');
$("#user_list_search_men").on('input keyup  blur',function() {
    menObj.change(this.value);
});

● jqueryのイベント（ユーザー操作イベント）

● jqueryのイベント（要素イベント）

● jqueryのイベント（その他イベント）

コンパクトなサイズで設置簡単な（alert・モーダル）ウィンドウ jquery プラグイン

● jquery.alertable.js - Minimal alert, confirm, and prompt replacements.

https://github.com/claviska/jquery-alertable

・デモ

http://www.jqueryscript.net/demo/Nice-Clean-jQuery-Alert-Confirm-Dialog-Plugin-alertable-js/

・設置方法

<script src="assets/js/jquery.alertable.min.js"></script>
<link  href="assets/js/jquery.alertable.css" rel="stylesheet">

$.alertable.alert('Howdy!');

これだけです。とても簡単ですね。

● jQueryでフォームの入力途中で画面遷移しようとするとアラートを出す例

● フォーム例

<form action="test.php" name="MYNAME">
	<input type="text" name="input1">
	<textarea name="input2"></textarea>
</form> 

● JavaScript

$(function(){
var form_change_flg = false;
    $(window).on('beforeunload', function() {
        if (form_change_flg) {
          return "入力画面を閉じようとしています。入力中の情報がありますがよろしいですか？";
        }
    });
    //フォームの内容が変更されたらフラグを立てる
    $('form[name=MYNAME] input[name=title1]').change(function() {
        form_change_flg = true;
    });
    $('form[name=MYNAME] textarea[name=input2]').change(function() {
        form_change_flg = true;
    });
    // フォーム送信時はアラートOFF
    $('form[name=MYNAME]').submit(function(){
        form_change_flg = false;
    });
});

● jQuery UI を使う方法

http://alphasis.info/2011/06/jquery-ui-resizable-textarea/

● jquery.funcResizeBox.js

http://wp.me/p4bIbo-Q3

jQueryプラグインを作成するためのひな形はネットで調べるといくつかパターンが出てきますが、例えばこういうのはどうでしょうか。

;(function($){

$.fn.myPlugin = function(options) {

     'use strict';

    if (this.length === 0){
    	var error_css  = 'background: #ff0000; color: #FFF; padding: 2px; line-height: 1.5;';
    	console.log('%cERROR( jquery.myPlugin.js ) :DOM Object not found', error_css);
    	return this;
    }

    // private variables
    var priOne = '';
    var priTwo = '';

    // private methods
    var foo = function() {
    };

    // public variables
    this.pubOne = 0;

    // public methods
    this.initialize = function() {
		return this.each(function(i, elem) {
			// ...
    	});
    };

    return this.initialize();
};
})(jQuery);

有名なテンプレートとしては jquery boilerplate があります

● jquery boilerplate

https://jqueryboilerplate.com/

jqueryの fadeIn / fadeOut メソッドを CSS3（animation）アニメーションにするには以下のようにします。

デモ : http://logic.moo.jp/livedemo/jquery.fadecss3/demo.html

<link rel="stylesheet" href="jquery.fadecss3.css">
<script type="text/javascript" src="jquery.fadecss3.js"></script>

$('#item').fadeInCss3();
$('#item').fadeOutCss3();

$('#item').fadeInCss3(1000, 'ease-in');
$('#item').fadeOutCss3(3500, 'ease-in-out');

jquery.fadecss3.css として保存

@keyframes fadein_css3_kf {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@-webkit-keyframes fadein_css3_kf{
	0% {opacity:0;}
	100% {opacity:1;}
}
@keyframes fadeout_css3_kf {
  0% {opacity: 1;}
  100% {opacity: 0; visibility: hidden; }
}
@-webkit-keyframes fadeout_css3_kf{
	0% {opacity:1;}
	100% {opacity:0; visibility: hidden;}

jquery.fadecss3.js として保存

$.fn.fadeInCss3 = function(duration, easing) {
  var event_alias = "animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd";
  if (! duration){duration=400;}
  if (! easing){easing='linear';}
  var _this = this;
  setTimeout(function() {
    return $(_this).show().css({
        'animation'                 : 'fadein_css3_kf 400ms linear 0s 1 normal' ,
        'animation-duration'        : duration + 'ms' ,
        'animation-timing-function' : easing ,
        'animation-fill-mode'       : 'forwards' ,
        'visibility'                : 'visible'
    }).on(event_alias, function(){
      $(this).off(event_alias);
      $(this).css({
        'visibility' : 'visible' ,
        'animation'  : 'none'
      });
    });
  }, 0);
};

$.fn.fadeOutCss3 = function(duration, easing) {
  var event_alias = "animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd";
  if (! duration){duration=400;}
  if (! easing){easing='linear';}
  $(this).each(function(){
    if( $(this).filter(':not(:hidden)').length ){
      $(this).show().css({
          'animation'                 : 'fadeout_css3_kf 400ms linear 0s 1 normal' ,
          'animation-duration'        : duration + 'ms' ,
          'animation-timing-function' : easing ,
          'animation-fill-mode'       : 'forwards' ,
          'visibility'                : 'visible'
      }).on(event_alias, function(){
        $(this).off(event_alias);
        $(this).css({
          'visibility' : 'hidden' ,
          'animation'  : 'none' ,
          'display'    : 'none'
        });
      });
    }
  });
  return $(this);
};

ただ現時点では CSSアニメーションはjQuery本体のanimate()よりは早いものの、Velocity.js には劣るようです。 参考 : http://bit.ly/1QnSfRn

■ jquery.transit · GitHub

https://github.com/rstacruz/jquery.transit#readme

jQueryを使いますが、アニメーション自体はCSS3アニメーションなのでスマホでも軽いです。 例：（フェードインの例）

<div id="test" style="border:1px solid red;">テストです</div>

$('#test').transition({ opacity: 0.0, scale: 0.5 }, 0);
$('#test').transition({
  opacity : 1.0,
  scale   : 1.0 ,
  duration: 5000,
  complete: function() {
    alert("CSS3 animation complete!");
  }
});

● 1.【 jQueryプラグイン jquery.jpostal.js】

設置が簡単なのでおすすめです。住所データも自動更新。
https://github.com/ninton/jquery.jpostal.js

ライブラリの読み込み

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.jpostal.js"></script>

スクリプトの実行（郵便番号を入力すると自動でフォームに住所を入力）

$('#postcode1').jpostal({
	postcode : [
		'#postcode1', // 郵便番号 前3桁
		'#postcode2' // 郵便番号 後4桁
	],
	address : {
		'#address1'  : '%3', // 都道府県
		'#address2'  : '%4', //住所1
		'#address3'  : '%5' // 住所2
	}
});

です。とても簡単ですね。

HTMLは次のように準備します。

郵便番号 : <input type="text" name="postcode1" id="postcode1" > - <input type="text" name="postcode2" id="postcode2" > 

都道府県 : <input type="text" name="address1" id="address1" > 
住所1 : <input type="text" name="address2" id="address2" > 
住所2 : <input type="text" name="address3" id="address3" > 

● 「郵便番号から住所を自動で入力」ボタンを設置して、ボタン押した時に住所を自動で入力する

「郵便番号から住所を自動で入力」ボタンを設置して、ボタン押した時に住所を自動で入力するには、

<button id="btn_post" type="button">郵便番号から住所を自動入力</button>

というボタンを設置して

  $(document).ready(function() {
    $('#btn_post').jpostal({
      click : '#btn_post',
      postcode : [
        '#zip_code'
      ],
      address : {
        '#prefecture_name': '%3',
        '#addr_name'    : '%4%5'
      }
    });
  });

という風に呼び出します。

● 郵便番号が入力されたときに自動的に全角から半角へ変換する

moji.js を使用して次のようにします。

・moji.js

https://github.com/niwaringo/moji

<script src="./js/moji.js"></script>
<script type="text/javascript">
 $("#zip_code").keyup(function(){
    var str = $(this).val();
    var han = moji(str).convert("ZEtoHE").toString();
    $(this).val(han);
  });
</script>

● 2. 【ajaxzip3】

郵便番号から住所を自動入力するには住所データ自動更新してくれる ajaxzip3 も簡単便利です。
https://github.com/ajaxzip3/ajaxzip3.github.io

ライブラリの読み込み

<script src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js" charset="UTF-8"></script>

郵便番号入力欄に追加

正規表現で郵便番号が7桁入力された時に検索を実行するようにします。 【name=zipcode】のテキストエリアに7桁の郵便番号を入力すると 【name=prefecture】のドロップダウンリスト 【name=address】の１行テキストに住所が反映されます。 ■ HTMLの1行テキストを下記のように修正

<input name="zipcode" type="text" />
↓
<input name="zipcode" type="text" onkeyup="check_zip(this);" />

■ HTMLの＜head＞タグ内に下記を追加（.js ファイルにして外に出してもok）

<script>
var postal_name = '';
function check_zip( _this ){
    if ( postal_name != _this.value ){
        AjaxZip3.zip2addr( '_this', 'prefecture', 'address' );
        postal_name = _this.value;
    }
}
</script>

これだけです。

デバッグ時には必ず出くわすのですが、jQueryオブジェクトやDOMオブジェクトの中身を見たい！という時があります。

・Safari、Chrome, Firefox でオブジェクトの中身を確認したいときには以下のようにします。（出力は「エラーコンソール」）

console.log( object )

Chrome, Firefox でオブジェクトの中身が DOMオブジェクトなのか jQueryオブジェクトなのかも合わせて確認したいときは

jq_obj =  $("#test01");
console.group('jq_objの中身は↓');
console.log(Object.getPrototypeOf( jq_obj ));
console.log(jq_obj);
console.groupEnd();

とするとメッセージがグループ化されていい感じに見えます。