スタートアップ研修記

どうも、irisawaです。

本日のフォローアップ講習は、web/js甘口part.6「JQueryセレクタ」でした。
詳しい内容は「ディノオープンラボラトリ」の方で公開予定です。

JQueryについて

今まで何回かフォローアップでも取り上げられていたJQueryを遂に触り始める時が来ました。

なぜJQueryを学び始めるかというと、今まで実習等で書いてきたコードは「コードが冗長であり、クロスブラウザに対応していない」という問題が実は存在していました。

この問題を解決させる手段としてライブラリを使用する事で、自分の手数を最小にして書きたいコードを書けなおかつクロスブラウザに対応させる事が出来る様になります。

なぜJQueryを使うかというと、 「動作が速い、習得が簡単、強力、軽い」という４つの特徴がある為です。

実習：JQueryのセレクタを使ってみる

セレクタとは、JQueryでの要素の取得方法を指します。例えば、以下の様なHTMLが存在するとします。

<ul id="animal">
	<li>犬</li>
	<li>猫</li>
</ul>

この中のli要素を、今までの様なDOMで取得しようとすると以下のコードになると思います。

document.getElementById('animal').getElementsByTagName('li')

次に、JQueryのセレクタで 要素を取得してみたいと思います。

$('#animal > li')

全然、取得方法が違いますね。JQueryの方がキータイプも少なく直感的で分かりやすいです。
この取得文字列の種類も色々あります。上の様なCSS（CSS3）、Xpath（一部）等があるそうです。

後半に用意されたHTMLに対してセレクタを使用し、HTMLの見た目を変更するという実習を行いました。
実習で使ったJQueryの関数のリストです。

• $(document).ready() ページの読み込み完了時に処理が走ります。
• $(文字列).addClass() 要素にクラスを追加します。

今回JQueryのチートシートを貰いましたが、基本的な部分は見ないでも使える様にしたいですね。