使用jQuery将桌面应用程序引入浏览器

随着RIA的广泛使用，JavaScript库将越来越多地被用来辅助开发。RIA被定义为(松散地)通过浏览器运行的应用程序，它使用CSS/JavaScript/Ajax来创建类似桌面应用程序的外观。火狐、Internet Explorer和Safari最新版本中的新功能，以及谷歌新Chrome浏览器的最新版本，都集中在加快每个浏览器的内部JavaScript引擎，唯一的目的就是为了适应浏览器厂商为未来设计的RIA。这些公司认为未来的Web页面会包含大量的JavaScript代码，所以首先开发一个成熟的无bug的库是非常重要的。因此，随着未来Web应用朝着丰富和沉浸式界面的方向发展，Web开发人员不断寻找能够简化这些任务的工具。有好几个JavaScript库，每个库都有自己的优缺点，也有自己的支持者和反对者。在这里，我不会讨论哪个库有更好的特性，因为它对最终结果没有太大影响。最重要的是哪个库用的多——数量最重要。看看下面四个最流行的JavaScript库的谷歌趋势图。显然，在过去的6到8个月里，jQuery已经成为占主导地位的JavaScript库，而且这种趋势还在上升。1.谷歌常用JavaScript库趋势图。

就业也说明jQuery正逐渐成为大多数人选择的JavaScript库。Monster.com的一项非科学研究结果显示，与jQuery相关的帖子有113篇，而YUI、ExtJS和mootools分别为67、19和13篇。这个jQuery系列的第一篇文章从探索jQuery语法和理解如何调用它的函数开始。下一节将探讨这个库的核心功能，以及这个库如何通过使用其强大的选择器和过滤器来使DOM遍历变得更简单和清晰。下面的文章将解释CSS操作、表单控制、文本更改、Ajax简单性和动画(每个人的爱好)。jQuery最有趣的特性之一是它的插件架构，它允许许多开发人员添加新的jQuery函数。本文的最后一篇文章将介绍许多强大的插件，它们可以用来完成RIA开发过程。本系列文章面向具备JavaScript语法、CSS语法和DOM语法知识的读者。如果您需要在阅读本系列文章之前查看这些语法，我强烈推荐本文参考资料部分的W3Schools链接。基础在深入学习有趣的jQuery内容之前，首先要了解一些基础知识——如何安装jQuery，如何让它正常运行。首先从下载部分下载jQuery库，然后像其他外部JavaScript文件一样链接到该库：清单1。如何在代码中安装jQuery脚本类型=' text/JavaScript ' src=' http : jQuery . js '/脚本。因为jquery调用或操作DOM对象，如果在文档加载所有页面元素之前，使用JavaScript代码直接操作这些对象，就会遇到问题。相反，您不想在调用jQuery代码之前等待页面上的所有元素都被加载——所有图像、横幅广告、解析的代码和YouTube视频预览。您可以做出适当的妥协，在文档完全加载页面上的所有元素，但所有图像、链接和演示尚未完成之前，以安全且无错误的方式调用jQuery代码。同样，您所有的jQuery代码都必须在页面上的这个函数中，或者在它自己的函数中。如果jQuery代码不在函数中，它的代码就不能放在JavaScript代码中。清单2。如何正确调用jQuery函数//不正确的脚本语言=JavaScript $ ('div ')。addCLaSS(' a ')；/script//更正$(文档)。ready(function(){ $('div '))。addCLaSS(' a ')；});//-或-$(文档)。ready(function(){ MyAddClass()；});函数myAddClass(){ $('div ')。addCLaSS(' a ')；}此外，还有一个值得注意的点：页面上可以有任何document.ready()函数，这个函数会被依次调用。如果您正在使用模块动态构建页面，并且每个模块都有自己的jQuery支持代码(例如，一个由许多小的PHP页面片段组成的PHP页面)，这是一个很好的方法。jQuery最有趣的特性之一是“可链接性”，可以集中一系列功能，提高可读性，简化代码编写。几乎每个jQuery函数都返回一个jQuery对象，这意味着您可以通过在其上重复调用其他函数来将一个完整的jQuery命令链接在一起。我将其与Java的String类进行了比较，在后者中，几个函数返回一个String对象，这样您就可以将同一行中的多个函数链接在一起：清单3。jQuery字符串Man的可链接性=新字符串('操作')。touppercase()。子串(0，5)。to lower case()；$(“div”)。addClass('a ')。显示()。文本('操纵')；最后要记住的是，当使用jQuery或任何JavaScript库时，它们之间可能会有冲突。换句话说，当同时使用两个以上的库时，多个库将同时使用变量“$”，这意味着引擎在调用“$”时将不知道引用哪个库。这种情况的一个很好的例子是CakePHP库，它包含内置的prototype.js在这些页面上使用jQuery会导致错误。

为了解决这个问题，jQuery提供了一种将“$”变量映射到另一个变量的方法，例如：清单4。jQuery对冲突的解决方案j $=jQuery . noconflict()；j$('div ')。addCLaSS(' a ')；选择jQuery的根本在于它能够选择和操作页面上的某些元素。从某种意义上说，我们需要围绕这些对象来构建一个有效的jQuery库。因此，面对一个普通的HTML页面上提供的大量选项，你需要一种方法来快速高效地选择页面上需要使用的元素，并且只选择你需要的元素(不多也不少)。如我们所愿，jQuery提供了一些强大的选择方法来帮助我们在页面上查找和选择对象。JQuery创建了自己的选择语法，很容易掌握。(以下示例中使用的大多数函数将在下一篇文章中讨论，但是它们的功能应该很简单。).基本上，jQuery中的选择过程是一个巨大的过滤过程。页面上的每个元素都通过这个过滤器，它将返回一个匹配的对象或一个可以遍历的匹配对象数组。前三个例子是最常用的。他们通过HTML标签、标识或类来查找对象。要获取页面中所有匹配的HTML元素的数组，只需要将HTML标记(不带括号)传递给jQuery搜索字段。这是一种“快速但粗略”的寻找物体的方法。如果您想要将属性附加到常见的HTML元素，此方法非常有用。清单5。这将显示页面中的每个div标签。请注意，它将显示//every div，而不是第一个匹配项或最后一个匹配项。//遍历数组将在本文后面讨论。$(“div”)。show()；//这将为页面中的每个p标记提供红色背景。$('p ')。css('背景'，' # ff 0000 ')；ID的正确页面设置要求页面上的每个ID都是唯一的，尽管有时不是(有意或无意的)。使用ID选择时，jQuery只返回第一个匹配的元素，因为它要求您遵循正确的页面设计。如果您需要将一个标记附加到同一个页面上的几个元素，您应该选择使用CLASS标记。清单6。标识选择//这将把带有“示例文本”标识的span元素的内部html设置为“hi”。//注意命令中的首字母“#”。这是jQuery用来搜索//id的语法，必须包含在内。如果排除它，jQuery将改为搜索HTML//标签，并且在页面上没有sampleText标签的情况下，最终将做//什么都不做，导致令人沮丧和难以发现的bug(当然这在我身上从未发生过//)。$('#sampleText ')。html(' Hi ')；CLASSCLASS与ID非常相似，只是它可以用于页面上的一个或多个元素。因此，尽管同一个页面上的每个元素只有一个标识，但是同一个页面上的多个元素仍然可以有同一个类。这允许您跨页面上的多个元素执行函数，并且只需要传入一个类名。清单7。类选择//这将在页面上的每个元素上创建一个红色背景，类为//“redBack”。请注意，这个“redBack”//CLASS标记附加到哪个HTML元素并不重要。还要注意查询//术语前面的句号——这是用于查找类名的jQuery语法。$('.redBack’)。css('背景'，' # ff 0000 ')；P class=' redback '这是一个段落/pdiv class=' redback '这是一个大div/div表class=' redback' trtd样本表/TD/tr/表合并搜索条件上面三个搜索条件可以和下面所有的过滤器合并在一个搜索中。通过用“，”分隔每个搜索条件，搜索将返回一组与搜索词匹配的结果。清单8。合并搜索//这将隐藏每个p、span或div。$(“p，span，div”)。hide()；虽然这三个搜索参数无疑是jQuery中最常用的，但还有许多其他搜索参数可以帮助您快速找到页面上所需的元素。

这些过滤器以“:”开头，表示它们是jQuery搜索词中的过滤器。虽然它们也可以作为独立的搜索条件，但它们被设计为与上述三种搜索条件一起使用，以便您可以调整搜索条件来找到您需要的特定元素。清单9。更多过滤器//这将隐藏页面上的每个p标记$ ('p ')。hide()；//这将隐藏页面上的第一个元素，而不管它的HTML标记$(':first ')。hide()；//请注意如何将这些结合使用，以便对//搜索条件进行更精细的调整。这将只隐藏给定页面上的第一个p标记。$('p:first ')。hide()；您可以使用多个过滤器作为搜索元素。虽然我在这里没有列出所有的过滤器(这是API页面的任务)，但其中一些在处理页面和搜索元素时非常方便。我将重点介绍Selection包中一些非常重要的过滤器，它们是表单元素过滤器。今天丰富的互联网应用程序更加关注表单和表单中包含的元素(文本字段、按钮、复选框、单选按钮等)。).它们从服务器收集和传输信息，或者向服务器收集和传输信息。由于它们在RIA中的重要作用，这些过滤器在处理当今Web应用程序中的jQuery时非常重要。这些过滤器的工作原理与上述过滤器相同，它们也以“:”开头，表明它们是过滤器。同样，它们也可以与其他搜索过滤器一起使用，以细化搜索条件。因此，“:text”搜索筛选器将返回页面上的每个文本字段，而“. largeFont:text”搜索筛选器将只返回属于页面上“largeFont”类的文本字段。这允许进一步细化和操作表单元素。表单过滤器还包括元素的每个属性，因此开发人员了解这些知识是有益的。因此，“:checked”、“:disabled”和“:selected”等搜索过滤器将进一步细化特定搜索的搜索条件。遍历现在，您已经学习了如何搜索和过滤页面上的所有元素，然后您需要一种高效的方法来遍历结果并进一步处理元素。自然，jQuery提供了几种遍历搜索结果的方法。第一种也是最常用的遍历方法是each()函数。这与“for循环”具有相同的功能，遍历每个元素并通过迭代增加元素。此外，循环中每个元素的引用可以通过“this”(对于一般的JavaScript语法)或$(this)(对于jQuery命令)来实现。让我们看看下面的例子。清单10。每个循环//将循环通过页面上的每个p标记。注意这里//内联函数的使用——这类似于Java中的匿名类。//您可以调用一个单独的函数，或者编写一个像这样的内联函数。$('p ')。现在，在每个(函数(){ //前面添加一个段落计数。请注意我们如何使用//$(this)变量来单独引用每个段落元素。$(这个)。文本(增量“.”$(这个)。text())；增量；});因为搜索结果存储在数组中，所以您肯定希望函数遍历数组，就像处理其他编程语言中的数据对象一样。因此，要查找给定搜索结果的长度，可以调用$()。数组的长度。清单11展示了更多的数组遍历函数，这些函数可以应用于其他编程语言中的数组遍历。清单11。其他数组函数//eq()函数允许您直接引用数组中的元素。//在这种情况下，它将获得第3段(当然引用了0)并将其隐藏$ ('p ')。等式(2)。hide()；slice()函数允许您在数组中输入开始和结束索引，以//创建数组的子集。这将隐藏//页面$('p ')的第3到第5段。切片(2，5)。hide()；除了这些数组遍历函数之外，jQuery还提供了一些函数，使您能够找到嵌套在搜索词周围的元素。

为什么这很有用？例如，我们经常需要在图片旁边嵌入文本标签，或者在表单元素旁边嵌入错误消息。使用这些命令查找特定的表单元素，然后通过将表单元素放在下一个元素(span标记)中，将错误消息直接放在表单元素旁边。清单12展示了这个设计的一个例子：清单12。示例next()函数输入类型=text class=validatespan/span函数validate form(){ $(. validate 3360 text ')。每个(函数()。{ if ($(this))。val()=='') //我们将使用“validate”//类循环遍历页面上的每个textfield，如果它们是空的，我们将在之后立即将文本放入span，并显示错误消息。$(这个)。下一个()。html(“此字段不能为空”)；});}要了解如何结合上述知识，您可以查看本文中包含的示例应用程序(参见参考资料部分)。现在让我们简单介绍一下示例应用程序。我将在本系列的所有文章中使用这个示例应用程序，因为它使用了许多不同的jQuery示例，并且几乎每个人都熟悉这个应用程序——一个处理Web邮件的丰富的互联网应用程序。这个示例应用程序是一个简单的邮件客户端，它使用jQuery给用户的印象是这个电子邮件客户端非常类似于桌面应用程序。在上一篇文章的最后，您将了解这个简单的应用程序是如何为用户创造这种感觉的，以及用jQuery实现这个功能有多容易。本文的重点是“全选”/“取消全选”复选框，它们出现在网络邮件表格左栏的顶部(下面突出显示)。选中复选框时，将选中该列的每个复选框；取消选中复选框时，它将取消选中该列的所有复选框。2.“全选”复选框。

清单13.综合学到的知识！-第一步是创建全选复选框本身。我们在页面上给它一个唯一的标识-输入类型=复选框标识=全选！我们将每一行的复选框放入"可选"类，因为可以有很多行，我们希望每一行的复选框都有相同的行为。-输入类型=复选框类=可选！-最后一步是将其与一些框架代码结合在一起。- //请记住，所有框架设置代码都必须在这个document.ready()函数中，//或者包含在它自己的函数中，才能正常运行。$(文档)。就绪(函数(){ //我们使用框架选择语法在页面上找到选择全部复选框//(注意"#"表示ID)，我们告诉框架在每次有人点击复选框时调用selectAll() //函数（我们将在//未来的文章中进入事件).$('#selectall ').单击（选择全部);});//每次有人点击selectall复选框功能selectAll(){//这一行决定了选择全部复选框是否被选中attr() //函数，将在以后的文章中讨论，只是返回//给定对象的一个属性。在这种情况下，如果为真，则返回一个布尔值，如果没有选中，则返回一个未定义的//。var checked=$('#selectall ').attr('选中');//现在我们使用框架选择语法来查找页面上的所有复选框//其中添加了可选类（每行的复选框)。我们从这个选择中得到一个结果数组//,我们可以使用//每个()函数迭代它们，让我们一次处理一个结果。在//每个()函数中，我们可以使用$(这个)变量来引用每个单独的//结果。因此，在每个循环中，它会找到每个复选框的值，并将//与选择全部复选框匹配。$('.可选')。每个（函数(){ var subChecked=$(this)).attr('选中');if (subChecked！=选中)$(这个)。单击();});}结束语框架是网应用程序开发社区中非常受欢迎的Java脚本语言库，并且随着富互联网应用程序越来越普及，它将变得更加重要。由于许多公司都在线迁移内部应用程序，并且在线移动日常的桌面应用程序（包括文字处理器和电子表格),能够简化开发并实现跨平台支持的Java脚本语言库将成为设计应用程序架构的必选技术。这份关于框架的系列文章的第一篇介绍了框架语法，如何在您自己的Java脚本语言代码中正确使用jQuery，以及如何在结合使用其他库时避免冲突。此外，本文还介绍了框架搜索和选择语法，它们是其他框架功能的基础。它使您可以简单快捷地找到所需的页面元素。文章也谈到了如何遍历搜索结果，使您可以逐个地处理元素jQuery。的这两个方面是本系列下一篇文章的基础，同时也是所有框架代码的基础。最后介绍了一个演示应用程序，它是一个富客户端网邮件应用程序。在本文，您通过学到的框架知识创建了全选/取消全选复选框，并且仅需几行代码就可以创建一个在许多网站点上都非常常见的小部件。下一篇文章将把一些交互添加到这个示例网应用程序。您将学习如何处理页面事件（单击元素、按钮点击、组合框选择等),如何从页面上的元素获取值，以及如何修改页面上的标准半铸钢钢性铸铁(铸造半钢)来更改颜色，布局等，而不需重新加载页面。