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

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

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

目次

この記事の目次です。

1. jQueryとは

2. jQueryの使い方

3. jQueryの構文と書き方

4. jQueryの基礎(セレクタ、イベント)

5. jQueryのajax

6. 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のセレクタについて解説していきます。

詳細

5. 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

6. 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の管理画面用のテンプレートの利用まで解説していきます。

詳細

更新履歴

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

戻る

スポンサーリンク

サイト内のページ

言語
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 /Seasar2 /WordPress

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

ITインフラ PC 製品
ZOTAC

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

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

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

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

その他
IT用語 /ITスキル体系 /トレンド履歴

スポンサーリンク

関連サイト内検索ツール

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

IPアドレス確認ツール

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

34.225.194.144

HTMLの表示色確認ツール

パスワード生成ツール

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

ここに生成されます。

スポンサーリンク