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の最新記事】
- jQuery の $.get を使用した ajax のテンプレート
- jquery.balloon.js を使用した簡単なバルーン( マウスオーバーで表示する追加説明用 )の作り方
- jQuery による link 要素の追加と削除を bootstrap.css でリアルタイムチェック
- FileReader で、ローカルの CSV を読み込んで(shift_jis)、jQuery でテーブルを作成して表示する
- jQuery + bootstrap.js で ajax の GET と POST を使用した DB テーブルを更新する UI テンプレート
- jQuery : 貼り付けるだけで、ページ右下にページ先頭にジャンプするリンクを表示させる( アニメーションは無し )
- STYLE 要素を追加して、CSS テキストをセットして、jQuery で CSS に important 指定を追加する。
- ページの右下に、ページの先頭へ移動するボタンを追加する(ページの先頭から 200px までは、スクロールボタンを表示しない)
- テーブルのTDをクリックしたら、INPUT で値を変更可能にして、元の値と違うものにはフラグを立てる処理を絵で書いて説明してみました
- jQuery を使用してサーバから取得した JSON データを元にテーブルを作成し、その後から列を加工する
- JSON 配列を WEB より読み出して jQuery で動的にテーブルを作成して表示する
- jQuery UI の Datepicker Widget のオプション
- FormData を使用して、jQuery で配列として PHP に送る
- 必要なデータを隠しリストボックス( multiple ) に jQuery で追加して配列として PHP に送る
- Android Studio の追加日本語化用に、キャラクタセットに依存しないコード文字列を作成するツールを作成しました
- 画像ファイルが存在した時のみ、表示する jQuery の記述
- jQuery で mobile(スマホ) かどうかのチェックをしたくて調べたら、Stack Overflow の記事でいろんな方法が答えられていました。
- jQuery と FileReader オブジェクトによる、ローカルの複数画像ファイルのプレビュー表示
- とても面白くて簡単な jQuery のクリックしたコンテンツ以外を暗転(Blackout) するサンプル
- jQuery で、左右に並んだリストボックスの右側のデーターをダブルクリックしたら左へ転送してソートする処理