配列のJQueryオブジェクトの要素はJQueryオブジェクトではない。

何故かJavascript(JQuery)でCSSの追加・削除・変更やリスナーの登録ができない！

Uncaught TypeError: $(...)[0].on is not a function at <anonymous>:1:13

Uncaught TypeError: $(...)[0].css is not a function at <anonymous>:1:13

Uncaught TypeError: $(...)[0].change is not a function at <anonymous>:1:13

メソッドがない？そんなわけないだろ！？

ってことがありました。
めっちゃ悩みました！数時間溶けました！！！

原因はJQueryオブジェクトじゃないから

どうやってオブジェクトを取得したでしょうか？
例えば、このセレクタの書き方ならばこのようなことは起きません。

$("#hoge").change(function(){ /* hogehoge */ });

なぜなら、IDで取得した場合はオブジェクトが必ず１つだからです。

駄目なパターン

$("div")[0].change(function(){ /* hogehoge */ });

違いが分かるでしょうか。
そうです、配列です。

配列の中身はJQueryオブジェクトではない

$("div")
これはJQueryオブジェクトです。

$("div")[0]
これは違います。

この要素に対してJQueryのメソッドを使いたい場合は以下のようにすれば良いです。

成功パターン

$("#" + $("div")[0].id).change(function(){ /* hogehoge */ });

要素にidが指定されている必要があります。

ちょっと書き方が汚いですかね？
もっと良い方法あったらコメントで教えてくださると助かります。