トップ ライブラリ/Framework/CMS jQuery

▲記事トップへ

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

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

目次

この記事の目次です。

1. jQueryとは
2. jQueryの使い方
3. jQueryの構文と書き方
4. jQueryのセレクタ
5. jQueryのイベント
6. jQueryのajax
7. jQueryの応用
8. jQueryの脆弱性情報

更新履歴

1. jQueryとは

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

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

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

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

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

jQueryの機能概要

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

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のディメリット

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

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の記述例

jQueryの記述例です。

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

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

サンプルプログラム

ボタンをクリックすると、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>
ポイント

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

jQueryのクラスセレクタ

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

クラスセレクタの例

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

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

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

5. jQueryのイベント

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

HTMLイベントとは

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

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イベントを上げると以下のようなイベントがあります。

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/

更新履歴

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

戻る

スポンサーリンク

サイト内のページ

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

開発環境
Ant /Eclipse /gcc /gdb /Git /g++ /JDK /JUnit /ZAP

技術・仕様
Ajax /CORBA /Java EE(旧称J2EE) /JNI

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

Web API
Google Maps

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

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

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

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

PC製品
ZOTAC

SI
ホームページの作り方 /小さな会社のISMS

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

スポンサーリンク

関連サイト内検索ツール

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

IPアドレス確認ツール

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

3.220.164.172

HTMLの表示色確認ツール

パスワード生成ツール

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

ここに生成されます。

スポンサーリンク