Webデザインの勉強 | Webサイト制作科補足と初心者の勉強法 より
1 jQuery text/html
jQueryObject.text('書き換え後のテキスト');
jQueryObject.text('書き換え後のHTML');
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要素としては認識されなくなります
ex)
《index.html》
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery 内容や属性を変更する - text/html</title>
<link rel="stylesheet" type="text/css" href="style.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>での内容書き換え');
});
xss（クロスサイトスクリプティング）
htmlメソッドを使うと、要素中身をまるごと別のHTMLに書き換えてしまうことができます。
$(function(){
$('#div1').html('<script>alert("JavaScript!");</script>');
});
#div1の内容をscript要素に書き換えるという動作になりますが、実行すると「JavaScript!」というダイアログメッセージが表示されます。
これが、ユーザーが入力したデータを扱うとき、この動作で危険なhtmlを埋め込まれたデータに置換えることも可能になってしまいます。
悪意のあるスクリプトを埋め込まれる可能性があるのです。
このようなセキュリティ上の不備をXSS（クロスサイトスクリプティング）といい、それを許してしまう仕組みのことを「脆弱性がある」といいます。
2 jQuery empty
- 要素の中身を空っぽにするメソッドです
jQueryObject.empty();
ex)
↓
《index.html》
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery 内容や属性を変更する - empty</title>
<link rel="stylesheet" type="text/css" href="style.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》
@charset "UTF-8";
/* reset
html, body, div, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, address, ul, ol, li,
dl, dt, dd, table, th, td, form, fieldset {
margin:0;
padding: 0;
line-height: 1.0;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ul, ol { list-style: none; }
a { text-decoration: none; }
img { border: 0; }
img, input { vertical-align: bottom; }
*/
div {
border: 3px solid #000;
padding: 10px;
}
《script.js》
$(function(){
$('#div1').empty();
});
text/htmlメソッドの場合
$(function(){
$('#div1').text('');
});
------------------------
$(function(){
$('#div1').html('');
});
3 jQuery attr
- 要素の属性値を変更するメソッド
- アター：attribute（属性）の略
jQueryObject.attr('属性値', 変更後の値);
ex)
↓
《index.html》
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery 内容や属性を変更する - attr</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js">
</script>
<script src="scripts.js"></script>
</head>
<body>
<img src="img/1.jpg" alt="">
<img src="img/1.jpg" alt="" id="changeThis">
<img src="img/1.jpg" alt="">
<img src="img/1.jpg" alt="">
</body>
</html>
《script.js》
$(function(){
$('#changeThis').attr('src','img/2.jpg');
});
attrその他の使い方
- 要素のclass属性を変更し、見栄えの制御をおこなう
- input要素などのdisabled属性を変更し、select要素の中で選択されている項目を変更する
- option要素のselected属性を変更し、select要素の中で選択されている項目を変更する
- a要素のhref属性を変更し、リンク先を書き換える
- a要素のtarget属性を変更し、別ウィンドウで開くなどの制御をおこなう
- スタイルシートを読み込んでいるlink要素のhref属性を変更し、別のスタイルシートに切り替える
4 jQuery val
jQueryObject.val('変更後の値');
ex)
↓
《index.html》
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery 内容や属性を変更する - val</title>
<link rel="stylesheet" type="text/css" href="style.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="shinjyukuku">新宿区</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メソッドを使います