jQuery は、JavaScript™ および AJAX (非同期 JavaScript + XML、非同期 JavaScript および XML) プログラミングを簡素化する Javascript ライブラリです。他の Javascript ライブラリとは異なり、jQuery にはコードの記述を容易にする独自の哲学があります。この記事では、jQuery の哲学を理解し、その特徴と機能について説明し、いくつかの ajax の例とプラグインを使用して jQuery を拡張する方法を紹介します。
1.jQueryとは何ですか?
jQuery は 2006 年に誕生し、John Resig によって作成された優れた Javascript ライブラリです。あなたが JavaScript の初心者だが DOM (ドキュメント オブジェクト モデル) と Ajax の複雑さを試してみたいと思っている場合でも、JavaScript の専門家でも退屈な DOM と Ajax スクリプトを繰り返すのにうんざりしている場合でも、jQuery が最良の選択となるでしょう。 。
jQuery は、コードをシンプルかつ簡潔に保つのに役立ちます。 jQuery を使用すると、大量の繰り返しループや DOM 呼び出しスクリプトを記述する必要がなく、最小限のコードで重要なポイントをすばやく見つけてアイデアを表現できます。
jQuery の哲学は実際には非常にシンプルで、シンプルで再利用可能です。この考えを理解し、同意すると、jQuery を使用するとプログラミングがいかに簡単で楽しいものになるかがわかります。
2. いくつかの簡単な概念
ここでは、jQuery が作成したコードにどのような影響を与えるかを示す簡単な例を示します。実際に行うことは非常に簡単で、ページ上の特定の領域にあるすべてのリンクにクリック応答イベントを追加するなど、一般的な Javascript と DOM を使用してコードを記述できます。コードについてはリスト 1 を参照してください
。 jQuery
var external_links = document.getElementById('external_links');var links = external_links.getElementsByTagName('a');for (var i=0;i < links.length;i++) {var link = links.item(i) ;link.onclick = function() {returnconfirm('訪問する予定です: ' + this.href);};} jQuery を使用する場合、実装は次のようになります。 リスト 2. jQuery$(' を使用した DOM スクリプト#external_links a').click( function() {returnconfirm('これからアクセスします: ' + this.href);}); jQueryを使えば、要点を素早く見つけて、冗長にならずに表現したいことだけを表現することができます。これらの要素をループする必要はなく、 click() 関数がすべて処理します。また、DOM を操作するために多くのコードを記述する必要はありません。必要なのは、探している要素を定義するために数文字を使用することだけです。いくつかのトリックを使用して、このコードがどのように機能するかを見てみましょう。まず、jQuery で最も便利で強力な関数の 1 つである $() 関数を見てください。この例では、この関数を使用して、Cascading で For 文字列を渡します。スタイル シート (CSS) 構文では、jQuery でこの要素を簡単に見つけることができます。基本的な CSS セレクターについて少しでも知っているなら、この構文は、リスト 2 で # external_links が id external_links を持つ要素を見つけるために使用されていると思います。スペースの後に続くのは、jQuery が #external_links 要素内のすべての <a> 要素を見つける必要があることを意味します。これを音声言語で表現するのは少し難しく、DOM スクリプトで記述するのも非常に面倒ですが、CSS ではこれほど簡単なことはありません。 $() 関数は、CSS セレクターに一致するすべての要素を含む jQuery オブジェクトを返しますが、たとえば、click 関数を呼び出すことができます。クリック イベントの応答を jQuery オブジェクトの各要素にバインドする
関数を $() 関数に渡して、すべての要素を jQuery オブジェクトに追加することもできます。たとえば、この機能をウィンドウなどのオブジェクトに使用して、次のようにイベントをロードできます。
window.onload = function() {// ページの読み込みが完了したらこの処理を実行します}; jQuery を使用する場合は、次のように記述できます。
$(window).load(function() {// ページ全体がダウンロードされたときにこれを実行します}); ご存知のとおり、ウィンドウの読み込みを待つのは非常に面倒です。場合によっては、最初に画像をロードする必要がありますが、ほとんどの場合は、ハイパーテキスト マークアップ (HTML) を参照するだけで済みます。この問題は、ドキュメント上に用意された非常に特別なイベントを作成することで解決されます。使用方法は次のとおりです。 $(document).ready(function() {// HTML の準備ができたらこの処理を実行します}); このコードは document 要素の jQuery オブジェクトを作成し、HTML DOM の作成時にそれを呼び出します。ドキュメントは準備完了です。また、この関数は無制限に呼び出すことができます。
真の jQuery スタイルのコーディングでは、この関数の簡略形式もあり、単に関数を $() 関数に渡します。
$(function() {// HTML のダウンロードが完了したらこれを実行します}); これまで、$() 関数を使用する 3 つの異なる方法を説明しました。4 番目の方法は、文字列を使用して要素を作成する方法です。結果は、この要素を含む jQuery オブジェクトです。リスト 3 は、ページに段落を追加する例を示しています。
リスト 3. 単純な段落
$('<p></p>') を作成して追加します。 !').css('background', ' yellow').appendTo("body"); 上記の例からわかるように、jQuery のもう 1 つの非常に強力な機能は、メソッド チェーン (メソッド チェーン) です。これは、jQuery オブジェクトで複数のメソッドを呼び出す必要がある場合に、次のように CSS セレクターを記述する必要がないことを意味します。
$('#message').css('background', ' yellow').html('Hello!').show();3.jQuery を使用すると、Ajax はこれ以上に単純になります。には、単純なものを非常に単純にし、複雑なものを可能な限り単純にする一連の関数があります。Ajax の一般的な使用法は、ページ上の特定の領域に HTML コードをロードすることです。これを行うには、単に を選択します。 $('#stats').load('stats.html'); 通常、いくつかのパラメータをサーバーに渡す必要があります。ご想像のとおり、jQuery の使用は非常に簡単です。もちろん、必要に応じて $.post() または $.get() を使用できます。オプションのデータ オブジェクトとコールバック関数。リスト 4 は、データの送信とコールバック関数の使用の簡単な例です。
リスト 4. Ajax を使用したページへのデータの送信
$.post('save.cgi', {text: 'my string' ,number: 23}, function() {alert('データは保存されました。');}); どうしても複雑な Ajax コードが必要な場合は、 $.ajax() 関数を使用してデータ型を指定できます。 XML、HTML、スクリプト、または json を使用すると、jQuery が自動的に結果を準備し、コールバック関数がそのデータをすぐに使用できるようにすることもできます。また、beforeSend、error、success、および complete コールバック関数を設定して、ユーザーに ajax に関するヒントを提供することもできます。さらに、Ajax リクエストのタイムアウトや、ページの「最終変更」ステータスを設定できるパラメーターがいくつかあります。リスト 5 は、XML ドキュメントを取得し、上で説明した簡単な方法を使用する例を示しています。いくつかのパラメーターの例:
リスト 5. $.ajax() で複雑な Ajax を簡素化
$.ajax({url: 'document.xml',type: 'GET',dataType: 'xml',timeout: 1000, error: function (){alert('XML ドキュメントの読み込みエラー');},success: function(xml){// xml で何かを行う}}); XML フィードバックを正常に取得できたら、jQuery を使用して XML ドキュメントを走査できます。
HTML の場合と同様に、XML ファイルを操作してコンテンツをページに統合することが非常に簡単になります。リスト 6
は、ページ上の XML ドキュメント内の各 <item> に従って、成功関数を拡張します。
. jQuery を使用した XML の操作
成功: function(xml){$(xml).find('item').each(function(){var item_text = $(this).text();$('<li>< /li>').html(item_text).appendTo('ol');});}