Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした