jQueryの入り口の入り口のその手前ぐらいの話。

「jQuery」ってナニモノ！？

jQueryの最大の特徴は、フツーのJavaScriptとは違った方法でJavaScriptの命令を記述できるとこです。
「でたっJavaScript…」とか思って拒絶反応を露わにしたいところをグッと我慢してもう少し行きましょう。

通常JavaScriptの記述にはヒジョーに多くの手続きを必要としていて、やれ「この箱に入れて」だの、やれ「ここでグルングルン回して」だの、いろいろよくわからない部分がたくさん出てくるのですが、jQueryを使うとそれがとってもとっても短いコードの記述ですんじゃうんです。
それでいてその書き方も普段身近にあるCSSの書き方にとっても似ているので、やってみればWebデザイナーやマークアップエンジニアが比較的簡単に習得できるように設計されているんです。

「CSSに書き方が似ているJavaScriptの命令の記述」この魅力的な響きに少しでも惹かれたら、あなたはもうjQueryワールドに片足を突っ込んでいるといっても間違いではありません。

ライブラリを読ませればあとはゴニョゴニョ書くだけ

さて、そもそも何が「jQuery」かっていう話しなんですけど、ズリズリ動く素敵なサイトのソースを見れば大体書いてある下のようなやつ。こいつが「jQuery」です。
（いろんなバージョンがあったり、自分のサイト内にファイルを置いたりもできますが）

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 

このファイルの中にはなにやら難しそうなことがゴリゴリ書いてありますが、その内容をざっくり翻訳しますと「おい！JavaScript！！ここはもうjQuery先生がそうおっしゃってるんだ！おとなしく言うことを聞かんかい！」といった具合です。
（※上記翻訳はフィクションです。登場する人物・団体はたぶん実在しません）

あれ？なんか簡単に見えなくもないこともない…

では、実際に何をどう書いたらどうなるかを見ていきましょう。

<script>
$(function(){
	$("p").css("color","#F00");
});
</script>

上記をjQueryを読み込んだ後の<head>内に書くと、全部のHTMLソースを読み込んだ後、そのHTML内の<p>タグにcssでcolorが#F00の指定をぶち込んでくれます。
いろんなサイトのファイルを見ていると、なんだか大変な記述が呪文のごとく書き連ねられていますが、全ての基本は上のような単純なものです。

じゃ。そのちょっとややこしそうな動き書いてみますかね。

<script>
$("#hoge").click(function(){
	$("p").css("color","#F00");
});
</script>

はい、もうお分かりですよね。
「#hogeをクリックしたらpのcolorが#F00になる」です。
1行目が「何をどうすると」で「何がどうなる」ってことですな。
「オウオウ！ずいぶん簡単に言ってくれるじゃないか！」って感じもしますけど、基本は全部この形になっています。

何を隠そう私もこういう簡単なガイダンスで「あ！なんとなくわかった（気がする）！！！」と勘違いして勉強を始めました。

この記事がjQueryを始めるきっかけになれば幸いでございまする。