jQuery_jquery を使用して Ajax の開発と実装方法を簡素化する

jQuery を使用すると、Ajax が非常に簡単になります。 jQuery は、単純なタスクを簡単にし、複雑なタスクをそれほど複雑にしないいくつかの関数を提供します。

簡単なコードの簡略化

ここでは、jQuery がコードに与える影響を示す簡単な例を示します。ページの特定の領域にあるすべてのリンクにクリック イベントを付加するなど、非常に単純で一般的なタスクを実行するには、リスト 1 に示すように、純粋な JavaScript コードと DOM スクリプトを使用して実行できます。

リスト 1: jQuery を使用しない DOM スクリプト

コードをコピーします コードは次のとおりです:

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() { 
return confirm(&#39;You are going to visit: &#39; + this.href); 
}; 
}

リスト 2 は、jQuery を使用して実装された同じ機能を示しています。
リスト 2. jQuery を使用した DOM スクリプト

コードをコピー コードは次のとおりです。

$('#external_links a').click(function() { 
return confirm('You are going to visit: ' + this.href); 
});

すごくないですか？ jQuery を使用すると、問題の要点を把握し、必要な機能だけをコードに実現させることができ、面倒な処理を省略できます。要素をループする必要はなく、 click() 関数がこれを行います。また、複数の DOM スクリプト呼び出しを行う必要もありません。短い文字列を使用して必要な要素を定義するだけです。
このコードがどのように機能するかを理解するのは少し複雑かもしれません。まず、jQuery で最も強力な関数である $() 関数を使用します。通常、この関数を使用してドキュメントから要素を選択します。この場合、カスケード スタイル シート (CSS) 構文を含む文字列が関数に渡され、jQuery は可能な限り効率的に要素を見つけます。
CSS セレクターの基本的な知識がある場合は、構文に精通しているはずです。リスト 2 では、#external_links を使用して ID external_links の要素を取得します。 a の後のスペースは、jQuery が external_links 要素内のすべての 3499910bf9dac5ae3c52d5ede7383485 要素を取得する必要があることを意味します。英語では、DOM スクリプトであっても非常に複雑ですが、CSS ではこれ以上に単純です。
$() 関数は、CSS セレクターに一致するすべての要素を含む jQuery オブジェクトを返します。 jQuery オブジェクトは配列に似ていますが、多数の特別な jQuery 関数が付属しています。たとえば、 click 関数を呼び出すことで、jQuery オブジェクト内のすべての要素にクリック ハンドラーを割り当てることができます。
要素または要素の配列を $() 関数に渡すこともできます。これにより、これらの要素が jQuery オブジェクトにカプセル化されます。この機能を使用して、jQuery 関数をウィンドウ オブジェクトなどの一部のオブジェクトに適用することができます。たとえば、通常は次のように関数を読み込みイベントに割り当てます。

コードをコピーします コードは次のとおりです:

window.onload = function() { 
// do this stuff when the page is done loading 
};

jQuery を使用して作成 同じ機能のコード:

コードをコピー コードは次のとおりです:

$(window).load(function() { // run this when the whole page has been downloaded });

経験があるかもしれませんが、ウィンドウの読み込みを待機するプロセスは非常に遅く、ページ上のすべての画像を含むページ全体が読み込まれるまで待たなければならないため、苦痛です。最初に画像の読み込みを完了したい場合もありますが、ほとんどの場合はハイパーテキスト マークアップ言語 (HTML) を読み込むだけです。 jQuery は、次のようにドキュメント内に特別な Ready イベントを作成することでこの問題を解決します。

コードをコピー コードは次のとおりです:

$(document).ready(function() { 
// do this stuff when the HTML is all ready 
});

このコードは、ドキュメント要素の周囲に jQuery オブジェクトを作成し、HTML DOM ドキュメントの準備ができたときにインスタンスを呼び出す関数を設定します。この関数は必要に応じて何度でも呼び出すことができます。そして、真の jQuery 形式のショートカットを使用してこの関数を呼び出すことができます。それは簡単です。 $() 関数に関数を渡すだけです:

コードをコピーします コードは次のとおりです:

$(function() { 
// run this when the HTML is done downloading 
});

ここまで、$() 関数の 3 つの使い方を紹介しました。 4 番目のメソッドでは、文字列を使用して要素を作成できます。結果は、要素を含む jQuery オブジェクトです。リスト 3 は、ページに段落を追加する例を示しています。
リスト 3. 単純な段落の作成と追加

コードをコピーします コードは次のとおりです。

$(&#39;<p></p>&#39;) 
.html(&#39;Hey World!&#39;) 
.css(&#39;background&#39;, &#39;yellow&#39;) 
.appendTo("body");

前の例でお気づきかと思いますが、jQuery のもう 1 つの強力な機能はメソッド チェーンです。 jQuery オブジェクトでメソッドが呼び出されるたびに、メソッドは同じ jQuery オブジェクトを返します。これは、jQuery オブジェクトで複数のメソッドを呼び出す必要がある場合に、そのためにセレクターを再入力する必要がないことを意味します。 Ajax Made Easy

コードをコピー コードは次のとおりです:

$('#message').css('background', 'yellow').html('Hello!').show();

使用 jQuery 将使 Ajax 变得及其简单。jQuery 提供有一些函数，可以使简单的工作变得更加简单，复杂的工作变得不再复杂。
Ajax 最常见的用法就是把一块 HTML 代码加载到页面的某个区域中去。为此，只需简单地选择所需的元素，然后使用 load() 函数即可。下面是一个用于更新统计信息的示例：

复制代码 代码如下:

$('#stats').load('stats.html');

通常，我们只需简单地把一些参数传递给服务器中的某个页面。正如您所预料的，使用 jQuery 实现这一操作非常地简单。您可以使用 $.post() 或者 $.get()，这由所需的方法决定。如果需要的话，您还可以传递一个可选的数据对象和回调函数。清单 4 显示了一个发送数据和使用回调的简单示例。
清单 4. 使用 Ajax 向页面发送数据

复制代码 代码如下:

$.post('save.cgi', { 
text: 'my string', 
number: 23 
}, function() { 
alert('Your data has been saved.'); 
});

如果您确实需要编写一些复杂的 Ajax 脚本，那么需要用到 $.ajax() 函数。您可以指定 xml、script、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('Error loading XML document'); 
}, 
success: function(xml){ 
// do something with xml 
} 
});

当 success 回调函数返回 XML 文档后，您可以使用 jQuery 检索这个 XML 文档，其方式与检索 HTML 文档是一样的。这样使得处理 XML 文档变得相当地容易，并且把内容和数据集成到了您的 Web 站点里面。清单 6 显示了 success 函数的一个扩展，它为 XML 中的每个 5083cbefc9e5095dae6431462e2af988 元素都添加了一个列表项到 Web 页面中。
清单 6. 使用 jQuery 处理 XML 文档

复制代码 代码如下:

success: function(xml){ 
$(xml).find('item').each(function(){ 
var item_text = $(this).text(); 
$(&#39;<li></li>&#39;) 
.html(item_text) 
.appendTo(&#39;ol&#39;); 
}); 
}

为 HTML 添加动画
可以使用 jQuery 处理基本的动画和显示效果。animate() 函数是动画代码的核心，它用于更改任何随时间变化的数值型的 CSS 样式值。比方说，您可以变化高度、宽度、不透明度和位置。还可以指定动画的速度，定为毫秒或者预定义的速度：慢速，中速或快速。
下面是一个同时变化某个元素高度和宽度的示例。请注意，这些参数没有开始值，只有最终值。开始值取自元素的当前尺寸。同时我也附加了一个回调函数。

复制代码 代码如下:

$('#grow').animate({ height: 500, width: 500 }, "slow", function(){ 
alert('The element is done growing!'); 
});

jQuery 的内置函数使更多常见的动画更容易完成。可以使用 show() 和 hide() 元素，立即显示或者以特定的速度显示。还可以通过使用 fadeIn() 和 fadeOut()，或者 slideDown() 和 slideUp() 显示和隐藏元素，这取决于您所需要的显示效果。下面的示例定义了一个下滑的导航菜单。

复制代码 代码如下:

$('#nav').slideDown('slow');

DOM 脚本和事件处理
或许 jQuery 最擅长的就是简化 DOM 脚本和事件处理。遍历和处理 DOM 非常简单，同时附加、移除和调用事件也十分容易，且不像手动操作那样容易出错。
从本质上说，jQuery 可以使 DOM 脚本中的常用操作变得更加容易。您可以创建元素并且使用 append() 函数把它们与其它的一些元素链接到一起，使用 clone() 复制元素，使用 html() 设置内容，使用 empty() 函数删除内容，使用 remove() 函数删除所有的元素，即便是使用 wrap() 函数，用其他元素将这些元素包装起来。
通过遍历 DOM，一些函数可以用于更改 jQuery 对象本身的内容。可以获得元素所有的 siblings()、parents() 和 children()。还可以选择 next() 和 prev() 兄弟元素。find() 函数或许是功能最强大的函数，它允许使用 jQuery 选择器搜索 jQuery 对象中元素的后代元素。
如果结合使用 end() 函数，那么这些函数将变得更加强大。这个函数的功能类似于 undo 函数，用于返回到调用 find() 或 parents() 函数（或者其它遍历函数）之前的 jQuery 对象。
如果配合方法链接（method chaining）一起使用，这些函数可以使复杂的操作看上去非常简单。清单 7 显示了一个示例，其中包含有一个登录表单并处理了一些与之有关的元素。
清单 7. 轻松地遍历和处理 DOM

复制代码 代码如下:

$('form#login') 
// hide all the labels inside the form with the 'optional' class 
.find('label.optional').hide().end() 
// add a red border to any password fields in the form 
.find('input:password').css('border', '1px solid red').end() 
// add a submit handler to the form 
.submit(function(){ 
return confirm('Are you sure you want to submit?'); 
});

不管您是否相信，这个示例只是一行满是空白的被链接的代码。首先，选择登录表单。然后，发现其中含有可选标签，隐藏它们，并调用 end() 返回表单。然后，我创建了密码字段，将其边界变为红色，再次调用 end() 返回表单。最后，我在表单中添加了一个提交事件处理程序。其中尤为有趣的就是（除了其简洁性以外），jQuery 完全优化了所有的查询操作，确保将所有内容很好地链接在一起后，不需要对一个元素执行两次查询。
处理常见事件就像调用函数（比方说 click()、submit() 或 mouseover()）和为其传递事件处理函数一样简单。此外，还可以使用 bind('eventname', function(){}) 指定自定义的事件处理程序。可以使用 unbind('eventname') 删除某些事件或者使用 unbind() 删除所有的事件。有关这些函数的使用方法的完整列表，请参阅 参考资料 中的 jQuery 应用程序编程接口（Application Program Interface，API）文档。
释放 jQuery 选择器的强大能量
我们经常会使用 ID 来选择元素，比如 #myid，或者通过类名，比如 p.myclass 来选择元素。然而，jQuery 提供了更为复杂和完整的选择器语法，允许我们在单个选择器中选择几乎所有的元素组合。
jQuery 的选择器语法主要是基于 CSS3 和 XPath 的。对 CSS3 和 XPath 了解的越多，使用 jQuery 时就越加得心应手。有关 jQuery 选择器的完整列表，包括 CSS 和 XPath，请参阅 参考资料 中的链接。
CSS3 包含一些并不是所有浏览器都支持的语法，因此我们很少使用它。然而，我们仍然可以在 jQuery 中使用 CSS3 选择元素，因为 jQuery 具备自己的自定义选择器引擎。比方说，要在表格中的每一个空列中都添加一个横杠，可以使用：:empty 伪选择器（pseudo-selector）：

复制代码 代码如下:

$('td:empty').html('-');

如果需要找出所有不含特定类的元素呢？ CSS3 同样提供了一个语法可以完成这个目的，使用 :not 伪选择器： 如下代码显示了如何隐藏所有不含 required 类的输入内容：

复制代码 代码如下:

$('input:not(.required)').hide();

与在 CSS 中一样，可以使用逗号将多个选择器连接成一个。下面是一个同时隐藏页面上所有类型列表的简单示例：

复制代码 代码如下:

$('ul, ol, dl').hide();

XPath 是一种功能强大的语法，用于在文档中搜寻元素。它与 CSS 稍有区别，不过它能实现的功能略多于 CSS。要在所有复选框的父元素中添加一个边框，可以使用 XPath 的 /.. 语法：

复制代码 代码如下:

$("input:checkbox/..").css('border', '1px solid #777');

jQuery 中也加入了一些 CSS 和 XPath 中没有的选择器。比方说，要使一个表更具可读性，通常可以在表格的奇数行或偶数行中附加一个不同的类名 —— 也可以称作把表分段（striping）。使用 jQuery 不费吹灰之力就可以做到这点，这需要归功于 odd 伪选择器。下面这个例子使用 striped 类改变了表格中所有奇数行的背景颜色：

复制代码 代码如下:

$('table.striped > tr:odd').css('background', '#999999');

我们可以看到强大的 jQuery 选择器是如何简化代码的。不论您想处理什么样的元素，不管这个元素是具体的还是模糊的，都有可能找到一种方法使用一个 jQuery选择器对它们进行定义。

使用插件扩展 jQuery
与大多数软件不同，使用一个复杂的 API 为 jQuery 编写插件并不是非常困难。事实上，jQuery 插件非常易于编写，您甚至希望编写一些插件来使代码更加简单。下面是可以编写的最基本的 jQuery 插件：

复制代码 代码如下:

$.fn.donothing = function(){ 
return this; 
};

虽然非常简单，但是还是需要对这个插件进行一些解释。首先，如果要为每一个 jQuery 对象添加一个函数，必须把该函数指派给 $.fn。第二，这个函数必须要返回一个 this（jQuery 对象），这样才不至于打断 方法链接（method chaining）。
可以轻松地在这个示例之上构建。要编写一个更换背景颜色的插件，以替代使用 css('background')，可以使用下面的代码：

复制代码 代码如下:

$.fn.background = function(bg){ 
return this.css('background', bg); 
};

清注意，可以只从 css() 返回值，因为已经返回了 jQuery 对象。因此，方法链接（method chaining）仍然运作良好。
我建议在需要重复工作的时候使用 jQuery 插件。比方说，如果您需要使用 each() 函数反复执行相同的操作，那么可以使用一个插件来完成。
由于 jQuery 插件相当易于编写，所以有上百种可供你选择使用。jQuery 提供的插件可用于制表、圆角、滑动显示、工具提示、日期选择器，以及我们可以想到的一切效果。有关插件的完整列表，请参阅 参考资料。
最为复杂、使用最为广泛的插件要属界面（Interface），它是一种动画插件，用于处理排序、拖放功能、复杂效果、以及其它有趣和复杂的用户界面（User Interface，UI）。界面对于 jQuery 来说就如 Scriptaculous 对于 Prototype 一样。
表单插件也同样流行且非常有用，通过它可以使用 Ajax 在后台中轻松地提交表单。这个插件用于处理一些常见的情况：您需要截获某个表单的提交事件，找出所有不同的输入字段，并使用这些字段构造一个 Ajax 调用。

 以上就是用jQuery简化Ajax开发实现方法_jquery的内容，更多相关内容请关注PHP中文网（www.php.cn）！