简介
自我发表了有关 jQuery JavaScript 库的第一个系列文章（参见 参考资料）的这六个月来，在 jQuery 领域发生了很多事情。对我们这些 jQuery 的信徒而言，最令人激动的莫过于 Microsoft® 已经选择在其 Visual Studio 套件中使用 jQuery，并已经决定将 jQuery 作为目前该套件所包含的惟一的 JavaScript 库。这显示了对 jQuery 的极大支持，帮助巩固了 jQuery 作为适用于 Web 应用程序的领先 JavaScript 库的地位。jQuery 受欢迎程度不断攀升的另一个有力说明是更新后的 Google Trends 图。我在之前的一篇文章中介绍过该图表，它展示了 jQuery 已经开始渐渐地从备用的这些 JavaScript 库中脱离出来。而六个月后，这种脱离更为明显，这一点从图 1 和图 2（忽略了 12 份类似股票市场的下跌）所示的这两个更新后的 Google 趋势图中可以看出。
图 1. 2008 年 6 月常用 JavaScript 库的 Google 趋势图
图 2. 2009 年 1 月常用 JavaScript 库的 Google 趋势图
在这个由五篇文章组成的系列文章中，我将更进一步，讨论在使用 jQuery 中涉及到的一些属于中等级别的主题。该系列涵盖的主题包括插件及插件的开发、jQuery UI 程序包、创建 jQuery 小部件的一些较高深的主题、更先进的 Asynchronous JavaScript + XML (Ajax) 技术，最后，还会对比 JavaScript 及其他库来介绍 jQuery 的性能。
本系列中的第一篇文章将讨论 jQuery 中所使用的插件结构。插件是 jQuery 比其他 JavaScript 库发展速度更快的最主要原因。由于插件广受第三方开发人员忠爱，到目前为止，已经有上百个插件被开发出来，极大地丰富了 jQuery 功能。插件，从名字的字面意义不难看出，就是为了扩展 jQuery 的核心下载所固有的功能而 “插入” 到 jQuery 的小部件或代码模块。插件社区已经开发出了上百个插件，这没有丝毫的夸大。无论您的 Web 站点遇到了什么问题，无论您（或您的客户）需要何种小部件，您都有可能在 jQuery 插件库中到解决的办法。而且，插件库内所有的插件都是可免费下载并能在您自已的 Web 站点上使用的。
插件并不只限于用户界面小部件，此外还包括对 jQuery 语法的扩展、额外的 Ajax 函数以及人们改进其开发过程所需要的其他一些创新。更酷的是人们已经将几个内置的 JavaScrip
t 特性（例如，线程特性 setTimeout() prototype名词解释及 setInterval()）转换成了 jQuery 语法。这就为开发人员提供了一个纯 jQuery 的开发环境，使处理与维护都更为轻松。
插件
jQuery 插件结构有很多优点。首先，它让您能够只使用 jQuery 核心以外的那些想要使用的小部件及函数。这在 Web 应用程序中非常重要，因为每附加一个插件都意味着下载和流量的增加。通过允许您只使用那些希望使用的插件，您就可以更好地管理 Web 流量。其次，它使那些热情高涨的第三方开发人员可以创建自已感兴趣的小部件并通过创建他们自已的插件来改进 jQuery 函数，而不必尝试通过 jQuery 核心代码来实现其想法。这使得 jQuery 的使用者能用集体的创造力和创造热情来扩展这个库，这样一来，新想法和新小部件的增长潜力几乎是无限的。这一点与封闭式的结构完全相反，后者需要 jQuery 团队审查和批准每个插件，这无疑会导致创建瓶颈。第三，这个由 jQuery 团队创建的插件架构，无论是对创建插件还是对使用插件的开发人员而言，用起来都很方便，这也是插件能够飞速发展的重要动力。然而，除了这些优点之外，也有一个不好的方面：这些插件没有正式的测试结构。因此，虽然可以放心 jQuery 核心已经被仔细测试过，但是如若选择使用了一个
插件，也只能依靠第三方对其进行测试了。对于一个十分关键的 Web 应用程序而言，这个缺点应被予以重视。
要使用一个插件，需要将其放在您的页面上，与对任何 JavaScript 文件所做的（包括 jQuery 文件本身）无异。因此，如果需要在页面上使用一个插件，可以将其添加在 jQuery 之后，如清单 1 所示。
清单 1. 如何包含一个插件
<script src="jquery-1.2.6.min.js" type="text/javascript"></script> <script src="jquery.alphanumeric.plus.js" type="text/javascript"></script> 媒体查询法是什么<script src="jquery.blockUI.js" type="text/javascript"></script> |
本文不会对如何编写插件以及插件如何工作的细节做过多介绍。这些内容会在将来的一篇文章中介绍，在那篇文章中，您还会编写自已的新插件并将其放到实际的 jQuery 插件存储
库中。本文将着重探讨几个我比较喜欢的插件。这样做的目的不仅是为了向您展示我几乎每天都要使用的这些插件，还为了能够让您对 jQuery 插件存储库中可用的东西有一个大致的概念。我希望，借此能激发起您对插件的兴趣并自已去尝试使用它们。
teaspoon好，下面就开始介绍我所偏爱的插件。
RightClick、ExtendedClick 与 Wheel
Web 应用程序的最主要目标之一就是让用户感觉他们像是在一个桌面应用程序上工作。换句话说就是让 Web 应用程序在视觉和感觉上都做到尽可能地与桌面应用程序一样。因此，如果一个用户想要一个工具栏显示在其桌面应用程序上的某个位置，那么 Web 应用程序也应尽量把这个工具栏放在同样的位置。这样就可以方便用户从桌面应用程序转移到 Web 应用程序，Web 应用程序的成功机率也会更大。
然而，Web 应用程序中有一个与桌面应用程序不一样的地方，那就是对鼠标事件的响应。也许您会对此心怀疑问，因为您的 Web 应用程序在您单击鼠标时工作得很好。当然，在大多数情况下，很多 Web 应用程序在处理鼠标左键单击事件时都会运行良好。实际上，多数
人都习惯了只用鼠标的左键浏览 Web 站点，这时的 Web 应用程序更像是一个 Apple 应用程序，只用一个键。但所有 Windows® 应用程序都会使用两个鼠标键（有时甚至是 3 个键）。鼠标的左键用于激活命令，右键用于给出选项。我们已经习惯了这种用法，那么为什么还有这么多的 Web 应用程序忽略了鼠标右键呢。进一步说，Web 应用程序也忽略了 CTRL+单击、Shift+单击与鼠标滚轮的操作。那么在忽略了这么多鼠标操作的情况下，一个 Web 应用程序如何能真正地仿效桌面应用程序呢？一个真正的 Web 应用程序应该充分利用鼠标的功用。
要想弄清忽略鼠标右键单击的 Web 应用程序和没有忽略这些操作的 Web 应用程序之间的差别，以及额外的鼠标键如何能增强 Web 站点的功能，我们不妨比较一下 GMail 与 Yahoo Mail。这里先对 GMail 的粉丝们说声对不起，但在我看来，Yahoo Mail 在这方面的确比 GMail 做得好。在 GMail 中，对鼠标右键单击的处理与普通 Web 页面没什么区别。因此，当右键单击 GMail 中的一个消息时，它展示给您的只是诸如 “Back”、“Inspect Element” 或 “Select All” 之类的选项。这些动作与处理消息有什么关系呢？当然，这并不是说鼠标右键在 GMail 页面中没有任何作用。但我们与 Yahoo Mail 做一下比较，看看它是如何处理鼠标右键单击的。我们右键单击 Yahoo Mail 页面中的一个消息时，呈现给我的是包
括 “打开”、“打印”、“回复” 和 “删除” 在内的选项。这些动作都是邮件应用程序中常用的。这些选项就让一个典型的 Web 应用程序非常类似于您在桌面上经常用到的邮件应用程序（试着右键单击 Outlook 中的一个消息，看看哪个 Web 应用程序所提供的选项更接近这些选项）。图 3 和图 4 显示了右键单击选项的区别。
图 3. Yahoo Mail 中的右键单击
图 4. GMail 中的右键单击
第一个帮助解决 Web 应用程序中鼠标单击问题的 jQuery 插件是 rightClick 插件。它既能捕捉鼠标右键单击，同时还能捕捉鼠标右键按下与松开。它还有一个功用就是让您能够关闭特定于浏览器的右键单击上下文菜单。显示在 FireFox（图 4）中的右键单击菜单在您选择将其关闭后就不会再出现了，这就让您能创建符合自已习惯的右键单击菜单而同时还不会与浏览器的默认行为发生冲突。
清单 2. rightClick 插件
// set up the div that will capture our events <div id=rightClickSample></div> // when the right mouse is clicked on this div, increase the width // by 10 pixels. Also, do not show the browser-specific pop-up // menu // This, of course, should be in the $(document).ready function $("#rightClickSample").rightClick(function(e){ $(this).width($(this).width()+10); }); $("#rightClickSample").noContext(); |
现在，让我们来看看能扩展 Web 应用程序中的鼠标功能的另外一个插件。这个插件具有捕捉 Ctrl、Alt 和 Shift 键的能力。一些应用程序（例如 Adobe Photoshop）经常会用到这些
键，所以有些人更愿意在使用鼠标时也能使用这些键。然而，借助 jQuery 核心代码来使用这些键非常困难，并且会增加额外的编码负担。为什么不使用预先做好的并经过测试的插件呢？
extendedClick 插件提供了代表不同帮助键组合的函数。这些函数包括 ctrlclick()、shiftclick()、altclick()、ctrlaltclick()、ctrlshiftclick()、altshiftclick() 及 ctrlaltshiftclick()。但美中不足的是，这些函数只能被关联到鼠标左键单击按钮，正如之前的右键单击示例中所展示的，忽略了鼠标的另一半不是明智之举。然而，到目前为止，还没有一个插件能将帮助键关联到右键单击，将两者相结合以及创建一个新插件的工作就留给有志之士去做了。
汉字的16进制编码转换在线>哈希表的应用发表的论文
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论