• ベストアンサー

jQueryの.val()とinnerHTMLの違いはなんでしょうか？

jQueryの.val()とinnerHTMLの違いはなんでしょうか？ テキストエリアの値を修正しても、innerHTMLでは取得できず、 jQueryの.va()lだと取得できました。 なにが違うのでしょうか？ jQueryのメソッドと、javascriptネイティブのinnerHTMLプロパティを比べるのはおかしいかもしれませんが、 元々のjavascriptにはjQueryの.val()に相当するものはありますでしょうか？ よろしくお願いいたします。

質問者が選んだベストアンサー

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.2

まず、テキストエリアの値（＝中身）はHTMLではありません。 　innerHTMLは要素内部のHTMLを所得するものです。 　一方、jQueryの.val()は、要素のvalue属性の値を取得・設定するものです。 　「Get the current value of the first element in the set of matched elements.」 　ちなみにjQueryでinnerHTMLに相当するのは、 　　.html() です。 　「Get the HTML contents of the first element in the set of matched elements.」 です。

その他の回答 (1)

回答No.1

> 元々のjavascriptにはjQueryの.val()に相当するものはありますでしょうか？ valueじゃないでしょうか？

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • jQueryで複数の要素オブジェクトを取得したあと

    jQueryで複数の要素オブジェクト(というの？)を取得するケースで、jQueryオブジェクトとして扱えなくなっていることが気持ち悪く、ここをどうにかできないかという話です。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <input type="text" id="ii1" name="nn" value="マツコ"> <input type="text" id="ii2" name="nn" value="竹田"> <input type="text" id="ii3" name="nn" value="小梅太夫"> <script> jQuery(function ($) { 　　alert($("#ii1").val()); // (0) 　　alert($("[name=nn]:eq(1)").val()); // (1) 　　alert($("[name=nn]:first-child").val()); // (2) 　　alert($("[name=nn]")[2].value); // (3) 　　alert($("[name=nn]").get(1).value); // (4) }); </script> このソースで、(0)はいいとして、(1)(2)のようにオブジェクトが一つしか返らないような場合には、「.val()」メソッドが使えます。しかし(3)(4)の場合には、少なくともこのままでは「.val()」メソッドが使えないため、Elementオブジェクトのvalueプロパティを使用しています。 値を取得するコードで「.val()」「value」が混在しているのが気持ち悪く、「value」に統一したいです。ちなみに実際には「$("[name=nn]")」のように取得したあと、for文でまわして処理するケースが多いです。 「$("[name=nn]")」で取得し、オブジェクトの件数をカウントしたあと苦肉の策で、for文の中で「$("[name=nn]:eq(" + i + ")").val()」等と書いたこともありますが、むしろ読みにくくなってしまっています。これだったらまだvalueプロパティを使う方がいいかと思います。 「$("[name=nn]")」で複数のオブジェクトを取得した後で、それぞれのオブジェクトに「.val()」を使う方法はありますでしょうか？あるのなら具体的に教えてください。 よろしくお願いします。

  • innerHTMLの初期値

    下記のソースがあります。 <SCRIPT TYPE="text/javascript"> <!-- function Change(id){ if(document.all){ document.all.result.innerHTML = document.all(id).innerHTML; }else if(document.getElementById){ document.getElementById('result').innerHTML = document.getElementById(id).innerHTML; } } //--> </SCRIPT> <a href="#" onClick='Change("ih2"); return false'>前</a><br> <a href="#" onClick='Change("ih3"); return false'>次</a><br> <div id="ih2" style="display:none">テキスト1</div> <div id="ih3" style="display:none">テキスト2</div> <br> <span id="result"></span> 前、次のリンクで表示されるテキストが切り替わるようにしているのですが、 クリックする前の段階では何も表示されていない状態です。 そこで、クリックする前でもid="ih2"の「テキスト1」が表示されている状態にしたいのですが、 なかなか出来ません。 functionの前に document.all.result.innerHTML = document.all.ih2.innerHTML; と記述してみましたが駄目でした。 id="ih2"の値を読み込んで表示させたいのですが、 何か良い方法はありませんか。

  • 【jQuery】 changeが検出できない

    間違いがあったため、投稿しなおしです。 MySQL + PHP + javascript with jQuery でプログラムを作成しています。 $.ajaxでPHPを呼び出し、以下のようなinputを書き出しました。 <input id="hoge" onchange="alert('hogehoge')" type="hidden" value="foo" / > その後、以下のようにjsで値の変更を行いましたが、changeイベントが検出できません。 $("#hoge").val("hogehoge");//アラートが出ない 変更後、すぐにアラートが出るようなイメージでいたのですが、アラート自体が出ません・・・ inputに直にonchangeを書いているのがマズイのかな、と思い、以下のように変更もしてみましたが、やはりダメでした。 $("#hoge").livequery("change",function(){ alert("hogehoge"); }); $("#hoge").val("hogehoge");//やはりアラートが出ない プログラムから変更されたval()は、イベントとして取得できないのでしょうか。 なぜ取得できないのか、またそもそも出来ないのなら何か方法はないか、ご存じの方お願い致します。

  • jQueryの配列の渡し方について

    jQueryでの配列の渡し方についてご質問です。 jQueryではなくjavascriptでも良いのですが、不慣れなのでjQueryで試行しています。 ---------------------------------------------- targettab = targettab.split( ',' ); jQuery.each(targettab, function(i, val) { var livetab = "<li id='" + i + "'>" + val + "</li>"; jQuery(livetab).appendTo(jQuery("ul#tab")); }); ---------------------------------------------- ※変数 targettab に「あああ,いいい,うううう]という値が入っています。 こう↑書きますと、ul#tabの内部に <li id='1'>あああ</li> <li id='2'>いいい</li> <li id='3'>ううう</li> と入り、リストが生成されます。 ここまでは良いのですが、このそれぞれのidに入っている数字を任意の文字列にしたいです。 例えば、 targetstrings = "hoge,foo,dummy"; targetstrings = targetstrings.split( ',' ); という配列を差し込んで、最終的に <li id='hoge'>あああ</li> <li id='foo'>いいい</li> <li id='dummy'>ううう</li> という形で整形したいです。 jQuery.eachでは、そもそもできないような気がしていますが、 お知恵を拝借できましたら、大変ありがたいです。 拙い説明で恐縮ですが、どうぞよろしくお願いします。 不明点などあれば、何なりとお知らせください。

  • 入力された日付の取得

    monacaでjqueryを使いアプリをつくっています。 <input type="date" >をつかって、ユーザーが入力した日付を取得し、その日付をテキストとして書きだしたいのですが、うまくいきません。入力された値は.val()で取得して.textで書き込めばよいのでしょうか？ html <input type="date" id="Time"> js var time = $("#Time").val();

  • jQueryでXMLを操作

    jQueryでXMLを操作 最近jQueryを勉強しはじめました。 jQueryでXMLを読み込んで、item val="new"を含んだデータのみ<ul></ul>内に表示したいのですが うまくいきません。 ご教授願います。 また、こういったjQueryの使い方に関する、お勧めの本やページ等ございましたら 教えてください。宜しくお願い致します。 -------------------------XML Data------------------------- <data> <item val="new"> <link>01.html</link> <name>ほげ田 ほげ太</name > <photo>dummy.jpg</photo> </item> <item val="new"> <link>02.html</link> <name>ほげ田 ほげ子</name > <photo>dummy.jpg</photo> </item> <item val="new"> <link>03.html</link> <name>ほげ山 ほげ太</name > <photo>dummy.jpg</photo> </item> <item> <link>04.html</link> <name>ほげ山 ほげ子</name > <photo>dummy.jpg</photo> </item> </data> -------------------------JavaScript------------------------- $(function(){ $.ajax({ url: 'doctors/data.xml', dataType: 'xml', timeout: 1000, error: function(){ alert("xmlファイルの読み込みに失敗しました"); }, success : function(data){ $("item",data).each(function(){ if($("item",this).attr("val") == "new"){ $(".column").append('<li><a href="'+$("link",this).text()+'"><img src="image/'+$("photo",this).text()+'" alt="'+$("name",this).text()+'" title="'+$("name",this).text()+'"></a></li>'); } }) } }) $("li.noJavaScript").remove(); }) -------------------------HTML------------------------- <div id="wrapper"> <ul class="column"> <li class="noJavaScript">javaScriptを有効にしてください。</li> </ul> </div>

  • IE8で動かないJQuery

    Javascriptのカテゴリとどちらに質問するか迷いましたが、 こちらで質問させていただきます。 ちなみにJQueryやJavascriptには慣れていません。 以下のような方法で、セレクトボックスで選択された値をcode.cgiに 引き渡し、code.cgiが返す値をalertで表示しようとしています。 セレクトボックスのIDは selectid です。 code.cgiでは、いくつかの値を : で区切って表示（返す）しています。 FirefoxやSafari、またIE7のときには動いたのですが、 IE8(Windows7と一緒にインストールされたもの)では なぜか動きません。 原因の分かる方いらっしゃいますでしょうか。 <script type="text/javascript"> $(function(){ 　$('#selectid').change(function(){ 　　　　$.get("code.cgi?code=" + $('#selectid').val(), function(data){ 　　　　　var a; 　　　　　a = data.split(":"); 　　　　　alert(a[0]); 　　　　}); 　　}); }); </script>

    • ベストアンサー
    • AJAX
  • jQueryで文字数カウンタ（複数対応）

    jQueryのプラグインを作成中です。 指定したテキストフォーム、テキストエリア内の文字数をカウントして、 指定場所に文字数を表示させるというものです。 下記のように記述し、 (function(jQuery) { jQuery.fn.textCount = function(options) { //キーボードが押された時にカウント jQuery(this).live("change keyup",function(){ var count = jQuery(this).val().length; var disp_area = jQuery(this).attr("id"); jQuery("."+disp_area).html(count+"文字"); }); return this; }; })(jQuery); jQuery(".counter").txtCount(); とHTML内で宣言しました。 <textarea id="sample">ここの文字数が</textarea> <div class="sample">ここに表示</div> と、ここまではうまくいきました。 が、テキストエリアの数が複数個あり、数が変動するため、IDを配列にしたいと思っています。 そこで、 <textarea id="sample[1]">個々の文字が</textarea> <div class="sample[1]">ここに表示されない</div> のように記述しました。 すると文字数が表示されなくなってしまいました。 classやidに配列指定はできないのでしょうか。 また、この場合はどのように宣言するのが正しいのでしょうか。

  • 別HTMLを呼出て値を取得する方法を教えてください

    WEBプログラム初心者です。 メインのHTMLから別のHTMLを呼び出して値を取得しメインのHTMLに表示させたいです。 ■イメージ メインHTMLでボタンを押されたら(javascript ?)、 別ファイルを読み込んで（正規表現？である文字に付随する値）を取得して、 メインのHTMLのテキストエリアにセットするような感じになりますかね？ どのように記述すればよろしいでしょうか？ Jquery等他言語はよくわからないので、 javascriptだけで実現していただけると助かります。

  • JQUERYをはじめて導入したのですが、

    JQUERYをはじめて導入したのですが、 読込み部分の記述が間違っているのか 「$(document).ready(function(){」のところで一箇所エラーとなります。 「オブジェクトでサポートされてないプロパティまたはメソッドです」となります。 設定内容の、現状は下記です。 「validate」設定を実現したいためにjqueryを導入。 ・JQUERYは現在の最新版のものを入手。 ・読み込んだファイルは全く編集などはしてないもの。 ・パスなどの記述は間違っていないようです。確実にファイルは存在しております。 ・一応パーミッションも確認済みです。 ・id"form-host"もformタグに設定しております。 <script type="text/javascript" src="/common/js/jquery.js"></script> <script type="text/javascript" src="/common/js/jquery.validate.pack.js"></script> <script type="text/javascript" src="/common/js/jquery.validate.js"></script> <script type="text/javascript" src="/common/js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="/common/js/jquery.validate.min.js"></script> <script type="text/javascript" src="/common/js/additional-methods.js"></script> <script type="text/javascript" src="/common/js/messages_ja.js"></script> <script type="text/javascript"> //入力チェック関数に対象フォームIDを指定 $(document).ready(function(){ $("#form-host").validate(); }); </script> jsファイルの読込みの順序が違うのでしょうか、 不必要なjsファイルを読み込んでしまっている？為なのか； validate関連を導入した事があるからいらっしゃれば、 ご教授願います。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する