jQueryで$関数の使い方。

質問

これは値が取得できました。
$("#abc").change(function() {
　　alert(document.getElementById("abc").value);
}

しかしこれだとうまく行きません。
$("#abc").change(function() {
　　alert($("#abc").value);
}

なぜでしょうか？
このような場合どう記述するものなのでしょうか？

よろしくお願いします。

回答No.2

play_with_you · ベストアンサー

hirotnさんの回答はちょっとずれてます。。

$("#abc")
で得られるのは「jQueryオブジェクト」と呼ばれる形式になっており、JavaScriptの構文をそのまま適用できません（できるものもあるかもしれませんが、そうする必要がないので調べたことがないから私は知りません）。

なので、
$("#abc").value
はjQueryオブジェクトにJSでの値の取り方をしようとしているので取得できないんです。
document.getElementById("abc")
↓
$("#abc")
と変えているのですから、
.value
もjQueryの
.val()
に変えないといけません。

alert($("#abc").val());
ならアラートで出せますから、hirotnさんの[1]は大嘘だし[2]みたいにする必要もありません。

お礼

>「jQueryオブジェクト」と呼ばれる形式になっており
なるほど。普通のelementオブジェクトだと思い込んでいました…。

ぶっちゃけ、本当にやりたかったことはstyle変更だったのですが、ということはこれも独自メソッドを呼び出すのですね。

jQueryは便利な機能のライブラリ集だと思っていたのですが、いろんなものを置き換えてしまっていると思ったほうがよさそうですね。けっこうクセがあるんですね…。

JavaScriptの延長と思っているとつまづきまくりそうですね。そういう観点で取り組みなおします。

大変参考になりました。ありがとうございました。

回答No.5

play_with_you

#2です。
締め切られてないので追記。
「置き換えている」まさにその通りです。
それはそれで覚える必要がありますが、クロスブラウザ対策を自前で書かなくて済むメリットの方が大きいと思いますよ。

＞本当にやりたかったことはstyle変更だったのですが
これはattr()やcss()メソッドで行います。
まあ、詳しい使い方は検索するなり
http://semooh.jp/jquery/
リファレンスを見てもらうということで。

お礼

>クロスブラウザ対策を自前で書かなくて済む
>メリットの方が大きいと思いますよ。

なるほど。確かにそうですね。
val(), css()を使ったところでこの機能ならどのブラウザでも共通であるのでそう思ったのですが、attr()になるとブラウザ間で異なってきますから、それが1つのメソッドで処理できるのなら楽ですね。

ただjQueryばっかり使っていると、ブラウザ間の違いを学ぶ機会が失われてしまい、クロスブラウザ対応能力が身につかなそうですけど。

参考になりました。ありがとうございました。

回答No.4

hirotn

私の前回答は全て取り下げます。
申し訳ありませんでした。

お礼

ですよね。
ありがとうございました

回答No.3

Ogre7077

誤: $("#abc").value
正: $("#abc").val()

お礼

ありがとうございました

回答No.1

hirotn

[1]
>alert($("#abc").value);
alertはJavaScriptです。引数たる()の中はJavaScriptが解釈できる構文を書かなければなりません。

一方、

[2]
>$("#abc").change(function() {
こちらはjQueryです。jQueryはJavaScriptのライブラリにあたります。JavaScriptを使って、より便利にスクリプトが書けるように定義を提供しているもので、JavaScriptの構文には従っていますが、JavaScriptには含まれません。

[1][2]を総合するとき、jQueryはJavaScriptが解釈できる構文の中には含まれません。
JavaScriptでdocument.getElementById("abc")を簡易に書けるように拡張したjQueryの構文が("#abc")ということになると考えればよいかと存じます。

$("#abc").change(function() {
　　var val = $("#abc").value;
　　alert(val);
});

ではどうでしょうか。
あるいはjAlertというプラグインが利用できます。
http://www.plustar.jp/lab/blog/?p=2920

お礼

ありがとうございました