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 setJs...

クラス

宣言

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を使用全文...

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

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

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

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

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

リンク

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

リンク

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

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

まとめ

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

未経験からエンジニアへ転職しよう！

プログラマー・ITエンジニア等の人材は、不足しています

プログラマの単価(1月の金額)は60～80万円が相場です

スマホの普及、IoT社会の発展によりプログラマの需要は今後も高いでしょう

未経験からでもプログラマーへの転職を目指すのは大いにありです

転職活動自体は、リスクゼロなので、まずは転職サイトに登録して

どんな転職先があるのか調べていくことを進めていくことをおすすめします

おすすめの転職サイト
マイナビジョブ20's

マイナビジョブ20's

マイナビジョブ20’sは、20代の転職を専門とする転職エージェントです

精通したキャリアアドバイザーから、最適な会社を提案してもらえます

カウンセリング、書類添削等就職活動を手厚くサポート！

20代・第二新卒・既卒の転職ならマイナビジョブ20's！！

・20代の転職を専門とする転職エージェント
・転職活動をしっかりサポート
・サービス利用料は￥0