内容や属性を変更する(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'); });
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メソッドを使う