備忘録：JavaScript、jQuery スニペット

JavaScript、jQueryのよく使いそうな基本的(基礎的)スニペット。

// スマホ判別

if (navigator.userAgent.match(/(Android|iPhone|iPad|iPod|Mobile|Windows Phone)/)) {
	// スマホ、iPad
} else {
	// PC 他
}

// DOMがロードされて操作・解析が可能になったタイミングでの処理（jQueryを使わない場合）

window.onload = function() { // window.onloadは複数書けない
	// ...
};

window.addEventListener('load', function() {
	// ...
});

// DOMがロードされて操作・解析が可能になったタイミングでの処理（jQuery）

$(function(){
	// ...
});

// 画像などを含め、ページが完全に読み込まれたタイミングでの処理（jQuery）

$(window).load(function(){
	// ...
});

// 画面がリサイズされたタイミングでの処理（jQuery）

$(window).resize(function(){
	// ...
});

// 画面の幅、高さ

	window.innerWidth
	window.innerHeight
	$(window).width()
	$(window).height()

// 要素の表示

	$('#foo').show();
	$('#foo').css('display', '');

// 要素の非表示

	$('#foo').hide();
	$('#foo').css('display', 'none');

// セレクタ除外（.not）

	$('#foo').not('#dummy').css('display', '');

// 文字列置換（半角・全角スペースを+に置換）

	str.replace(/ /g, '+').replace(/　/g, '+');

// 四捨五入

	Math.round(val);

// 四捨五入（小数点第1位以下）

	Math.round(val * 10) / 10;

// 切り捨て

	Math.floor(val);

// 切り上げ

	Math.ceil(val);

// 数値→文字列

	String(num);

// 文字列→数値

	Number(str);

// ページリダイレクト（画面遷移）

	window.location.href = 'http://...';

// 新しいタブを開き、ページを開く

	window.open('http://...', '_blank');

// ボタンクリック

	<input type="button" value="ＸＸ" onClick="foo()">
	<a href="#" onClick="foo();return false;">ＸＸ</a>

// ボタンクリック（スマホの場合、onClickよりも望ましい）

	<input type="button" value="ＸＸ" ontouchend="foo()">

// inputタグ等にフォーカス（jQuery）

	$('#foo').focus();

// HTML書き換え（jQuery）

	$('#foo').html('xxx');

// inputタグ等value値取得（jQuery）

	var foo = $('#foo').val();

// cookie 値セット 7日間 (jquery.cookie.js)

	$.cookie('キー', '値', { expires:7 });
	$.cookie('キー', '値', { expires:7,  path:'/' });

// cookie 値取得 (jquery.cookie.js)

	var foo = $.cookie('キー');

// cookie 削除 (jquery.cookie.js)

	$.removeCookie('キー');

// キーボード入力文字読み込み

document.onkeydown = function (event) {
	if (event.keyCode >= 49 && event.keyCode <=58) {	// キーボード 1～9
		var key = event.keyCode - 48;
		location.href = '?m='+key;	// リダイレクト
	}
}

// URLパラメーターを取得し配列に格納

var arg = new Object;
var pair=location.search.substring(1).split('&');
for(var i=0;pair[i];i++) {
	var kv = pair[i].split('=');
	arg[kv[0]]=kv[1];
}
http://exmple.com?hoge1=xxxなら、arg.hoge1 = 'xxx'

// 画像本来のサイズ(幅, 高さ)を取得

var element = document.getElementById(id);
var w = element.naturalWidth;
var h = element.naturalHeight;

// 関数で、戻り値を複数返す

var obj = new Object();
obj.hoge1 = ???;
obj.hoge2 = ???;
return obj;

// canvasのサイズを変更したい場合は、cssではうまくいかない。（jQuery）

<canvas id="canvas"></canvas>
$('#canvas').attr('width', w);
$('#canvas').attr('height', h);

// iframeのsrcを書き換える。

<iframe name="fName" src=""></iframe>
document.fName.location.href = 'http://...';

// imgのsrcを書き換える。（jQuery）

<img id="photo" src="...">
$('#photo').attr('src','hoge.jpg');

// selectのoption選択で関数コール。option value取得。（jQuery）

<select id="hoge" onchange="foo()">
function foo() {
    var sel_val = $('#hoge').val();
}