jQuery入門～導入から基本の使い方まで～

JavaScriptライブラリの「jQuery」の導入方法から使い方まで、jQuery初心者向けに、簡単なサンプルコードと共に解説します。

目次

1. jQueryとは？

「jQuery]」とは、短い記述でWebページに様々な効果を与える事ができるJavaScriptのライブラリです。「ライブラリ」とは特定の機能を持ったプログラムを集めたファイルです。ある機能をJavaScriptで一から書いた場合数十行になるようなプログラムを「jQuery」では数行で書く事ができます。また、JavaScriptで記述する場合には、ブラウザーごとの違いを考慮してたくさんのコードを記述する必要がありますが、「jQuery」を記述する際にはブラウザーの差異をきにする必要はありません。

2. jQueryを使う準備

「jQuery」のライブラリを使う方法は二通りあります。ダウンロードした「jQuery」のファイルをローカルPCやサーバーに配置して使う方法と、CDN(Content Delivery Network)を利用してjQueryライブラリを使う方法です。 手軽に「jQuery」ライブラリを使えるCDNの使い方について確認してみましょう。

「jQuery」をダウンロードして使う方法については、以下のコラムでも解説していますので、ご参考下さい。

関連記事：jQueryのダウンロードから使い方まで

「jQuery」ライブラリをダウンロードしなくても、jQueryの公式サイトや、Microsoft、Google の提供するCDNをHTMLコード中に指定する事で「jQuery」を使う事ができます。

●jQuery CDN – Latest Stable Versions

「jQuery」公式サイトのCDNを使う場合は、HTMLのheadタグ内にスクリプトタグを以下の様に指定します。

<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>

「jQuery」を使う準備はこれだけです。次の章で実際のサンプルコードを元に簡単な「jQuery」を実装してみましょう。

▲ページトップへ戻る

3. jQueryの使い方

3.1. jQueryの基本文法

「jQuery」ライブラリを読み込むコードを記述をしたら、その後に「jQuery」を書いていきます。

●jQueryの基本書式

$(document).ready(function(){
　//ここにjQueryの処理を記述します。
});

jQueryの命令は「$（ドルマーク）」から始まります。jQueryの読み込みタイミングを制御する「$(document).ready() メソッド」に続き「(function(){ ... };」内にjQueryの処理を記述します。 jQueryはHTMLを全て読み込んだ後に実行されます。また、ready関数を省略した記述も可能です。

●jQueryの基本書式（省略形）

$(function(){
　//ここにjQueryの処理を記述します。
});

●jQueryの処理

$("セレクタ").jQueryの命令

jQueryの処理は、「$("セレクタ")」で処理対象の要素を指定し、ドット「.」で区切った後にどのような処理をするか「jQueryの命令(メソッド)」を記述します。

▲ページトップへ戻る

3.2. jQueryでテキストの色を変更する方法

それでは、実際に段落タグの色を変更するjQueryを記述してみましょう。サンプルコードの「jQuery_Sample1.html」をコピーして、任意の場所に保存して下さい。

サンプルコードの「jQuery_Sample1.html」では、CSSを配置することなく、jQueryを実装する事で、段落タグのテキストの色を変更しています。処理の行の「$("p")」で段落タグに対して、スタイルを指定するcssメソッドを実行し、テキストの色(color)を赤(red)に変更しています。

▲ページトップへ戻る