クリックされた要素のインデックスを取得する。 | 何番目の要素であるか？


＜例＞
クリックした要素が、「class="test_a"」の要素群のうち何番目であるか？
何番目であるかは、以下の方法でインデックスを取得することにより知ることができる。


HTMLソースコード
	<input type="button" class="test_a" onclick="clickTest(this)" />
	<input type="button" class="test_a" onclick="clickTest(this)" />


JSソースコード
	function clickTest(elm){
		var index = $(".test_a").index(elm);
		alert(index);

	}

対象要素のインデックス（順番）を取得する

	var index1 = $(親要素 子要素のタグ).index($(子要素));

ソースコード

	<script>
	$(function(){
		var index1 = $("#animals div").index($('#kani'));
		console.log(index1);// 出力→2
	});
	</script>
	
	<div id="animals">
		<div id="neko">ネコ</div>
		<div id="yagi">ヤギ</div>
		<div id="kani">カニ</div>
		<div id="same">サメ</div>
	</div>


イベントリスナーの登録

JSソースコード 

		$('.row_check').click((evt)=>{
			var elm = $(evt.currentTarget);
			console.log(elm.val());
		});

旧式 
	$(function() {
		$('.row_check').click(function(e){
			var v=$(this).val();
			console.log(v);
		});
	});

HTMLソースコード 
	<input type="text" class="row_check" value="neko" />
	<input type="text" class="row_check" value="inu" />
参考

イベントの発火

Demo

HTML 

	<input type="button" value="イベント発火" class="btn btn-success" onclick="fire()"/><br>
	<input id="btn1" type="button" value="ボタン1" class="btn btn-default"  onclick="test2()"/>
	<input type="text" id="text1" value="チェンジイベントテスト"  />
	<div class="console" id="res"></div>
JavaScript 

	$(()=>{
		// クリックイベント
		$('#btn1').click((evt)=>{
			var btn = $(evt.currentTarget);
			var msg = btn.attr('value') + 'が押されました。<br>';
			$('#res').append(msg);
		});
		
		// チェンジイベント
		$('#text1').change((evt)=>{
			var tb = $(evt.currentTarget);
			var msg = 'テキストチェンジ→ ' + tb.val() + '<br>';
			$('#res').append(msg);
		});
	});
	
	function fire(){
		$('#btn1').trigger('click'); // クリックイベント発火
		$('#text1').trigger('change'); // チェンジイベント発火
	}
	
	function test2(){
		$('#res').append('属性：onclickによる呼び出し<br>');
	}

カラーピッカー | farbtastic

基本　サンプル1 
	<html lang="ja">
		<head>
			<meta charset="utf-8">
			<script src="jquery-1.11.1.min.js"></script>
			<script src="farbtastic.js"></script>
			<link rel="stylesheet" type="text/css" href="farbtastic.css" />
			<script>
				$( function() {
					$('#smp_picker1').farbtastic('#smp_color1');
				});
			</script>
		</head>
	<body>
		<input type="text" id="smp_color1" name="color" value="#123456" /><div id="smp_picker1"></div>
	</body>
	</html>
コールバックの組み込み　サンプル2 
	<html lang="ja">
		<head>
			<meta charset="utf-8">
			<script src="jquery-1.11.1.min.js"></script>
			<script src="farbtastic.js"></script>
			<link rel="stylesheet" type="text/css" href="farbtastic.css" />
			<script>
				$( function() {
					$('#smp_picker1').farbtastic(function(color){
						$('#xxx').css('background-color',color);
					});
				});
			</script>
		</head>
	<body>
		<div id="smp_picker1"></div>
		<div id="xxx">XXX</div>
	</body>
	</html>
クリックで小窓のようにカラーピッカーを表示する方式　サンプル3 
	<html lang="ja">
		<head>
			<meta charset="utf-8">
			<script src="jquery-1.11.1.min.js"></script>
			<script src="farbtastic.js"></script>
			<link rel="stylesheet" type="text/css" href="farbtastic.css" />
			<script>
				$( function() {
					$('#smp_picker1').farbtastic('#xxx');
					$('#xxx').click(function(e){
						$('#smp_picker1').show();
					});
					$('#xxx').blur(function(e){
						$('#smp_picker1').hide();
					});
				});
			</script>
		</head>
	<body>
		<input type="text" id="xxx"  value="#123456" /><div id="smp_picker1" style="display:none;position:absolute;"></div>
	</body>
	</html>
参照：Farbtastic Color Picker

オブジェクトのクローンコピーとマージ | jQuery.extend()

jQuery.extendはクローンコピーとマージの両方の役割を持つ。

オブジェクトのクローンコピー
	var obj1={'kani':'かに','neko':{'name':'ライオン','food':'犬のえさ'},'wasi':100};
	var objX = $.extend(true, {}, obj1);
オブジェクトのマージ
	var obj1={'kani':'かに','neko':{'name':'ライオン','food':'犬のえさ'},'wasi':100};
	var obj2={'neko':{'name':'ネコ','food':'ネコのえさ'},'wasi':999,'buta':'ブタ'};
	var objX = $.extend(true, {}, obj1,obj2);
	//objX→{"kani":"かに","neko":{"name":"ネコ","food":"ネコのえさ"},"wasi":999,"buta":"ブタ"}
サンプル

フェードインとフェードアウト | fadeOut,fadeIn,fadeTo

	//3秒間でフェードアウト
	$('#xxx').fadeOut(3000);
	
	//ゆっくりフェードアウト
	$('#xxx').fadeOut('show');
フェードアウト：fadeOut(速度*1,コールバック);
フェードイン：fadeIn(速度,イージング*2,コールバック)
フェードアウト or イン：fadeTo(速度, 不透明度*3, コールバック);




参考：ShanaBraian フェードイン・フェードアウト

パネルをドラッグで動かしたりリサイズする

パネルをドラッグで動かしたりサイズ変更できるようにする。
パネルはbootstrapのpanelである。
ドラッグ移動とリサイズはJQuery UIのdraggableとresizableを使用している。
サンプル
ソースコード 
	<html lang="ja">
		<head>
			<meta charset="utf-8">
			<meta http-equiv="X-UA-Compatible" content="IE=edge">
			<meta name="viewport" content="width=device-width, initial-scale=1">
			<link href="jquery-ui.min.css" rel="stylesheet">
			<link href="bootstrap.min.css" rel="stylesheet">
			<script src="jquery-1.11.1.min.js"></script>
			<script src="bootstrap.min.js"></script>
			<script src="jquery-ui.min.js"></script>
			<script>
				$( function() {
					//～読込イベント処理～
					//ドラッグ移動を組み込み、チャット画面を動かせるようにする。
					var draggableDiv = $('#panel1').draggable();
					
					//ドラッグ移動を組み込むとテキスト選択ができなくなるので、パネルボディ部分をテキスト選択可能にする。
					$('.panel-body',draggableDiv).mousedown(function(ev) {
						  draggableDiv.draggable('disable');
						}).mouseup(function(ev) {
						  draggableDiv.draggable('enable');
						});
					
					//リサイズ機能を組み込む
					$('#panel1').resizable({
						maxHeight:700,
						maxWidth:700,
						minHeight:40,
						minWidth:100,
					});
				});
			</script>
		</head>
		<body>
			<div id="panel1" class="panel panel-primary" style="width:200px;">
				<div class="panel-heading">
					いろは歌
				</div>
				<div class="panel-body">
					いろはにほへとちりぬるをわかよたれそつねならむ<br>
					うゐのおくやまけふこえてあさきゆめみしゑひもせす<br>
				</div>
				<div class="panel-footer">
					フッター
				</div>
			</div>
		</body>
	</html>

パネルをドラッグで動かしたりリサイズする | 埋め込み切替機能付き

サンプル

jQuery UI ダイアログ | シンプルひな形

サンプル





詳細な設定についての説明サイト

document.getElementByIdとの等価オブジェクトを取得する | get(0)

「document.getElementById」と等価のオブジェクトを、jQueryで取得する場合、「get(0) 」メソッドを使う。

例

	<div id="gorira">ゴリラ</div>
	var gorira1 = document.getElementById('gorira');
	var gorira2 = $('#gorira').get(0);
gorira1とgorira2は同じオブジェクトである。

要素のサイズ変更 | jQuery UI Resizable

jQuery UIの機能であるResizableを使うと、要素のサイズをドラッグで変更できます。
$('.selector').resizable(オプション);
サンプル

サイズ変更を無効/有効を切り替える方法

一時的に無効にするには、「disable」を指定します。 
$( ".selector" ).resizable( "disable" );


無効から有効に戻す場合は、「enable」を実行します。 
$( ".selector" ).resizable( "enable" );


公式（英語） 日本語リファレンス

jQuery UIのいくつかの機能をスマホ等に対応させる | jquery.ui.touch-punch.min.js

jQuery UIのDraggableなどのいくつかの機能は、スマホやタブレットに対応していない。
だが「jquery.ui.touch-punch.js」を組み込むことにより対応させることができる。
「jquery.ui.touch-punch.js」はDraggableのほかにもResizableやSlider,Accordionにも対応している。

ダウンロードGIT HUB

使用法は「 jquery.ui.touch-punch.min.js」をjquery.uiの下にインクルードするだけ。 
	<script src="jquery-1.11.1.min.js"></script>
	<script src="jquery-ui.min.js"></script>
	<script src="jquery.ui.touch-punch.min.js"></script>

参考
  1. ホーム
  2. プログラミングの覚書
  3. JavaScriptの覚書
  4. JQueryの覚書