トップ ライブラリ/Framework/CMS jQuery
jQueryはJavaScriptコードがシンプル化できるJavaScriptライブラリです。ダウンロードやCDNの利用方法、構文、書き方など、jQueryの使い方をテーマに初心者向けに解説していきます。
この記事の目次です。
1. jQueryとは
2. jQueryの使い方
3. jQueryの構文と書き方
4. jQueryのセレクタ
5. jQueryのイベント
6. jQueryのajax
7. jQueryの応用
8. jQueryの脆弱性情報
jQueryとは、ブラウザ用のJavaScriptライブラリです。
jQueryは、実行するために何行もJavaScriptコードを必要とする一般的なタスクを多数取り込み、それらを1行のコードで呼び出せるメソッドにラップしていて、JavaScriptコードがシンプル化できます。
特にブラウザに依存しないオープンソースのセレクタが特徴です。 セレクタを使用したCSSやHTMLタグのDOM操作などJavaScriptコードをそのまま書くより簡単にコードが記述できます。
jQueryライブラリには、次の機能が含まれています。
jQueryはいくつかの方法で使用できます。
jQueryはダウンロードしてきたjsファイルをWebスペースにアップロードして、Webページで使用することができます。 jQueryのjsファイルは、http://jquery.com/download/より、ダウンロードできます。
jQueryは、Rroduction版とDevelopment版が用意されています。 Rroduction版は軽量にソースコードを整理したライブラリファイル1つだけが配布されるものです。 通常は、軽量なProduction版で十分と思います。
ダウンロードしてきたjsファイル使用する例です。
<head> <script src="jquery-3.4.1.min.js"></script> </head>
Googleなどが提供しているjQueryのCDNを利用してWebページでjQueryを使用することもできます。
CDNのメリットとしては、CDNを利用しているサイトは多く、ブラウザが他のサイトで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を使用する例です。
<head> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script> </head>
jQueryの構文と書き方について解説していきます。
jQueryは$(セレクタ).アクション()の形式で、HTMLの要素を選択してアクションを行います。
「$」マークはjQueryの定義やアクセスを表すサインです。
セレクタはHTMLの要素を特定するための指定になります。
アクションはセレクタで指定したHTML要素の動作を指定します。
jQueryの記述例です。
CSSをご存知の方はお気づきと思いますが、jQueryのセレクタは、CSSのセレクタを採用しています。
jQueryの使い方は覚えましたでしょうか。jQueryの基礎といえばセレクタです。 タグ名やid属性からの取得、イベント操作などjQueryのセレクタについて解説していきます。
jQueryの基礎ということではじめにセレクタについて解説していきます。
jQueryのセレクタはCSSやHTMLタグのDOM操作を行うためのエンジンもしくは機能のことです。
jQueryセレクターは、HTML要素を名前、id、クラス、型、属性、属性の値などに基づいて「探す」または「選択」するために使用されます。 CSSのセレクターをベースにしていて、それに加えて独自のカスタム・セレクターもあります。
jQueryのすべてのセレクターは、ドル記号と括弧を組み合わせた$()で始まります。
要素はHTMLのタグで囲まれて定義される部分で、要素セレクタはタグ名を指定するセレクタです。
要素セレクタは例えば「$("div")」というように記述します。
以下は要素セレクタの使用例です。ボタンをクリックしたらdivタグの要素を非表示にする例です。
$(document).ready(function(){ $("button").click(function(){ $("div").hide(); }); });
jQueryのIDセレクタは、HTMLタグのid属性を使用して特定の要素を見つけます。
たとえば、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セレクタを使用した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名です。
クラスセレクタはCSSのクラスを指定してHTMLの要素を見つけるセレクタです。
クラスセレクタは例えば「$(".sample")」というように「.」をつけたクラス名を指定します。
以下はクラスセレクタの使用例です。ボタンをクリックしたらsampleクラスを指定した要素を非表示にする例です。
$(document).ready(function(){ $("button").click(function(){ $(".sample").hide(); }); });
jQueryのイベント関連のメソッドについて見ていきます。 ここでいうイベントは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要素が変更された際のイベント
利用者がHTML要素をクリックした際のイベント
利用者がHTML要素の上にマウスカーソルを当てた際のイベント
利用者がHTML要素の上にあるマウスカーソルを外した際のイベント
利用者がキーボードを押した際のイベント
ブラウザがWebページのロードを終了した際のイベント
jQueryのイベント関連のメソッドについてまとめていきます。
イベント関連のメソッドの基本的な使い方は以下です。
$("p").click(function(){ // イベント時のアクションを記述 });
このようにセレクタで要素を指定し、.click()などのイベント関連のメソッドにfunction(){}を指定します。
共通で使えるjQueryのイベントメソッドについて見ていきます。
HTMLドキュメントがロードされる前にjQueryのメソッドを実行すると失敗する場合があります。
例えば以下のようなアクションは失敗します。
jQueryの作法で、ロード前に実行され失敗しないようにする方法があります。
$(document).ready(function(){ // jQueryのメソッドを実行する。 });
このように記述しておくと、HTMLのheadで組み込んだコードがbody部で利用できます。 あと、上記のコードは短縮形もあります。短縮形は以下です。
$(function(){ // jQueryのメソッドを実行する。 });
clickメソッドは、イベントハンドラ関数をHTML要素に関連付け、指定要素がクリックされたときに実行されます。
pタグがクリックされたら、pタグ部分を非表示にする例です。
$("p").click(function(){ $(this).hide(); });
dblclickメソッドは、イベントハンドラ関数をHTML要素に関連付け、指定要素がダブルクリックされたときに実行されます。
pタグがクリックされたら、pタグ部分を非表示にする例です。
$("p").dblclick(function(){ $(this).hide(); });
jQueryのajaxについて見ていきます。
jQueryの$.ajax関数でHTTP通信でデータを取得することができます。
ページを開くと、idがaというpタグ(<p id="a">)のテキストの色を「#ff9999」に変更するサンプルプログラムを記述しています。
function sample(colorfile) {
$.ajax({
type: 'GET',
url: colorfile,
dataType: 'text',
success: function(data) {
$('#a').css({'color':data});
},
error:function() {
alert('エラーです。');
}
});
}
<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>
#ff9999
Bootstrapは、Webページに使用するCSSやJavaScriptのデザインの雛型を提供するライブラリです。
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
<!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はUIまで手が回らないエンジニアにうれしい「CSSやJavaScript」のライブラリです。 デザイン面のすぐれた豊富なテンプレートに加え、デバイスやブラウザ依存を吸収してくれます。 この記事ではbootstrapの入門知識からbootstrap4の管理画面用のテンプレートの利用まで解説していきます。
jQueryの脆弱性情報についてお知らせしていきます。
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にオプション要素を含む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
/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インフラセキュリティ
公開サーバーのセキュリティ
SI
ホームページの作り方
スポンサーリンク
関連サイト内検索ツール
zealseedsおよび関連サイト内のページが検索できます。
IPアドレス確認ツール
あなたのグローバルIPアドレスは以下です。
3.236.86.184
HTMLの表示色確認ツール
パスワード生成ツール
文字数のプルダウンを選択して、取得ボタンを押すと「a~z、A~Z、0~9」の文字を ランダムに組み合わせた文字列が表示されます。
ここに生成されます。
スポンサーリンク
Copyright (C) 2007-2024 zealseeds. All Rights Reserved. Loarding…