jQuery

jQueryの書き方について簡単にまとめた


RubyだけじゃなくてJSもやらなあかん

Rubyしかやってきてないけど、JSは必須なので勉強しないと。

ってことでjQueryについて。

JSを書きやすくしたもの(ライブラリが)jQuery。

jQueryなら簡単にJSを書くことができます。


使い方

jQueryを使い始める2パターンについて(他にも方法はあると思います)。


①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() ABする
});

Aを「セレクタ」といい、

Bを「メソッド」

Bの直後のカッコ内を「パラメータ」といいます。

ちゃんと記入するとこんな感じに


$(function(){
$(".hoge").css("color","blue") ⇦「.hoge」のcolorblueにする
})

「セレクタ」とは任意の範囲、要素を指定するためのもので、jQueryを覚える上で欠かせない要素です。

なお、セレクタはCSSと同じような記述をするため、CSSを勉強済みであれば比較的簡単に覚えることができます。

下記のように書きます。

$(“#hoge”) – idセレクタ

$(“.hogehoge”) – クラスセレクタ
$(“li a”) – 子孫セレクタ
$(“p.hoge, p.hogehoge”) – グループセレクタ

*セレクタは「“」(ダブルクォーテーション)、もしくは「’」(シングルクォーテーション)で囲う必要あり。

jQueryはこの「セレクタ」で指定した場所に、

メソッドおよびパラメータで記述した命令が処理されていく、と言うのがおおまかな流れとなります。


イベントを使う

jQueryを扱う上でもう一つ欠かせない要素、それが「イベントメソッド」

イベントとは、セレクタを「クリックした時」や「マウスのカーソルをあてた時」など(他にもいろいろあるが)、次に記述したメソッドを実行する「きっかけ」のこと。


$(function(){
$("A").B(function{    ⇦ABしたとき
$("C").D()  ⇦CDする
});
});

Bがイベントです。

イベントには「.click(セレクタをクリックした時に実行)」や「.mouseover(セレクタにマウスを当てた時に実行)」など色々あります。


「.click」を使った 例

<div class="hoge">クリックすると青色になります</div>


$(function(){
$(".hoge").click(function(){
$(this).css("background-color","blue")
});
});

上記の例では、class名がhogeの「クリックすると青色になります」をクリックすると、

clickイベントが走り、背景色が青になる。という感じです。

*「this」はイベント時に同じセレクタを使用するということです。