jQuery-クイックガイド

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に由来するいくつかの基本的な概念を取り上げます。

jQuery-基本

jQueryは、JavaScript機能を使用して構築されたフレームワークです。そのため、JavaScriptで利用可能なすべての機能とその他の機能を使用できます。この章では、最も基本的な概念を説明しますが、jQueryで頻繁に使用されます。

ひも

JavaScriptの文字列は、1つまたは複数の文字を含まない不変オブジェクトです。以下は、JavaScript文字列の有効な例です-

"This is JavaScript String"
'This is JavaScript String'
'This is "really" a JavaScript String'
"This is 'really' a JavaScript String"

番号

JavaScriptの数値は、倍精度の64ビット形式のIEEE 754値です。それらは文字列のように不変です。 JavaScript番号の有効な例は次のとおりです-

5350
120.27
0.26

ブール値

JavaScriptのブール値は、 true または false のいずれかです。数値がゼロの場合、デフォルトはfalseです。空の文字列のデフォルトがfalseの場合。

JavaScriptブールの有効な例を次に示します-

true     //true
false    //false
0        //false
1        //true
""       //false
"hello"  //true

オブジェクト

JavaScriptはオブジェクトの概念を非常によくサポートしています。次のようにオブジェクトリテラルを使用してオブジェクトを作成できます-

var emp = {
   name: "Zara",
   age: 10
};

次のようにドット表記を使用して、オブジェクトのプロパティを読み書きできます-

//Getting object properties
emp.name //==> Zara
emp.age  //==> 10

//Setting object properties
emp.name = "Daisy" //<== Daisy
emp.age  =  20     //<== 20

配列

次のように配列リテラルを使用して配列を定義できます-

var x = [];
var y = [1, 2, 3, 4, 5];

配列には、反復に役立つ length プロパティがあります-

var x = [1, 2, 3, 4, 5];

for (var i = 0; i < x.length; i++) {
  //Do something with x[i]
}

関数

JavaScriptの関数は、名前付きまたは匿名のいずれかです。名前付き関数は、次のように_function_キーワードを使用して定義できます-

function named(){
  //do some stuff here
}

無名関数は、通常の関数と同様の方法で定義できますが、名前はありません。

匿名関数は、以下に示すように変数に割り当てるか、メソッドに渡すことができます。

var handler = function (){
  //do some stuff here
}

JQueryは次のように非常に頻繁に匿名関数を使用します-

$(document).ready(function(){
  //do some stuff here
});

引数

JavaScript変数_arguments_は、_length_プロパティを持つ一種の配列です。次の例はそれを非常によく説明します-

function func(x){
   console.log(typeof x, arguments.length);
}

func();               //==> "undefined", 0
func(1);              //==> "number", 1
func("1", "2", "3");  //==> "string", 3

argumentsオブジェクトには_callee_プロパティもあり、これは内部の関数を参照します。たとえば-

function func() {
   return arguments.callee;
}

func();               //==> func

コンテキスト

JavaScriptの有名なキーワード this は常に現在のコンテキストを参照します。関数内で*この*コンテキストは、関数の呼び出し方法に応じて変更できます-

$(document).ready(function() {
  //this refers to window.document
});

$("div").click(function() {
  //this refers to a div DOM element
});

関数組み込みメソッド* call（）および apply（）*メソッドを使用して、関数呼び出しのコンテキストを指定できます。

それらの違いは、引数を渡す方法です。 callはすべての引数を関数への引数として渡しますが、applyは引数として配列を受け入れます。

function scope() {
   console.log(this, arguments.length);
}

scope()//window, 0
scope.call("foobar", [1,2]); //==> "foobar", 1
scope.apply("foobar", [1,2]);//==> "foobar", 2

範囲

変数の範囲は、それが定義されているプログラムの領域です。 JavaScript変数のスコープは2つだけです。

グローバル変数-グローバル変数にはグローバルスコープがあり、JavaScriptコードのどこでも定義されます。
ローカル変数-ローカル変数は、定義されている関数内でのみ表示されます。関数パラメーターは、常にその関数に対してローカルです。

関数の本体内では、ローカル変数は同じ名前のグローバル変数よりも優先されます-

var myVar = "global";    //==> Declare a global variable

function ( ) {
   var myVar = "local";  //==> Declare a local variable
   document.write(myVar);//==> local
}

折り返し電話

コールバックは、引数またはオプションとして何らかのメソッドに渡されるプレーンなJavaScript関数です。一部のコールバックは単なるイベントであり、特定の状態がトリガーされたときにユーザーに反応する機会を与えるために呼び出されます。

jQueryのイベントシステムは、例えばどこでもそのようなコールバックを使用します-

$("body").click(function(event) {
   console.log("clicked: " + event.target);
});

ほとんどのコールバックは、引数とコンテキストを提供します。イベントハンドラーの例では、コールバックはEventという1つの引数で呼び出されます。

何かを返すために必要なコールバックもあれば、その戻り値をオプションにするコールバックもあります。フォームの送信を防ぐために、送信イベントハンドラは次のようにfalseを返すことができます-

$("#myform").submit(function() {
   return false;
});

クロージャ

現在のスコープの外側で定義された変数が内側のスコープ内からアクセスされるたびに、クロージャーが作成されます。

次の例は、変数 counter が作成、増分、および印刷関数内でどのように見えるが、それらの外では見えないかを示しています-

function create() {
   var counter = 0;

   return {
      increment: function() {
         counter++;
      },
       print: function() {
         console.log(counter);
      }
   }
}

var c = create();
c.increment();
c.print();    //==> 1

このパターンを使用すると、外部からは見えないデータを操作するメソッドを持つオブジェクトを作成できます。 *データの隠ぺい*はオブジェクト指向プログラミングの基本であることに注意してください。

プロキシパターン

プロキシは、別のオブジェクトへのアクセスを制御するために使用できるオブジェクトです。この他のオブジェクトと同じインターフェイスを実装し、メソッド呼び出しを渡します。この他のオブジェクトは、しばしば実際のサブジェクトと呼ばれます。

この実際のサブジェクトの代わりにプロキシをインスタンス化し、リモートでアクセスできるようにすることができます。私たちはクロージャーにjQueryのsetArrayメソッドを保存し、次のように上書きすることができます-

(function() {
  //log all calls to setArray
   var proxied = jQuery.fn.setArray;

   jQuery.fn.setArray = function() {
      console.log(this, arguments);
      return proxied.apply(this, arguments);
   };

})();

上記では、_proxied_変数を非表示にするために、コードを関数でラップしています。次に、プロキシはメソッドへのすべての呼び出しをログに記録し、呼び出しを元のメソッドに委任します。 _apply（this、arguments）_を使用すると、呼び出し元が元のメソッドとプロキシされたメソッドの違いに気付かないことが保証されます。

組み込み関数

JavaScriptには、便利な組み込み関数のセットが付属しています。これらのメソッドを使用して、文字列、数値、および日付を操作できます。

以下は重要なJavaScript関数です-

Sr.No.	Method & Description
1	charAt() 指定されたインデックスにある文字を返します。
2	concat() 2つの文字列のテキストを結合し、新しい文字列を返します。
3	forEach() 配列内の各要素に対して関数を呼び出します。
4	indexOf() 指定した値の最初の出現の呼び出し元Stringオブジェクト内のインデックスを返します。見つからない場合は-1を返します。
5	length() 文字列の長さを返します。
6	pop() 配列から最後の要素を削除し、その要素を返します。
7	push() 配列の最後に1つ以上の要素を追加し、配列の新しい長さを返します。
8	reverse() 配列の要素の順序を逆にします-最初が最後になり、最後が最初になります。
9	sort() 配列の要素を並べ替えます。
10	substr() 指定した位置から指定した文字数までの文字列内の文字を返します。
11	toLowerCase() 呼び出し文字列値を小文字に変換して返します。
12	toString() 数値の値の文字列表現を返します。
13	toUpperCase() 呼び出し文字列値を大文字に変換して返します。

ドキュメントオブジェクトモデル

ドキュメントオブジェクトモデルは、次のようなHTMLのさまざまな要素のツリー構造です-

<html>
   <head>
      <title>The jQuery Example</title>
   </head>

   <body>
      <div>
         <p>This is a paragraph.</p>
         <p>This is second paragraph.</p>
         <p>This is third paragraph.</p>
      </div>
   </body>
</html>

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

以下は、上記のツリー構造に関する重要な点です-

<html>は、他のすべての要素の祖先です。つまり、他のすべての要素は<html>の子孫です。
<head>要素と<body>要素は子孫だけでなく、<html>の子でもあります。
同様に、<head>と<body>の祖先であることに加えて、<html>もその親です。
<p>要素は、<div>の子（および子孫）、<body>および<html>の子孫、および各<p>要素の兄弟です。

jQueryの概念を学びながら、DOMについて理解しておくと役に立ちます。DOMを知らない場合は、link：/dom/index [DOMチュートリアル]の簡単なチュートリアルを実行することをお勧めします。

jQuery-セレクター

jQueryライブラリは、カスケードスタイルシート（CSS）セレクターの機能を利用して、ドキュメントオブジェクトモデル（DOM）の要素または要素のグループにすばやく簡単にアクセスできるようにします。

jQuery Selectorは、式を使用して、指定された基準に基づいてDOMから一致する要素を見つける関数です。簡単に言えば、セレクターはjQueryを使用して1つ以上のHTML要素を選択するために使用されます。要素を選択すると、選択した要素に対してさまざまな操作を実行できます。

$（）ファクトリー関数

jQueryセレクターはドル記号と括弧で始まります-* $（）。ファクトリ関数 $（）*は、指定されたドキュメント内の要素を選択しながら、次の3つの構成要素を利用します-

Sr.No.

Selector & Description

1

Tag Name

DOMで利用可能なタグ名を表します。たとえば、* $（ 'p'）*は、ドキュメント内のすべての段落<p>を選択します。

2

Tag ID

DOMで指定されたIDで使用可能なタグを表します。たとえば、* $（ '＃some-id'）*は、some-idのIDを持つドキュメント内の単一の要素を選択します。

3

Tag Class

DOMの特定のクラスで使用可能なタグを表します。たとえば、* $（ '。some-class'）*は、some-classのクラスを持つドキュメント内のすべての要素を選択します。

上記のすべての項目は、単独で、または他のセレクターと組み合わせて使用できます。 jQueryセレクターはすべて、いくつかの微調整を除いて同じ原則に基づいています。

注-ファクトリ関数* $（）は jQuery（）関数の同義語です。したがって、 *$ 記号が他の何かと競合する他のJavaScriptライブラリを使用している場合は、 $ 記号を jQuery 名に置き換え、* $（）の代わりに関数* jQuery（）を使用できます。

例

以下は、タグセレクターを使用する簡単な例です。これにより、タグ名が p のすべての要素が選択されます。

<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() {
            $("p").css("background-color", "yellow");
         });
      </script>
   </head>

   <body>
      <div>
         <p class = "myclass">This is a paragraph.</p>
         <p id = "myid">This is second paragraph.</p>
         <p>This is third paragraph.</p>
      </div>
   </body>
</html>

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

セレクターの使用方法

セレクターは非常に便利であり、jQueryを使用している間のすべてのステップで必要になります。 HTMLドキュメントから必要な要素を正確に取得します。

次の表は、いくつかの基本的なセレクターをリストし、例を使用して説明しています。

Sr.No.	Selector & Description
1	Name 指定された要素 Name と一致するすべての要素を選択します。
2	#ID 指定された ID と一致する単一の要素を選択します。
3	.Class 指定された Class と一致するすべての要素を選択します。
4	Universal (*) DOMで使用可能なすべての要素を選択します。
5	Multiple Elements E, F, G 指定されたすべてのセレクター E、F または G の結合結果を選択します。

セレクターの例

上記の構文と例と同様に、次の例は、他の便利なセレクターの異なるタイプの使用に関する理解を与えます-

ここでは、他の便利なセレクタの異なるタイプがあります-

Sr.No.	Selector & Description
1	$()* このセレクタは、ドキュメント内のすべての要素を選択します。
2	*$("p > ")** このセレクターは、段落要素の子であるすべての要素を選択します。
3	$("#specialID") このセレクター関数は、id = "specialID"の要素を取得します。
4	$(".specialClass") このセレクターは、_specialClass_のクラスを持つすべての要素を取得します。
5	$("li:not(.myclass)") class = "myclass"を持たない<li>に一致するすべての要素を選択します。
6	$("a#specialID.specialClass") このセレクターは、_specialID_のIDと_specialClass_のクラスを持つリンクに一致します。
7	$("p a.specialClass") このセレクタは、<p>要素内で宣言された_specialClass_のクラスを持つリンクに一致します。
8	$("ul li:first") このセレクターは、<ul>の最初の<li>要素のみを取得します。
9	$("#container p") _container_のidを持つ要素の子孫である<p>に一致するすべての要素を選択します。
10	$("li > ul") <li>に一致する要素の子である<ul>に一致するすべての要素を選択します
11	$("strong + em") <strong>と一致する兄弟要素の直後に続く<em>と一致するすべての要素を選択します。
12	$("p ~ ul") <p>と一致する兄弟要素に続く<ul>と一致するすべての要素を選択します。
13	$("code, em, strong") <code>、<em>、または<strong>に一致するすべての要素を選択します。
14	$("p strong, .myclass") <p>に一致する要素の子孫である<strong>に一致するすべての要素と、_myclass_のクラスを持つすべての要素を選択します。
15	$(":empty") 子を持たないすべての要素を選択します。
16	$("p:empty") 子を持たない<p>に一致するすべての要素を選択します。
17	$("div[p]") <p>と一致する要素を含む<div>と一致するすべての要素を選択します。
18	$("p[.myclass]") クラスが_myclass_の要素を含む<p>に一致するすべての要素を選択します。
19	$("a[@rel]") rel属性を持つ<a>に一致するすべての要素を選択します。
20	$("input[@name = myname]") _myname._と正確に等しい名前値を持つ<input>に一致するすべての要素を選択します
21	$("input[@name^=myname]") _myname_で始まる名前の値を持つ<input>に一致するすべての要素を選択します。
22	$("a[@rel$=self]") _self_で終わる rel 属性値を持つ<a>に一致するすべての要素を選択します。
23	$("a[@href=domain.com]")* domain.comを含むhref値を持つ<a>に一致するすべての要素を選択します。
24	$("li:even") 偶数のインデックス値を持つ<li>に一致するすべての要素を選択します。
25	$("tr:odd") 奇数のインデックス値を持つ<tr>に一致するすべての要素を選択します。
26	$("li:first") 最初の<li>要素を選択します。
27	$("li:last") 最後の<li>要素を選択します。
28	$("li:visible") 表示されている<li>に一致するすべての要素を選択します。
29	$("li:hidden") 非表示の<li>に一致するすべての要素を選択します。
30	$(":radio") フォーム内のすべてのラジオボタンを選択します。
31	$(":checked") フォーム内のすべてのチェックボックスを選択します。
32	$(":input") フォーム要素（入力、選択、テキスト領域、ボタン）のみを選択します。
33	$(":text") テキスト要素のみを選択します（input [type = text]）。
34	$("li:eq(2)") 3番目の<li>要素を選択します。
35	$("li:eq(4)") 5番目の<li>要素を選択します。
36	$("li:lt(2)") 3番目の要素の前の<li>要素と一致するすべての要素を選択します。つまり、最初の2つの<li>要素。
37	$("p:lt(3)") 4番目の要素の前の<p>要素と一致するすべての要素を選択します。つまり、最初の3つの<p>要素。
38	$("li:gt(1)") 2番目以降の<li>に一致するすべての要素を選択します。
39	$("p:gt(2)") 3番目以降の<p>に一致するすべての要素を選択します。
40	$("div/p") <div>に一致する要素の子である<p>に一致するすべての要素を選択します。
41	$("div//code") <div>に一致する要素の子孫である<code>に一致するすべての要素を選択します。
42	$("//p//a") <p>と一致する要素の子孫である<a>と一致するすべての要素を選択します
43	$("li:first-child") 親の最初の子である<li>に一致するすべての要素を選択します。
44	$("li:last-child") 親の最後の子である<li>に一致するすべての要素を選択します。
45	$(":parent") テキストを含む、別の要素の親であるすべての要素を選択します。
46	$("li:contains(second)") 2番目のテキストを含む<li>に一致するすべての要素を選択します。

上記のすべてのセレクターを一般的な方法でHTML/XML要素で使用できます。たとえば、セレクタ* $（ "li：first"）が<li>要素に対して機能する場合、 $（ "p：first"）*は<p>要素に対しても機能します。

jQuery-属性

DOM要素に関して操作できる最も基本的なコンポーネントのいくつかは、それらの要素に割り当てられたプロパティと属性です。

これらの属性のほとんどは、JavaScriptを介してDOMノードプロパティとして使用できます。より一般的なプロパティのいくつかは-

クラス名
タグ名
id
href
タイトル
rel
src

画像要素の次のHTMLマークアップを考慮してください-

<img id = "imageid" src = "image.gif" alt = "Image" class = "myclass"
   title = "This is an image"/>

この要素のマークアップでは、タグ名はimgであり、id、src、alt、class、およびtitleのマークアップは要素の属性を表し、それぞれが名前と値で構成されています。

jQueryは、要素の属性を簡単に操作する手段を提供し、要素にアクセスできるようにして、プロパティを変更することもできます。

属性値を取得

attr（）*メソッドを使用して、一致したセットの最初の要素から属性の値をフェッチするか、一致したすべての要素に属性値を設定できます。

例

以下は、<em>タグのtitle属性をフェッチし、<div id = "divid">値を同じ値に設定する簡単な例です-

<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() {
            var title = $("em").attr("title");
            $("#divid").text(title);
         });
      </script>
   </head>

   <body>
      <div>
         <em title = "Bold and Brave">This is first paragraph.</em>
         <p id = "myid">This is second paragraph.</p>
         <div id = "divid"></div>
      </div>
   </body>
</html>

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

属性値を設定

attr（name、value）*メソッドを使用すると、渡された値を使用して、ラップされたセット内のすべての要素に名前付き属性を設定できます。

例

以下は、画像タグの src 属性を正しい場所に設定する簡単な例です-

<html>
   <head>
      <title>The jQuery Example</title>
      <base href="https://www.finddevguides.com"/>
      <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() {
            $("#myimg").attr("src", "/jquery/images/jquery.jpg");
         });
      </script>
   </head>

   <body>
      <div>
         <img id = "myimg" src = "/images/jquery.jpg" alt = "Sample image"/>
      </div>
   </body>
</html>

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

スタイルを適用する

addClass（classes）*メソッドを使用して、定義されたスタイルシートを一致したすべての要素に適用できます。スペースで区切られた複数のクラスを指定できます。

例

以下は、para <p>タグの class 属性を設定する簡単な例です-

<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() {
            $("em").addClass("selected");
            $("#myid").addClass("highlight");
         });
      </script>

      <style>
         .selected { color:red; }
         .highlight { background:yellow; }
      </style>
   </head>

   <body>
      <em title = "Bold and Brave">This is first paragraph.</em>
      <p id = "myid">This is second paragraph.</p>
   </body>
</html>

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

属性メソッド

次の表に、属性とプロパティを操作するために使用できるいくつかの便利なメソッドを示します-

Sr.No.	Methods & Description
1	attr( properties ) キー/値オブジェクトを、一致するすべての要素のプロパティとして設定します。
2	attr( key, fn ) 一致したすべての要素について、単一のプロパティを計算値に設定します。
3	removeAttr( name ) 一致した各要素から属性を削除します。
4	hasClass( class ) 指定されたクラスが、一致した要素のセットの少なくとも1つに存在する場合、trueを返します。
5	removeClass( class ) 一致した要素のセットからすべてまたは指定されたクラスを削除します。
6	toggleClass( class ) 指定されたクラスが存在しない場合は追加し、存在する場合は指定されたクラスを削除します。
7	html( ) 最初に一致した要素のhtmlコンテンツ（innerHTML）を取得します。
8	html( val ) 一致したすべての要素のHTMLコンテンツを設定します。
9	text( ) 一致したすべての要素の結合されたテキストコンテンツを取得します。
10	text( val ) 一致したすべての要素のテキストコンテンツを設定します。
11	val( ) 最初に一致した要素の入力値を取得します。
12	val( val ) <input>で呼び出された場合はすべての一致した要素のvalue属性を設定しますが、渡された<option>値で<select>で呼び出された場合、チェックボックスまたはラジオボックスで呼び出された場合、渡されたオプションが選択されます一致するすべてのチェックボックスとラジオボックスがチェックされます。

例

上記の構文と例と同様に、次の例では、さまざまな状況でさまざまな属性メソッドを使用する方法について理解できます

ここに異なる状況での属性メソッドの完全なリストがあります-

Sr.No.	Selector & Description
1	$("#myID").attr("custom") これは、ID myIDと一致する最初の要素の属性_custom_の値を返します。
2	$("img").attr("alt", "Sample Image") これにより、すべての画像の alt 属性が新しい値「Sample Image」に設定されます。
3	$("input").attr(\{ value: "", title: "Please enter a value" }); すべての<input>要素の値を空の文字列に設定し、jQuery Exampleを文字列_値を入力してください_を入力します。
4	$("a[href^=https://]").attr("target","_blank") _https://_で始まるhref属性を持つすべてのリンクを選択し、そのターゲット属性を__blank_に設定します。
5	$("a").removeAttr("target") これにより、すべてのリンクの_target_属性が削除されます。
6	$("form").submit(function() \{$(":submit",this).attr("disabled", "disabled");}); これにより、[送信]ボタンをクリックするときに、無効な属性の値が「無効」に変更されます。
7	$("p:last").hasClass("selected") これは、最後の<p>タグにclassselectedが関連付けられている場合にtrueを返します。
8	$("p").text() 一致したすべての<p>要素の結合されたテキストコンテンツを含む文字列を返します。
9	$("p").text("<i>Hello World</i>") これにより、一致する<p>要素のテキストコンテンツとして「<I> Hello World </I>」が設定されます。
10	$("p")l() これは、一致するすべての段落のHTMLコンテンツを返します。
11	$("div")l("Hello World") これにより、一致するすべての<div>のHTMLコンテンツが_Hello World_に設定されます。
12	$("input:checkbox:checked").val() チェックされたチェックボックスから最初の値を取得します。
13	$("input:radio[name=bar]:checked").val() ラジオボタンのセットから最初の値を取得します。
14	$("button").val("Hello") 一致したすべての要素<button>の値属性を設定します。
15	$("input").val("on") これにより、値が「on」になっているすべてのラジオボタンまたはチェックボックスボタンがチェックされます。
16	$("select").val("Orange") これにより、オプションオレンジ、マンゴー、バナナのドロップダウンボックスでオレンジオプションが選択されます。
17	$("select").val("Orange", "Mango") これにより、ドロップダウンボックスでオレンジとマンゴーのオプションが選択され、オレンジ、マンゴー、バナナのオプションが選択されます。

jQuery-DOMトラバース

jQueryは非常に強力なツールで、さまざまなDOMトラバーサルメソッドを提供して、ドキュメント内の要素をランダムに選択したり、シーケンシャルメソッドで選択したりするのに役立ちます。ほとんどのDOMトラバーサルメソッドはjQueryオブジェクトを変更せず、指定された条件に基づいてドキュメントから要素を除外するために使用されます。

インデックスで要素を検索

次のHTMLコンテンツを備えたシンプルなドキュメントを検討してください-

<html>
   <head>
      <title>The JQuery Example</title>
   </head>

   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

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

上記のリストにはそれぞれ独自のインデックスがあり、以下の例のように* eq（index）*メソッドを使用して直接見つけることができます。
すべての子要素はインデックスをゼロから開始するため、* $（ "li"）。eq（1）*などを使用して、_list item 2_にアクセスします。

例

次は、2番目のリストアイテムに色を追加する簡単な例です。

<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() {
            $("li").eq(2).addClass("selected");
         });
      </script>

      <style>
         .selected { color:red; }
      </style>
   </head>

   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

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

要素のフィルタリング

filter（selector）*メソッドを使用して、指定したセレクターと一致しない一致した要素のセットからすべての要素をフィルターで除外できます。 _selector_は、任意のセレクター構文を使用して記述できます。

例

以下は、中間層に関連付けられたリストに色を適用する簡単な例です-

<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() {
            $("li").filter(".middle").addClass("selected");
         });
      </script>

      <style>
         .selected { color:red; }
      </style>
   </head>

   <body>
      <div>
         <ul>
            <li class = "top">list item 1</li>
            <li class = "top">list item 2</li>
            <li class = "middle">list item 3</li>
            <li class = "middle">list item 4</li>
            <li class = "bottom">list item 5</li>
            <li class = "bottom">list item 6</li>
         </ul>
      </div>
   </body>
</html>

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

子孫要素の特定

find（selector）*メソッドを使用して、特定のタイプの要素のすべての子孫要素を見つけることができます。 _selector_は、任意のセレクター構文を使用して記述できます。

例

以下は、異なる<p>要素内で利用可能なすべての<span>要素を選択する例です-

<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() {
            $("p").find("span").addClass("selected");
         });
      </script>

      <style>
         .selected { color:red; }
      </style>
   </head>

   <body>
      <p>This is 1st paragraph and <span>THIS IS RED</span></p>
      <p>This is 2nd paragraph and <span>THIS IS ALSO RED</span></p>
   </body>
</html>

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

JQuery DOMフィルターメソッド

次の表は、DOM要素のリストからさまざまな要素を除外するために使用できる便利なメソッドを示しています。

Sr.No.	Method & Description
1	eq( index ) 一致する要素のセットを単一の要素に減らします。
2	filter( selector ) 指定したセレクターと一致しない一致した要素のセットからすべての要素を削除します。
3	filter( fn ) 指定した関数と一致しない一致した要素のセットからすべての要素を削除します。
4	is( selector ) 現在の選択を式と照合し、選択の少なくとも1つの要素が指定されたセレクタに適合する場合はtrueを返します。
5	map( callback ) jQueryオブジェクトの要素のセットをjQuery配列の別の値のセット（要素を含む場合と含まない場合がある）に変換します。
6	not( selector ) 指定したセレクターに一致する要素を、一致した要素のセットから削除します。
7	slice( start, [end )] 一致した要素のサブセットを選択します。

JQuery DOMトラバースメソッド

次の表は、DOMのさまざまな要素を見つけるために使用できる他の便利な方法を示しています-

Sr.No.	Methods & Description
1	add( selector ) 指定されたセレクターと一致する要素を、一致した要素のセットに追加します。
2	andSelf( ) 前の選択を現在の選択に追加します。
3	children( [selector)] 一致した一連の要素のそれぞれの一意の直接の子をすべて含む一連の要素を取得します。
4	closest( selector ) 指定されたセレクタに一致する最も近い親要素を含む要素のセットを取得します。開始要素が含まれます。
5	contents( ) 一致した要素（テキストノードを含む）内のすべての子ノード、または要素がiframeの場合はコンテンツドキュメントを検索します。
6	end( ) 一致した要素のセットを以前の状態に変更して、最新の「破壊的な」操作を元に戻します。
7	find( selector ) 指定されたセレクターに一致する子孫要素を検索します。
8	next( [selector )] 与えられた要素の集合のそれぞれの固有の次の兄弟を含む要素の集合を取得します。
9	nextAll( [selector )] 現在の要素の後の兄弟要素をすべて検索します。
10	offsetParent( ) 最初に一致した要素の配置された親を持つjQueryコレクションを返します。
11	parent( [selector )] 要素の直接の親を取得します。一連の要素に対して呼び出された場合、parentは一意の直接の親要素のセットを返します。
12	parents( [selector )] 一致した要素セットの一意の祖先を含む要素セットを取得します（ルート要素を除く）。
13	prev( [selector )] 一致した要素セットのそれぞれの一意の以前の兄弟を含む要素セットを取得します。
14	prevAll( [selector )] 現在の要素の前にあるすべての兄弟要素を見つけます。
15	siblings( [selector )] 一致した要素セットのそれぞれの一意の兄弟をすべて含む要素セットを取得します。

jQuery-CSSセレクターメソッド

jQueryライブラリは、World Wide Web Consortiumのサイトで概説されているように、Cascading Style Sheet（CSS）仕様1〜3に含まれるほぼすべてのセレクターをサポートします。

JQueryライブラリの開発者は、ブラウザでJavaScriptが有効になっている限り、ブラウザとそのバージョンを気にせずにWebサイトを強化できます。

ほとんどのJQuery CSSメソッドはjQueryオブジェクトのコンテンツを変更せず、DOM要素にCSSプロパティを適用するために使用されます。

CSSプロパティを適用

これは、JQueryメソッド* css（PropertyName、PropertyValue）*を使用してCSSプロパティを適用するのが非常に簡単です。

ここにメソッドの構文があります-

selector.css( PropertyName, PropertyValue );

ここで、_PropertyName_をjavascript文字列として渡し、その値に基づいて、_PropertyValue_を文字列または整数にすることができます。

例

以下は、2番目のリスト項目にフォントの色を追加する例です。

<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() {
            $("li").eq(2).css("color", "red");
         });
      </script>
   </head>

   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

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

複数のCSSプロパティを適用する

単一のJQueryメソッド* CSS（\ {key1：val1、key2：val2 ….）*を使用して、複数のCSSプロパティを適用できます。 1回の呼び出しで好きなだけプロパティを適用できます。

ここにメソッドの構文があります-

selector.css( {key1:val1, key2:val2....keyN:valN})

ここで、上記のようにプロパティとしてキーを、値としてvalを渡すことができます。

例

以下は、2番目のリスト項目にフォントの色と背景色を追加する例です。

<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() {
            $("li").eq(2).css({"color":"red", "background-color":"green"});
         });
      </script>
   </head>

   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

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

要素の幅と高さの設定

width（val）および height（val）*メソッドを使用して、要素の幅と高さをそれぞれ設定できます。

例

以下は、最初の分割要素の幅を設定する簡単な例です。残りの要素はスタイルシートで設定された幅を持ちます。

<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:first").width(100);
            $("div:first").css("background-color", "blue");
         });
      </script>

      <style>
         div {
            width:70px; height:50px; float:left;
            margin:5px; background:red; cursor:pointer;
         }
      </style>
   </head>

   <body>
      <div></div>
      <div>d</div>
      <div>d</div>
      <div>d</div>
      <div>d</div>
   </body>
</html>

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

JQuery CSSメソッド

次の表は、CSSプロパティを操作するために使用できるすべてのメソッドを示しています-

Sr.No.	Method & Description
1	css( name ) 最初に一致した要素のスタイルプロパティを返します。
2	css( name, value ) 単一のスタイルプロパティを、一致したすべての要素の値に設定します。
3	css( properties ) キー/値オブジェクトをスタイルプロパティとして、一致するすべての要素に設定します。
4	height( val ) 一致したすべての要素のCSS高さを設定します。
5	height( ) 最初に一致した要素の現在の計算されたピクセル、高さを取得します。
6	innerHeight( ) 最初に一致した要素の内側の高さを取得します（境界を除き、パディングを含みます）。
7	innerWidth( ) 最初に一致した要素の内側の幅を取得します（境界を除き、パディングを含みます）。
8	offset( ) ドキュメントを基準として、最初に一致した要素の現在のオフセットをピクセル単位で取得します。
9	offsetParent( ) 最初に一致した要素の配置された親を持つjQueryコレクションを返します。
10	outerHeight( [margin )] 最初に一致した要素の外側の高さ（デフォルトでは境界線とパディングを含む）を取得します。
11	outerWidth( [margin )] 最初に一致した要素の外側の幅（デフォルトでは境界線とパディングを含む）を取得します。
12	position( ) オフセットの親を基準にした要素の左上位置を取得します。
13	scrollLeft( val ) 値が渡されると、一致するすべての要素のスクロール左オフセットがその値に設定されます。
14	scrollLeft( ) 最初に一致した要素のスクロール左オフセットを取得します。
15	scrollTop( val ) 値が渡されると、スクロールトップオフセットは、一致したすべての要素でその値に設定されます。
16	scrollTop( ) 最初に一致した要素のスクロール上部オフセットを取得します。
17	width( val ) 一致したすべての要素のCSS幅を設定します。
18	width( ) 最初に一致した要素の現在の計算されたピクセル、幅を取得します。

jQuery-DOM操作

JQueryは、DOMを効率的な方法で操作するメソッドを提供します。要素の属性の値を変更したり、段落や部門からHTMLコードを抽出したりするために、大きなコードを記述する必要はありません。

JQueryは、ゲッターとして機能する.attr（）、l（）、. val（）などのメソッドを提供し、後で使用するためにDOM要素から情報を取得します。

コンテンツ操作

html（）*メソッドは、最初に一致した要素のhtmlコンテンツ（innerHTML）を取得します。

ここにメソッドの構文があります-

selectorl( )

例

以下は、l（）および.text（val）メソッドを使用する例です。ここでl（）はオブジェクトからHTMLコンテンツを取得し、次に.text（val）メソッドは渡されたパラメータを使用してオブジェクトの値を設定します-

<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 () {
               var content = $(this)l();
               $("#result").text( content );
            });
         });
      </script>

      <style>
         #division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>

   <body>
      <p>Click on the square below:</p>
      <span id = "result"> </span>

      <div id = "division" style = "background-color:blue;">
         This is Blue Square!!
      </div>
   </body>
</html>

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

DOM要素の置換

完全なDOM要素を指定されたHTMLまたはDOM要素で置き換えることができます。 * replaceWith（content）*メソッドはこの目的に非常に役立ちます。

ここにメソッドの構文があります-

selector.replaceWith( content )

ここで、コンテンツは元の要素の代わりに欲しいものです。これは、HTMLまたは単純なテキストです。

例

以下は、分割要素を「<h1> JQuery is Great </h1>」に置き換える例です-

<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 () {
               $(this).replaceWith("<h1>JQuery is Great</h1>");
            });
         });
      </script>

      <style>
         #division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>

   <body>
      <p>Click on the square below:</p>
      <span id = "result"> </span>

      <div id = "division" style = "background-color:blue;">
         This is Blue Square!!
      </div>
   </body>
</html>

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

DOM要素の削除

ドキュメントから1つ以上のDOM要素を削除したい場合があります。 JQueryは、状況を処理する2つのメソッドを提供します。

empty（）メソッドは一致した要素のセットからすべての子ノードを削除しますが、メソッド remove（expr）*メソッドはすべての一致した要素をDOMから削除します。

ここにメソッドの構文があります-

selector.remove( [ expr ])

or

selector.empty( )

オプションのパラメータ_expr_を渡して、削除する要素のセットをフィルタリングできます。

例

以下は、クリックされるとすぐに要素が削除される例です-

<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 () {
               $(this).remove( );
            });
         });
      </script>

      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>

   <body>
      <p>Click on any square below:</p>
      <span id = "result"> </span>

      <div class = "div" style = "background-color:blue;"></div>
      <div class = "div" style = "background-color:green;"></div>
      <div class = "div" style = "background-color:red;"></div>
   </body>
</html>

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

DOM要素の挿入

既存のドキュメントに新しい1つ以上のDOM要素を挿入したい場合があります。 JQueryは、さまざまな場所に要素を挿入するためのさまざまなメソッドを提供します。

after（content）メソッドは、一致する各要素の後にコンテンツを挿入しますが、 before（content）*メソッドは、一致する各要素の前にコンテンツを挿入します。

ここにメソッドの構文があります-

selector.after( content )

or

selector.before( content )

ここにコンテンツが挿入されます。これは、HTMLまたは単純なテキストです。

例

以下は、クリックされた要素の直前に<div>要素が挿入される例です-

<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 () {
               $(this).before('<div class="div"></div>' );
            });
         });
      </script>

      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>

   <body>
      <p>Click on any square below:</p>
      <span id = "result"> </span>

      <div class = "div" style = "background-color:blue;"></div>
      <div class = "div" style = "background-color:green;"></div>
      <div class = "div" style = "background-color:red;"></div>
   </body>
</html>

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

DOM操作方法

次の表は、DOM要素を操作するために使用できるすべてのメソッドを示しています-

Sr.No.	Method & Description
1	after( content ) 一致した各要素の後にコンテンツを挿入します。
2	append( content ) 一致したすべての要素の内側にコンテンツを追加します。
3	appendTo( selector ) 一致したすべての要素を別の指定された一連の要素に追加します。
4	before( content ) 一致した各要素の前にコンテンツを挿入します。
5	clone( bool ) 一致したDOM要素とそのすべてのイベントハンドラのクローンを作成し、クローンを選択します。
6	clone( ) 一致したDOM要素のクローンを作成し、クローンを選択します。
7	empty( ) 一致した要素のセットからすべての子ノードを削除します。
8	html( val ) 一致したすべての要素のHTMLコンテンツを設定します。
9	html( ) 最初に一致した要素のhtmlコンテンツ（innerHTML）を取得します。
10	insertAfter( selector ) 一致したすべての要素を、指定された別の要素セットの後に挿入します。
11	insertBefore( selector ) 一致したすべての要素を、指定された別の要素セットの前に挿入します。
12	prepend( content ) 一致したすべての要素の内側にコンテンツを追加します。
13	prependTo( selector ) 一致したすべての要素を、指定された別の要素セットの前に追加します。
14	remove( expr ) 一致したすべての要素をDOMから削除します。
15	replaceAll( selector ) 指定したセレクターと一致した要素を、一致した要素に置き換えます。
16	replaceWith( content ) 一致したすべての要素を指定されたHTMLまたはDOM要素で置き換えます。
17	text( val ) 一致したすべての要素のテキストコンテンツを設定します。
18	text( ) 一致したすべての要素の結合されたテキストコンテンツを取得します。
19	wrap( elem ) 一致した各要素を指定された要素でラップします。
20	wrap( html ) 一致した各要素を指定されたHTMLコンテンツでラップします。
21	wrapAll( elem ) 一致したセットのすべての要素を単一のラッパー要素にラップします。
22	wrapAll( html ) 一致したセットのすべての要素を単一のラッパー要素にラップします。
23	wrapInner( elem ) 一致した各要素（テキストノードを含む）の内側の子コンテンツをDOM要素でラップします。
24	wrapInner( html ) 一致した各要素（テキストノードを含む）の内側の子コンテンツをHTML構造でラップします。

jQuery-イベント処理

イベントを使用して動的なWebページを作成できます。イベントは、Webアプリケーションで検出できるアクションです。

以下はイベントの例です-

マウスクリック
Webページの読み込み
要素の上にマウスを置く
HTMLフォームを送信する
キーボードなどのキーストローク

これらのイベントがトリガーされると、カスタム関数を使用して、イベントで必要なことをほとんど実行できます。これらのカスタム関数は、イベントハンドラーを呼び出します。

イベントハンドラーのバインド

jQueryイベントモデルを使用して、次のように* bind（）*メソッドでDOM要素にイベントハンドラを確立できます-

<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').bind('click', function( event ){
               alert('Hi there!');
            });
         });
      </script>

      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>

   <body>
      <p>Click on any square below to see the result:</p>

      <div class = "div" style = "background-color:blue;">ONE</div>
      <div class = "div" style = "background-color:green;">TWO</div>
      <div class = "div" style = "background-color:red;">THREE</div>
   </body>
</html>

このコードにより、部門要素がクリックイベントに応答します。その後、ユーザーがこの部門内をクリックすると、アラートが表示されます。

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

bind（）コマンドの完全な構文は次のとおりです-

selector.bind( eventType[, eventData], handler)

以下は、パラメータの説明です-

eventType -クリックや送信などのJavaScriptイベントタイプを含む文字列。イベントタイプの完全なリストについては、次のセクションを参照してください。
eventData -これはオプションのパラメーターであり、イベントハンドラーに渡されるデータのマップです。
handler -イベントがトリガーされるたびに実行する関数。

イベントハンドラーの削除

通常、イベントハンドラーが確立されると、ページの残りの期間は有効になります。イベントハンドラを削除する必要がある場合があります。

jQueryは、既存のイベントハンドラーを削除する* unbind（）*コマンドを提供します。 unbind（）の構文は次のとおりです-

selector.unbind(eventType, handler)

or

selector.unbind(eventType)

以下は、パラメータの説明です-

eventType -クリックや送信などのJavaScriptイベントタイプを含む文字列。イベントタイプの完全なリストについては、次のセクションを参照してください。
handler -提供される場合、削除される特定のリスナーを識別します。

イベントの種類

以下はクロスプラットフォームであり、JQueryを使用してバインドできる推奨イベントタイプです-

Sr.No.	Event Type & Description
1	blur 要素がフォーカスを失ったときに発生します。
2	change 要素が変更されたときに発生します。
3	click マウスがクリックされたときに発生します。
4	dblclick マウスがダブルクリックされたときに発生します。
5	error ロードまたはアンロードなどでエラーが発生したときに発生します。
6	focus 要素がフォーカスを取得すると発生します。
7	keydown キーが押されたときに発生します。
8	keypress キーが押されて離されたときに発生します。
9	keyup キーが離されたときに発生します。
10	load ドキュメントがロードされたときに発生します。
11	mousedown マウスボタンが押されたときに発生します。
12	mouseenter マウスが要素領域に入ると発生します。
13	mouseleave マウスが要素領域から離れたときに発生します。
14	mousemove マウスポインターが移動したときに発生します。
15	mouseout マウスポインターが要素から出たときに発生します。
16	mouseover マウスポインターが要素上を移動すると発生します。
17	mouseup マウスボタンが離されたときに発生します。
18	resize ウィンドウのサイズが変更されたときに発生します。
19	scroll ウィンドウがスクロールされたときに発生します。
20	select テキストが選択されたときに発生します。
21	submit フォームが送信されたときに発生します。
22	unload ドキュメントがアンロードされると発生します。

イベントオブジェクト

コールバック関数は単一のパラメーターを取ります。ハンドラーが呼び出されると、JavaScriptイベントオブジェクトが渡されます。

多くの場合、イベントオブジェクトは不要であり、パラメーターが省略されます。これは、ハンドラーがトリガーされたときに何をする必要があるかをハンドラーが正確に把握するために十分なコンテキストが通常利用できるためですが、アクセスする必要がある特定の属性があります。

イベント属性

次のイベントプロパティ/属性が利用可能であり、プラットフォームに依存しない方法で安全にアクセスできます-

Sr.No.	Property & Description
1	altKey イベントがトリガーされたときにAltキーが押された場合はtrue、そうでない場合はfalseに設定します。 Altキーには、ほとんどのMacキーボードのオプションというラベルが付いています。
2	ctrlKey イベントがトリガーされたときにCtrlキーが押された場合はtrue、そうでない場合はfalseに設定します。
3	data ハンドラーが確立されたときにbind（）コマンドに2番目のパラメーターとして渡された値（ある場合）。
4	keyCode キーアップおよびキーダウンイベントの場合、これは押されたキーを返します。
5	metaKey イベントがトリガーされたときにメタキーが押された場合はtrue、そうでない場合はfalseに設定します。 Metaキーは、PCではCtrlキー、MacではCommandキーです。
6	pageX マウスイベントの場合、ページの原点を基準としたイベントの水平座標を指定します。
7	pageY マウスイベントの場合、ページの原点を基準としたイベントの垂直座標を指定します。
8	relatedTarget 一部のマウスイベントでは、イベントがトリガーされたときにカーソルが離れたまたは入力した要素を識別します。
9	screenX マウスイベントの場合、画面の原点を基準としたイベントの水平座標を指定します。
10	screenY マウスイベントの場合、画面の原点からの相対イベントの垂直座標を指定します。
11	shiftKey イベントがトリガーされたときにShiftキーが押された場合はtrue、そうでない場合はfalseに設定します。
12	target イベントがトリガーされた要素を識別します。
13	timeStamp イベントが作成されたときのタイムスタンプ（ミリ秒）。
14	type すべてのイベントについて、トリガーされたイベントのタイプ（クリックなど）を指定します。
15	which キーボードイベントの場合は、イベントを発生させたキーの数値コードを指定し、マウスイベントの場合は、押されたボタンを指定します（左に1、中央に2、右に3）。

<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').bind('click', function( event ){
               alert('Event type is ' + event.type);
               alert('pageX : ' + event.pageX);
               alert('pageY : ' + event.pageY);
               alert('Target : ' + event.target.innerHTML);
            });
         });
      </script>

      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>

   <body>
      <p>Click on any square below to see the result:</p>

      <div class = "div" style = "background-color:blue;">ONE</div>
      <div class = "div" style = "background-color:green;">TWO</div>
      <div class = "div" style = "background-color:red;">THREE</div>
   </body>
</html>

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

イベントメソッド

イベントオブジェクトで呼び出すことができるメソッドのリストがあります-

Sr.No.	Method & Description
1	preventDefault() ブラウザがデフォルトのアクションを実行できないようにします。
2	isDefaultPrevented() このイベントオブジェクトでevent.preventDefault（）が呼び出されたかどうかを返します。
3	stopPropagation() 親要素へのイベントのバブリングを停止し、親ハンドラーにイベントが通知されないようにします。
4	isPropagationStopped() このイベントオブジェクトでevent.stopPropagation（）が呼び出されたかどうかを返します。
5	stopImmediatePropagation() 残りのハンドラーの実行を停止します。
6	isImmediatePropagationStopped() このイベントオブジェクトでevent.stopImmediatePropagation（）が呼び出されたかどうかを返します。

イベント操作方法

次の表は、重要なイベント関連の方法を示しています-

Sr.No.	Method & Description
1	bind( type, [data, fn )] 一致した要素ごとに1つ以上のイベント（クリックなど）にハンドラーをバインドします。カスタムイベントをバインドすることもできます。
2	off( events [, selector [, handler(eventObject) ] )] これはライブの反対で、バインドされたライブイベントを削除します。
3	hover( over, out ) たとえば、オブジェクトをマウスでオン/オフするホバリングをシミュレートします。
4	on( events [, selector [, data ], handler )] 現在および将来的に一致するすべての要素のハンドラーをイベント（クリックなど）にバインドします。カスタムイベントをバインドすることもできます。
5	one( type, [data, fn )] 一致した要素ごとに1回実行される1つ以上のイベントにハンドラーをバインドします。
6	ready( fn ) DOMを走査して操作する準備ができたときに実行される関数をバインドします。
7	trigger( event, [data )] 一致したすべての要素でイベントをトリガーします。
8	triggerHandler( event, [data )] 要素上のすべてのバインドされたイベントハンドラーをトリガーします。
9	unbind( [type, [fn] )] これはバインドの反対で、一致した各要素からバインドされたイベントを削除します。

イベントヘルパーメソッド

jQueryは、イベントをトリガーして上記のイベントタイプをバインドするために使用できるイベントヘルパー関数のセットも提供します。

トリガーメソッド

以下は、すべての段落でぼかしイベントをトリガーする例です-

$("p").blur();

バインド方法

以下は、すべての<div>で click イベントをバインドする例です-

$("div").click( function () {
  //do something here
});

これはjQueryによって提供されるすべてのサポートメソッドの完全なリストです-

Sr.No.	Method & Description
1	blur( ) 一致した各要素のblurイベントをトリガーします。
2	blur( fn ) 一致した各要素のblurイベントに関数をバインドします。
3	change( ) 一致した各要素の変更イベントをトリガーします。
4	change( fn ) 一致した各要素の変更イベントに関数をバインドします。
5	click( ) 一致した各要素のクリックイベントを発生させます。
6	click( fn ) 一致した各要素のクリックイベントに関数をバインドします。
7	dblclick( ) 一致した各要素のdblclickイベントをトリガーします。
8	dblclick( fn ) 一致した各要素のdblclickイベントに関数をバインドします。
9	error( ) 一致した各要素のエラーイベントをトリガーします。
10	error( fn ) 一致した各要素のエラーイベントに関数をバインドします。
11	focus( ) 一致した各要素のフォーカスイベントをトリガーします。
12	focus( fn ) 一致した各要素のフォーカスイベントに関数をバインドします。
13	keydown( ) 一致した各要素のkeydownイベントをトリガーします。
14	keydown( fn ) 一致した各要素のkeydownイベントに関数をバインドします。
15	keypress( ) 一致した各要素のkeypressイベントをトリガーします。
16	keypress( fn ) 一致した各要素のkeypressイベントに関数をバインドします。
17	keyup( ) 一致した各要素のキーアップイベントをトリガーします。
18	keyup( fn ) 一致した各要素のキーアップイベントに関数をバインドします。
19	load( fn ) 一致した各要素のロードイベントに関数をバインドします。
20	mousedown( fn ) 一致した各要素のmousedownイベントに関数をバインドします。
21	mouseenter( fn ) 一致した各要素のmouseenterイベントに関数をバインドします。
22	mouseleave( fn ) 一致した各要素のmouseleaveイベントに関数をバインドします。
23	mousemove( fn ) 一致した各要素のmousemoveイベントに関数をバインドします。
24	mouseout( fn ) 一致した各要素のmouseoutイベントに関数をバインドします。
25	mouseover( fn ) 一致した各要素のmouseoverイベントに関数をバインドします。
26	mouseup( fn ) 一致した各要素のmouseupイベントに関数をバインドします。
27	resize( fn ) 一致した各要素のサイズ変更イベントに関数をバインドします。
28	scroll( fn ) 一致した各要素のスクロールイベントに関数をバインドします。
29	select( ) 一致した各要素の選択イベントをトリガーします。
30	select( fn ) 一致した各要素の選択イベントに関数をバインドします。
31	submit( ) 一致した各要素の送信イベントをトリガーします。
32	submit( fn ) 一致した各要素の送信イベントに関数をバインドします。
33	unload( fn ) 一致した各要素のアンロードイベントに関数をバインドします。

jQuery - Ajax

AJAXはAsynchronous JavaScript and XMLの頭字語であり、このテクノロジーはブラウザページを更新せずにサーバーからデータをロードするのに役立ちます。

AJAXを初めて使用する場合は、先に進む前にlink：/ajax/index [Ajaxチュートリアル]にアクセスすることをお勧めします。

JQueryは、次世代のWebアプリケーションを開発するためのAJAXメソッドの豊富なセットを提供する優れたツールです。

単純なデータの読み込み

これは、JQuery AJAXを使用して静的または動的データをロードするのが非常に簡単です。 JQueryは、ジョブを実行する* load（）*メソッドを提供します-

構文

load（）*メソッドの簡単な構文は次のとおりです-

[selector].load( URL, [data], [callback] );

ここにすべてのパラメータの説明があります-

URL -リクエストの送信先のサーバー側リソースのURL。データを動的に生成するか、データベースから生成するCGI、ASP、JSP、またはPHPスクリプトを使用できます。
データ-このオプションのパラメータは、リクエストに渡されるプロパティが適切にエンコードされたパラメータにシリアル化されているオブジェクトを表します。指定されている場合、要求は POST メソッドを使用して行われます。省略すると、 GET メソッドが使用されます。
callback -応答データが一致したセットの要素にロードされた後に呼び出されるコールバック関数。この関数に渡される最初のパラメーターはサーバーから受信した応答テキストであり、2番目のパラメーターはステータスコードです。

例

小さな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() {
            $("#driver").click(function(event){
               $('#stage').load('/jquery/resultl');
            });
         });
      </script>
   </head>

   <body>
      <p>Click on the button to load/jquery/resultl file −</p>

      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>

      <input type = "button" id = "driver" value = "Load Data"/>
   </body>
</html>

ここで* load（）は、指定されたURL */jquery/resultl ファイルへのAjaxリクエストを開始します。このファイルをロードすると、ID _stage_でタグ付けされた<div>内にすべてのコンテンツが入力されます。/jquery/resultlファイルにHTML行が1つしかないと仮定すると、

<h1>THIS IS RESULT...</h1>

指定されたボタンをクリックすると、結果ファイルがロードされます。

JSONデータの取得

サーバーがリクエストに対してJSON文字列を返す場合があります。 JQueryユーティリティ関数* getJSON（）*は、返されたJSON文字列を解析し、結果の文字列をコールバック関数が最初のパラメーターとして利用できるようにして、さらにアクションを実行します。

構文

getJSON（）*メソッドの簡単な構文は次のとおりです-

[selector].getJSON( URL, [data], [callback] );

ここにすべてのパラメータの説明があります-

URL -GETメソッドを介して接続されたサーバー側リソースのURL。
data -プロパティがURLに追加されるクエリ文字列、または事前にフォーマットされエンコードされたクエリ文字列を作成するために使用される名前/値のペアとして機能するオブジェクト。
callback -要求が完了したときに呼び出される関数。応答本文をJSON文字列としてダイジェストした結果のデータ値は、このコールバックへの最初のパラメーターとして渡され、ステータスは2番目として渡されます。

例

小さな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() {
            $("#driver").click(function(event){

               $.getJSON('/jquery/result.json', function(jd) {
                  $('#stage')l('<p> Name: ' + jd.name + '</p>');
                  $('#stage').append('<p>Age : ' + jd.age+ '</p>');
                  $('#stage').append('<p> Sex: ' + jd.sex+ '</p>');
               });

            });
         });
      </script>
   </head>

   <body>
      <p>Click on the button to load result.json file −</p>

      <div id = "stage" style = "background-color:#eee;">
         STAGE
      </div>

      <input type = "button" id = "driver" value = "Load Data"/>
   </body>
</html>

ここで、JQueryユーティリティメソッド* getJSON（）は、指定されたURL *result.json ファイルへのAjaxリクエストを開始します。このファイルをロードした後、すべてのコンテンツがコールバック関数に渡され、最終的にID _stage_でタグ付けされた<div>内に取り込まれます。 result.jsonファイルには、次のJSON形式のコンテンツが含まれていると仮定します-

{
   "name": "Zara Ali",
   "age" : "67",
   "sex": "female"
}

指定されたボタンをクリックすると、result.jsonファイルがロードされます。

サーバーへのデータの受け渡し

多くの場合、ユーザーから入力を収集し、その入力をさらに処理するためにサーバーに渡します。 JQuery AJAXを使用すると、利用可能なAjaxメソッドの data パラメーターを使用して、収集したデータをサーバーに簡単に渡すことができます。

例

この例は、同じ結果を送り返すWebサーバースクリプトにユーザー入力を渡し、それを印刷する方法を示しています-

<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() {
            $("#driver").click(function(event){
               var name = $("#name").val();
               $("#stage").load('/jquery/result.php', {"name":name} );
            });
         });
      </script>
   </head>

   <body>
      <p>Enter your name and click on the button:</p>
      <input type = "input" id = "name" size = "40"/><br/>

      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>

      <input type = "button" id = "driver" value = "Show Result"/>
   </body>
</html>

ここに result.php スクリプトで書かれたコードがあります-

<?php
   if( $_REQUEST["name"] ){
      $name = $_REQUEST['name'];
      echo "Welcome ". $name;
   }
?>

これで、指定した入力ボックスに任意のテキストを入力し、「結果を表示」ボタンをクリックして、入力ボックスに入力した内容を確認できます。

JQuery AJAXメソッド

JQueryを使用したAJAXの基本概念を見てきました。次の表に、プログラミングのニーズに基づいて使用できるすべての重要なJQuery AJAXメソッドを示します-

Sr.No.	Methods & Description
1	jQuery.ajax( options ) HTTP要求を使用してリモートページを読み込みます。
2	jQuery.ajaxSetup( options ) AJAXリクエストのグローバル設定をセットアップします。
3	jQuery.get( url, [data, [callback], [type] )] HTTP GETリクエストを使用してリモートページをロードします。
4	jQuery.getJSON( url, [data, [callback] )] HTTP GETリクエストを使用してJSONデータをロードします。
5	jQuery.getScript( url, [callback )] HTTP GETリクエストを使用してJavaScriptファイルをロードして実行します。
6	jQuery.post( url, [data, [callback], [type] )] HTTP POSTリクエストを使用してリモートページをロードします。
7	load( url, [data, [callback] )] リモートファイルからHTMLをロードし、DOMに挿入します。
8	serialize( ) 入力要素のセットをデータの文字列にシリアル化します。
9	serializeArray( )

JQuery AJAXイベント

AJAX呼び出しの進行中に、さまざまなJQueryメソッドを呼び出すことができます。さまざまなイベント/ステージに基づいて、以下の方法が利用可能です-

すべてのリンクを通過できます：/jquery/ajax-events [AJAXイベント]。

Sr.No.	Methods & Description
1	ajaxComplete( callback ) AJAXリクエストが完了するたびに実行される関数をアタッチします。
2	ajaxStart( callback ) AJAX要求が開始され、まだアクティブなものがない場合に実行される関数をアタッチします。
3	ajaxError( callback ) AJAX要求が失敗したときに必ず実行される関数を添付します。
4	ajaxSend( callback ) AJAXリクエストが送信される前に実行される関数をアタッチします。
5	ajaxStop( callback ) すべてのAJAXリクエストが終了したときに実行される関数をアタッチします。
6	ajaxSuccess( callback ) AJAXリクエストが正常に完了するたびに実行される関数をアタッチします。

jQuery-エフェクト

jQueryは、さまざまな種類の驚くべき効果を実行するための簡単なインターフェイスを提供します。 jQueryメソッドを使用すると、最小限の構成で一般的に使用されるエフェクトをすばやく適用できます。このチュートリアルでは、視覚効果を作成するためのすべての重要なjQueryメソッドについて説明します。

要素の表示と非表示

要素を表示および非表示にするためのコマンドは、ほぼ期待どおりです。* show（）はラップされたセットの要素を表示し、 hide（）*は要素を非表示にします。

構文

show（）*メソッドの簡単な構文は次のとおりです-

[selector].show( speed, [callback] );

ここにすべてのパラメータの説明があります-

speed -3つの事前定義された速度（「低速」、「通常」、または「高速」）のいずれかを表す文字列、またはアニメーションを実行するミリ秒数（例： 1000）。
callback -このオプションのパラメーターは、アニメーションが完了するたびに実行される関数を表します。アニメーション化される各要素に対して1回実行されます。

以下は、* hide（）*メソッドの簡単な構文です-

[selector].hide( speed, [callback] );

ここにすべてのパラメータの説明があります-

speed -3つの事前定義された速度（「低速」、「通常」、または「高速」）のいずれかを表す文字列、またはアニメーションを実行するミリ秒数（例： 1000）。
callback -このオプションのパラメーターは、アニメーションが完了するたびに実行される関数を表します。アニメーション化される各要素に対して1回実行されます。

例

小さな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() {

            $("#show").click(function () {
               $(".mydiv").show( 1000 );
            });

            $("#hide").click(function () {
               $(".mydiv").hide( 1000 );
            });

         });
      </script>

      <style>
         .mydiv{
            margin:10px;
            padding:12px;
            border:2px solid #666;
            width:100px;
            height:100px;
         }
      </style>
   </head>

   <body>
      <div class = "mydiv">
         This is a SQUARE
      </div>

      <input id = "hide" type = "button" value = "Hide"/>
      <input id = "show" type = "button" value = "Show"/>
   </body>
</html>

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

要素の切り替え

jQueryには、要素の表示状態を表示または非表示に切り替えるメソッドが用意されています。要素が最初に表示される場合、非表示になります。非表示の場合、表示されます。

構文

toggle（）*メソッドの1つの単純な構文を次に示します-

[selector]..toggle([speed][, callback]);

ここにすべてのパラメータの説明があります-

speed -3つの事前定義された速度（「低速」、「通常」、または「高速」）のいずれかを表す文字列、またはアニメーションを実行するミリ秒数（例： 1000）。
callback -このオプションのパラメーターは、アニメーションが完了するたびに実行される関数を表します。アニメーション化される各要素に対して1回実行されます。

例

私たちは、画像を含む単純な<div>などの任意の要素をアニメーション化できます-

<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() {
            $(".clickme").click(function(event){
               $(".target").toggle('slow', function(){
                  $(".log").text('Transition Complete');
               });
            });
         });
      </script>

      <style>
         .clickme{
            margin:10px;
            padding:12px;
            border:2px solid #666;
            width:100px;
            height:50px;
         }
      </style>
   </head>

   <body>
      <div class = "content">
         <div class = "clickme">Click Me</div>
         <div class = "target">
            <img src = "./images/jquery.jpg" alt = "jQuery"/>
         </div>
         <div class = "log"></div>
      </div>
   </body>
</html>

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

JQueryエフェクトメソッド

jQueryエフェクトの基本概念を見てきました。次の表は、さまざまな種類の効果を作成するためのすべての重要な方法を示しています-

Sr.No.	Methods & Description
1	animate( params, [duration, easing, callback )] カスタムアニメーションを作成するための関数。
2	fadeIn( speed, [callback )] 不透明度を調整し、完了後にオプションのコールバックを起動することにより、一致したすべての要素をフェードインします。
3	fadeOut( speed, [callback )] 不透明度を0に調整し、表示を「なし」に設定し、完了後にオプションのコールバックを起動することにより、一致したすべての要素をフェードアウトします。
4	fadeTo( speed, opacity, callback ) 一致したすべての要素の不透明度を指定した不透明度にフェードし、完了後にオプションのコールバックを起動します。
5	hide( ) 一致する要素のセットが表示されている場合、それらを非表示にします。
6	hide( speed, [callback )] 優雅なアニメーションを使用して、一致したすべての要素を非表示にし、完了後にオプションのコールバックを起動します。
7	show( ) 一致した要素のセットが非表示の場合は、それぞれ表示します。
8	show( speed, [callback )] 優雅なアニメーションを使用して、一致したすべての要素を表示し、完了後にオプションのコールバックを起動します。
9	slideDown( speed, [callback )] 高さを調整し、完了後にオプションのコールバックを起動して、一致したすべての要素を明らかにします。
10	slideToggle( speed, [callback )] 高さを調整し、完了後にオプションのコールバックを起動することにより、一致したすべての要素の表示を切り替えます。
11	slideUp( speed, [callback )] 高さを調整し、完了後にオプションのコールバックを起動して、一致したすべての要素を非表示にします。
12	stop( [clearQueue, gotoEnd)] 指定されたすべての要素で現在実行されているすべてのアニメーションを停止します。
13	toggle( ) 一致した要素の各セットの表示を切り替えます。
14	toggle( speed, [callback )] 優雅なアニメーションを使用して一致した要素の各セットを表示し、完了後にオプションのコールバックを起動することを切り替えます。
15	toggle( switch ) スイッチに基づいて一致した要素の各セットの表示を切り替えます（trueはすべての要素を表示し、falseはすべての要素を非表示にします）。
16	jQuery.fx.off すべてのアニメーションをグローバルに無効にします。

UIライブラリベースのエフェクト

これらの効果を使用するには、最新のjQuery UIライブラリ jquery-ui-1.11.4.custom.zip をhttps://jqueryui.com/download[jQuery UI Library]からダウンロードするか、Google CDNを使用して同様のjQueryで行ったように。

HTMLページで次のコードスニペットを使用してjQuery UIにGoogle CDNを使用したため、jQuery UIを使用できます-

<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
   </script>
</head>

Sr.No.	Methods & Description
1	Blind 要素を目隠しするか、目隠しして表示します。
2	Bounce 要素を垂直方向または水平方向にn回バウンスします。
3	Clip 要素を垂直または水平にクリップします。
4	Drop 要素をドロップするか、ドロップして表示します。
5	Explode 要素を複数の部分に分解します。
6	Fold 要素を紙のように折ります。
7	Highlight 定義された色で背景を強調表示します。
8	Puff アニメーションをスケールおよびフェードアウトすると、パフ効果が作成されます。
9	Pulsate 要素の不透明度を複数回脈動させます。
10	Scale パーセント係数で要素を縮小または拡大します。
11	Shake 要素を垂直方向または水平方向にn回振る。
12	Size 要素のサイズを指定された幅と高さに変更します。
13	Slide ビューポートから要素をスライドさせます。
14	Transfer 要素のアウトラインを別の要素に転送します。

jQuery-相互作用

インタラクションは、基本的なマウスベースの動作を任意の要素に追加できます。インタラクションを使用すると、ソート可能なリスト、サイズ変更可能な要素、ドラッグアンドドロップの動作を作成できます。インタラクションは、より複雑なウィジェットやアプリケーションの優れた構成要素にもなります。

Sr.No.	Interactions & Description
1	Drag able DOM要素でドラッグ可能な機能を有効にします。
2	Drop able DOM要素をドロップ可能にします。
3	Resize able 任意のDOM要素をサイズ変更可能にします。
4	Select able DOM要素（または要素のグループ）を選択可能にします。
5	Sort able DOM要素のグループをソート可能にします。

jQuery-ウィジェット

jQuery UIウィジェットは特殊なjQueryプラグインです。プラグインを使用して、要素に動作を適用できます。ただし、プラグインには、データをその要素に関連付け、メソッドを公開し、オプションをデフォルトにマージし、プラグインの有効期間を制御する方法など、いくつかの組み込み機能がありません。

Sr.No.	Widgets & Description
1	Accordion 論理セクションに分割されたコンテンツを折りたたむことができます。
2	Autocomplete フィールドに入力するときに提案を提供できるようにします。
3	Button ボタンは、submitタイプの入力およびアンカーです。
4	Datepicker インタラクティブなカレンダーを小さなオーバーレイで開くことです。
5	Dialog ダイアログボックスは、HTMLページに情報を表示する優れた方法の1つです。
6	Menu メニューにはアイテムのリストが表示されます。
7	Progressbar 進捗情報が表示されます。
8	Select menu 要素を選択できるスタイルを有効にします。
9	Slider 基本的なスライダーは水平で、マウスまたは矢印キーを使用して移動できる単一のハンドルがあります。
10	Spinner セットから1つの値を選択する簡単な方法を提供します。
11	Tabs 論理セクションに分割されたコンテンツ間でスワップするために使用されます。
12	Tooltip ユーザーにヒントを提供します。

jQuery-テーマ

Jqueryには、ボタン、バー、コンテンツブロックなどの色が異なるAとBの2つの異なるスタイリングテーマがあります。

以下に示すように、Jクエリテーマの構文-

<div data-role = "page" data-theme = "a|b">

以下に示すようにテーマの簡単な例-

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet"
         href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

      <script src = "https://code.jquery.com/jquery-1.11.3.min.js">
      </script>
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js">
      </script>
      <script
         src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
      </script>
   </head>

   <body>
      <div data-role = "page" id = "pageone" data-theme = "a">
        <div data-role = "header">
            <h1>Tutorials Point</h1>
         </div>

         <div data-role = "main" class = "ui-content">

            <p>Text link</p>
            <a href = "#">A Standard Text Link</a>
            <a href = "#" class = "ui-btn">Link Button</a>
            <p>A List View:</p>

            <ul data-role = "listview" data-autodividers = "true" data-inset = "true">
               <li><a href = "#">Android </a></li>
               <li><a href = "#">IOS</a></li>
            </ul>

            <label for = "fullname">Input Field:</label>
            <input type = "text" name = "fullname" id = "fullname"
               placeholder = "Name..">
            <label for = "switch">Toggle Switch:</label>

            <select name = "switch" id = "switch" data-role = "slider">
               <option value = "on">On</option>
               <option value = "off" selected>Off</option>
            </select>

         </div>

         <div data-role = "footer">
            <h1>Tutorials point</h1>
         </div>
      </div>
   </body>
</html>

これは、次の結果を生成する必要があります-

以下に示すようなシンプルなBテーマの例-

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet"
         href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js">
      </script>
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js">
      </script>
      <script
         src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
      </script>
   </head>

   <body>
      <div data-role = "page" id = "pageone" data-theme = "b">
        <div data-role = "header">
            <h1>Tutorials Point</h1>
         </div>

         <div data-role = "main" class = "ui-content">
            <p>Text link</p>
            <a href = "#">A Standard Text Link</a>
            <a href = "#" class = "ui-btn">Link Button</a>
            <p>A List View:</p>

            <ul data-role = "listview" data-autodividers = "true" data-inset = "true">
               <li><a href = "#">Android </a></li>
               <li><a href = "#">IOS</a></li>
            </ul>

            <label for = "fullname">Input Field:</label>
            <input type = "text" name = "fullname" id = "fullname"
               placeholder = "Name..">
            <label for = "switch">Toggle Switch:</label>

            <select name = "switch" id = "switch" data-role = "slider">
               <option value = "on">On</option>
               <option value = "off" selected>Off</option>
            </select>

         </div>

         <div data-role = "footer">
            <h1>Tutorials point</h1>
         </div>
      </div>
   </body>
</html>

これは、次の結果を生成する必要があります-

jQuery-ユーティリティ

Jqueryは、$（名前空間）の形式でサーバーユーティリティを提供します。これらのメソッドは、プログラミングタスクを完了するのに役立ちます。ユーティリティメソッドのいくつかを以下に示します。

$ .trim（）

$ .trim（）は、先頭および末尾の空白を削除するために使用されます

$.trim( "    lots of extra whitespace    " );

$ .each（）

$ .each（）は、配列とオブジェクトを反復処理するために使用されます

$.each([ "foo", "bar", "baz" ], function( idx, val ) {
   console.log( "element " + idx + " is " + val );
});

$.each({ foo: "bar", baz: "bim" }, function( k, v ) {
   console.log( k + " : " + v );
});

$ .inArray（）

each() can be called on a selection to iterate over the elements contained in the selection. .each(), not $.each(), should be used for iterating over elements in a selection..

$ .inArray（）を使用して、配列の値のインデックスを返します。値が配列にない場合は-1を返します。

var myArray = [ 1, 2, 3, 5 ];

if ( $.inArray( 4, myArray ) !== -1 ) {
   console.log( "found it!" );
}

$ .extend（）

$ .extend（）は、後続のオブジェクトのプロパティを使用して最初のオブジェクトのプロパティを変更するために使用されます。

var firstObject = { foo: "bar", a: "b" };
var secondObject = { foo: "baz" };

var newObject = $.extend( firstObject, secondObject );

console.log( firstObject.foo );
console.log( newObject.foo );

$ .proxy（）

$ .proxy（）は、指定されたスコープ内で常に実行される関数を返します。つまり、渡された関数内でthisの意味を2番目の引数に設定します

var myFunction = function() {
   console.log( this );
};

var myObject = {
   foo: "bar"
};

myFunction();//window

var myProxyFunction = $.proxy( myFunction, myObject );

myProxyFunction();

$ .browser

$ .browserは、ブラウザに関する情報を提供するために使用されます

jQuery.each( jQuery.browser, function( i, val ) {
   $( "<div>" + i + " : <span>" + val + "</span>" )
   .appendTo( document.body );
});

$ .contains（）

$ .contains（）は、2番目の引数で提供されるDOM要素が最初の引数で提供されるDOM要素の子孫である場合、直接の子であるか、より深くネストされているかにかかわらず、trueを返します。

$.contains( document.documentElement, document.body );
$.contains( document.body, document.documentElement );

$ .data（）

$ .data（）は、データに関する情報を提供するために使用されます

<html lang = "en">
   <head>
      <title>jQuery.data demo</title>
      <script src = "https://code.jquery.com/jquery-1.10.2.js">
      </script>
   </head>

   <body>
      <div>
         The values stored were <span></span>
            and <span></span>
      </div>

      <script>
         var div = $( "div" )[ 0 ];

         jQuery.data( div, "test", {
            first: 25,
            last: "tutorials"
         });

         $( "span:first" ).text( jQuery.data( div, "test" ).first );
         $( "span:last" ).text( jQuery.data( div, "test" ).last );
      </script>
   </body>
</html>

出力は次のようになります

The values stored were 25 and tutorials

$ .fn.extend（）

$ .fn.extend（）はjQueryプロトタイプを拡張するために使用されます

<html lang = "en">
   <head>
      <script src = "https://code.jquery.com/jquery-1.10.2.js">
      </script>
   </head>

   <body>
      <label><input type = "checkbox" name = "android">
         Android</label>
      <label><input type = "checkbox" name = "ios"> IOS</label>

      <script>
         jQuery.fn.extend({

            check: function() {
               return this.each(function() {
                  this.checked = true;
               });
            },
            uncheck: function() {
               return this.each(function() {
                  this.checked = false;
               });
            }
         });

        //Use the newly created .check() method
         $( "input[type = 'checkbox']" ).check();

      </script>
   </body>
</html>

それは以下に示すように出力を提供します-

$ .isWindow（）

$ .isWindow（）はウィンドウを認識するために使用されます

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery.isWindow demo</title>
      <script src = "https://code.jquery.com/jquery-1.10.2.js">
      </script>
   </head>

   <body>
      Is 'window' a window? <b></b>

      <script>
         $( "b" ).append( "" + $.isWindow( window ) );
      </script>
   </body>
</html>

それは以下に示すように出力を提供します-

$ .now（）

現在の時刻を表す数値を返します

(new Date).getTime()

$ .isXMLDoc（）

$ .isXMLDoc（）は、ファイルがxmlかどうかを確認します

jQuery.isXMLDoc( document )
jQuery.isXMLDoc( document.body )

$ .globalEval（）

$ .globalEval（）は、javascriptをグローバルに実行するために使用されます

function test() {
   jQuery.globalEval( "var newVar = true;" )
}
test();

$ .dequeue（）

$ .dequeue（）は、キュー内の次の関数を実行するために使用されます

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery.dequeue demo</title>

      <style>
         div {
            margin: 3px;
            width: 50px;
            position: absolute;
            height: 50px;
            left: 10px;
            top: 30px;
            background-color: green;
            border-radius: 50px;
         }
         div.red {
            background-color: blue;
         }
      </style>

      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
   </head>

   <body>
      <button>Start</button>
      <div></div>

      <script>
         $( "button" ).click(function() {
            $( "div" )
            .animate({ left: '+ = 400px' }, 2000 )
            .animate({ top: '0px' }, 600 )

            .queue(function() {
               $( this ).toggleClass( "red" );
               $.dequeue( this );
            })

            .animate({ left:'10px', top:'30px' }, 700 );
         });
      </script>
   </body>
</html>

それは以下に示すように出力を提供します-

Jquery-quick-guide

jQuery-クイックガイド

jQuery-概要

jQueryとは何ですか？

jQueryの使用方法

ローカルインストール

例

CDNベースのバージョン

例

jQueryライブラリ関数を呼び出す方法

カスタムスクリプトの使用方法

複数のライブラリを使用する

次は何ですか ？

jQuery-基本

ひも

番号

ブール値

オブジェクト

配列

関数

引数

コンテキスト

範囲

折り返し電話

クロージャ

プロキシパターン

組み込み関数

ドキュメントオブジェクトモデル

jQuery-セレクター

$（）ファクトリー関数

例

セレクターの使用方法

セレクターの例

jQuery-属性

属性値を取得

例

属性値を設定

例

スタイルを適用する

例

属性メソッド

例

jQuery-DOMトラバース

インデックスで要素を検索

例

要素のフィルタリング

例

子孫要素の特定

例

JQuery DOMフィルターメソッド

JQuery DOMトラバースメソッド

jQuery-CSSセレクターメソッド

CSSプロパティを適用

例

複数のCSSプロパティを適用する

例

要素の幅と高さの設定

例

JQuery CSSメソッド

jQuery-DOM操作

コンテンツ操作

例

DOM要素の置換

例

DOM要素の削除

例

DOM要素の挿入

例

DOM操作方法

jQuery-イベント処理

イベントハンドラーのバインド

イベントハンドラーの削除

イベントの種類

イベントオブジェクト

イベント属性

イベントメソッド

イベント操作方法

イベントヘルパーメソッド

トリガーメソッド

バインド方法

次は何ですか？