【完全初心者向け】jQueryについての超簡単まとめ

HTMLとCSSを学んだらサイト作りはできますが、サイト作りを学んでいくと必ず目にする言葉といえばjQuery。

この記事ではjQueryとはそもそもなんなのか、そしてどうやって使うのかを説明して行きますので、是非最後まで読み進めて行ってください。

jQueryとは

HTML・CSSで作られたサイトの動きを表現するのにJavascriptというフロントエンド言語がよく使われています。しかし、Javascriptはフロントエンド言語なので、ブラウザによってJavascriptの命令の解釈が違い、処理結果に差が出てしまいます。

その問題を解決するのに誕生したライブラリ(Javascriptの機能をまとめたもの)がjQueryです。

jQueryのメリット

処理結果の差を無くす以外にも、メリットがあります。

jQueryを利用する

jQueryを利用するために、jQueryをHTMLに読み込みますが、読み込み方には2種類あります。

ダウンロードしてHTMLに読み込む

jQUery本体をここからダウンロードして、外部ファイルとしてHTMLに読み込ませます。

自分のパソコンにjQUery本体をダウンロードすることにより、オフラインの環境でもjQUeryを利用することができます。3.5.1と書いてある部分はjQueryのバージョンです。

HTML

<script src="jquery-3.5.1.min.js"></script>

GoogleのCDNからHTMLに読み込む

Googleのサーバー上にあるjQueryをHTMLに読み込んで利用することもできます。

jQueryをローカル環境(パソコン)にダウンロードする手間もなく、しかも読み込み時間が短くなるケースがあるのでこちらの方法をおすすめします。

HTML

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

jQueryの書き方

jQueryはHTMLを全て読み込んだ後に実行しないと、動かないなどの不具合が生じてしまいます。

そうならない様に下記の様にreadyメソッドと呼ばれるメソッドを使い、HTMLを全て読み込んだ後にjQueryを実行するようにします。

jQuery

$(document).ready(function(){
    // ここに実行したい処理を記述
});

ただ、これだと記述が長くなってしまうので、実際には下記の様にreadyメソッドを省略して記述することがほとんどです。

jQuery

$(function(){
    // ここに実行したい処理を記述
});

jQueryの構成

jQueryは「どの要素に」対して「どんな処理をするか」を記述します。

「どの要素に」の部分をセレクタ、「どんな処理をするか」の部分をメソッドと呼びます。

例えば、h1の色を赤にする場合は、以下のように記述します。

jQuery

$(function(){
  $('h1').css('color','red');
});

h1タグがセレクタで、cssの部分はメソッドです。

なおメソッドの括弧の中にあるパラメータ（引数）は、メソッドの種類によって必要ない場合もあります。セレクタやパラメータはシングルクオーテーションで囲ってもダブルクオーテーションで囲っても大丈夫です。

セレクタ

上の例のセレクタは要素名（h1）を書いてあるだけのシンプルなものですが、セレクタの種類を使い分けると様々な対象にスタイルを適用できます。

セレクタという呼び名でピンとくる方もいると思いますが、CSSの書き方と同じです。セレクタの種類は以下の通りです。

属性セレクタ

指定した属性名と属性値を持つ要素を取得します。

name属性やinput要素のtype属性などでよく使われます。

フィルタ

セレクタで取得した要素を絞り込む機能です。

フィルタを使うことにより、セレクタだけではできない、複雑な条件の要素を取得することができます。フィルタはCSSと同じでセレクタの後ろに続けて記述します。

jQuery

$(function(){
  $('セレクタフィルタ').メソッド(引数);
});

例えば、liの最初の要素の文字だけを赤にする場合は、以下のように記述します。

jQuery

$(function(){
  $('li:first').css('color','red');
});

フィルタの種類は以下の通りです。

メソッド

セレクタを「どう処理するか」を記述します。

メソッドを使うことで、セレクタの内容を変更したり、アニメーションをつけることができます。

jQuery

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

例えば、ID名がmainの要素にactiveクラスを追加する場合は、以下のように記述します。

jQuery

$(function(){
  $('#main').addClass('active');
});

メソッドの種類は以下の通りです。

イベント

メソッドの中でもイベント系のメソッドというものがあります。

これを使うことで、クリックなどの操作が行われた時などに、何かしらの処理を実行することができます。イベントの構文は、以下のように記述します。

jQuery

$('セレクタ').イベント名(function(){
	// ここに実行したい処理を記述
});

例えば、以下の場合、#btnの要素をクリックするたびに、ID名main要素に対してactiveクラスの追加と削除を繰り返します。

jQuery

$('#btn').click(function(){
	$('#main').toggleClass('active');
});

イベント系のメソッドの種類は以下の通りです。

アニメーション

アニメーション系のメソッド一覧です。

処理を行う際に、アニメーションをつけることができます。例えば、以下の場合、#btnの要素をクリックすると、ID名text要素が非表示になります。

jQuery

$('#btn').click(function(){
	$('#text').hide();
});

アニメーション系のメソッドの種類は以下の通りです。

まとめ

この記事に書かれていることで、特に覚えておいて欲しいことは以下の3点です。

Javascriptで挫折してしまった人も、jQueryを学んでみると、プログラミング言語への抵抗感がなくなる可能性が高いので、是非一度触れてみてください。jQueryの勉強はオススメです。

jQuery関係の記事は他にも書いているので、宜しければそちらもチェックしてみてください。