【jQuery】attr、data、書き換え

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

attr

今日はまずはじめにhtmlの属性の値を取得したり変更したりすることができるアトリビュートメソッド（attr）を見ていきます。

<a href="http://yahoo.co.jp">yahoo</a>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script >
	$(function(){
		//属性を取得する
		console.log($("a").attr("href")); //hrefの値を取得
	});
</script>

とするとこのようにコンソールログにこのように書き出されます。

date

カスタム属性をつけることもできます。
カスタム属性ってなんぞやって思うかもしれません。
私は最初なんぞやって思いました。
自分で勝手に属性値をつけれるんです。すごいですよね。
カスタム属性をつけたい要素にdate-任意の名前をつけることで指定することができます。

<a href="http://yahoo.co.jp" data-name="yahoo">yahoo</a>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script >
	$(function(){
		//カスタム属性を取得する
		console.log($("a").data("name")); //data-nameの値を取得
	});
</script>

今までに1回だけ下のサイトを参考に円グラフを作ったときにdateを使ってカスタム属性を指定しました。
円グラフを作る
当時の私的にはかなりの新発見でした。

htmlのタグの中身を操作する

属性だけでなく、タグの中身を変更したいときは以下のメソッドを使います。

text	テキストを書き換える
html	タグを含むhtmlソースに書き換える
val	フォーム部品のvalue値を取得・書き換える
remove	タグ自体を取り除く
empty	タグの中身だけをなくす

例としてhtmlのメソッドを使ってみたいと思います。

<p>htmlメソッドを使う</p>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script >
	$(function(){
		//カスタム属性を取得する
		$("p").html("<a href=\"\">リンクに変更</a>"); //pタグをaタグに変更
	});
</script>

エスケープを忘れないようにしましょう。
私は最近エスケープを忘れて結構な時間拘束されました。

ということで今日はこのへんで！
へば！