jqueryの基本的な使い方をまとめる #3

1日目:jqueryの基本的な使い方をまとめる #1 - 超メモ帳（Web式）
2日目:jqueryの基本的な使い方をまとめる #2 - 超メモ帳（Web式）
3日目:ここ
4日目:jqueryの基本的な使い方をまとめる #4 - 超メモ帳（Web式）
5日目:jqueryの基本的な使い方をまとめる #5 - 超メモ帳（Web式）

さて、今日はメソッド周りの様だ。こうやってきちんと習慣化して勉強し続ければ自分はもっと凄くなれると思うのだけど。

attr

attrメソッドは要素の中の属性を取得できます。下の例ではGoogleのURLを取得したり、Yahooのアドレスに書き換えたりしています。

<a href="http:www.google.co.jp">Google</a>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
	$(function() {
		// 要素を取得してポップアップ
		alert($("a").attr('href'));
		
		// a要素のリンクをYahooに変更
		$('a').attr('href', 'http://www.yahoo.co.jp');
	});
</script>

data

要素に付けたカスタム属性の値を取得したり、変更できたりします。data-　のあとにラベルを付ける事で変更できます。指定する時はdata-は不要です。

<a href="http:www.google.co.jp" data-sitename="Googleです">Google</a>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
	$(function() {
		// カスタム属性をポップアップ
		alert($('a').data('sitename'));
	});
</script>

要素を変更するメソッド

タグで囲まれた文字列を変更したり、削除したりするメソッド。

<p class="main">jQueryの勉強</p>
<p class="link">リンク</p>
<input type="text" value="hello" />
<p class="sub">罪と罰</p>
<p class="test">存在と時間</p>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
	$(function() {
		// mainクラスの中身を書き換える
		$(".main").text("日々精進");

		// リンクに書き換える urlを含む場合
		$(".link").html('<a href="http://www.google.co.jp">click here!</a>');
	
		// inputの中身を取得
		alert($("input").val());

		// inputの中身を書き換える
		$("input").val("hello, world!");

		// subクラスの中身を消す
		$(".sub").empty();

		// testクラスの存在を消す
		$(".test").remove();
	});
</script>