【jQuery】初心者が勉強するjQuery | Webデザイナーを目指す人のブログ

jQueryとは

Web制作に携わっている人であれば一度は必ず耳にしているであろうjQuery。

私の中ではjQueryというのはなんとなくJSの難しい版だと勝手に解釈していました。

今回、改めてjQueryについて調べてみたところ、JSの難しい版というわけではなく、
複雑なJSをより簡潔にかくことができるものということが判明。

複雑なプログラムを書くことができない人でも比較的簡単に扱うことができるライブラリらしいのです！
最低限のJSはきちんと覚えなくてはいけませんが、jQueryを覚えてもっとWeb制作のスピードをあげていきたいと切実に考えています。

jQueryの準備

それでは実際にjQueryを使う準備をしましょう。

まずはjQueryのファイルをダウンロードもしくはjQueryのCDNをコピーしてbodyの閉じタグの直前にソースを記述します。

ファイルのダウンロードやCDNのソースは以下のサイトから持ってくることができます。

jQueryのダウンロード

        <!DOCTYPE html>
          <html lang = "ja">
            <head>
              <meta charset = "utf-8">
              <title>jQueryとは</title>
            </head>
            <body>
              <div id="main">
                <div class="container">
                  <p>jQueryとは</p>
                </div>
              </div>
              <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
            </body>
          </html>

これで読み込みが完了します。
jQueryのスクリプトを書くときは必ず読み込んだjQueryのソースの下に書いていきます。
というか書かないときちんと動きません。

jQueryの基本形

では次はjQueryを書いていきましょう。
jQueryの基本形は次のようになります。

$(document).ready(function(){
$(“セレクタ”).メソッド(パラメーター)
});

これはこのドキュメントが読み込まれたら次（{}内の）の処理をするという命令になります。
基本形と書いておいて何ですが、これは次のように書くことができます。

$(function(){
$(“セレクタ”).メソッド(パラメーター)
});

こっちの記述の方がよく目にします。

後者の方を使って書いていきます。

また、セレクタ、メソッドについて簡単に説明したいと思います。

セレクタ

任意の要素や範囲を指定するものです。
例えばp要素やa要素、idやclassが指定された範囲などを指します。
指定方法はcssでの指定方法と同じなのでcssが書ける人にとっては覚えるのは簡単だと思います。

また、css同様に隣接セレクタなども使うことができます。

>	直下の子要素
空白	それ以下の要素
,	複数の要素
+	隣接する要素

メソッド

どういう処理をするかというのを指定する部分です。
例えばCSSを追加する場合は次のように記述します。

        $(function(){
          $("p").css("color","red") // p要素の色を赤色にする
        });

他にもクラスを付加するaddClassやクラスを取り除くremoveClass、非表示にするhideなど様々なメソッドがあります。
メソッドについては実際に使ってみて出てきた時にまとめていきたいと思います。

今回はここまでです。
さすが6月とも言える雨の降りっぷりにも負けずに今日も頑張っていきたいと思います。
せば！