
スキルアップ
2019.12.13
未経験者にもオススメ!IT業界の業種と職種を紹介
IT業界の中身とそこで技術者として働く方々の職種を紹介します! ITは現代の生活に欠かせないものとなっていますが、それを提供しているIT業界とはどのような企業を指すのでしょうか。また、IT業界ではどのような職種の方々が活 […]
jQuery
2018.10.18
メッセージ等のテキストを画面上に表示させる際に、jQuery では html メソッドや text メソッドをよく使用します。
今回は、jQuery の html メソッド及び text メソッドの違いや使用方法について紹介します。
2.text メソッド
3.html と text とでデータを取得
4.html と text とでデータを挿入
html メソッドは、要素の HTML を取得したり 指定した HTML を挿入したりすることができるメソッドです。
html メソッドは、引数によって 3 通りの記述方法があります。
$(セレクタ).html( );
$(セレクタ).html( htmlString );
$(セレクタ).html( function );
html メソッドの引数の内容は、それぞれ以下の通りです。
.html( htmlString )
htmlString 要素内に挿入する HTML 文字列を指定
.html( function )
function 要素内に挿入するHTML文字列を返す関数を指定
text メソッドは、要素のテキストを取得したり 指定したテキストを挿入したりすることができるメソッドです。
text メソッドは、引数によって 3 通りの記述方法があります。
$(セレクタ).text( );
$(セレクタ).text( textString );
$(セレクタ).text( function );
text メソッドの引数の内容は 以下の通りです。
.text( textString )
textString 要素内に挿入する テキスト文字列を指定
.text( function )
function 要素内に挿入するテキスト文字列を返す関数を指定
html メソッドと text メソッドを使用して、要素のデータを取得して表示します。
各ボタンをクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> <!-- $(function() { $("#btn1").on("click", function() { $("#spn2").text($("#spn1").html()).css("color","blue"); }); $("#btn2").on("click", function() { $("#spn2").text($("#spn1").text()).css("color","red"); }); }); //--> </script> <div style="background-color:#CCC; padding:20px;"> <span id="spn1"><span>Hello!</span></span> <div style="border:thin solid;"> 指定要素(id="spn1")のコード <span id="spn1"> <span>Hello!</span> </span> </div> <input type="button" id="btn1" value="html()で取得" style="color:blue;"> <input type="button" id="btn2" value="text()で取得" style="color:red;"> <span id="spn2"> </span> </div>
取得したデータを表示するためには 双方とも text メソッドを使用していますが、データを取得する部分では html メソッドと text メソッドを使い分けています。
html メソッドと text メソッドとのデータ取得の際の違いは 上のサンプルで表示されたデータに現れていますが、HTML データを取得するか テキストデータを取得するかという点にあります。
今度は、html メソッドと text メソッドを使用して、同じデータを挿入して表示します。
各ボタンをクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> <!-- $(function() { var str ="<span style='font-size:x-large;'>Hello!</span>"; $("#btn3").on("click", function() { $("#p1").html(str).css("color","blue"); }); $("#btn4").on("click", function() { $("#p1").text(str).css("color","red"); }); }); //--> </script> <div style="background-color:#CCC; padding:20px;"> <div style="border:thin solid;"> 挿入するデータ <span style="font-size:x-large;"> Hello! </span> </div> <input type="button" id="btn3" value="html()で挿入" style="color:blue;"> <input type="button" id="btn4" value="text()で挿入" style="color:red;"> <p id="p1"> </p> </div>
html メソッドを使用して挿入されたデータは HTML データとして処理されるため、「<span style=”font-size:x-large;”>Hello!</span>」は「 文字サイズが “x-large” で 表示テキストが “Hello!” の span 要素 」として表示されます。
一方、text メソッドを使用して挿入されたデータは テキストデータとして処理されるため、タグも含めて全てが文字としてそのまま表示されます。
スキルアップ
2019.12.13
IT業界の中身とそこで技術者として働く方々の職種を紹介します! ITは現代の生活に欠かせないものとなっていますが、それを提供しているIT業界とはどのような企業を指すのでしょうか。また、IT業界ではどのような職種の方々が活 […]
プログラマハック
2019.12.04
今回は、「プログラマーの需要」について、現状と将来性も含めご紹介します。 プログラマーになろうとしたとき、「AI(人口知能)が普及しているから、プログラマーの仕事は将来なくなるかも」「需要が高いプログラマーになるためには […]
スキルアップ
2019.11.29
今回は、20代フリーターが正社員面接で採用されるための、面接攻略法をご紹介します。「正社員面接って何を聞かれるの?すごく緊張する」そう感じる20代フリーターは多くいます。正社員面接は、アルバイトでの面接と大きく異なります […]
スキルアップ
2019.11.27
エンジニアを目指してプログラミングスクールを検討中の方で「プログラミングスクールに通っても時間と費用を無駄にするのではないか」と不安のある方はいませんか? もちろん、プログラミングスクールに通いさえすれば誰でもエンジニア […]
プログラマハック
2019.11.22
今回は、未経験でプログラマ転職を成功させるためのおすすめポイントについて、ご紹介します。「手に職を付けたいからプログラマになりたい」と思った時、「未経験で本当にプログラマになれるの?」「プログラマになるためには、どうした […]
スキルアップ
2019.11.20
ITエンジニアの職種別平均年収とITエンジニアが年収を上げる方法を紹介します! IT業界で働く人々は高収入のイメージがありますが、実際はどうなんでしょうか。 今回は、ITエンジニアの職種別の平均年収とITエンジニアが年収 […]
INTERNOUS,inc. All rights reserved.