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サイトのディレクトリにあるファイル。
例
これで、次のように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ベースのバージョン
コンテンツ配信ネットワーク（CDN）から直接HTMLコードにjQueryライブラリを含めることができます。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>これにより、次の結果が生成されます-
複数のライブラリの使用
互いに競合することなく、複数のライブラリをすべて一緒に使用できます。たとえば、jQueryライブラリとMooTooljavascriptライブラリを一緒に使用できます。詳細については、jQuerynoConflictメソッドを確認できます。
次は何ですか ？
上記の例を理解していなくても、あまり心配しないでください。次の章ですぐにそれらを把握する予定です。
次の章では、従来のJavaScriptに由来するいくつかの基本的な概念について説明します。
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ビット形式のIEEE754値です。文字列と同じように、不変です。以下は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変数引数は、長さプロパティを持つ一種の配列です。次の例はそれを非常によく説明しています-
function func(x){
console.log(typeof x, arguments.length);
}
func(); //==> "undefined", 0
func(1); //==> "number", 1
func("1", "2", "3"); //==> "string", 3引数オブジェクトには、内部にある関数を参照するcalleeプロパティもあります。例-
function func() {
return arguments.callee;
}
func(); // ==> func環境
JavaScriptの有名なキーワード this常に現在のコンテキストを参照します。関数内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つのスコープしかありません。
Global Variables −グローバル変数にはグローバルスコープがあります。これは、JavaScriptコードのあらゆる場所で定義されていることを意味します。
Local Variables−ローカル変数は、それが定義されている関数内でのみ表示されます。関数パラメーターは常にその関数に対してローカルです。
関数の本体内では、ローカル変数が同じ名前のグローバル変数よりも優先されます-
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);
});ほとんどのコールバックは、引数とコンテキストを提供します。イベントハンドラーの例では、コールバックは1つの引数であるEventで呼び出されます。
何かを返すために必要なコールバックもあれば、その戻り値をオプションにするコールバックもあります。フォームの送信を防ぐために、送信イベントハンドラーは次のように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このパターンを使用すると、外の世界には見えないデータを操作するメソッドを使用してオブジェクトを作成できます。注意すべきことdata hiding オブジェクト指向プログラミングのまさに基礎です。
プロキシパターン
プロキシは、別のオブジェクトへのアクセスを制御するために使用できるオブジェクトです。この他のオブジェクトと同じインターフェースを実装し、メソッド呼び出しを渡します。この他のオブジェクトは、しばしば実際のサブジェクトと呼ばれます。
この実際のサブジェクトの代わりにプロキシをインスタンス化して、リモートでアクセスできるようにすることができます。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);
};
})();上記は、プロキシされた変数を非表示にする関数でコードをラップしています。次に、プロキシはメソッドへのすべての呼び出しをログに記録し、呼び出しを元のメソッドに委任します。apply（this、arguments）を使用すると、呼び出し元が元のメソッドとプロキシされたメソッドの違いに気付かないことが保証されます。
組み込み関数
JavaScriptには、便利な組み込み関数のセットが付属しています。これらのメソッドは、文字列、数値、および日付を操作するために使用できます。
以下は重要なJavaScript関数です-
| シニア番号 | 方法と説明 |
|---|---|
| 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に気付いていない場合は、DOMチュートリアルの簡単なチュートリアルを実行することをお勧めします。
jQueryライブラリは、カスケードスタイルシート（CSS）セレクターの機能を利用して、ドキュメントオブジェクトモデル（DOM）の要素または要素のグループにすばやく簡単にアクセスできるようにします。
jQuery Selectorは、式を使用して、指定された基準に基づいてDOMから一致する要素を見つける関数です。簡単に言うと、セレクターはjQueryを使用して1つ以上のHTML要素を選択するために使用されます。要素が選択されると、その選択された要素に対してさまざまな操作を実行できます。
$（）ファクトリ関数
jQueryセレクターはドル記号と括弧で始まります- $()。工場機能$() 特定のドキュメント内の要素を選択する際に、次の3つのビルディングブロックを利用します-
| シニア番号 | セレクターと説明 |
|---|---|
| 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セレクターは、いくつかの調整を除いて同じ原則に基づいています。
NOTE −ファクトリ機能 $() の同義語です 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ドキュメントから必要な要素を正確に取得します。
次の表に、いくつかの基本的なセレクターをリストし、例を挙げて説明します。
| シニア番号 | セレクターと説明 |
|---|---|
| 1 | 名前 指定された要素に一致するすべての要素を選択します Name。 |
| 2 | #ID 指定された要素と一致する単一の要素を選択します ID。 |
| 3 | 。クラス 指定されたものと一致するすべての要素を選択します Class。 |
| 4 | ユニバーサル（*） DOMで使用可能なすべての要素を選択します。 |
| 5 | 複数の要素E、F、G 指定されたすべてのセレクターの結果を組み合わせて選択します E, F または G。 |
セレクターの例
上記の構文と例と同様に、次の例では、さまざまなタイプの他の便利なセレクターの使用について理解できます。
| シニア番号 | セレクターと説明 |
|---|---|
| 1 | $('*') このセレクターは、ドキュメント内のすべての要素を選択します。 |
| 2 | $("p > *") このセレクターは、段落要素の子であるすべての要素を選択します。 |
| 3 | $("#specialID") このセレクター関数は、id = "specialID"の要素を取得します。 |
| 4 | $(".specialClass") このセレクターは、specialClassのクラスを持つすべての要素を取得します。 |
| 5 | $("li:not(.myclass)") class = "myclass"を持たない<li>に一致するすべての要素を選択します。 |
| 6 | $("a#specialID.specialClass") このセレクタは、IDとのリンク一致スペシャルID特殊身分とのクラスspecialClassを。 |
| 7 | $("p a.specialClass") このセレクターは、<p>要素内で宣言されたspecialClassのクラスとリンクを照合します。 |
| 8 | $("ul li:first") このセレクターは、<ul>の最初の<li>要素のみを取得します。 |
| 9 | $("#container p") コンテナの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]") <a>に一致し、rel属性を持つすべての要素を選択します。 |
| 20 | $("input[@name = myname]") mynameと完全に等しい名前値を持つ<input>に一致するすべての要素を選択します。 |
| 21 | $("input[@name^=myname]") mynameで始まる名前の値を持つ<input>に一致するすべての要素を選択します。 |
| 22 | $("a[@rel$=self]") <a>に一致するすべての要素を選択します。 relselfで終わる属性値。 |
| 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>要素でも機能します。
DOM要素に関して操作できる最も基本的なコンポーネントのいくつかは、それらの要素に割り当てられたプロパティと属性です。
これらの属性のほとんどは、JavaScriptを介してDOMノードプロパティとして利用できます。より一般的なプロパティのいくつかは次のとおりです。
- className
- tagName
- id
- href
- title
- 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.tutorialspoint.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 )メソッドを使用して、一致したすべての要素に定義済みのスタイルシートを適用できます。スペースで区切って複数のクラスを指定できます。
例
以下は、設定する簡単な例です class パラ<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() {
$("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>これにより、次の結果が生成されます-
属性メソッド
次の表に、属性とプロパティを操作するために使用できるいくつかの便利な方法を示します。
| シニア番号 | 方法と説明 |
|---|---|
| 1 | attr（プロパティ） 一致するすべての要素のプロパティとしてキー/値オブジェクトを設定します。 |
| 2 | attr（key、fn） 一致するすべての要素で、単一のプロパティを計算値に設定します。 |
| 3 | removeAttr（name） 一致した各要素から属性を削除します。 |
| 4 | hasClass（クラス） 指定されたクラスが一致した要素のセットの少なくとも1つに存在する場合、trueを返します。 |
| 5 | removeClass（クラス） 一致した要素のセットからすべてまたは指定されたクラスを削除します。 |
| 6 | トグルクラス（クラス） 指定されたクラスが存在しない場合は追加し、存在する場合は削除します。 |
| 7 | html（） 最初に一致した要素のhtmlコンテンツ（innerHTML）を取得します。 |
| 8 | html（val） 一致したすべての要素のhtmlコンテンツを設定します。 |
| 9 | text（） 一致したすべての要素の結合されたテキストコンテンツを取得します。 |
| 10 | text（val） 一致したすべての要素のテキストコンテンツを設定します。 |
| 11 | val（） 最初に一致した要素の入力値を取得します。 |
| 12 | val（val） <input>で呼び出された場合は、一致したすべての要素のvalue属性を設定しますが、渡された<option>値を使用して<select>で呼び出された場合は、渡されたオプションが選択されます。チェックボックスまたはラジオボックスで呼び出された場合は、一致するすべてのチェックボックスとラジオボックスがチェックされます。 |
例
上記の構文と例と同様に、次の例では、さまざまな状況でさまざまな属性メソッドを使用する方法を理解できます。
| シニア番号 | セレクターと説明 |
|---|---|
| 1 | $("#myID").attr("custom") これは、IDmyIDと一致する最初の要素の属性customの値を返します。 |
| 2 | $("img").attr("alt", "Sample Image") これにより、 alt すべての画像の属性を新しい値「サンプル画像」に設定します。 |
| 3 | $("input").attr({ value: "", title: "Please enter a value" }); すべての<input>要素の値を空の文字列に設定し、jQueryの例を文字列に設定します。値を入力してください。 |
| 4 | $("a[href^=https://]").attr("target","_blank") https：//で始まるhref属性を持つすべてのリンクを選択し、そのターゲット属性を_blankに設定します。 |
| 5 | $("a").removeAttr("target") これにより、すべてのリンクのターゲット属性が削除されます。 |
| 6 | $("form").submit(function() {$(":submit",this).attr("disabled", "disabled");}); これにより、[送信]ボタンをクリックしているときに、disabled属性が値 "disabled"に変更されます。 |
| 7 | $("p:last").hasClass("selected") これは、最後の<p>タグに関連付けられたクラスが選択されている場合にtrueを返します。 |
| 8 | $("p").text() 一致したすべての<p>要素の結合されたテキストコンテンツを含む文字列を返します。 |
| 9 | $("p").text("<i>Hello World</i>") これにより、一致する<p>要素のテキストコンテンツとして「<I> HelloWorld </ I>」が設定されます。 |
| 10 | $("p").html() これにより、一致するすべての段落のHTMLコンテンツが返されます。 |
| 11 | $("div").html("Hello World") これは、すべてのマッチングの<div>のHTMLコンテンツ設定しますHello Worldのを。 |
| 12 | $("input:checkbox:checked").val() チェックされたチェックボックスから最初の値を取得します。 |
| 13 | $("input:radio[name=bar]:checked").val() ラジオボタンのセットから最初の値を取得します。 |
| 14 | $("button").val("Hello") 一致したすべての要素<button>のvalue属性を設定します。 |
| 15 | $("input").val("on") これにより、値が「オン」のすべてのラジオまたはチェックボックスボタンがチェックされます。 |
| 16 | $("select").val("Orange") これにより、ドロップダウンボックスで[オレンジ]、[マンゴー]、[バナナ]のオプションが付いた[オレンジ]オプションが選択されます。 |
| 17 | $("select").val("Orange", "Mango") これにより、ドロップダウンボックスでオレンジ、マンゴー、バナナのオプションが表示されたオレンジとマンゴーのオプションが選択されます。 |
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) 以下の例のような方法。
すべての子要素はゼロからインデックスを開始するため、リストアイテム2には次を使用してアクセスします。$("li").eq(1) 等々。
例
以下は、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 )メソッドを使用して、指定されたセレクターと一致しない一致した要素のセットからすべての要素を除外できます。セレクタは、任意のセレクタの構文を使用して書き込むことができます。
例
以下は、中産階級に関連付けられたリストに色を適用する簡単な例です-
<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 )メソッドを使用して、特定のタイプの要素のすべての子孫要素を見つけることができます。セレクタは、任意のセレクタの構文を使用して書き込むことができます。
例
以下は、異なる<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>これにより、次の結果が生成されます-
JQueryDOMフィルターメソッド
次の表に、DOM要素のリストからさまざまな要素を除外するために使用できる便利な方法を示します。
| シニア番号 | 方法と説明 |
|---|---|
| 1 | eq（インデックス） 一致した要素のセットを1つの要素に減らします。 |
| 2 | filter（セレクター） 指定されたセレクターと一致しない一致した要素のセットからすべての要素を削除します。 |
| 3 | filter（fn） 指定された関数に一致しない一致した要素のセットからすべての要素を削除します。 |
| 4 | is（セレクター） 現在の選択を式と照合し、選択の少なくとも1つの要素が指定されたセレクターに適合する場合はtrueを返します。 |
| 5 | map（コールバック） jQueryオブジェクトの要素のセットをjQuery配列の別の値のセットに変換します（要素が含まれる場合と含まれない場合があります）。 |
| 6 | not（セレクター） 一致した要素のセットから、指定したセレクターに一致する要素を削除します。 |
| 7 | スライス（開始、[終了]） 一致した要素のサブセットを選択します。 |
JQueryDOMトラバースメソッド
次の表に、DOM内のさまざまな要素を見つけるために使用できる他の便利な方法を示します。
| シニア番号 | 方法と説明 |
|---|---|
| 1 | add（セレクター） 指定されたセレクターによって一致する要素を、一致する要素のセットに追加します。 |
| 2 | andSelf（） 前の選択を現在の選択に追加します。 |
| 3 | 子供（[セレクター]） 一致した各要素セットの一意の直接の子をすべて含む要素セットを取得します。 |
| 4 | 最寄（セレクター） 指定されたセレクターに一致する最も近い親要素を含む要素のセットを取得します。開始要素が含まれます。 |
| 5 | 内容（） 一致した要素（テキストノードを含む）内のすべての子ノード、または要素がiframeの場合はコンテンツドキュメントを検索します。 |
| 6 | 終わり（ ） 最新の「破壊的」操作を元に戻し、一致した要素のセットを以前の状態に変更します。 |
| 7 | find（セレクター） 指定されたセレクターに一致する子孫要素を検索します。 |
| 8 | next（[セレクター]） 指定された要素の各セットの一意の次の兄弟を含む要素のセットを取得します。 |
| 9 | nextAll（[セレクター]） 現在の要素の後のすべての兄弟要素を検索します。 |
| 10 | offsetParent（） 最初に一致した要素の親が配置されたjQueryコレクションを返します。 |
| 11 | 親（[セレクター]） 要素の直接の親を取得します。要素のセットで呼び出された場合、parentは一意の直接の親要素のセットを返します。 |
| 12 | 親（[セレクター]） 一致した要素のセット（ルート要素を除く）の一意の祖先を含む要素のセットを取得します。 |
| 13 | prev（[セレクター]） 一致した要素のセットのそれぞれの一意の前の兄弟を含む要素のセットを取得します。 |
| 14 | prevAll（[セレクター]） 現在の要素の前にあるすべての兄弟要素を検索します。 |
| 15 | 兄弟（[セレクター]） 一致した各要素セットの一意の兄弟をすべて含む要素セットを取得します。 |
jQueryライブラリは、World Wide Web Consortiumのサイトで概説されているように、カスケードスタイルシート（CSS）仕様1から3に含まれるほぼすべてのセレクターをサポートします。
JQueryライブラリを使用すると、開発者は、ブラウザーでJavaScriptが有効になっている限り、ブラウザーとそのバージョンを気にすることなくWebサイトを拡張できます。
ほとんどのJQueryCSSメソッドはjQueryオブジェクトのコンテンツを変更せず、DOM要素にCSSプロパティを適用するために使用されます。
CSSプロパティを適用する
これは、JQueryメソッドを使用してCSSプロパティを適用するのは非常に簡単です css( PropertyName, PropertyValue )。
メソッドの構文は次のとおりです-
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プロパティを適用する
1つのJQueryメソッドを使用して複数のCSSプロパティを適用できます CSS( {key1:val1, key2:val2....)。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>これにより、次の結果が生成されます-
JQueryCSSメソッド
次の表に、CSSプロパティを操作するために使用できるすべてのメソッドを示します-
| シニア番号 | 方法と説明 |
|---|---|
| 1 | css（名前） 最初に一致した要素のスタイルプロパティを返します。 |
| 2 | css（名前、値） 一致するすべての要素の値に単一のスタイルプロパティを設定します。 |
| 3 | css（プロパティ） 一致するすべての要素のスタイルプロパティとしてキー/値オブジェクトを設定します。 |
| 4 | height（val） 一致するすべての要素のCSSの高さを設定します。 |
| 5 | 高さ（ ） 最初に一致した要素の現在計算されたピクセル、高さを取得します。 |
| 6 | innerHeight（） 最初に一致した要素の内側の高さ（境界線を除き、パディングを含む）を取得します。 |
| 7 | innerWidth（） 最初に一致した要素の内側の幅（境界線を除き、パディングを含む）を取得します。 |
| 8 | オフセット（） ドキュメントを基準にして、最初に一致した要素の現在のオフセットをピクセル単位で取得します。 |
| 9 | offsetParent（） 最初に一致した要素の親が配置されたjQueryコレクションを返します。 |
| 10 | アウターハイト（[マージン]） 最初に一致した要素の外側の高さ（デフォルトでは境界線とパディングを含む）を取得します。 |
| 11 | アウター幅（[マージン]） 最初に一致した要素の外側の幅（デフォルトでは境界線とパディングを含む）を取得します。 |
| 12 | ポジション（ ） オフセットされた親を基準にした要素の上部と左側の位置を取得します。 |
| 13 | scrollLeft（val） 値が渡されると、一致したすべての要素で左スクロールオフセットがその値に設定されます。 |
| 14 | scrollLeft（） 最初に一致した要素の左スクロールオフセットを取得します。 |
| 15 | scrollTop（val） 値が渡されると、一致したすべての要素でスクロールトップオフセットがその値に設定されます。 |
| 16 | scrollTop（） 最初に一致した要素のスクロールトップオフセットを取得します。 |
| 17 | width（val） 一致するすべての要素のCSS幅を設定します。 |
| 18 | width（） 最初に一致した要素の現在計算されたピクセル幅を取得します。 |
JQueryは、効率的な方法でDOMを操作するためのメソッドを提供します。要素の属性の値を変更したり、段落や分割からHTMLコードを抽出したりするために、大きなコードを記述する必要はありません。
JQueryは、ゲッターとして機能する.attr（）、. html（）、. val（）などのメソッドを提供し、後で使用するためにDOM要素から情報を取得します。
コンテンツ操作
ザ・ html( ) メソッドは、最初に一致した要素のhtmlコンテンツ（innerHTML）を取得します。
メソッドの構文は次のとおりです-
selector.html( )例
以下は、.html（）メソッドと.text（val）メソッドを使用する例です。ここで、.html（）はオブジェクトから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).html(); $("#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要素を操作するために使用できるすべてのメソッドを示します-
| シニア番号 | 方法と説明 |
|---|---|
| 1 | after（コンテンツ） 一致した各要素の後にコンテンツを挿入します。 |
| 2 | append（content） 一致したすべての要素の内部にコンテンツを追加します。 |
| 3 | appendTo（セレクター） 一致したすべての要素を、指定された別の要素のセットに追加します。 |
| 4 | before（コンテンツ） 一致した各要素の前にコンテンツを挿入します。 |
| 5 | clone（bool） 一致したDOM要素とそのすべてのイベントハンドラーのクローンを作成し、クローンを選択します。 |
| 6 | clone（） 一致したDOM要素のクローンを作成し、クローンを選択します。 |
| 7 | 空の（ ） 一致した要素のセットからすべての子ノードを削除します。 |
| 8 | html（val） 一致したすべての要素のhtmlコンテンツを設定します。 |
| 9 | html（） 最初に一致した要素のhtmlコンテンツ（innerHTML）を取得します。 |
| 10 | insertAfter（セレクター） 一致したすべての要素を、指定された要素のセットの後に挿入します。 |
| 11 | insertBefore（セレクター） 一致したすべての要素を、指定された別の要素セットの前に挿入します。 |
| 12 | prepend（content） 一致するすべての要素の内側にコンテンツを付加します。 |
| 13 | prependTo（セレクター） 一致したすべての要素を、指定された別の要素のセットの前に追加します。 |
| 14 | remove（expr） 一致したすべての要素をDOMから削除します。 |
| 15 | replaceAll（セレクター） 指定されたセレクターによって一致した要素を一致した要素に置き換えます。 |
| 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構造でラップします。 |
イベントを使用して動的なWebページを作成する機能があります。イベントは、Webアプリケーションで検出できるアクションです。
以下はイベントの例です-
- マウスクリック
- Webページの読み込み
- 要素の上にマウスを置く
- HTMLフォームの送信
- キーボードのキーストロークなど。
これらのイベントがトリガーされると、カスタム関数を使用して、イベントで必要なことをほぼすべて実行できます。これらのカスタム関数は、イベントハンドラーを呼び出します。
イベントハンドラーのバインド
jQueryイベントモデルを使用して、DOM要素にイベントハンドラーを確立できます。 bind() 次のような方法-
<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 −提供されている場合、削除する特定のリスナーを識別します。
イベントタイプ
| シニア番号 | イベントの種類と説明 |
|---|---|
| 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イベントオブジェクトがハンドラーを通過します。
ハンドラーがトリガーされたときに何をする必要があるかを正確に知るためにハンドラーがバインドされている場合、通常は十分なコンテキストが利用可能であるため、イベントオブジェクトは不要であり、パラメーターは省略されますが、アクセスする必要がある特定の属性があります。
イベント属性
| シニア番号 | プロパティと説明 |
|---|---|
| 1 | altKey イベントがトリガーされたときにAltキーが押された場合はtrueに設定し、そうでない場合はfalseに設定します。Altキーは、ほとんどのMacキーボードでOptionというラベルが付いています。 |
| 2 | ctrlKey イベントがトリガーされたときにCtrlキーが押された場合はtrueに設定し、そうでない場合はfalseに設定します。 |
| 3 | data ハンドラーが確立されたときに、bind（）コマンドに2番目のパラメーターとして渡された値（存在する場合）。 |
| 4 | keyCode キーアップおよびキーダウンイベントの場合、これは押されたキーを返します。 |
| 5 | metaKey イベントがトリガーされたときにメタキーが押された場合はtrueに設定し、そうでない場合はfalseに設定します。メタキーは、PCではCtrlキー、Macではコマンドキーです。 |
| 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>これにより、次の結果が生成されます-
イベントメソッド
イベントオブジェクトで呼び出すことができるメソッドのリストがあります-
| シニア番号 | 方法と説明 |
|---|---|
| 1 | PreventDefault（） ブラウザがデフォルトのアクションを実行できないようにします。 |
| 2 | isDefaultPrevented（） このイベントオブジェクトでevent.preventDefault（）が呼び出されたことがあるかどうかを返します。 |
| 3 | stopPropagation（） 親要素へのイベントのバブリングを停止し、親ハンドラーにイベントが通知されないようにします。 |
| 4 | isPropagationStopped（） このイベントオブジェクトでevent.stopPropagation（）が呼び出されたことがあるかどうかを返します。 |
| 5 | stopImmediatePropagation（） 残りのハンドラーの実行を停止します。 |
| 6 | isImmediatePropagationStopped（） このイベントオブジェクトでevent.stopImmediatePropagation（）が呼び出されたことがあるかどうかを返します。 |
イベント操作方法
次の表に、重要なイベント関連のメソッドを示します。
| シニア番号 | 方法と説明 |
|---|---|
| 1 | bind（type、[data]、fn） 一致した要素ごとに、ハンドラーを1つ以上のイベント（クリックなど）にバインドします。カスタムイベントをバインドすることもできます。 |
| 2 | off（イベント[、セレクター] [、ハンドラー（eventObject）]） これはライブの反対を行い、バインドされたライブイベントを削除します。 |
| 3 | hover（over、out） たとえば、オブジェクト上でマウスを動かしたり、オブジェクトから離れたりするホバリングをシミュレートします。 |
| 4 | on（イベント[、セレクター] [、データ]、ハンドラー） 現在および将来一致するすべての要素のイベント（クリックなど）にハンドラーをバインドします。カスタムイベントをバインドすることもできます。 |
| 5 | one（type、[data]、fn） ハンドラーを1つ以上のイベントにバインドして、一致した要素ごとに1回実行します。 |
| 6 | ready（fn） DOMをトラバースして操作する準備ができたときに実行される関数をバインドします。 |
| 7 | trigger（イベント、[データ]） 一致したすべての要素でイベントをトリガーします。 |
| 8 | triggerHandler（イベント、[データ]） 要素のすべてのバインドされたイベントハンドラーをトリガーします。 |
| 9 | unbind（[type]、[fn]） これはバインドの反対を行い、一致した各要素からバインドされたイベントを削除します。 |
イベントヘルパーメソッド
jQueryは、イベントをトリガーして上記のイベントタイプをバインドするために使用できる一連のイベントヘルパー関数も提供します。
トリガーメソッド
以下は、すべての段落でぼかしイベントをトリガーする例です-
$("p").blur();製本方法
以下は、をバインドする例です。 click すべての<div>のイベント-
$("div").click( function () {
// do something here
});| シニア番号 | 方法と説明 |
|---|---|
| 1 | 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( ) 一致した各要素のキーダウンイベントをトリガーします。 |
| 14 | keydown( fn ) 一致した各要素のキーダウンイベントに関数をバインドします。 |
| 15 | keypress( ) 一致した各要素のキー押下イベントをトリガーします。 |
| 16 | keypress( fn ) 一致した各要素のkeypressイベントに関数をバインドします。 |
| 17 | keyup( ) 一致した各要素のキーアップイベントをトリガーします。 |
| 18 | keyup( fn ) 一致した各要素のキーアップイベントに関数をバインドします。 |
| 19 | load( fn ) Binds a function to the load event of each matched element. |
| 20 | mousedown( fn ) Binds a function to the mousedown event of each matched element. |
| 21 | mouseenter( fn ) Bind a function to the mouseenter event of each matched element. |
| 22 | mouseleave( fn ) Bind a function to the mouseleave event of each matched element. |
| 23 | mousemove( fn ) Bind a function to the mousemove event of each matched element. |
| 24 | mouseout( fn ) Bind a function to the mouseout event of each matched element. |
| 25 | mouseover( fn ) Bind a function to the mouseover event of each matched element. |
| 26 | mouseup( fn ) Bind a function to the mouseup event of each matched element. |
| 27 | resize( fn ) Bind a function to the resize event of each matched element. |
| 28 | scroll( fn ) Bind a function to the scroll event of each matched element. |
| 29 | select( ) Trigger the select event of each matched element. |
| 30 | select( fn ) Bind a function to the select event of each matched element. |
| 31 | submit( ) Trigger the submit event of each matched element. |
| 32 | submit( fn ) Bind a function to the submit event of each matched element. |
| 33 | unload( fn ) Binds a function to the unload event of each matched element. |
AJAX is an acronym standing for Asynchronous JavaScript and XML and this technology helps us to load data from the server without a browser page refresh.
If you are new with AJAX, I would recommend you go through our Ajax Tutorial before proceeding further.
JQuery is a great tool which provides a rich set of AJAX methods to develop next generation web application.
Loading Simple Data
This is very easy to load any static or dynamic data using JQuery AJAX. JQuery provides load() method to do the job −
Syntax
Here is the simple syntax for load() method −
[selector].load( URL, [data], [callback] );Here is the description of all the parameters −
URL − The URL of the server-side resource to which the request is sent. It could be a CGI, ASP, JSP, or PHP script which generates data dynamically or out of a database.
data − This optional parameter represents an object whose properties are serialized into properly encoded parameters to be passed to the request. If specified, the request is made using the POST method. If omitted, the GET method is used.
callback − A callback function invoked after the response data has been loaded into the elements of the matched set. The first parameter passed to this function is the response text received from the server and second parameter is the status code.
Example
Consider the following HTML file with a small JQuery coding −
<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/result.html');
});
});
</script>
</head>
<body>
<p>Click on the button to load /jquery/result.html file −</p>
<div id = "stage" style = "background-color:cc0;">
STAGE
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>Here load() initiates an Ajax request to the specified URL /jquery/result.html file. After loading this file, all the content would be populated inside <div> tagged with ID stage. Assuming, our /jquery/result.html file has just one HTML line −
<h1>THIS IS RESULT...</h1>When you click the given button, then result.html file gets loaded.
Getting JSON Data
There would be a situation when server would return JSON string against your request. JQuery utility function getJSON() parses the returned JSON string and makes the resulting string available to the callback function as first parameter to take further action.
Syntax
Here is the simple syntax for getJSON() method −
[selector].getJSON( URL, [data], [callback] );Here is the description of all the parameters −
URL − The URL of the server-side resource contacted via the GET method.
data − An object whose properties serve as the name/value pairs used to construct a query string to be appended to the URL, or a preformatted and encoded query string.
callback − A function invoked when the request completes. The data value resulting from digesting the response body as a JSON string is passed as the first parameter to this callback, and the status as the second.
Example
Consider the following HTML file with a small JQuery coding −
<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').html('<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>Here JQuery utility method getJSON() initiates an Ajax request to the specified URL result.json file. After loading this file, all the content would be passed to the callback function which finally would be populated inside <div> tagged with ID stage. Assuming, our result.json file has following json formatted content −
{
"name": "Zara Ali",
"age" : "67",
"sex": "female"
}When you click the given button, then result.json file gets loaded.
Passing Data to the Server
Many times you collect input from the user and you pass that input to the server for further processing. JQuery AJAX made it easy enough to pass collected data to the server using data parameter of any available Ajax method.
Example
This example demonstrate how can pass user input to a web server script which would send the same result back and we would print it −
<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>Here is the code written in result.php script −
<?php
if( $_REQUEST["name"] ){ $name = $_REQUEST['name']; echo "Welcome ". $name;
}
?>Now you can enter any text in the given input box and then click "Show Result" button to see what you have entered in the input box.
JQuery AJAX Methods
You have seen basic concept of AJAX using JQuery. Following table lists down all important JQuery AJAX methods which you can use based your programming need −
| Sr.No. | Methods & Description |
|---|---|
| 1 | jQuery.ajax( options ) Load a remote page using an HTTP request. |
| 2 | jQuery.ajaxSetup( options ) Setup global settings for AJAX requests. |
| 3 | jQuery.get( url, [data], [callback], [type] ) Load a remote page using an HTTP GET request. |
| 4 | jQuery.getJSON( url, [data], [callback] ) Load JSON data using an HTTP GET request. |
| 5 | jQuery.getScript( url, [callback] ) Loads and executes a JavaScript file using an HTTP GET request. |
| 6 | jQuery.post( url, [data], [callback], [type] ) Load a remote page using an HTTP POST request. |
| 7 | load( url, [data], [callback] ) Load HTML from a remote file and inject it into the DOM. |
| 8 | serialize( ) Serializes a set of input elements into a string of data. |
| 9 | serializeArray( ) Serializes all forms and form elements like the .serialize() method but returns a JSON data structure for you to work with. |
JQuery AJAX Events
You can call various JQuery methods during the life cycle of AJAX call progress. Based on different events/stages following methods are available −
You can go through all the AJAX Events.
| Sr.No. | Methods & Description |
|---|---|
| 1 | ajaxComplete( callback ) Attach a function to be executed whenever an AJAX request completes. |
| 2 | ajaxStart( callback ) Attach a function to be executed whenever an AJAX request begins and there is none already active. |
| 3 | ajaxError( callback ) Attach a function to be executed whenever an AJAX request fails. |
| 4 | ajaxSend( callback ) Attach a function to be executed before an AJAX request is sent. |
| 5 | ajaxStop( callback ) Attach a function to be executed whenever all AJAX requests have ended. |
| 6 | ajaxSuccess( callback ) Attach a function to be executed whenever an AJAX request completes successfully. |
jQuery provides a trivially simple interface for doing various kind of amazing effects. jQuery methods allow us to quickly apply commonly used effects with a minimum configuration. This tutorial covers all the important jQuery methods to create visual effects.
Showing and Hiding Elements
The commands for showing and hiding elements are pretty much what we would expect − show() to show the elements in a wrapped set and hide() to hide them.
Syntax
Here is the simple syntax for show() method −
[selector].show( speed, [callback] );Here is the description of all the parameters −
speed − A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
callback − This optional parameter represents a function to be executed whenever the animation completes; executes once for each element animated against.
Following is the simple syntax for hide() method −
[selector].hide( speed, [callback] );Here is the description of all the parameters −
speed − A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
callback − This optional parameter represents a function to be executed whenever the animation completes; executes once for each element animated against.
Example
Consider the following HTML file with a small JQuery coding −
<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>This will produce following result −
Toggling the Elements
jQuery provides methods to toggle the display state of elements between revealed or hidden. If the element is initially displayed, it will be hidden; if hidden, it will be shown.
Syntax
Here is the simple syntax for one of the toggle() methods −
[selector]..toggle([speed][, callback]);Here is the description of all the parameters −
speed − A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
callback − This optional parameter represents a function to be executed whenever the animation completes; executes once for each element animated against.
Example
We can animate any element, such as a simple <div> containing an image −
<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>This will produce following result −
JQuery Effect Methods
You have seen basic concept of jQuery Effects. Following table lists down all the important methods to create different kind of effects −
| Sr.No. | Methods & Description |
|---|---|
| 1 | animate( params, [duration, easing, callback] ) A function for making custom animations. |
| 2 | fadeIn( speed, [callback] ) Fade in all matched elements by adjusting their opacity and firing an optional callback after completion. |
| 3 | fadeOut( speed, [callback] ) Fade out all matched elements by adjusting their opacity to 0, then setting display to "none" and firing an optional callback after completion. |
| 4 | fadeTo( speed, opacity, callback ) Fade the opacity of all matched elements to a specified opacity and firing an optional callback after completion. |
| 5 | hide( ) Hides each of the set of matched elements if they are shown. |
| 6 | hide( speed, [callback] ) Hide all matched elements using a graceful animation and firing an optional callback after completion. |
| 7 | show( ) Displays each of the set of matched elements if they are hidden. |
| 8 | show( speed, [callback] ) Show all matched elements using a graceful animation and firing an optional callback after completion. |
| 9 | slideDown( speed, [callback] ) Reveal all matched elements by adjusting their height and firing an optional callback after completion. |
| 10 | slideToggle( speed, [callback] ) Toggle the visibility of all matched elements by adjusting their height and firing an optional callback after completion. |
| 11 | slideUp( speed, [callback] ) Hide all matched elements by adjusting their height and firing an optional callback after completion. |
| 12 | stop( [clearQueue, gotoEnd ]) Stops all the currently running animations on all the specified elements. |
| 13 | toggle( ) Toggle displaying each of the set of matched elements. |
| 14 | toggle( speed, [callback] ) Toggle displaying each of the set of matched elements using a graceful animation and firing an optional callback after completion. |
| 15 | toggle( switch ) Toggle displaying each of the set of matched elements based upon the switch (true shows all elements, false hides all elements). |
| 16 | jQuery.fx.off Globally disable all animations. |
UIライブラリベースのエフェクト
これらのエフェクトを使用するには、最新のjQueryUIライブラリをダウンロードできます。 jquery-ui-1.11.4.custom.zipjQuery UIライブラリから、またはGoogle CDNを使用して、jQueryの場合と同様の方法で使用します。
HTMLページで次のコードスニペットを使用してjQueryUIにGoogleCDNを使用したため、jQueryUIを使用できます-
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
</script>
</head>| シニア番号 | 方法と説明 |
|---|---|
| 1 | ブラインド 要素をブラインドで取り除くか、でブラインドして表示します。 |
| 2 | 跳ねる、弾む 要素を垂直方向または水平方向にn回バウンスします。 |
| 3 | クリップ 要素を垂直または水平にオンまたはオフにクリップします。 |
| 4 | 落とす 要素をドロップするか、ドロップインして表示します。 |
| 5 | 爆発する 要素を複数の部分に分解します。 |
| 6 | 折りたたむ 一枚の紙のように要素を折ります。 |
| 7 | ハイライト 定義された色で背景を強調表示します。 |
| 8 | パフ スケールとフェードアウトのアニメーションは、パフ効果を作成します。 |
| 9 | 脈動 要素の不透明度を複数回脈動させます。 |
| 10 | 規模 要素をパーセンテージ係数で縮小または拡大します。 |
| 11 | シェイク 要素を垂直方向または水平方向にn回振る。 |
| 12 | サイズ 要素のサイズを指定された幅と高さに変更します。 |
| 13 | 滑り台 要素をビューポートからスライドさせます。 |
| 14 | 転送 要素のアウトラインを別の要素に転送します。 |
インタラクションは、基本的なマウスベースの動作を任意の要素に追加できます。インタラクションを使用して、並べ替え可能なリスト、サイズ変更可能な要素、ドラッグアンドドロップの動作を作成できます。インタラクションは、より複雑なウィジェットやアプリケーションの優れた構成要素にもなります。
| シニア番号 | 相互作用と説明 |
|---|---|
| 1 | ドラッグ可能 任意のDOM要素でドラッグ可能な機能を有効にします。 |
| 2 | ドロップ可能 すべてのDOM要素をドロップ可能にします。 |
| 3 | サイズ変更可能 任意のDOM要素をサイズ変更可能にします。 |
| 4 | 選択可能 DOM要素（または要素のグループ）を選択可能にします。 |
| 5 | 並べ替え可能 DOM要素のグループを並べ替え可能にします。 |
jQuery UIウィジェットは特殊なjQueryプラグインです。プラグインを使用して、要素に動作を適用できます。ただし、プラグインには、データをその要素に関連付ける方法、メソッドを公開する方法、オプションをデフォルトとマージする方法、プラグインの有効期間を制御する方法など、いくつかの組み込み機能がありません。
| シニア番号 | ウィジェットと説明 |
|---|---|
| 1 | アコーディオン 論理セクションに分割されているコンテンツを折りたたむことができます。 |
| 2 | オートコンプリート フィールドに入力するときに提案を提供できるようにします。 |
| 3 | ボタン ボタンは、送信タイプとアンカーの入力です。 |
| 4 | デートピッカー 小さなオーバーレイでインタラクティブなカレンダーを開くことです。 |
| 5 | ダイアログ ダイアログボックスは、HTMLページに情報を表示するための優れた方法の1つです。 |
| 6 | メニュー メニューにはアイテムのリストが表示されます。 |
| 7 | プログレスバー 進捗情報が表示されます。 |
| 8 | メニューを選択 要素を選択できるスタイルを有効にします。 |
| 9 | スライダー 基本的なスライダーは水平で、マウスまたは矢印キーを使用して移動できる単一のハンドルがあります。 |
| 10 | スピナー セットから1つの値を選択する簡単な方法を提供します。 |
| 11 | タブ 論理セクションに分割されたコンテンツを交換するために使用されます。 |
| 12 | ツールチップ それはユーザーにヒントを提供します。 |
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は、$（名前空間）の形式でサーバーユーティリティを提供します。これらのメソッドは、プログラミングタスクを完了するのに役立ちます。ユーティリティメソッドのいくつかを以下に示します。
$ .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 );
});.each（）は、選択範囲で呼び出され、選択範囲に含まれる要素を反復処理できます。$ .each（）ではなく.each（）を使用して、選択範囲内の要素を反復処理する必要があります。
$ .inArray（）
$ .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（）は、指定されたスコープで常に実行される関数を返すために使用されます。つまり、渡された関数内でこの意味を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>以下に示すような出力を提供します-