jQuery：jQueryで属性やvalueの追加と取得
今回は、jQueryで属性やvalueの追加と取得方法につきまして、詳しく記載してみようと思います。
jQueryのattr()メソッドは要素に指定された属性を追加する事ができるメソッドです。jQuery初心者向けに簡単なサンプルコードと共に解説してゆきます。
という事で、それでは今回はッ、
- ・jQuery属性を操作（追加）する:attr()メソッド
- ・attr()メソッド属性値を取得する場合
- ・valueの値を操作（追加）する:val()メソッド
上記について記載していこうと思います…。
jQuery属性を操作（追加）する:attr()メソッド
前回までは主に、HTMLの要素そのものを追加や操作してきましたが、属性を追加・操作することも可能です。
属性というのは、a要素でいうとhref属性とか、target属性などがあります。ラジオボタンでは、cheked属性など、要素によって色々な属性がありますが、それらを操作するのがattr()メソッドです。
attr()メソッドでは、属性名と値を指定する必要があるので、以下のような記述になります。なお、複数指定することも可能です。
atrr(“属性名”:”値”);
【複数指定の場合】
atrr({“属性名”:”値”,“属性名”:”値”});
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“h2 a”).attr(“target”,”_blank”);
$(“#reading”).attr(“cheaked”,”checked”);
});
</script>
</head>
<body>
・・省略・・
<h2><a href=”https://mk-design.xyz/mk-blog/”>MK-blog</a>からのアンケート</h2>
・・省略・・
<label>読書：<input type=”radio” id=”reading” value=”reading” name=”hoddy”></label>
<label>スキー：<input type=”radio” id=”ski” value=”ski” name=”hoddy”></label>
<label>自転車：<input type=”radio” id=”RoadBike” value=”RoadBike” name=”hoddy”></label>
・・省略・・
</body>
</html>
MK-blogからのアンケート
あなたの趣味を選択して下さい！
HTMLソースでは、a要素にtarget属性を記述していませんが、atrr()メソッドでtarget属性を操作しています。またラジオボタンの方は、HTMLソースではどれも選択されていませんが、atrr()メソッドでchecked属性を付けています。他にもimg要素のscr属性など、atrr()メソッドは意外によく使われるメソッドです。
attr()メソッド属性値を取得する場合
atrr()メソッドは、属性値を「取得」する場合にも使います。前回記載した「width()メソッド」の場合は()内を空で記述していましたが、atrr()メソッドの場合は取得したい属性名を記述します。
atrr(“src”)←——-②src属性の値を取得
ちなみにcss()メソッドも、プロパティを指定して、値を取得することが可能です。
atrr(“font-size”)←——-②font-sizeの値を取得
valueの値を操作（追加）する:val()メソッド
val()メソッドは、フォーム関連で使われるvalueの値を操作するためのメソッドです。
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“#search”).val(“search…”);
});
</script>
</head>
<body>
・・省略・・
<form method=”get” action=”#”>
<input type=”text” id=”search” size=”25″ name=”search” value=””>
<input type=”submit” value=”検索”>
</form>
・・省略・・
</body>
</html>
空だったvalue属性に「search…」という値が入りました。
HTMLソースでは、テキストフォームのvalueの値は空でしたが、val()メソッドで「search…」という値を追加しています。また、valueを取得するには、「val()」と空で記述します。
という事で今回は、jQueryで属性やvalueの追加と取得につきまして、サンプルコードを交え記載いたしました。
これらのメソッドを利用すれば、HTML内に記述のないものでも、jQueryで追加したりすることができるので便利だと思います。ダイナミックにWebページを変更していくためには、これらHTML操作系のメソッドは必須になりますので、代表的なものは覚えておくことをオススメします。
とりあえず、今回はここまで…。
お仕事のご依頼は↓コチラより…、それではまた次回…。
