この記事では、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 を使用しない DOM スクリプト
var external_links = document.getElementById('external_links');<br>var links = external_links.getElementsByTagName('a');<br>for (var i=0;i < links.length;i++) {<BR> var link = links.item(i);<BR> link.onclick = function() {<BR> return confirm('You are going to visit: ' + this.href);<BR> };<BR>}<br><br>如果使用jQuery的话实现如下：<br><br><STRONG>Listing 2. DOM scripting with jQuery</STRONG><br><br>$('#external_links a').click(function() {<BR> return confirm('You are going to visit: ' + this.href);<BR>});<br><br><BR>很惊讶，是吧？使用jQuery的话，你可以很快找到关键点，并且只需要表达你需要表达的，<BR>而不需要罗里罗嗦。不需要对这些元素进行循环，click()函数可以处理好这一切。而且你不要谢太多的操作DOM的代码，<BR>你需要的仅仅是使用很少的字符定义你要找的那个元素。<br><br>来看一下这段代码是如何工作的，有点小技巧。首先，看到$()函数--jQuery里最有用的最强大的函数.大部分情况下,<BR>你使用这个函数从文档中选择元素.在这个例子中,使用这个函数传递带有一些级联样式表(Cascading Style Sheets,CSS)<BR>语法的字符串,jQuery可以很方便的找到这个元素.<br><br>如果你懂一点基本的CSS选择符的只是,我想这个语法应该看起来相当熟悉.在Listing2中,<CODE>#external_links用来寻找带有id为</CODE><CODE><BR>external_links的元素.接下来的空格表示jQuery要找到在</CODE><CODE>#external_links元素内的所有的<a>元素.用口语开表达的话有点费劲--<br>用DOM脚本来写也挺麻烦,不过,在CSS里,没有比这个更简单的了.$() 関数は、CSS セレクターに一致するすべての要素を含む jQuery オブジェクトを返します。jQuery オブジェクトの概念は配列に似ていますが、たとえば、Bind に対して click 関数を呼び出すことができます。 jQuery オブジェクトの各要素にクリック イベントを追加します。
要素または要素の配列を $() 関数に渡すこともできます。これにより、すべての要素が jQuery オブジェクトにパッケージ化されます。たとえば、この関数を使用して、次のようなイベントをロードできます:
window.onload = function() {<br> // do this stuff when the page is done loading<br>};jQuery を使用する場合は、次のように記述できます:
$(window).load(function() {<br> // run this when the whole page has been downloaded<br>});<br><br>如你所知,等待一个窗口的加载是异常痛苦的,因为必须加载整个页面,包括页面上所有的图片. 某些情况下,你需要首先加载图片,<br>但是大部分时候,你可能只需要看到一下超文本的标记(HTML).jQuery通过在文档上创建一个很特殊的事件ready来解决这个问题,<br>使用方法如下:<br><br>$(document).ready(function() {<br> // do this stuff when the HTML is all ready<br>});<br>このコードは、ドキュメント要素の jQuery オブジェクトを作成し、HTML DOM ドキュメントの準備ができたらこのインスタンスを呼び出します。また、
真の jQuery スタイル コードでは、これを無制限に呼び出すことができます。 function 関数を $() 関数に渡すだけの省略形もあります:
$(function() {<br> // run this when the HTML is done downloading<br>});これまで、$() 関数を使用する 3 つの異なる方法を説明しました。4 番目の方法では、この要素を含む jQuery オブジェクトが作成されます。ページに段落を追加する手順:
リスト 3. 単純な段落の作成と追加
<br>$('<p></p>')<br> .html('Hey World!')<br> .css('background', 'yellow')<br> .appendTo("body");<br>上記の例からわかるように、jQuery にはメソッド チェーン (メソッド チェーン) と呼ばれる非常に強力な機能もあります。jQuery オブジェクトを変更するたびに、メソッドが呼び出されます。これは、jQuery オブジェクトで複数のメソッドを呼び出す必要がある場合、CSS セレクターを繰り返し記述する必要がないことを意味します。
$('#message').css('background', 'yellow').html('Hello!').show();<br><br><strong>3.jQuery让Ajax变得异常简单</strong><br><br>使用jQuery,Ajax恐怕不能变得再简单了. jQuery有一系列的函数,可以使简单的事情变得真正简单,让复杂的事情也能变得尽可能<br>的简单.<br><br>Ajax的一个一般用法就是加载一段html代码到页面上的某一区域. 要实现这个,你只要简单的选中这个元素,然后使用load()函数.<br>下面是个例子,用来更新一些统计信息.<br><br>$('#stats').load('stats.html');通常、サーバー側のページにいくつかのパラメーターを渡す必要があるかもしれませんが、jQuery を使用するのは非常に簡単です。$.post() または $.get() を使用することができます。もちろん、必要に応じて、オプションのデータ オブジェクトとコールバック関数を渡すことができます。リスト 4 は、データの送信とコールバック関数の使用の簡単な例です。
リスト 4。 Ajax を使用してページにデータを送信する
<br>$.post('save.cgi', {<br> text: 'my string',<br> number: 23<br>}, function() {<br> alert('Your data has been saved.');<br>});<br>本当に複雑な Ajax コードが必要な場合は、$.ajax() 関数を使用するだけです。データ型を xml、html、script、または json として指定すると、jQuery が自動的に結果を準備します。このデータをすぐに使用することもできます。また、<font face="新宋体">beforeSend</font>、<font face="新宋体">error</font>、<font face="新宋体">success</font>、<font face="新宋体">complete</font> コールバック関数を設定して、Ajax エクスペリエンスに関する詳細な情報をユーザーに提供することもできます。 Ajax リクエストのタイムアウト、またはページの「最終変更」ステータスを設定するための XML ドキュメントを取得し、上で説明したいくつかのパラメーターを使用する簡単な例をリスト 5 に示します。複雑な Ajax を $.ajax()
で簡素化
XML フィードバックを正常に取得したら、HTML の場合と同じように、jQuery を使用して XML ドキュメントを走査することができます。これにより、XML ファイルの操作とコンテンツのページへの統合が非常に簡単になります。成功関数は次のとおりです。
<br>$.ajax({<br> url: 'document.xml',<br> type: 'GET',<br> dataType: 'xml',<br> timeout: 1000,<br> error: function(){<br> alert('Error loading XML document');<br> },<br> success: function(xml){<br> // do something with xml<br> }<br>});<br>リスト 6. jQuery を使用した XML の操作
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
