jQueryを使って、HTMLのテキストボックスの値を変更したいのですが……

Question

###前提・実現したいこと
jQueryを使って、HTMLのテキストボックスの値を変更したいのですが、

var $textbox = $('#textbox').val();

$textbox.val('');

と書くとエラーになってしまいます。

しかし、

$('#textbox').val('');

こう書くと、うまくいきます。

この違いがよく分かりません。

ご教授いただけませんでしょうか。

###発生している問題・エラーメッセージ

エラーメッセージ

Uncaught TypeError: $textbox.val is not a function

###該当のソースコード
var $textbox = $('#textbox').val();
$textbox.val('');

Answer 1

var $textbox = $('#textbox');  // .val()では値が変数に入ってしまう
$textbox.val(''); 

Comments

[tathibana_sidan]

申し訳ございません。初心者なもので、回答の意味が分かりかねます。もう少し、詳細を教えていただけませんでしょうか。

[kei344]

意味・・・。動かしましたか？
元のコード「var $textbox = $('#textbox').val(); 」では
「$('#textbox')」は idに「textbox」を指定している要素をjQueryオブジェクトにしていて、jQueryの .val()メソッドでその値を変数「$textbox」に渡しています。この状態では「$textbox」には「#textbox」で入力された文字列が入っていることになります。なのでjQueryのメソッドである.val()が使えません。
提示したものでは「$textbox」には「 idに「textbox」を指定している要素をjQueryオブジェクト」が入っています。なのでjQueryのメソッドである.val()が使えます。

[tathibana_sidan]

ありがとうございます。理解できました。変数にはオブジェクトではなく、値が入っているため、値に.valを使用してもエラーになる、ということですね。これをvar $textbox = $('#textbox');の記述にすると、オブジェクトが変数に格納されることになって、これには.avlが使用できるということですね。
分かりやすく解説していただきありがとうございました。