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」はイベント時に同じセレクタを使用するということです。