一応毎日２時間以上はTechAcademyでの学習時間を確保しており、ウンウン唸りながらも進めていますが、早速難所に差し掛かってきました。
プログラミングって振り返ってみれば、”あ、こんなのでいいの？”と拍子抜けすることが多く、相性が悪い課題だと相当苦労します。
昨日は６時間の死闘の末、諦めて寝て・起きたら偶然解決案を思い付いてしまう という高校生あるあるを体感しました。
１．jQueryとは
便利なライブラリ（関数の集合）。CSSやJavascriptで表現するのがとても大変なのを一発で解決してくれる。程度の理解でよいと思います。
$（”セレクタ”）.関数() で明記する。
２．jQueryはセレクタが全て
関数名は例によって覚えなくても書けるからカリキュラムも読まない。
順調に課題も消化できますが、jQueryではセレクタを理解しないといけません。（学習課題で6時間も格闘していたのは、セレクタの指定の仕方が間違ってたためです）
セレクタというものを日本語で説明するのはとても難しいです。
Google検索してもいまいちピンと来ませんでした。結果コレです。
セレクタは Webページを構成する部品名
昨日、HTTP/CSS編でもWebページは部品を組み合わせたものだと紹介しました。
だいぶ端折りますが、部品名のことをセレクタと呼びます。（勝手に）
最初、Webページの部品はタグ<div>や<body>のまとまりだと理解してましたが、ちょっと違ってて、idやclassのようなプロパティ属性でも一つの部品まとまりとできます。
id属性
<div id = “category-A” …>A </div>
<div id = “category-A” …> B</div>
id=“category-A”で上記２つは同じ部品とみなすことができます。この部品名のことをセレクタと呼びます。
注意が必要なのは、idのセレクタは ”#category-A” と＃が付きます。（classの場合は”.”が付きます。もう敬称みたいなものですね）
jQueryで重要なのはこれだけです。
この程度で何故６時間も掛かったのか？と思うかもしれませんが、どのセレクタに対して関数を付けるのかがとても難しく、HTMLのタグを追いまくらないとダメです。
<body>
<div id=“case-set”>
<div class=“mini”>
<ul id= “case”>
<li><a href =“”>…
こんな感じでタグがネストしまくっていて、部品名称だけでなく・タグ同士の親子関係も把握しないといけません。
セレクタを特定するにはタグ構造を把握せよ！
３．まとめ
jQueryが使えると、かなり簡単にコードが組めます。
この後出てくるBootstrapも使えるようになると、動きのあるWebサイトが作れるようになるかと思います。ちょっと楽しみになってきました。
それでは！
コメント