jQuery-概要

jQueryとは何ですか？

jQueryは、2006年にJohnResigによって作成された高速で簡潔なJavaScriptライブラリです。 Write less, do more。jQueryは、HTMLドキュメントのトラバース、イベント処理、アニメーション化、およびAjaxインタラクションを簡素化して、迅速なWeb開発を実現します。jQueryは、少ないコードでさまざまなタスクを簡素化するように設計されたJavaScriptツールキットです。jQueryでサポートされている重要なコア機能のリストは次のとおりです-

DOM manipulation − jQueryを使用すると、クロスブラウザーのオープンソースセレクターエンジンと呼ばれるものを使用して、DOM要素の選択、ネゴシエーション、およびコンテンツの変更を簡単に行うことができます。 Sizzle。
Event handling − jQueryは、ユーザーがリンクをクリックするなど、さまざまなイベントをキャプチャするための洗練された方法を提供します。イベントハンドラーでHTMLコード自体を乱雑にする必要はありません。
AJAX Support − jQueryは、AJAXテクノロジーを使用してレスポンシブで機能豊富なサイトを開発するのに大いに役立ちます。
Animations − jQueryには、Webサイトで使用できるアニメーション効果が多数組み込まれています。
Lightweight − jQueryは非常に軽量なライブラリです-サイズは約19KB（縮小およびgzip圧縮）。
Cross Browser Support − jQueryはクロスブラウザーをサポートしており、IE 6.0以降、FF 2.0以降、Safari 3.0以降、Chrome、Opera9.0以降で適切に機能します。
Latest Technology − jQueryは、CSS3セレクターと基本的なXPath構文をサポートします。

jQueryの使い方は？

jQueryを使用する方法は2つあります。

Local Installation −ローカルマシンにjQueryライブラリをダウンロードして、HTMLコードに含めることができます。
CDN Based Version −コンテンツ配信ネットワーク（CDN）から直接jQueryライブラリをHTMLコードに含めることができます。

ローカルインストール

に移動します https://jquery.com/download/ 利用可能な最新バージョンをダウンロードします。
今すぐダウンロードしてください jquery-2.1.3.min.js / jqueryなど、Webサイトのディレクトリにあるファイル。

例

これで、次のようにjqueryライブラリをHTMLファイルに含めることができます-

<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ベースのバージョン

コンテンツ配信ネットワーク（CDN）から直接jQueryライブラリをHTMLコードに含めることができます。GoogleとMicrosoftは、最新バージョンのコンテンツ配信を提供しています。

このチュートリアルでは、ライブラリのGoogleCDNバージョンを使用しています。

例

ここで、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!");
   });
});

今、私たちは含めることができます custom.js 次のように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" src = "/jquery/custom.js">
      </script>
   </head>
	
   <body>
      <div id = "mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>
</html>

これにより、次の結果が生成されます-