JavaScriptとjQueryのメモ

検索すれば済む話ですが、あまりに何回も同じことを検索するのに疲れたので、メモとしてまとめておきます。

生のJavaScriptとjQuery

すでに有名な話ですが、JavaScriptの実装はブラウザによって若干の誤差があります。特に有名なのがInternetExplorerですが、Microsoft社が実験的に先行して拡張したにも関わらず後続が異なる書式を採用したものもあるので、一概に責めることはできません。もしかしたら、他のブラウザで同様の技術が実装されなかった可能性もあります。

とは言っても、いわゆるWeb屋さんから見ると、IEとそれ以外で（実際にはもっと細かく）処理を分けるのは、やりたくないけどやらなければならない仕事であることは、想像に難くないです。そう言うことが嫌いな人たちが、関数化（またはクラス化）された処理内でブラウザ毎に処理を分けるノウハウを蓄積してきました。ブラウザ毎に処理を分ける必要がなくなり、プログラム効率が向上したのを良いことに、さらに便利な処理を関数化（またはクラス化）して、より複雑な処理の記述に耐えるべく進化してきました。

ありがたいことに、このような関数（またはクラス）がライブラリとして公開されています。有名なところでは、jQueryや、prototype.js、YUI、Dojoなどが存在します。これらのライブラリを活用することによって、生のJavaScriptでは難しい、またはブラウザ毎に処理を分けなければならない部分のプログラムを省略し、高度なプログラムを作成することができます。

JQueryを使う

上に挙げたように、いくつものライブラリが存在します。その中で、ここではjQueryを取り上げます。まずは、jQueryを使うための宣言を行います。通常はjQueryをダウンロードして、htmlファイルと同じディレクトリに置くのですが、楽な方法としてGoogleがホストしているものを使います。headタグの中に以下のように記述します。google.loadメソッドの引数は、順にライブラリ名、バージョンです。他にも様々なライブラリがホストされているので、興味のある方はこちらをご覧ください。



次に、JavaScriptのプログラムを置く場所ですが、上記の1行目のような記述方法で、外部ファイルを読み込むのが良いとされています。ですが、ちょっとお試しの場合は、わざわざ別ファイルを作成するのも面倒なので、htmlファイルの中に記述できます。もっと言えば、FireBugやChromeのJavaScriptコンソールを使ってもお試しできますが、後に残るようにすると、何かの時に役立ちます。それでは、jQueryを使って、JavaScriptのコードを書いてみましょう。



2行目は

と同じ意味です。

DOMの取得

さて、jQueryによって、まずプログラマが楽をできるのがDOM要素の取得です。DOMをいい加減に解説すると、「HTMLで書かれた文章から特定の内容を取り出したり、内容を変更する際に場所を指定する方法」です。例えば、「htmlの中のbodyの中のformの中の3番目のinput」のように階層化された構造を辿ることで、内容を取得できます。さすがにこれは面倒なので、通常は「id」や「class」などを目印に指定することになります。

以下のようなhtmlがあるとします。

このとき、「No.1」と書かれている箇所の指定方法には、以下のようなやり方があります。


上記の例は全てidによる指定でしたが、タグによる指定も行えます。この場合、結果は配列で返されます。


このようにすると、jQueryオブジェクトからDOM要素を取り出すことができます。DOM要素をjQueryオブジェクトに変換するためには、$( )で括れば良いです。以下の例では、No.1と書かれている箇所をjQueryを使って赤くします。

cssメソッドは、CSSに相当する操作を行います。色を変えたり、サイズを変えたり、非表示にしたりと、CSSで指定できるパラメータは（たぶん）全て記述できます。 ツイート