トップ 技術・仕様 jQuery

jQuery

このページでは、JavaScriptライブラリのjQueryに関連した技術情報を掲載しています。

目次

この記事の目次です。

1. jQueryとは

2. jQueryのダウンロード

3. jQueryの使い方(セレクタ入門)

4. jQueryの使い方(ajax入門)

5. jQueryの使い方(bootstrap入門)

更新履歴

1. jQueryとは

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

2. jQueryのダウンロード

http://jquery.com/download/より、ダウンロードします。

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

3. jQueryの使い方(セレクタ入門)

jQuery入門ということでセレクタを使用した使い方を見ていきます。

セレクタとは

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

セレクタの利用例

たとえば、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名です。

その他

以下はその他の例です。

タグのテキスト内容の変更

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

詳細

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

5. jQueryの使い方(Bootstrap入門)

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

Bootstrap3の入手

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の設定などが正しくない可能性があります。

更新履歴

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

戻る

サイト内のページ

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

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

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

ライブラリ/Framework/CMS
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アドレスは以下です。

54.84.236.168

HTMLの表示色確認ツール

パスワード生成ツール

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

ここに生成されます。

スポンサーリンク