第12章 jQuery - コンテンツと属性の設定
jQuery（ジェイクエリー）は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリである。
homepage
# jQuery - コンテンツと属性の設定 *** ## 1.コンテンツの設定 前のページと同じ3つの方法で**コンテンツ**を**設定します**。 * `text(val)` - 選択した要素のテキスト内容をセットします * `html(val)` - 選択した要素の内容を設定します（HTMLマークアップを含む）。 * `val(val)` - 選択した要素にvalue属性に値を設定します。 #### 例 [sample12-1.html] ``` <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>"); }); $("#btn3").click(function(){ $("#test3").val("Dolly Duck"); }); }); </script> </head> <body> <p id="test1">This is a paragraph.</p> <p id="test2">This is another paragraph.</p> <p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p> <button id="btn1">Set Text</button> <button id="btn2">Set HTML</button> <button id="btn3">Set Value</button> </body> </html> ``` <!DOCTYPE html> <pre><span class="nocode"> <iframe src="javascript: '<html><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>"); }); $("#btn3").click(function(){ $("#test3").val("Dolly Duck"); }); }); </script> </head> <body> <p id="test1">This is a paragraph.</p> <p id="test2">This is another paragraph.</p> <p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p> <button id="btn1" style="font-size:inherit">Set Text</button> <button id="btn2" style="font-size:inherit">Set HTML</button> <button id="btn3" style="font-size:inherit">Set Value</button> </body> </html>'" width="800" height="200"></iframe> </span> </pre> ## 2.text（）、html（）、およびval（）のコールバック関数 上記の3つのjQueryのメソッドに(`text()`、`html()`、そして`val()`)コールバック関数が付属しています。コールバック関数には2つのパラメータがあります。選択された要素のリスト内の現在の要素のインデックスと、元の（古い）値です。その後、関数から新しい値として使用したい文字列を返します。 次の例は、`text()`と`html()`にコールバック関数を使用した例です。 #### 例 [sample12-2.html] ``` <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("#test1").text(function(i, origText){ return "Old text: " + origText + " New text: Hello world! (index: " + i + ")"; }); }); $("#btn2").click(function(){ $("#test2").html(function(i, origText){ return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")"; }); }); }); </script> </head> <body> <p id="test1">This is a <b>bold</b> paragraph.</p> <p id="test2">This is another <b>bold</b> paragraph.</p> <button id="btn1">Show Old/New Text</button> <button id="btn2">Show Old/New HTML</button> </body> </html> ``` <pre><span class="nocode"> <iframe src="javascript: '<html><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("#test1").text(function(i, origText){ return "Old text: " + origText + " New text: Hello world! (index: " + i + ")"; }); }); $("#btn2").click(function(){ $("#test2").html(function(i, origText){ return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")" }); }); }); </script> </head> <body> <p id="test1">This is a <b>bold</b> paragraph.</p> <p id="test2">This is another <b>bold</b> paragraph.</p> <button id="btn1" style="font-size:inherit">Show Old/New Text</button> <button id="btn2" style="font-size:inherit;margin-left:5px">Show Old/New HTML</button> </body> </html>'" width="800"></iframe> </span> </pre> *** > **練習** >> **問題**[Ex12-1.html] メソッドval()にコールバック関数を使用しましょう。 <pre><span class="nocode"> <iframe src="javascript: '<html><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#button").click(function(){ $("#text").val(function(i, origText){ return "Old val: " + origText + " New val: Good Morning! (index: " + i + ")" }); }); }); </script> <body> <h1>ITJOBのJQueryの練習ファイルです。</h1> <p id="p1">ボタンをクリックして、テキストボックスの値を取得する</p> TEXT<input id="text" type="text" name="text" value="Hello World!" /> <br><br> <button id="button">Show Old/New Value</button> </body> </html>'" width="800" height="300"></iframe> </span> </pre>
content
戻る
