70
98

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-08-01

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

70
98
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
70
98

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?