● 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.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();

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