Jquery-overview
jQuery-概要
jQueryとは何ですか？
jQueryは、2006年にJohn Resigによって作成された、高速で簡潔なJavaScriptライブラリです。 jQueryは、迅速なWeb開発のために、HTMLドキュメントのトラバース、イベント処理、アニメーション、およびAjax対話を簡素化します。 jQueryは、より少ないコードを記述することでさまざまなタスクを簡素化するように設計されたJavaScriptツールキットです。 jQueryでサポートされる重要なコア機能のリストは次のとおりです-
- * DOM操作*-jQueryにより、 Sizzle と呼ばれるクロスブラウザーオープンソースセレクターエンジンを使用して、DOM要素の選択、ネゴシエート、およびコンテンツの変更が簡単になりました。
- イベント処理-jQueryは、ユーザーがリンクをクリックするなど、イベントハンドラーでHTMLコード自体を乱雑にすることなく、さまざまなイベントをキャプチャするエレガントな方法を提供します。
- * AJAXサポート*-jQueryは、AJAXテクノロジーを使用して、レスポンシブで機能豊富なサイトを開発するのに役立ちます。
- アニメーション-jQueryには、Webサイトで使用できる多くのアニメーション効果が組み込まれています。
- 軽量-jQueryは非常に軽量なライブラリで、サイズは約19KB（最小化およびgzip圧縮）です。
- クロスブラウザのサポート-jQueryはクロスブラウザをサポートしており、IE 6.0 +、FF 2.0 +、Safari 3.0 +、ChromeおよびOpera 9.0+で正常に動作します
- 最新のテクノロジー-jQueryはCSS3セレクターと基本的なXPath構文をサポートします。
jQueryの使用方法
jQueryを使用するには2つの方法があります。
- ローカルインストール-ローカルマシンにjQueryライブラリをダウンロードして、HTMLコードに含めることができます。
- * CDNベースのバージョン*-Content Delivery Network（CDN）から直接HTMLコードにjQueryライブラリを含めることができます。
ローカルインストール
- [[1]]
- 次に、ダウンロードした jquery-2.1.3.min.js ファイルをWebサイトのディレクトリに置きます。/jquery。
例
これで、次のようにHTMLファイルに_jquery_ライブラリを含めることができます-
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript" src = "/jquery/jquery-2.1.3.min.js">
</script>
<script type = "text/javascript">
$(document).ready(function() {
document.write("Hello, World!");
});
</script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>これにより、次の結果が生成されます–
CDNベースのバージョン
jQueryライブラリーをContent Delivery Network（CDN）から直接HTMLコードに含めることができます。 GoogleとMicrosoftは、最新バージョンのコンテンツ配信を提供しています。
'_このチュートリアルでは、Google CDNバージョンのライブラリを使用しています。_
例
次に、Google CDNのjQueryライブラリを使用して上記の例を書き換えましょう。
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript">
$(document).ready(function() {
document.write("Hello, World!");
});
</script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>これにより、次の結果が生成されます–
jQueryライブラリ関数を呼び出す方法
ほとんどすべてとして、jQueryを使用してドキュメントオブジェクトモデル（DOM）を読み取ったり操作したりする場合は、イベントなどの追加を開始する必要があります。 DOMの準備ができ次第。
ページでイベントを機能させたい場合は、$（document）.ready（）関数内でイベントを呼び出す必要があります。 DOMがロードされると同時にページのコンテンツがロードされる前に、内部のすべてがロードされます。
これを行うには、次のようにドキュメントの準備イベントを登録します-
$(document).ready(function() {
//do stuff when DOM is ready
});jQueryライブラリ関数を呼び出すには、以下に示すようにHTMLスクリプトタグを使用します-
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("div").click(function() {alert("Hello, world!");});
});
</script>
</head>
<body>
<div id = "mydiv">
Click on this to see a dialogue box.
</div>
</body>
</html>これにより、次の結果が生成されます–
カスタムスクリプトの使用方法
次のように、カスタムJavaScriptファイルにカスタムコードを記述することをお勧めします。 custom.js 、
/*Filename: custom.js*/
$(document).ready(function() {
$("div").click(function() {
alert("Hello, world!");
});
});次のように、HTMLファイルに custom.js ファイルを含めることができます-
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" src = "/jquery/custom.js">
</script>
</head>
<body>
<div id = "mydiv">
Click on this to see a dialogue box.
</div>
</body>
</html>これにより、次の結果が生成されます–
複数のライブラリを使用する
互いに競合することなく、複数のライブラリをすべて一緒に使用できます。 たとえば、jQueryとMooTool JavaScriptライブラリを一緒に使用できます。 詳細については、link：/jquery/jquery-noconflict [jQuery noConflict]メソッドを確認してください。
次は何ですか ？
上記の例を理解していなくても心配しないでください。 次の章ですぐにそれらを把握する予定です。
次の章では、従来のJavaScriptに由来するいくつかの基本的な概念を取り上げます。
