#RubyだけじゃなくてJSもやらなあかん
Rubyしかやってきてないけど、JSは必須なので勉強しないと。
ってことでjQueryについて。
JSを書きやすくしたもの（ライブラリが）jQuery。
jQueryなら簡単にJSを書くことができます。
#使い方
jQueryを使い始める２パターンについて（他にも方法はあると思います）。
###①jQueryのサイトを開いて、ダウンロードして使う
⇒HTMLファイルにダウンロードしたjQueryファイルを紐づける。
<head>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
</head>
###②jQueryをダウンロードせずに、他のサーバーにあるものを使用する
GoogleやMicrosoft、jQuery本家などのサーバーが配信しているjQueryを使います。
専門用語でCDN（コンテンツデリバリネットワーク）と言って、アクセス元から近いサーバーと通信をとって高速化をはかるものです。
なんかよくわからんですが、こういう方法もあるってことで。
以下のように記述します。
<head>
<!-- headの中に以下のように記述 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
src=””のリンク先については、それぞれ希望のCDNのURLを入れます。これでjQueryファイルの紐付けができました。
この②の方法を使えば、自分でダウンロードせずにjQueryを使えるので、こちらのほうがミスもなく簡単。
#JavaScript（jQuery)のコードを書く場所
これについては依然まとめた記事があるのでそちらを参照
https://qiita.com/ryuuuuuuuuuu/items/6420353e8e2db4d28f20
#jQueryの書き方
###基本形
$(function(){
ここに処理を書く
});
基本形の中に処理を書いていくと以下のようになります。
$(function(){
$(A).B() ⇦AをBする
});
Aを***「セレクタ」といい、
Bを「メソッド」、
Bの直後のカッコ内を「パラメータ」***といいます。
ちゃんと記入するとこんな感じに
$(function(){
$(".hoge").css("color","blue") ⇦「.hoge」のcolorをblueにする
})
***「セレクタ」***とは任意の範囲、要素を指定するためのもので、jQueryを覚える上で欠かせない要素です。
なお、セレクタはCSSと同じような記述をするため、CSSを勉強済みであれば比較的簡単に覚えることができます。
下記のように書きます。
$(“#hoge”) – idセレクタ
$(“.hogehoge”) – クラスセレクタ
$(“li a”) – 子孫セレクタ
$(“p.hoge, p.hogehoge”) – グループセレクタ
*セレクタは「“」（ダブルクォーテーション）、もしくは「’」（シングルクォーテーション）で囲う必要あり。
jQueryはこの「セレクタ」で指定した場所に、
メソッドおよびパラメータで記述した命令が処理されていく、と言うのがおおまかな流れとなります。
#イベントを使う
jQueryを扱う上でもう一つ欠かせない要素、それが***「イベントメソッド」***。
イベントとは、セレクタを「クリックした時」や「マウスのカーソルをあてた時」など（他にもいろいろあるが）、次に記述したメソッドを実行する「きっかけ」のこと。
$(function(){
$("A").B(function{ ⇦AをBしたとき
$("C").D() ⇦CをDする
});
});
Bがイベントです。
イベントには「.click（セレクタをクリックした時に実行）」や「.mouseover（セレクタにマウスを当てた時に実行）」など色々あります。
###「.click」を使った 例
<div class="hoge">クリックすると青色になります</div>
$(function(){
$(".hoge").click(function(){
$(this).css("background-color","blue")
});
});
上記の例では、class名がhogeの「クリックすると青色になります」をクリックすると、
clickイベントが走り、背景色が青になる。という感じです。
*「this」はイベント時に同じセレクタを使用するということです。