内容や属性を変更する（1）

text/html

jQueryObject.text('書き換え後のテキスト');
jQueryObject.html('書き換え後のHTML');

《index.html》

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery 〜</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<div id="div1">入っていたテキスト</div>
<div id="div2">入っていたテキスト</div>
<div id="div3">入っていたテキスト</div>
<div id="div4">入っていたテキスト</div>
</body>
</html>

《script.js》

$(function(){
  $('#div1').text('textメソッドでの内容書き換え');
  $('#div2').html('htmlメソッドでの内容書き換え');
  $('#div3').text('<strong>textメソッド</strong>での内容書き換え');
  $('#div4').html('<strong>htmlメソッド</strong>での内容書き換え');
});

HTMLを含まない文字列に書き換える場合

$(function(){
  $('#div1').text('textメソッドでの内容書き換え');
  $('#div2').html('htmlメソッドでの内容書き換え');
});

HTMLを含む文字列に書き換える場合

$(function(){
  $('#div3').text('<strong>textメソッド</strong>での内容書き換え');
  $('#div4').html('<strong>htmlメソッド</strong>での内容書き換え');
});

textメソッドのほうは、strong要素の部分は「<strong>textメソッド</strong>」と変換され、strong要素としては認識されなくなります

XSS（クロスサイトスクリプティング）

htmlメソッドを使うと、要素の中身をまるごと別のHTMLに書き換えてしまうことができます。

次のコードの場合、

$(function(){
  $('#div1').html('<script>alert("JavaScript!");</script>');
});

#div1の内容をscript要素に書き換えるという動作になりますが、実行すると「JavaScript!」というダイアログメッセージが表示されます。

これが、ユーザーが入力したデータを扱うとき、この動作で危険なhtmlを埋め込めこまれたデータに置き換えることも可能になってしまいます。
悪意のあるスクリプトを埋め込まれる可能性があるのです。

このようなセキュリティ上の不備をXSS（クロスサイトスクリプティング）といい、それを許してしまう仕組みのことを「脆弱性がある」といいます。

empty

要素の中身を空っぽにするメソッドです

jQueryObject.empty();

《index.html》

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery 〜</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<div id="div1">入っていたテキスト</div>
</body>
</html>

《style.css》

div {
  border:3px solid #000;
  padding:10px;
}

《script.js》

$(function(){
  $('#div1').empty();
});

text/htmlメソッドの場合

$(function(){
  $('#div1').html('');
});

$(function(){
  $('#div1').text('');
});

attr

要素の属性値を変更するメソッド
アター：attributeの略

jQueryObject.attr('属性値', 変更後の値);

《index.html》

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery 〜</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<img src="img1.gif" alt="">
<img src="img1.gif" alt="" id="changeThis">
<img src="img1.gif" alt="">
<img src="img1.gif" alt="">
</body>
</html>

《script.js》

$(function(){
  $('#changeThis').attr('src','img2.gif');
});

attrその他の使い方

要素のclass属性を変更し、見栄えの制御をおこなう
input要素などのdisabled属性を変更し、コントロールの制御をおこなう
option要素のselected属性を変更し、select要素の中で選択されている項目を変更する
a要素のhref属性を変更し、リンク先を書き換える
a要素のtarget属性を変更し、別ウィンドウで開くなどの制御をおこなう
スタイルシートを読み込んでいるlink要素のhref属性を変更し、別のスタイルシートに切り替える

val

input要素やtextareaに入力された値を変更できる

jQueryObject.val('変更後の値');

《index.html》

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery 〜</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<form action="#" method="get">
<input id="input1" type="text" size="40" value="テキストフィールドです" />
<textarea id="textarea1" rows="3" cols="20">テキストエリアです</textarea>
<select id="select1">
	<option value="saitama">埼玉</option>
	<option value="tokyo">東京</option>
	<option value="kanagawa">神奈川</option>
</select>
<select id="select2" multiple="multiple">
	<option value="shinjukuku">新宿区</option>
	<option value="shibuyaku">渋谷区</option>
	<option value="chiyodaku">千代田区</option>
</select>
</form>
</body>
</html>

《script.js》

$(function() {
  $('#input1').val('テキストフィールドの値を書き換えました');
  $('#textarea1').val('テキストエリアの値を書き換えました');
  $('#select1').val('tokyo');
  $('#select2').val(['shibuyaku','chiyodaku']);
});

テキストフィールドの値を変える
テキストエリアの値を変える
セレクトメニュー（プルダウン）の値を変える
セレクトメニュー（リスト）の値を変える

テキストフィールドの値を変える

$(function(){
  $('#input1').val('テキストフィールドの値を書き換えました');
});

「テキストフィールドです」→「テキストフィールドの値を書き換えました」

テキストエリアの値を変える

$(function(){
  $('#textarea1').val('テキストエリアの値を書き換えました');
});

「テキストエリアです」→「テキストエリアの値を書き換えました」

セレクトメニュー（プルダウン）の値を変える

$(function(){
  $('#select1').val('tokyo');
});

「埼玉▼」→「東京▼」

セレクトメニュー（リスト）の値を変える

$(function(){
  $('#select2').val(['shibuyaku','chiyodaku']);
});

「渋谷区」「千代田区」と複数項目を選択

input、textarea要素に対しては、valメソッドを使う