約半年前まで、興味はあれども全くもって触れたことのなかった「jQuery」。それどころか、「Javascript」を「Javasprict」と何度となく書き間違える癖のあった私。結局、「スク水すいすいスクリプト」と語呂を合わせることによりようやく正しい綴りをマスターしたわけなんですが、仕事で扱うと言うこともあり多少はjQueryの仕組みが分かってきた今日この頃です。そんなわけで、今回は「jQueryが全く分からない人のため」の超初級者向け入門講座と銘打ちまして、jQueryの基礎の基礎を学ぶための記事を書いてみました。言っても「jQueryとはなんたるか」などといった難しい理論を記すつもりは一切ございません。(っていうかそんな偉そうなこと言える程修めてない)あくまで「jQueryに興味はあるけれど全く触れたことは無いしjavascriptも全くわからないしなんか難しそうだし」と敬遠している方に向けたモノになります:)まぁともあれ、そんな私のような方々のお力に少しでもなれればこれ幸いです。jQueryの概要まずはざっくりと概要からいきませう。jQuery(ジェイクエリー)は、JavaScriptとHTMLの相互作用を強化する軽量なJavaScriptライブラリ。デュアルライセンスであり、フリーかつオープンソースである。様々な場面で活用されており、Javascriptライブラリのデファクトスタンダードと呼ぶ者もいる。Wikipediaなるほど...デファクトスタンダー全く分からん。小難しい単語は置いておきまして簡単に説明しますと、jQueryとはJavascriptのライブラリ(複数のプログラムを再利用可能な形でひとまとまりに簡素化したもの)のひとつ。これを使用すれば、複雑になりがちなJavascriptのコードを書くこと無しに、簡単なコードでJavascriptを実行できるようになる、と言うわけです。more.」の言葉の通り、と言うわけですね:)まぁ上記の説明もめんどくさい方は、「jQueryを使えばリッチなUIが簡単に実装できるからスゴイ」ぐらいに覚えておけばいいでしょう。準備では早速jQueryを使うための準備と行きましょう。「準備」とは言えやることは至極簡単。headタグ内にjQuery本体を読み込むjQueryを使用したいページのheadタグ内に、jQueryを呼び込むためのタグを書きましょう。jQuery公式サイトからDLまず一つ目はjQueryの公式サイトからライブラリをダウンロードする方法。jQueryのダウンロードページへ行き、Downloadsからライブラリを落とします。特別な理由がない限り、最新版ライブラリの「Minified(圧縮版)」をDLすれば良いでしょう。DLしたjQuery本体をサーバー内の適当な場所にアップロードしたら、headタグ内に以下のように記述すればOK。src=&quot;ライブラリをアップロードした場所/jquery-1.8.2.min.js&quot;&gt;&lt;/script&gt;(中略)&lt;/head&gt;ワーオ、簡単ですね。利用する更に簡単なのがこちらの方法。src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js&quot;&gt;&lt;/script&gt;(中略)&lt;/head&gt;↑このように記すだけ。細かい説明は割愛だ!本体のDLの必要がありませんこちらの方法。それだけに実装は簡単ですが、ネット環境のある場所でないとjQueryが動きませんので注意してください。実際にjQueryを書いてみようさて、これにて準備は整いました。実際にjQueryを書いてみて基本的なことを覚えていきませう。コードを書く場所jQueryのコードは、headタグ内、jQuery本体のコードの後に記しましょう。コードはheadタグ内に直接書いても良いですが、コードの煩雑化を防ぐために外部ファイルから読み込む方法をとるのがベターでしょうか。[Web初心者のための備忘録]煩雑なソースコードを避けるためにJavaScriptを外部ファイルから読み込むまた、CSSを外部読み込みにしている場合は(まぁこれがほとんどでしょうが)、コードはCSS読み込みタグの後に配置すること。これはjQueryに限ったことではないですが、JavascriptはCSSの様に同時に読み込んではくれず、それぞれに処理の時間がかかります。HTMLは上から記述してあるものを順番に読み込んでいくため、途中で読み込みの時間がかかるような事があるとページの表示速度に影響を及ぼしてしまうのです。src=&quot;script.js&quot;&gt;&lt;/script&gt;&lt;/head&gt;と、言うわけでこんな感じ。jQueryの基本的な形では、実際にコードを書いていくとしましょう:)まずは基本的な形を頭に叩き込みます。↑これがjQueryの基本形。全てがこの形ではないですし、細々した説明は色々とありますが全て放り投げておきます。(後ほど記します参考記事をご参照のこと)まぁともかく、今回の講座では上の基本的な形の中に様々な命令を記述していくことになります。記述をしていきましょう。$(function(){の中に書いていくコードはこのような形となります。それぞれどういう意味かというと...ざっくりとこんな意味になります。Aを「セレクタ」と言い、Bを「メソッド」、Bの直後の括弧内を「パラメータ」と言います。パラメータは必ずしも必要なわけではなく、パラメータを用いないメソッドもあります。「セレクタ」とは任意の範囲、要素を指定するためのもので、jQueryを覚える上で欠かせない要素です。...ですがセレクタはCSSと同じような記述をするため、スタイルシートを扱えるのであれば比較的簡単に覚えることができます。グループセレクタこんな感じ。(セレクタは「“」(ダブルクォーテーション)、もしくは「’」(シングルクォーテーション)で囲うのを忘れずに。)他にも様々なセレクタがございますので以下を参照のこと。日本語リファレンスjQueryはこの「セレクタ」で指定した場所に、メソッドおよびパラメータで記述した命令が処理されていく、と言うのがおおまかな流れとなります。具体例を一つ上げるとしましょう。class=&quot;hoge1&quot;&gt;このテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキサスは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなります&lt;/div&gt;CSS.hoge1{color:#333;}上のようなコードがあったとします。ブラウザで表示すると...こうなりますね。この文字群をCSSを使うことなくjQueryで青色に変化させてみたいと思います:)コードはこのような形となります。先ほどの説明と照らすと...こういう感じ。「セレクタ(.hoge1)」のcssを「color:blue;」にしろ、と命令したことになります。「blue」)をダブルクォーテーションで囲んで、カンマ「,」で区切ります。これによって先ほどのテキストが...見事、スタイルシートをいじることなく青色に変化しました:)どうでしょう、なんとなく、理解していただけましたでしょうか?デモページ「イベント」を使ってみるさて、jQueryを扱う上でもう一つ欠かせない要素、それが「イベントメソッド」です。イベントとは、セレクタを「クリックした時」や「hoverした時」など、次に記述するメソッドを実行するきっかけを指示するためのもの。...あぁ分かりにくいのでまたしても図解してみましょう。イベント系のメソッドを用いる時にはこのように記述します。(「B」がイベントですね)イベントには「.click(セレクタをクリックした時に実行)」や「.mouseover(セレクタにマウスを当てた時に実行)」など様々なモノがございます。メソッドここでは一例として「.click」を使ったjQueryの記述を見ていきましょう。class=&quot;hoge2A&quot;&gt;クリックすると緑色になります&lt;/div&gt;CSS.hoge2A{background-color:#fff;(省略)}サンプルとしてこんなものを用意しました。.hoge2A」を「クリックした時」に「同じ要素」の「background-color」を緑色にするためにはどのようなjQueryコードを書けば良いでしょうか?答えは...//サンプル2A$(function(){$(&quot;.hoge2A&quot;).click(function(){$(this).css(&quot;background-color&quot;,&quot;green&quot;)});});↑こうなります:)ここで覚えておくのが$(this)という書き方。これは、イベント時に同じセレクタを使用しますよ、と言う意味になります(ここでは「.hoge2A」ですね)。上のコードを一行ずつばらしてみると$(".hoge2A").click(function(){→「.hoge2A」をクリックした時に$(this).css("background-color","green")→「これ(.hoge2A)」の「cssのbackground-colorをgreenにしますよ」という事になります。実際の挙動はデモページで確認してみてください。toggleメソッドを使ってみるさて、上の記述では一度クリックした要素はグリーンのまま、変化することがありません。クリックの度に色を変化させたい!という時にはどのように記述すればよいでせうか。そんな時には「.toggle」イベントメソッドを使用します。class=&quot;hoge2B&quot;&gt;クリックの度に色が変わります&lt;/div&gt;CSS.hoge2B{background-color:#fff;(省略)}toggleイベントを使用する際は、クリックの度に入れ替わる挙動を「,(コンマ)」で区切り、function(){でつなげていきます。//サンプル2B$(function(){$(&quot;.hoge2B&quot;).toggle(function(){$(this).css(&quot;background-color&quot;,&quot;green&quot;)},function(){$(this).css(&quot;background-color&quot;,&quot;yellow&quot;)},function(){$(this).css(&quot;background-color&quot;,&quot;red&quot;)},function(){$(this).css(&quot;background-color&quot;,&quot;orange&quot;)});});これで、クリックする度に「緑→黄色→赤→オレンジ→緑...」と色が変化するようになりました:)実際の挙動はデモページで確認してみてください。デモページエフェクトメソッドイベントメソッドとよく一緒に用いられるのが「エフェクトメソッド」その名の通り、要素に様々なエフェクトをかけてくれるメソッドです。ここでは要素を隠してくれる「hide」メソッドなどを見ていきましょう。class=&quot;hoge2C&quot;&gt;クリックすると消えます&lt;/div&gt;サンプルは↑。