HTMLの変数をjQueryで使えるようにしたい
例えばLaravelでWEBアプリを作成する際にはデータベースと連携して
変数をHTMLに渡すことがよく用いられますが
HTMLの変数をjQueryで使えるようにするためには
data()メソッドを使う必要があります。
jQueryを扱うための注意事項
jQueryを使うための事前準備
jQueryを利用するには次のどちらかの準備が必要です
- jqueryへのリンク(CDN)をHTMLのheadタグ内に記述する
- jqueryを公式HPからダウンロードする
jQuery(JavaScript)はHTMLの後に記述する
後述にサンプルコードがありますが、
jQuery(JavaScript)をHTMLのbodyタグに記述する際は
jQuery(JavaScript)のコードをbodyの最下部に記述します
htmlファイルのコードは上から順に処理されるため
jQuery(JavaScript)をbodyの上部に記述すると
HTMLのコードが読み込まれずエラーの原因になります
実際の操作方法
jQueryのリンクを貼る方法
jQuery CDN にアクセスし
jQuery Core 3.*.*のminifiedをクリック(最新のCDNをクリック）
コピーボタン（Copy to clipboard!）をクリックしてコピーする
<head>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
</head>
data()メソッドとは？
HTMLタグへ事前にdata-****などと属性を付与しておくことで、
付与していたHTMLタグのdata属性に対してjQueryから
値を取得したり、属性名を設定（変更）したり
値を変更したりすることができます
data()メソッドの使い方
HTMLの値を取得するには予めHTML内のタグへ
独自の属性、つまりdata属性を付与しておく必要があります。
htmlの書き方
属性の書き方はdata-****のように
data-にプラスして任意の名前を記述します
<!--
例：htmlの pタグへname属性とage属性、そしてtel属性を付与します
-->
<body>
<p data-name="tanaka" data-age="25" data-tel="000-1234-5678">
私の名前は田中です 年齢は25歳です。
</p>
jQuery(JavaScript）の書き方
jQuery(JavaScript)でHTMLのタグから値を取得するには
$対象のタグ.data()のようにdata()メソッドを実行します。
<body>
<p data-name="tanaka" data-age="25" data-tel="000-1234-5678">
私の名前は田中です 年齢は25歳です。
</p>
<!--
例：jQuery(JavaScript)にてname,age,telの値を取得します
-->
<script>
// 変数へpタグに付与された全てのdata属性の値を取得します
const result = $('p').data();
// 変数の中身を出力します
console.log( result );
</script>
</body>
取得された属性には自動的にdata-の部分が除外されます
{age: 25, name: "tanaka", tel: "000-1234-5678"}
特定のdata属性を指定して取得する
data()メソッドへ引数を渡すことでdata属性を指定できます
<body>
<p data-name="tanaka" data-age="25" data-tel="000-1234-5678">
私の名前は田中です 年齢は25歳です。
</p>
<!--
例：jQuery(JavaScript)にてname,age,telの値を取得します
-->
<script>
// 変数へpタグに付与されたdata-name属性の値を取得します
// この時、"data-"の部分は省略して記述します
const result = $('p').data('name');
// 変数の中身を出力します
console.log( result );
</script>
</body>
tanaka
data属性を後から設定する
dataメソッドを使えば、取得だけではなく
data属性が付与されていないタグに対して
data属性を後から付与することも可能です。
＜script>内へ以下の記述を行います
$('対象のセレクター').data('任意の属性名', '任意の値');
属性名に対しては"data-"の記述は不要です
<body>
<p>おはようございます</p>
<script>
$('p').data('name', 'yamada');
console.log( $('p').data('name') );
</script>
</body>
yamada
後からdata属性の値を変更したい場合
次の方法で属性の値を変更することができます
$('対象のセレクター').data('すでに存在する属性名', '任意の値');
属性名に対してはdata-の記述は不要です
<body>
<p>ありがとうございます<p>
<script>
$('p').data('name', 'yamada');
console.log( $('p').data('name') );
//すでに存在するdata属性に対して値を変更します
$('p').data('name', 'tanaka');
console.log( $('p').data('name') );
</script>
</body>
yamada
//変更後
tanaka