複数の非同期通信を制御する | $.Deferred

以下のサンプルは3つの非同期処理(async1,async2,async3)がすべて終えたら、最後の処理を実行するサンプルである。
async1~3は数秒後にテキストをはきだす非同期処理であり、制御用の機能である$.Deferredが組み込まれている
すべての非同期処理が終わったらdoneで最後の処理を実行する。
これらはjQueryの標準機能である。

検証

HTML
	<input type="button"  onclick="test1()" value="TEST1" />
	<div id="res"></div>
	

JavaScript

	function test1(){
		$('#res').append('TEST<br>');
		
		$.when(
			async1(),
			async2(),
			async3()
		).done(
			function(){
				$('#res').append('すべての非同期処理を実行しました。');
			}
		).fail(function(){
			alert('非同期処理の失敗');
		})
	}
	
	
	function async1(){
		var dfd = $.Deferred();
		window.setTimeout(function(){
			$('#res').append("<div class='text-success'>①ネコ</div>");
			dfd.resolve();
		}, 1000);
		return dfd.promise();
	}
	
	
	function async2(){
		var dfd = $.Deferred();
		window.setTimeout(function(){
			$('#res').append("<div class='text-warning'>②ヤギ</div>");
			dfd.resolve();
		}, 300);
		return dfd.promise();
	}
	
	
	function async3(){
		var dfd = $.Deferred();
		window.setTimeout(function(){
			$('#res').append("<div class='text-danger'>③カニ</div>");
			dfd.resolve();
		}, 1200);
		return dfd.promise();
	}
	



タグ種類を問わずに要素から値を取得する | getValueEx

	var v = _getValueEx($('#xxx'));
	
	/**
	 * タグ種類を問わずに要素から値を取得する
	 * @param elm 要素
	 * @returns 要素の値
	 */
	function _getValueEx(elm){
		
		var v = undefined;
		var tagName = elm.prop("tagName"); 
		
		if(tagName == 'INPUT' || tagName == 'SELECT' || tagName=='TEXTAREA'){
			// type属性を取得する
			var typ = elm.attr('type');
			
			
			if(typ=='checkbox'){
				
				v = 0;
				if(elm.prop('checked')){
					v = 1;
				}
				
			}
			
			else if(typ=='radio'){
				var opElm = form.find("[name='" + f + "']:checked");
				v = 0;
				if(opElm[0]){
					v = opElm.val();
				}
	
			}
			
			else{
				v = elm.val();

			}
			
		}else{
			v = elm.html();
		}
		return v;
	}
	


テーブル行内の任意要素から行番(行インデックス)を取得する

デモ

サンプル

	<script>
	function test1(btn){
		var btnElm = $(btn);
		var trElm = btnElm.parents('tr');
		var row_index = trElm.index();
		alert('行番=' + row_index);
	}
	</script>
	
	<table class="tbl2">
		<thead>
			<tr><th>id</th><th>コード</th><th>名前</th><th>備考</th></tr>
		</thead>
		<tbody>
			<tr><td>1</td><td>neko</td><td>猫</td><td><input type="button" onclick="test1(this)" value="test1" /></td></tr>
			<tr><td>2</td><td>yagi</td><td>山羊</td><td><input type="button" onclick="test1(this)" value="test1" /></td></tr>
			<tr><td>3</td><td>same</td><td>鮫</td><td><input type="button" onclick="test1(this)" value="test1" /></td></tr>
			<tr><td>4</td><td>wasi</td><td>鷲</td><td><input type="button" onclick="test1(this)" value="test1" /></td></tr>
			<tr><td>5</td><td>goki</td><td>御器</td><td><input type="button" onclick="test1(this)" value="test1" /></td></tr>
	
		</tbody>
	</table>
	


テーブルから最初の行要素(インデックス=0)を取得する

	var tbl = jQuery('#tbl1); // テーブル要素を取得
	var tr1 = tbl.find('tbody tr:first-child'); // 最初の行要素
	


jQueryオブジェクトであるか判別する

	if(obj1 instanceof jQuery){
		console.log('jQueryオブジェクト');
	}else{
		console.log('別のオブジェクト');
	}
	


jQuery.uiが読み込まれていなければ読む込む


	$(function(){
		// jQuery.uiが読み込まれていなければ読む込む
		if(typeof jQuery.ui == 'undefined'){
			
			// jQuery.ui.cssを読み込む
			var css_link = document.createElement('link');
			css_link.rel = 'stylesheet';
			css_link.href = 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css'
			document.body.appendChild(css_link);
			css_link.onload = function() {
				console.log('load jquery.ui.css');
				
				// jQuery.ui.jsを読み込む
				var js_scr = document.createElement('script');
				js_scr.type = "text/javascript";
				js_scr.src = 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js';
				document.body.appendChild(js_scr);
				js_scr.onload = function() {
		
					console.log('load jquery.ui.js');

					init(); // 初期化を行う
				}
			}
			

		}else{
			
			init();  // 初期化を行う
		}
	});

	function init(){
		console.log('ここで任意の初期化を行う');
	}
	


jQueryとjQuery UIのバージョンを調べる

	jQuery.fn.jquery
	jQuery.ui.version
	


	console.log($.fn.jquery); // jQueryのバージョンを出力
	console.log($.ui.version); // jQuery UI のバージョンを出力
	


オリジナル属性を選択する


	<div data-xxx="a">AAA</div>
	
	<script>
	$(function(){
		var elm = $('[data-xxx]');
		console.log(elm.html());// 出力→ AAA
	});
	</script>
	


オブジェクトとして保持してから操作したほうが処理は速い

毎回、直接セレクタを指定して操作する方法は少し遅い
		for(var i=0;i<10000;i++){
			var text = $("#iroha").html();
		}
	

繰り返しの処理である場合、一旦、オブジェクトとして取得してから操作すると速い
		var obj = $("#iroha");
		for(var i=0;i<10000;i++){
			var text = obj.html();
		}
	

検証

jQueryオブジェクトに紐づいている要素が変更されたとき、jQueryオブジェクトにも変更が反映されているか?

jQueryオブジェクトに紐づいている要素が変更されたとき、jQueryオブジェクトにも変更が反映されている。

HTML
	<div id="test1">ティラノサイウルス</div>
	<input type="button" value="検証" onclick="test1()" class="btn btn-primary" />
	

JavaScript
	var m_obj;
	
	// 初期化
	$(() => {
		m_obj = $("#test1");
	})
	
	function test1(){
		$("#test1").html('キノボリトカゲ');
		alert(m_obj.html());// →キノボリトカゲ
	}
	
検証



複数要素からインデックスを指定して各要素にアクセス、および複数要素の要素数の取得

HTML

	<div id="animal">
		<div class="neko">白ネコ</div>
		<div class="inu">黒犬</div>
		<div class="neko">赤ネコ</div>
		<div class="neko">巨大ネコ</div>
		<div data-test="yagi">やぎ</div>
		<div data-test="yagi">ゴート</div>
	</div>
	

JavaScript

	var animal = $("#animal");
	var nekos = animal.find('.neko');

	console.log(nekos.eq(0).html());// → 白ネコ
	console.log(nekos.eq(1).html());// → 赤ネコ
	console.log(nekos.eq(2).html());// → 巨大ネコ
	console.log(nekos.length);// → 3
	
	var inu = animal.find('.inu');
	console.log(inu.eq(0).html());// → 黒犬
	console.log(inu.length);// → 1
	
	var tanuki = animal.find('.tanuki');
	console.log(tanuki.eq(0).html());// → undefined
	console.log(tanuki.length);// → 0
	
	var yagi = animal.find("[data-test='yagi']");
	console.log(yagi.eq(0).html());// → やぎ
	console.log(yagi.eq(1).html());// → ゴート
	console.log(yagi.length);// → 2