SQLの窓

2014年07月02日


jQuery でボタンを作成して、this でボタンのカスタム属性を参照する方法のバリエーション

▼ こちらのツールの『サンプル』ボタンで表示されるウインドウの『属性の参照』で実行できます


DOM でなにもかも実装しようとすると、とても時間コストがかかりすぎます。jQuery を使用すると、それを大幅に削減できますが、だからと言って DOM の仕様を無視する、または覚えないのは問題があります。

全て jQuery で書いたほうが説明は簡単ですが、少なくとも data-* 属性ではどちらも理解して使えるようにしておいたほうがいいと思います。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">

$(function(){

	// ボタン
	$("#button_control")
		.attr({
			"type": "button",
			"data-my-data": "カスタム属性"
		})
		.val("ボタン")
		.css({
			"font-size": "20px",
			"background-color": "orange",
			"font-weight": "bold",
			"border-radius": "10px"
		})
		.click(function(){
			console.log("ボタンがクリックされました");

			// 以下の4つは全て my_button を表示します
			console.log( this.name );
			console.log( $(this)[0].name );
			console.log( $(this).prop("name") );
			console.log( $(this).attr("name") );

			// 以下の4つは全て カスタム属性 を表示します
			console.log( $(this).data("my-data") );
			console.log( $(this).attr("data-my-data") );
			console.log( this.dataset.myData );
			console.log( $(this)[0].dataset.myData );

			// 以下の4つは全て 新しい属性 を表示します
			console.log( $(this).data("your-data") );
			console.log( $(this).attr("data-your-data") );
			console.log( this.dataset.yourData );
			console.log( $(this)[0].dataset.yourData );
		});

});

</script>

<input
	id="button_control"
	name="my_button"
	data-your-data="新しい属性">
click イベントの中で参照される this は DOM です。


【jQueryの最新記事】
posted by lightbox at 2014-07-02 23:50 | jQuery | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり