Progateで学んだjQueryのまとめ

プログラミングの基礎が学べる『Progate』の有料会員(税込¥1,078/月)になったので、サイト制作に関連するプログラミングを学んでいます。

今回はjQueryをやってみたので、学んだことを自分用にまとめてみました。

jQueryとは

JavaScriptのライブラリで、jQueryを利用することでJavaScriptの記述が簡単に実装できるようになります。

jQueryを使用するには

jQueryを利用する方法としては、jQueryの本体をダウンロードして利用する方法と、CDNを利用してサーバーから読み込む方法があります。

Progateで紹介されていた方法はCDNから読み込む方法でした。

jQueryを読み込む手順

ヘッダーにjQuery本体のCDNを読み込ませる
<body>の終了タグ直前でjsファイルを読み込む。
jsファイルには、$(document).ready()の中身にjQueryの処理を書いていきます。この構文には省略形も用意されており、$(function(){ });と書くことも出来ます。

１．ヘッダーにjQuery本体のCDNを読み込ませる

<head>に<script src="https://...jquery.min.js"></script>を読み込ませます。

jQueryにはいくつかあり、有名なのは「StackPath（公式）」「Google」「Microsoft」です。

StackPath（公式）
https://releases.jquery.com/

「uncompressed」「minified」の2種類あり、「minified」はソースファイルのコメントや改行などを排除しているので容量が少なく軽量で高速。「uncompressed」は容量が大きいですが、何かエラーが起きたときにどの箇所が要因なのかをデバッグできる。

<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

Google
https://developers.google.com/speed/libraries/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

主に公式か、もしくはGoogleが利用されることが多く、速度ではGoogleが評判がいいようです。

<body>の終了タグ直前でjsファイルを読み込む。

bodyタグの終了タグの直前にjsファイルを読み込ませます。

<script src="script.js"></script>

jsファイルにjQueryの中身を記述

jsファイルにjQueryで処理したい内容を記述します。

$(document).ready(function(){
  //この中にjQueryを書く
});

もしくは

$(function(){
  //この中にjQueryを書く
});

jQueryの書き方の基本

1.jQueryオブジェクトを作成 2.メソッドの呼び出し

$('セレクタ').メソッド(引数);

jQueryの使い方は、１．jQueryオブジェクトを作成し、２．そのjQueryオブジェクトに対してメソッド（機能）を呼び出す、という２つが基本。

セレクタには、HTMLのタグ名やclass名などを指定し、それに合致したHTMLの要素がjQueryオブジェクトになります。

メソッドとは、便利な機能のこと。

メソッド一覧

hide(): 要素を隠す
show(): 隠れた要素を表示させる
fadeOut(): 要素を隠す(アニメーションの速度をつける)
fadeIn(): 隠れた要素を表示させる
slideUp(): 要素を隠す(下から上へスライドするアニメーション付き)
slideDown(): 隠れた要素を表示させる
css(): CSSを変更できるメソッド
text(): 文字列を変更する
html(): 要素の中身のHTMLを書き換える
find(): すべての子孫要素の中から指定したセレクタを持つ要素を取得
children(): 指定したセレクタが持つ子要素の中から指定したセレクタに合致した要素を取得
addClass(): 指定した要素にクラスを追加
removeClass(): 指定した要素のクラスを取り除く
hasClass(): 引数に指定したクラスをオブジェクトが持っているか判定する時に使う
hover(): 要素にマウスが乗ったとき、外れたときに指定した処理を行う。引数が2つ必要。
eq(): jQueryオブジェクトの中からeqの引数の数字と同じインデックス番号（配列）の要素を取得できる
index(): 配列のインデックス番号を取得する。var clickedIndex = $('.index-btn').index($(this));
prev(): jQueryオブジェクトの兄弟要素（同じ階層の要素）の中から1つ前の要素を取得
next(): jQueryオブジェクトの兄弟要素（同じ階層の要素）の中から1つ後ろの要素を取得
animate(): アニメーションをつける。$('セレクタ').animate({'プロパティ':'値'})
scrollTop(): $('html, body').scrollTop(値); のように指定し、ページ最上部から値pxの位置に移動することができる
offset(): 要素の表示位置を取得する
length: jQueryオブジェクトの要素の個数を取得
attr(): HTMLの属性はattrメソッドを用いて「ゲット」と「セット」ができる。$('h1').attr('id','title'); var url = $('a').attr('href');
val(): inputタグに入力されている値は、valメソッドで取得できます。また、selectタグはvalメソッドによって、選択中の値（optionタグのvalue属性の値）を取得できます。

イベント

hoverのサンプルコード

$('div').hover(
  function(){
    //マウスをのせた時の処理
  },
  function(){
    //マウスをはずした時の処理
  }
);

clickイベントのサンプルコード

$('').click(function(){
  //クリックしたときの処理
});

submitイベントのサンプルコード

$('form').submit(function() {
  //フォームの値を取得
});

その他

$(this)はイベントの中で、そのイベントが起こった要素を取得することができます。 var $answer = $(this).find('.answer');

同じjQueryオブジェクトを複数回使用するときは変数にします。例 var $div = $('div');

メゾットチェーンはjQueryオブジェクトを複数回使用するときに使う $('div').css('color','red').html('jQuery');

雑感

jQueryは他のプログラミングに比べると覚えることが少ないですが、慣れないのでなかなか難しいです。少しずつ慣れていければいいかなと思います。

monoのメモ帳

HTMLとCSSを勉強しながらはてなブログをカスタマイズ中です。