Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
82
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

@ryuuuuuuuuuu

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
82
Help us understand the problem. What are the problem?