jQuery―使い方を初心者向けに解説。ダウンロードや構文、書き方など。

jQueryはJavaScriptコードがシンプル化できるJavaScriptライブラリです。ダウンロードやCDNの利用方法、構文、書き方など、jQueryの使い方をテーマに初心者向けに解説していきます。

▲記事トップへ

1. jQueryとは

jQueryとは、ブラウザ用のJavaScriptライブラリです。

JavaScriptコードがシンプル化できる

jQueryは、実行するために何行もJavaScriptコードを必要とする一般的なタスクを多数取り込み、それらを1行のコードで呼び出せるメソッドにラップしていて、JavaScriptコードがシンプル化できます。

ブラウザに依存しないオープンソースのセレクタ

特にブラウザに依存しないオープンソースのセレクタが特徴です。セレクタを使用したCSSやHTMLタグのDOM操作などJavaScriptコードをそのまま書くより簡単にコードが記述できます。

jQueryの機能概要

jQueryライブラリには、次の機能が含まれています。

HTML/DOM操作
CSS操作
HTMLイベントメソッド
効果とアニメーション
AJAX
ユーティリティ

2. jQueryの使い方

jQueryはいくつかの方法で使用できます。

jQuery.comからダウンロードして使用

jQueryはダウンロードしてきたjsファイルをWebスペースにアップロードして、Webページで使用することができます。 jQueryのjsファイルは、http://jquery.com/download/より、ダウンロードできます。

jQueryは、Rroduction版とDevelopment版が用意されています。 Rroduction版は軽量にソースコードを整理したライブラリファイル1つだけが配布されるものです。通常は、軽量なProduction版で十分と思います。

ダウンロードしてきたjsファイルを使用する例

ダウンロードしてきたjsファイル使用する例です。

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

CDNを使用

Googleなどが提供しているjQueryのCDNを利用してWebページでjQueryを使用することもできます。

CDNのメリット

CDNのメリットとしては、CDNを利用しているサイトは多く、ブラウザが他のサイトでCDNのjQueryをキャッシュしている可能性が高く、表示の高速化が期待点が挙げられます。

CDNのディメリット

ディメリットとしては以下の懸念点が考えられます。

CDNの仕様変更によりURLや利用機能が変わるおそれ
CDN側にアクセス時の情報が提供される
大本がハッキングされ管理外で感染ファイルをロードするおそれ

GoogleのCDNを利用してjQueryを使用する例

GoogleのCDNを利用してjQueryを使用する例です。

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

MicrosoftのCDNを利用してjQueryを使用する例

MicrosoftのCDNを利用してjQueryを使用する例です。

<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
</head>

3. jQueryの構文と書き方

jQueryの構文と書き方について解説していきます。

基本

jQueryは$(セレクタ).アクション()の形式で、HTMLの要素を選択してアクションを行います。

$
「$」マークはjQueryの定義やアクセスを表すサインです。
セレクタ
セレクタはHTMLの要素を特定するための指定になります。
アクション
アクションはセレクタで指定したHTML要素の動作を指定します。

jQueryの記述例

jQueryの記述例です。

$(this).hide()　―　既存の要素を隠す
$("div").hide()　―　divタグの要素すべてを隠す
$(".content").hide()　―　contentクラスを指定した要素すべてを隠す
$("#content").hide()　―　contentのidを指定した要素を隠す

CSSをご存知の方はお気づきと思いますが、jQueryのセレクタは、CSSのセレクタを採用しています。

4. jQueryのセレクタ

jQueryの使い方は覚えましたでしょうか。jQueryの基礎といえばセレクタです。タグ名やid属性からの取得、イベント操作などjQueryのセレクタについて解説していきます。

jQueryの基礎、セレクタとは

jQueryの基礎ということではじめにセレクタについて解説していきます。

jQueryのセレクタとは

jQueryのセレクタはCSSやHTMLタグのDOM操作を行うためのエンジンもしくは機能のことです。

セレクタの種類

jQueryセレクターは、HTML要素を名前、id、クラス、型、属性、属性の値などに基づいて「探す」または「選択」するために使用されます。 CSSのセレクターをベースにしていて、それに加えて独自のカスタム・セレクターもあります。

セレクタの特徴

jQueryのすべてのセレクターは、ドル記号と括弧を組み合わせた$()で始まります。

jQueryの要素セレクタ

要素はHTMLのタグで囲まれて定義される部分で、要素セレクタはタグ名を指定するセレクタです。

要素セレクタの例

要素セレクタは例えば「$("div")」というように記述します。

以下は要素セレクタの使用例です。ボタンをクリックしたらdivタグの要素を非表示にする例です。

$(document).ready(function(){
  $("button").click(function(){
    $("div").hide();
  });
});

jQueryのIDセレクタ

jQueryのIDセレクタは、HTMLタグのid属性を使用して特定の要素を見つけます。

IDセレクタの利用例1（CSSの指定変更）

たとえば、DOMオブジェクトの要素を取得して、タグのスタイルを変更出来ます。

サンプルコード

ボタンをクリックすると、idがaというpタグ(<p id="a">)のテキストの色を「#0000AA」に変更するサンプルプログラムを記述しています。

<html>
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="jquery-1.10.2.min.js" ></script>
</head>
<body>

<p id="a">このテキストの色が変わります。</p>

<input type="button" value="ボタン"
onclick="$('#a').css({'color':'#0000AA'});">

</body>
</html>

ポイント

特定のIDのエレメントを取得する場合、document.getElementById()メソッドでを使用しますが、 jQueryでは「$("#○○")」といった形で取得できます。○○の部分はID名です。

IDセレクタの利用例2（タグのテキスト内容の変更）

IDセレクタを使用したHTMLタグのテキスト内容の変更の例です。

jQueryの$()ショートカット関数を使用することで、指定したタグのテキスト内容を参照したり、設定したりすることができます。

なお、関連情報として以下のような内容がありますので、はじめに紹介しておきます。

【関連】該当タグにテキストを設定する（innerHTMLプロパティ）　…jQueryを使用しないでタグのテキストを変更するサンプル。

サンプルプログラム

ボタンをクリックすると、idがaというpタグ(<p id="a">)のテキスト内容を「Hello World!!」に設定するサンプルプログラムを記述しています。

<html>
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="jquery-1.10.2.min.js" ></script>
</head>
<body>

<p id="a">ここに文字列を出力します。</p>

<input type="button" value="ボタン"
onclick='$("#a").text("Hello World!!");'>

</body>
</html>

ポイント

jQueryのクラスセレクタ

クラスセレクタはCSSのクラスを指定してHTMLの要素を見つけるセレクタです。

クラスセレクタの例

クラスセレクタは例えば「$(".sample")」というように「.」をつけたクラス名を指定します。

以下はクラスセレクタの使用例です。ボタンをクリックしたらsampleクラスを指定した要素を非表示にする例です。

$(document).ready(function(){
  $("button").click(function(){
    $(".sample").hide();
  });
});

5. jQueryのイベント

jQueryのイベント関連のメソッドについて見ていきます。ここでいうイベントはHTMLイベントになります。

HTMLイベントとは

HTMLイベントは、ブラウザの動作や閲覧者の操作により発生します。例えば、以下のようなイベントがあります。

ブラウザのWebページのロード完了イベント
入力エリアが変更されるイベント
ボタンがクリックされるイベント

JavaScriptでは、このようなイベント発生をトリガとしてコードの実行が行えます。例えば、ボタンがクリックされた際にコードを実行する場合は以下のようにonclick属性にJavaScriptコードを指定します。

<button onclick="document.getElementById('date').innerHTML = Date()">日時取得</button>

上記はボタンをクリックした際に、idがdateの要素に日付のテキストに置き換えるコードです。なお、document.getElementById('date')の部分をthis（自分自身）にするとbutton自信のテキストが変更できます。

<button onclick="this.innerHTML = Date()">日時取得</button>

共通で利用できるHTMLイベント

共通で利用できるHTMLイベントを上げると以下のようなイベントがあります。

onchange
HTML要素が変更された際のイベント
onclick
利用者がHTML要素をクリックした際のイベント
onmouseover
利用者がHTML要素の上にマウスカーソルを当てた際のイベント
onmouseout
利用者がHTML要素の上にあるマウスカーソルを外した際のイベント
onkeydown
利用者がキーボードを押した際のイベント
onload
ブラウザがWebページのロードを終了した際のイベント

jQueryのイベント関連のメソッド

jQueryのイベント関連のメソッドについてまとめていきます。

基本的な使い方

イベント関連のメソッドの基本的な使い方は以下です。

$("p").click(function(){
  // イベント時のアクションを記述
});

このようにセレクタで要素を指定し、.click()などのイベント関連のメソッドにfunction(){}を指定します。

共通で使えるjQueryのイベントメソッド

共通で使えるjQueryのイベントメソッドについて見ていきます。

$(document).ready()

HTMLドキュメントがロードされる前にjQueryのメソッドを実行すると失敗する場合があります。

準備前だと失敗する例

例えば以下のようなアクションは失敗します。

作成されていない要素を非表示にする
ロードされていない画像のサイズを取得する

準備前に実行されないようにする方法

jQueryの作法で、ロード前に実行され失敗しないようにする方法があります。

$(document).ready(function(){

  // jQueryのメソッドを実行する。

});

このように記述しておくと、HTMLのheadで組み込んだコードがbody部で利用できます。あと、上記のコードは短縮形もあります。短縮形は以下です。

$(function(){

  // jQueryのメソッドを実行する。

});

click()

clickメソッドは、イベントハンドラ関数をHTML要素に関連付け、指定要素がクリックされたときに実行されます。

click()メソッドの例

pタグがクリックされたら、pタグ部分を非表示にする例です。

$("p").click(function(){
  $(this).hide();
});

dblclick()

dblclickメソッドは、イベントハンドラ関数をHTML要素に関連付け、指定要素がダブルクリックされたときに実行されます。

dblclick()メソッドの例

pタグがクリックされたら、pタグ部分を非表示にする例です。

$("p").dblclick(function(){
  $(this).hide();
});

6. jQueryのajax

jQueryのajaxについて見ていきます。

Ajax

jQueryの$.ajax関数でHTTP通信でデータを取得することができます。

サンプルコード

ページを開くと、idがaというpタグ(<p id="a">)のテキストの色を「#ff9999」に変更するサンプルプログラムを記述しています。

sample.js

function sample(colorfile) {
    $.ajax({
        type: 'GET',
        url: colorfile,
        dataType: 'text',
        success: function(data) {
            $('#a').css({'color':data});
        },
        error:function() {
            alert('エラーです。');
        }
    });
}

index.html

<html>
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="jquery-1.10.2.min.js" ></script>
<script type="text/javascript" src="sample.js"></script>
<script type="text/javascript">$(sample("color.txt"));</script>
</head>
<body>
<p id="a">このテキストのピンク色に変わります。</p>
</body>
</html>

color.txt

#ff9999

7. jQueryの応用

Bootstrapは、Webページに使用するCSSやJavaScriptのデザインの雛型を提供するライブラリです。

Bootstrapの入手

MITライセンスで提供されており、http://getbootstrap.com/から入手できます。 Bootstrap3を使用するにはjQueryが必要です。

サンプルの構成

│  index.html
├─css
│      bootstrap-theme.css.map
│      bootstrap-theme.min.css
│      bootstrap.css.map
│      bootstrap.min.css
│
├─fonts
│      glyphicons-halflings-regular.eot
│      glyphicons-halflings-regular.svg
│      glyphicons-halflings-regular.ttf
│      glyphicons-halflings-regular.woff
│      glyphicons-halflings-regular.woff2
└─js
        bootstrap.min.js
        html5shiv.min.js
        jquery.min.js
        npm.js
        response.min.js

HTML（index.html）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプルページ</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1><span class="glyphicon glyphicon-book"></span>サンプルページ</h1>

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

動作確認

Webサーバに配置してhttpまたはhttpsでindex.htmlを表示して、タイトルの横に本のマークが表示されればOKです。表示されない場合はCSSの設定などが正しくない可能性があります。

Bootstrapの詳細について

Bootstrapについては以下に詳しくまとめています。

bootstrap

bootstrapはUIまで手が回らないエンジニアにうれしい「CSSやJavaScript」のライブラリです。デザイン面のすぐれた豊富なテンプレートに加え、デバイスやブラウザ依存を吸収してくれます。この記事ではbootstrapの入門知識からbootstrap4の管理画面用のテンプレートの利用まで解説していきます。

詳細

8. jQueryの脆弱性情報

jQueryの脆弱性情報についてお知らせしていきます。

2020/4/29 CVE-2020-11022 jQueryの潜在的なXSS脆弱性（htmlPrefilterと関連メソッド）

2020/4/29にjQueryの潜在的なXSS脆弱性（htmlPrefilterと関連メソッド）が公表されました。 jQuery 1.2から3.5.0より前のバージョンを使用している場合、信頼できないソースからのHTMLをjQueryのDOM操作メソッド（例えば、html()、append()など）のに渡すと、信頼できないコードが実行される可能性があります。

パッチ情報

この問題はjQuery 3.5.0で修正されています。 jQuery 3.5.0以上のバージョンにアップグレードすれば解決できます。

参考情報

https://github.com/jquery/jquery/security/advisories/GHSA-gxr4-xjj5-5px2
https://blog.jquery.com/2020/04/10/jquery-3-5-0-released/
https://jquery.com/upgrade-guide/3.5/

2020/4/29 CVE-2020-11023 オプション要素を含むHTMLを追加する際の潜在的なXSS脆弱性

2020/4/29にオプション要素を含むHTMLを追加する際の潜在的なXSS脆弱性が公表されました。 jQuery 1.0.3から3.5.0より前のバージョンを使用している場合、<option>要素を含むHTMLを信頼できないソースからjQueryのDOM操作メソッド（例えば、html()、append()など）に渡すと、信頼できないコードが実行される可能性があります。

パッチ情報

この問題はjQuery 3.5.0で修正されています。 jQuery 3.5.0以上のバージョンにアップグレードすれば解決できます。

参考情報

https://github.com/jquery/jquery/security/advisories/GHSA-jpcq-cgw6-v4j6
https://blog.jquery.com/2020/04/10/jquery-3-5-0-released/

更新履歴

この記事の更新履歴です。

2020/5/11 jQueryの脆弱性情報についてを追記しました。
2019/11/1 jQueryの記述例についてを追記しました。
2019/10/31 jQueryの基本的な構文についてを追記しました。
2019/10/30 jQueryの組込み方についてを追記しました。
2019/10/29 jQueryの機能概要についてを追記しました。
2019/10/27 jQueryとはについてを追記しました。
2018/6/28 目次を追記しました。

戻る

スポンサーリンク

サイト内のページ

言語
C・C++ /HTML /Java /JavaScript /PHP /シェルスクリプト

開発環境
Ant /Burp /Eclipse /Fiddler /gcc /gdb /Git /g++ /JDK /JMeter /JUnit /Teraterm /ZAP

技術・仕様
Ajax /CORBA /Jakarta EE（旧称J2EE、Java EE） /JNI

ライブラリ／Framework／CMS
bootstrap /jQuery /FuelPHP /Lucene /MyBatis /Seasar2 /Spring /Struts /WordPress

Web API
Google Maps

ITインフラOSとミドルウェア
Linux /Windows /シェル
 ActiveMQ /Tomcat /MariaDB /MySQL /Nagios /Redis /Solr

ITインフラサーバー
公開Webサーバー

ITインフラネットワーク
プログラミング /構築

ITインフラセキュリティ
公開サーバーのセキュリティ

PC製品
ZOTAC

SI
ホームページの作り方

その他
IT用語 /ITスキル体系

スポンサーリンク

関連サイト内検索ツール

zealseedsおよび関連サイト内のページが検索できます。

IPアドレス確認ツール

あなたのグローバルIPアドレスは以下です。

18.191.200.114

HTMLの表示色確認ツール

パスワード生成ツール

文字数のプルダウンを選択して、取得ボタンを押すと「a～z、A～Z、0～9」の文字をランダムに組み合わせた文字列が表示されます。

ここに生成されます。

スポンサーリンク

jQuery―使い方を初心者向けに解説。ダウンロードや構文、書き方など。

目次

1. jQueryとは

JavaScriptコードがシンプル化できる

ブラウザに依存しないオープンソースのセレクタ

jQueryの機能概要

2. jQueryの使い方

jQuery.comからダウンロードして使用

ダウンロードしてきたjsファイルを使用する例

CDNを使用

CDNのメリット

CDNのディメリット

GoogleのCDNを利用してjQueryを使用する例

MicrosoftのCDNを利用してjQueryを使用する例

3. jQueryの構文と書き方

基本

jQueryの記述例

4. jQueryのセレクタ

jQueryの基礎、セレクタとは

jQueryのセレクタとは

セレクタの種類

セレクタの特徴

jQueryの要素セレクタ

要素セレクタの例

jQueryのIDセレクタ

IDセレクタの利用例1（CSSの指定変更）

サンプルコード

ポイント

IDセレクタの利用例2（タグのテキスト内容の変更）

サンプルプログラム

ポイント

jQueryのクラスセレクタ

クラスセレクタの例

5. jQueryのイベント

HTMLイベントとは

共通で利用できるHTMLイベント

jQueryのイベント関連のメソッド

基本的な使い方

共通で使えるjQueryのイベントメソッド

$(document).ready()

準備前だと失敗する例

準備前に実行されないようにする方法

click()

click()メソッドの例

dblclick()

dblclick()メソッドの例

6. jQueryのajax

Ajax

サンプルコード

sample.js

index.html

color.txt

7. jQueryの応用

Bootstrapの入手

サンプルの構成

HTML（index.html）

動作確認

Bootstrapの詳細について

bootstrap

8. jQueryの脆弱性情報

2020/4/29 CVE-2020-11022 jQueryの潜在的なXSS脆弱性（htmlPrefilterと関連メソッド）

パッチ情報

参考情報

2020/4/29 CVE-2020-11023 オプション要素を含むHTMLを追加する際の潜在的なXSS脆弱性

パッチ情報

参考情報

更新履歴