jQuery のスニペット集
このページは、jQuery のスニペットなどをまとめる予定のページです。
目次
注意
- コードのライセンスは CC0 (クレジット表示不要、改変可、商用可) です。
スニペット
DOMContentLoaded
jQuery(function($){
// 処理
});
$(function(){})や$(document).ready(function(){})でもだいたい同じ意味です。上記のものだと、function 内で$が必ず jQuery のものであることが保証されます。
Ajax
$.ajax({
url: "http://example.com/data", // 通信先URL
// method: "POST", // メソッド (指定しない場合 GET)
// dataType: "json", // データの種類 (指定しない場合自動推測)
// data: {}, // 送信データ
timeout: 10000 // タイムアウト [ms]
}).done(function(data, textStatus, jqXHR){
console.log('OK', data);
}).fail(function(jqXHR, textStatus, errorThrown){
// エラー処理
console.log('ERROR');
});
イベントハンドラ
// プルダウン(name=select1)の change イベント発生時の処理
$(document).on("change", "select[name=select1]", function(){
var value = $(this).val(); // 処理
});
- https://api.jquery.com/on/
on(イベント, 監視する要素のセレクタ, ハンドラ)の形にしておくと、対象要素があとから動的に追加される場合などにも対応しやすくなります。
プルダウン
$("select[name=select1]").val("01"); // プルダウン(name=select1)の <option value="01"> を選択
$("select[name=select1] option").prop("selected", false); // 選択解除 (一番上の項目が選択)
$("select[name=select1]").val([]); // 選択解除 (空の内容が選択)
var value = $("select[name=select1]").val(); // 選択値取得
ラジオボタン
$(":radio[name=radio1]").val([1]); // ラジオボタン(name=radio1)のvalue=1のラジオボタンを選択
$(":radio[name=radio1]").prop("checked", false); // 選択解除
$(":radio[name=radio1]").val([]); // 選択解除
var value = $(":radio[name=radio1]:checked").val(); // 選択値取得
チェックボックス
$(":checkbox[name=checked1]").val([1, 2]); // チェックボックス(name=checked1)のvalue=1, value=2のチェックボックスにチェック
$(":checkbox[name=checked1]").prop("checked", false); // 選択解除
$(":checkbox[name=checked1]").val([]); // 選択解除
var value = $(":checkbox[name=checked1]:checked").val(); // 選択値取得 (1つ)
var values = $(":checkbox[name=checked1]:checked").map(function(){ return this.value }).get(); // 選択値取得 (複数)
スムーススクロール
$('html, body').animate({ scrollTop: 0 });
$('html, body').animate({ scrollTop: $('.foo').offset().top });