【jQuery】HTML要素・value属性の取得や設定をするメソッド一覧

こちらではjQueryのメソッドのうち、HTMLの取得や設定をするメソッドについて解説しています。

jQueryのHTMLの取得や設定をするメソッド一覧

html()でHTML要素を取得

選択した要素のうち、最初の要素のHTMLの内容を取得します。

html()の使い方

<div>
	<p>Hello</p>
</div>
<div>
	<p>World</p>
</div>

上記のHTMLにおいて

var a = $('div').html();
console.log(a);

とすると<p>Hello</p>と出力されます。

html(val)でHTML要素を設定

選択した要素のHTMLの内容をvalに設定します。

html(val)はHTMLタグがエスケープされません。

html(val)の使い方

<style>
.red{
	color:red;
}
</style>

<ul>
	<li id="apple">りんご</li>
	<li id="orange">みかん</li>
	<li id="melon">メロン</li>
</ul>

上記のHTMLにおいて

$('#apple').html('<span class="red">りんご</span>');

とすると

りんご
みかん
メロン

のように「りんご」の文字が赤色になります。

text()でテキストを取得

選択した要素のうち、全ての要素のテキストを取得します。

text()の使い方

<div>
	<p>Hello</p>
</div>
<div>
	<p>World</p>
</div>

上記のHTMLにおいて

var a = $('div').text();
console.log(a);

とするとHelloWorldと出力されます。

text(val)でテキストを設定

選択した要素のテキストにvalを設定します。

text(val)はHTMLタグがエスケープされ、文字として表示されます。

text(val)の使い方

<style>
.red{
	color:red;
}
</style>

<ul>
	<li id="apple">りんご</li>
	<li id="orange">みかん</li>
	<li id="melon">メロン</li>
</ul>

上記のHTMLにおいて

$('#apple').text('<span class="red">りんご</span>');

とすると

<span class="red">りんご</span>
みかん
メロン

のようになります。text(val)はHTMLタグがエスケープされ、文字として表示されます。

val()

フォームやセレクトボックス(プルダウン)の要素のvalue属性を取得します。

セレクトボックスの場合は選択されている要素のvalue属性を取得します。

multiple="multiple"が設定されている場合は、選択されているvalue属性の配列を取得します。

val()の使い方

次のようなセレクトボックスとボタンを用意します。

<select>
	<option value="apple">りんご</option>
	<option value="orange">みかん</option>
	<option value="melon">メロン</option>
</select>
<button>valueを取得</button>

ボタンを押したときにセレクトボックスで選択されているvalueを取得するには、次のようなjQueryを実行します。

$('button').click(function(){
	var val = $('select').val();
	console.log(val);
});

すると選択している要素のvalue値を取得し、コンソールに表示します。

例えば、「りんご」を選択しているときは「apple」と表示されます。

multipleが設定されている場合のval()の使い方

multipleが設定されている場合は、複数の要素を選択でき、選択されているvalue値が配列で取得されます。

<select multiple>
	<option value="apple">りんご</option>
	<option value="orange">みかん</option>
	<option value="melon">メロン</option>
</select>
<button>valueを取得</button>

上記のHTMLにおいて以下のJavaScriptを実行します。

$('button').click(function(){
	var val = $('select').val();
	console.log(val);
});

そして「りんご」と「メロン」を選択しボタンを押すと[ "apple", "melon" ]と表示されます。

チェックボックスのval()の使い方

チェックボックスでは複数の要素がチェックされている可能性があり、それらを全て取得する必要があります。

そのためには$('input:checked')のようにフィルターを使いチェックされている要素を全て選択し、each()で回してそれぞれの要素のvalueを取得します。

<input type="checkbox" value="apple">りんご
<input type="checkbox" value="orange">みかん
<input type="checkbox" value="melon">メロン
<button>valueを取得</button>

上のようなチェックボックスを用意し、次のようなJavaScriptを実行します。

$('button').click(function(){
	$('input:checked').each(function(){
		var v = $(this).val();
		console.log(v);
	});
});

「りんご」と「メロン」をチェックしボタンを押すと、

apple
melon

と表示されます。

また、map()とtoArray()を使って配列として取り出すこともできます。

先ほどと同じHTMLにおいて、次のようなJavaScriptを実行します。

$('button').click(function(){
	var ret = $('input:checked').map(function(){
		return $(this).val();
	}).toArray();
	console.log(ret);
});

ボタンを押すと[ "apple", "melon" ]と表示されます。

ラジオボタンのval()の使い方

ラジオボタンは1つの要素しかチェックできないので、val()で取得できる値も1つのみとなります。

例として下のようなラジオボタンを用意しました。

<input type="radio" name="radio_test" value="apple">りんご
<input type="radio" name="radio_test" value="orange">みかん
<input type="radio" name="radio_test" value="melon">メロン
<button>valueを取得</button>

上記のHTMLにおいて以下のJavaScriptを実行します。

$('button').click(function(){
	var ret = $('input:checked').val();
	console.log(ret);
});

「りんご」をチェックしボタンを押すと、appleと表示されます。

val(value)

選択されている要素のvalue属性にvが設定されます。

val(value)の使い方

テキストボックスやテキストエリアの場合、valueの値が書き換えられます。

セレクトボックスやチェックボックス、ラジオボタンの場合は属性がvalueと等しい要素が選択されます。

テキストエリアのval(value)の使い方

テキストエリアとボタンが1つずつあるHTMLを用意します。

<textarea>これはテストです。</textarea>
<button>valueを設定</button>

上記のHTMLにおいて以下のJavaScriptを実行します。

$('button').click(function(){
	$('textarea').val('りんご');
});

「valueを設定」というボタンを押すとテキストエリアの文字が「りんご」に変わります。

セレクトボックスのval(value)の使い方

初期状態で何も選択されていないセレクトボックスとボタンを用意します。

<select>
	<option value=""></option>
	<option value="apple">りんご</option>
	<option value="orange">みかん</option>
	<option value="melon">メロン</option>
</select>
<button>valueを設定</button>

上記のHTMLにおいて次のJavaScriptを実行します。

$('button').click(function(){
	$('select').val('apple');
});

「valueを設定」というボタンを押すと「りんご」が選択されます。