脱jQuery $(”#id”)

方針

本題の前に方針を少し。

jQuery の利用を否定するものではありません。

正確に jQuery ⇒ JavaScript を書き換えることよりも、「わかりやすく書き換える」に主眼を置きます。

間違った書き換えを行うというのではなく、jQuery オブジェクトと JavaScript の通常のオブジェクトの違いまでは考慮しないといった感じになります。

「jQuery のように JavaScript を扱う」を主眼においてなるべく JavaScript 独特な表現は避け、コピペでも使えちゃうよ、ぐらいの勢いで書いていきます。「jQuery は書けるのに JavaScript は書けない」という方の布石になれば嬉しいです。そこから「ネイティブ JavaScript」を学んでいけばいいのではないかと思います。

注意事項

このシリーズで出てくる「JavaScript」という言葉は、「ネイティブな JavaScript」という意味で使っています。

このシリーズで出てくる「class」という言葉は、「CSSにおける class」です。JavaScript の class ではありません。

$("#id")

HTML

<div id="id">こんにちは</div>

を指定する場合。

jQuery

$("#id")

書き換え JavaScript

document.getElementById("id")

jQuery に出てくる「$」の書き換えです。コレが書き換えられなければ脱jQuery出来ません。

まずは # は JavaScript にはいらない です。これは最初につまずくポイントです。JavaScript には jQuery に必要な「#」や class の「.」はいらないと覚えておきましょう。

もう1つのポイントは「id は1つしか無い」ということです。JavaScript では「1つしか無い」と「複数ある」は操作がだいぶ異なります。複数ある場合と言うのは class 名だったり tab 名で指定する場合で、$(".class") や $("div") 等がそれです。これについては明日詳しく書きますので今は割愛しますが、別物だと考えておきます。id は「1つしか無い」に分類されます。

まとめ