jQuery 忙しい人向けサンプル集【サンプルコードあり】

よく使うjQueryの操作を備忘録的にまとめました

文字列操作

改行コードを<br>へ変換

function replaceLineFeedCode(str) {
	return str.replace(/\r?\n/g, '<br>');
}

function replaceLineFeedCode(str) {

return str.replace(/\r?\n/g, '<br>');

}

ボタン

ボタン化、クリックイベント

$('#btnId').button().click(function () {
	//TODO 処理
});

$('#btnId').button().click(function () {

//TODO 処理

});

ダイアログ

初期化

	$("#dlg").dialog({
		modal: true, 	    //モーダル表示
		title: "タイトル", 	//タイトル
		buttons: { 		   //ボタン
			"OK": function () {
				$("#dlg").dialog("close");
			},
			"キャンセル": function () {
				$("#dlg").dialog("close");
			}
		},
		autoOpen: false //デフォルトの表示設定
	});

$("#dlg").dialog({

modal: true, //モーダル表示

title: "タイトル", //タイトル

buttons: { //ボタン

"OK": function () {

$("#dlg").dialog("close");

"キャンセル": function () {

$("#dlg").dialog("close");

}

autoOpen: false //デフォルトの表示設定

});

open,close

				$("#dlg").dialog("close");

1	$("#dlg").dialog("close");

JSON

Tableへ挿入

<input type="button" id="btnAddRow" value="データ追加"/>
<table id="tblLst">
	<tr>
		<th>No</th>
		<th>名称</th>
		<th>個数</th>
	</tr>
</table>

<tr>

</tr>

</table>

//初期処理
$(function() {
	initButton();
});
 
//ボタン初期化
function initButton() {
	$('#btnAddRow').button().click(function() {
		addRow();
	});
}
 
// Jsonデータをテーブルに挿入
function addRow() {
	var fruits= [
		{"name" : "ぶどう","number" : "10"},
		{"name" : "りんご","number" : "20"},
		{"name" : "みかん","number" : "30"}
		];
 
	$.each(fruits, function(i, val) {
		$('#tblLst tr:last').after('<tr>'
									+ '<td>' + i + '</td>'
									+ '<td>' + val.name + '</td>'
									+ '<td>' + val.number + '</td>'
								 + '</tr>');
	});
}

//初期処理

$(function() {

initButton();

});

//ボタン初期化

function initButton() {

$('#btnAddRow').button().click(function() {

addRow();

});

}

// Jsonデータをテーブルに挿入

function addRow() {

var fruits= [

{"name" : "ぶどう","number" : "10"},

{"name" : "りんご","number" : "20"},

{"name" : "みかん","number" : "30"}

];

$.each(fruits, function(i, val) {

$('#tblLst tr:last').after('<tr>'

+ '<td>' + i + '</td>'

+ '<td>' + val.name + '</td>'

+ '<td>' + val.number + '</td>'

+ '</tr>');

});

}

JSON 変換

jQuery JSONへ変換

JSONオブジェクトへの変換手順をまとめましたJSON形式でデータ文字列を宣言果物をまとめた「fruits」オブジェクトを用意hidden項目に値設定/** * Jsonデータを設定 */function setJsonData() { v...

クラス

宣言

function Fruit() {
	var self = this;

	//プロパティ
	this.fruitNo = "";
	this.fruitName = "";
	this.fruitKbn = "";
	this.memo = "";

	//メソッド定義
	User.prototype.getScreenVal = Fruit_getScreenVal;

	function Fruit_getScreenVal() {
		self.userNo = convertNullToEmpty($('#fruitNo').val());
		self.userId = convertNullToEmpty($('#fruitName').val());
		self.fruitKbn = $('input:radio[name="fruitKbn"]:checked').val();
		self.memo = $('#memo').val();
		return self;
	}
}

function Fruit() {

var self = this;

//プロパティ

this.fruitNo = "";

this.fruitName = "";

this.fruitKbn = "";

this.memo = "";

//メソッド定義

User.prototype.getScreenVal = Fruit_getScreenVal;

function Fruit_getScreenVal() {

self.userNo = convertNullToEmpty($('#fruitNo').val());

self.userId = convertNullToEmpty($('#fruitName').val());

self.fruitKbn = $('input:radio[name="fruitKbn"]:checked').val();

self.memo = $('#memo').val();

return self;

}

チェックボックス

JSON配列をチェックボックス化

<table>
	<tbody id="tbl-tbody"></tbody>
</table>

<table>

</table>

function createCheckBoxs(jsonData) {
	var htmlString = "";
	var tbody = $('#tbl-tbody');
	for (var i = 0; i < jsonData.length; i++) {
		htmlString = htmlString + '<tr><td>' + '<label><input type="checkbox" name="checkBoxs">' + jsonData[i].name + '</label>' + '</td></tr>';
	}
	tbody.html(htmlString);
}

function createCheckBoxs(jsonData) {

var htmlString = "";

var tbody = $('#tbl-tbody');

for (var i = 0; i < jsonData.length; i++) {

htmlString = htmlString + '<tr><td>' + '<label><input type="checkbox" name="checkBoxs">' + jsonData[i].name + '</label>' + '</td></tr>';

}

tbody.html(htmlString);

}

チェックされた値を取得(配列からカンマ区切り)

/**
 * チェックされたチェックボックスの値をカンマ区切りで取得
 */
function getCheckBoxCheckedVals(name) {
	// チェックされたvalue値を配列として取得
	var checkedVals = $('input[name=' + name +']:checked').map(function(){
	  return $(this).val();
	}).get();
	// カンマ区切り文字列へ変換
	var commaStr = checkedVals.join(',');
	return commaStr;
}

/**

* チェックされたチェックボックスの値をカンマ区切りで取得

function getCheckBoxCheckedVals(name) {

// チェックされたvalue値を配列として取得

var checkedVals = $('input[name=' + name +']:checked').map(function(){

return $(this).val();

}).get();

// カンマ区切り文字列へ変換

var commaStr = checkedVals.join(',');

return commaStr;

}

番外編

指定要素へのスクロール

jQuery 指定した要素にスクロール

divを親としてスクロールの位置を指定した要素へスクロールさせたくサンプルソースを作成ボタンクリックでテーブルの指定要素へスクロールしますサンプルソースコピペでOK！CSSはBootstrapを使用全文<style>/** スクロール用のd...

テーブルスクロール縦横ヘッダ固定

jQueryテーブルスクロール縦横ヘッダ固定

ヘッダを固定縦横スクロールさせるテーブルを一から作ると意外と苦戦しますよねコピペでいつでも作れるようにサンプルを残しますこんな感じで動くよサンプルソースポイントヘッダとデータでtableを分けている JavaScriptスクロール位置の同...

初心者向けおすすめ書籍をご紹介！

jQueryの基本的なところから学びたい人向け

リンク

プログラミングを学んだけど、実際Webシステムで
どうやって開発するの？という方向けの書籍です

リンク

Kindle Unlimitedなら無料で読めます
初回登録、30日間無料！

Kindle Unlimitedを30日間無料体験する

まとめ

Tipsを随時更新中！
コピペで使ってください。