JQuery/JavaScript関連

提供: 文具堂 Wiki三昧
移動先: 案内検索


ブラウザ ユーザエージェント一覧

navigator.userAgent

Mac Firefox
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.8; rv:17.0) Gecko/20100101 Firefox/17.0

Mac Chrome
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.101 Safari/537.11

Mac Safari
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/536.26.17 (KHTML, like Gecko) Version/6.0.2 Safari/536.26.17

Windows IE9
Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)

Windows FireFox
Mozilla/5.0 (Windows NT 6.1; rv:17.0) Gecko/20100101 Firefox/17.0

Windows Chrome
Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.97 Safari/537.11

Windows Safari
Mozilla/5.0 (Windows NT 6.1) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2

iPhone
Mozilla/5.0 (iPhone; CPU iPhone OS 6_0_1 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A523 Safari/8536.25

iPad
Mozilla/5.0 (iPad; CPU OS 6_0_1 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A523 Safari/8536.25

イベントハンドラのバインディング

$(function(){
  $('#image').load(function(){
    console.log('loaded');
  });

  $('#run').click(function(){
    console.log('click');
  });
});

要素追加・属性・スタイル変更

$('body').append($('<img>').attr('src', 'images/sample.jpg').addClass('icon').css('padding', '2px').attr('width', '200px'));

外部ファイル読み込み

<script type="text/javascript" src="application.js"></script>

HTML5
<script src="application.js"></script>

ページ読み込み後実行

<script>
$(document).ready(function(){
	loadFunction();
});
</script>

DOMオブジェクトへの変換

var obj = $('<div>');
console.log(obj.get(0));

画像のロールオーバー (preloadあり)

ASCII.jp:jQueryでロールオーバー!プリロード対応版

$(function(){
    $("img.rollover").mouseover(function(){
        $(this).attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2"))
    }).mouseout(function(){
        $(this).attr("src",$(this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/, "$1$2"));
    }).each(function(){
        $("<img>").attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2"))
    })
})

チェックボックスの一括選択、一括解除

function checkAllProducts(){
	$(':checkbox').attr('checked','checked');
}

function uncheckAllProducts(){
	$(':checkbox').removeAttr('checked');
}

チェックボックスのチェック判定

if($("#picture").prop('checked')){
	...
}

チェックボックスをチェックをつける・はずす

チェックをつける
$("#ruby").prop("checked", true);

チェックをはずす
$("#ruby").prop("checked", false);

ラジオボックスのチェック判定

var lang = $("input[name=lang]:checked").val();

<input type="radio" name="lang" value="0">日本語
<input type="radio" name="lang" value="1">英語

ラジオボックスへの値設定

val()で設定
$("input[name=lang]").val(["0"]);

idで設定
$("#english").prop("checked", true);

配列

取り出し

var a = [3, 5, 6, 2];
for (var i = 0; i < a.length; i++){
  console.log(a[i]);
}
function formCheck(){
	var errors = [];
	if($("#name").val() == ""){
		errors.push("お名前を入力して下さい。");
	}
	if($("#comment").val() == ""){
		errors.push("コメントを入力して下さい。");
	}
	if(errors.length > 0){
		alert(errors.join("\n"));
		return false;
	}else{
		return true;
	}
}

正規表現

var reg = /product_(\d+)/;
var res = ($(this).attr('id')).match(reg);
var product_id = Number(RegExp.$1);
if(res){
  ...
}

img 画像差し替え

$("#photo").attr("src", "http://example.com/image/photo1.png");