领先技术 : 探讨 jQuery 带来的丰富客户端脚本编写功能，第 1 部分

2015-10-14

领先技术

探讨 jQuery 带来的丰富客户端脚本编写功能，第 1 部分

Dino Esposito

内容

jQuery 对象
选择器
筛选器
窗体筛选器
换行集的操作
jQuery Chainability
了解您的 HTML

您知道它是。要压缩越多，您必须在 JavaScript 中编写出 Web 浏览器，的更多的功能。引入大约 1995 年将多个操作添加到 HTML 页，JavaScript 语言不明确专开发人员。它实际上被用于处理 HTML 元素、设置样式，和对用户输入做出反应。它还广泛用于客户端输入的验证和其他轻量的操作。

查看有些简单使用 JavaScript 已应用于可能会导致认为它是易于编写。但如 Ray Djajadinata 中指出"使用面向对象的技术创建高级的 Web 应用程序"月 2007 月刊中MSDN 杂志》编写好的 JavaScript 代码不是简单，但如果您理解它和，确实可以压缩它的某些而不是高级的功能。

JavaScript 的缺点之一但，是它的解释性的（不编译）语言，并因此是受到浏览器的和，解释。并非所有浏览器都相同的方式处理相同的 JavaScript 代码。但如 jQuery 的库可以使 JavaScript 代码更可预测的跨浏览器。

Microsoft 现在完全支持 jQuery 并将它与 ASP.NET 模型视图控制器 (MVC) 框架。此外，扩展已开发完全集成 jQuery Visual Studio 2008 SP 1 中的 IntelliSense。

在这个月的期，我将 CSS 选择器、函数链接，和换行的集上特别讨论 jQuery 库和焦点的主要特征。在一个未来的期我将介绍等不是使用 jQuery 处理事件和效果、浏览器端缓存和 AJAX 请求的详细主题。

jQuery 概览

jQuery 使 JavaScript 代码轻松和编写更快。在库提供了可以显著提高您的工作效率，同时减少您遇到的帮助器函数。生成的代码是易于阅读和更可靠，因为更高抽象级别隐藏了许多检查和错误处理过程。

由 John Resig，编写的库由可以从 Docs.jquery.com/Downloading_jQuery 下载一个单一的.js 文件。最新版本不 1.2.6 年春季 2008 发布。下载 site 提供库的三个版本：解压缩，打包并最小化。

未压缩的版本接近于 100KB 并且完全人类可读和注释。此版本是明确拾取以进行 perusal 和调试。

最小化的版本不将 50KB。已从源代码中删除不严格要求实现功能的所有额外字符。该代码是不切实际，如果不无法读取的人，但一切正常的计算机。

最后，打包版本只在大小，30KB，但它需要更多的初始化时间，在客户端上。jQuery 官方站点建议您考虑对于生产环境中获取最小化的版本，而不是打包后的版本。此外，您应考虑通过缆线 GZip 压缩是标准做法的并且所有的现代 Web 服务器和浏览器被处理。GZip 压缩带来了到大约 20 KB 大小。如果您使用 GZip，打包的版本将不几乎没什么用处。

在非 ASP.NET 项目中您还需要 jquery 1.2.6 vsdoc.js 中才启用 IntelliSense 和 Visual Studio 2008 修补程序（请参阅"KB958502 JScript 编辑器支持的 vsdoc.js 的 IntelliSense 文档文件"）以完全支持 jQuery IntelliSense。

在 ASP.NET，您可以使用纯 <script> 标记以链接库或您可以列出它的脚本部分，ScriptManager 控件中像下面这样：

<asp:ScriptManager id="ScriptManager1" runat="server">
    <Scripts>
        <asp:ScriptReference path="Scripts/jquery-1.2.6.min.js" />
    </Scripts>
</asp:ScriptManager>

请注意，此方法最好不要与当前版本的 ASP.NET 除非您还希望 Microsoft AJAX Library 嵌入页面。在 ASP.NET 4.0，将可以禁用从而使此方法很好的一个在 Microsoft AJAX 客户端框架文件包含。

jQuery 功能的整组可分为四个主要区域： DOM 查询和操作、效果和动画、 AJAX 和用于处理数组、筛选数据，和检测浏览器功能的核心功能。

jQuery 对象

单词"查询"库的名称中指出其。它引用页即其中 jQuery 获取其功能的 DOM 上运行查询。

在库提供强大的界面用于选择 DOM 元素，远远超出简单搜索元素，与一个给定的 ID。是例如可以轻松地选择共享给定的 CSS 类、具有特定属性，出现在树中的一个给定位置或具有其他元素的关系的所有元素。更是重要您可以添加筛选条件，并您可以链接所有这些查询功能一起，更像您可以查询在 SQL 中的数据。

jQuery 库的根是如下定义，jQuery 函数：

var jQuery = window.jQuery = window.$ = function( selector, context ) 
{
   return new jQuery.fn.init( selector, context );
};

$ 函数是 jQuery 函数的别名。当创建 jQuery 对象时，您传递选择器和一个上下文。选择器表示在查询表达式，；上下文指明要运行该查询 DOM 的部分。如果指定的上下文，则该 jQuery 函数寻找整个页面 DOM。中的 DOM 元素

jQuery 函数（以及其 $ 别名）上提供的参数执行一些操作、运行该的查询，然后返回一个新的 jQuery 对象，包含结果。在新创建的 jQuery 对象可以、反过来，将进一步查询，或筛选新语句中以及一系列语句所示。

根 jQuery 对象支持下列签名：

jQuery( expression, [context] )
jQuery( html, [ownerDocument] )
jQuery( elements )
jQuery( callback )

第一个将 CSS 选择器，并返回一个换行的数组的 HTML 元素，所谓的换行集。第二个接受 HTML 字符串，以创建相关的子树，并将其追加到所指定的所有者文档，如果有。第三个重载选取指定的 DOM 元素或元素。最后，第四个只接受一个回调函数，并为网页的文档被完全加载运行该在整个的文档。

此外，根 jQuery 对象还提供几个的帮助器方法 图 1 中列出。开发人员的特定兴趣的是每个方法，您可以使用作为一种简写形式为手动的迭代对 jQuery 对象的内容通常通过 CSS 选择器选中 DOM 元素。下面是显示在每个方法中的代码段。循环处理窗体中的所有 <input> 的标记：

$("form input").each(
    function(i) {
            this.title = "Input #" + i;    
}
);

图 1 的边缘服务器角色，和反向代理 OCS 2007

方法	说明
每个 (回）	循环对换行集的内容，并执行指定的回调函数。
长度	属性，该属性在换行集中返回的元素数。
eq （位置）	减少换行的集中到单个元素指定的位置。
get()	作为一个 DOM 元素的数组中返回换行集的内容。
获取 (index)	返回指定的位置换行的集合中的 DOM 元素。
索引 (元素)	如果有，请在指定的 DOM 元素的换行集中返回基于 0 的索引。

each () 和一个手动的 JavaScript 循环，区别在于该 each() 将自动映射到处理集合中元素的"this"对象。在回调函数但是，接收一个可选的整数参数，它是迭代的 (0-基于) 索引。让我们了解 jQuery 选择器和其基于 CSS 的语法。

下面是最简单使用 $ 函数：

var elem = $("#grid");

在代码段 $ 函数检索其 ID 属性与指定的表达式的匹配的所有 DOM 元素。在 # symbol 不属于该 ID 字符串但前缀为使 $ 函数区分 ID 字符串、 CSS 类和 HTML 标记名称。（在 # symbol 是标准的 CSS 语法 ID 选择的一部分。在前面的代码段的功能与以下的 DOM 语句：

var elem = document.getElementById("grid");

值得注意在 HTML DOM 中与不同 ASP.NET 中, 多个元素可以共享相同的 ID。如果一个元素的数组匹配 ID，然后方法 getElementById 将仅返回第一个匹配元素； getElementsByName，另一方面，将返回整个集合。

传统的 DOM 方法和 $ 函数之间相似性有结束； $ 的强大功能远远超过。通过 $ 中,，您选择 DOM 元素，然后应用到每个的函数。

选择器表达式由 CSS 3.0 语法，并且可以到达复杂性的重要程度。 图 2 显示了受支持的选择器。此列表不会包括我将稍后讨论的筛选器。它是注意选择器、上级、在的父层次结构中的键，或者前一个元素可以是任何有效的选择器不只是 HTML 元素。 图 3 显示了几个示例查询。

图 2 支持 jQuery 选择器

选择器	说明
#id	如果有带有匹配的 ID 属性 DOM 中将返回第一个元素。
元素	返回具有匹配的标记名称的所有元素。
.class	返回具有匹配的 CSS 类的所有元素。
*	返回页中的所有元素。
selector1，\| selectorN	应用所有给定基本的选择器，并返回组合的结果。
上级后代	给定的上级选择器，将返回匹配后代选择器的所有后代的元素的集合。是例如"div p"将返回一个 <div> 中的所有 <p> 元素。
父 > 子	给定一个的选择器返回匹配子选择器的所有子元素的集合。
上一 + 下一个	给定一个的选择器返回匹配下一个选取器，并位于上一选择器旁边的所有同级元素的集合。
上一 ~ 同级	给定一个的选择器返回匹配同级选取器，并遵循上一选择器的所有同级元素的集合。

图 3 示例 jQuery 操作中的选择器

示例选择器	效果
窗体输入	返回页中的任何 <form> 标记中的所有输入的字段。
#Form1 输入	返回标记为 Form 1 窗体中的所有输入的字段。
h2 + p	同一个父的子级时返回一个 <h2> 旁边的所有 <p> 标记。
input.textBox	返回的 CSS 类是"textBox"的所有 <input> 的标记。
div span.myClass	返回所有 <span> 标记的 CSS 类是"myClass"位于一个 <div>。

选择器可以被进一步完善通过属性、内容、位置和可见性上应用筛选器。 图 4 列出了一些 jQuery 中最常用的筛选器。完整的引用位于 Docs.jquery.com/selectors。

如第一个和最后一个查找筛选返回的集合中的给定位置处的 DOM 元素。可以使用筛选器元素的索引基于语法，使用 eq、 > 和 lt 筛选器。筛选器 eq 选取其索引匹配在给定的索引的元素，而 > 和 lt 选取大于，或小于，给定索引的元素。

属性筛选器是选择 HTML 元素的强大工具（其中将一个给定的属性是在给定关系具有值。 图 4 中, 我将只列出最常用的属性筛选器。其他筛选器有选择一个给定的属性的开始位置的元素与，结束与，或包含给定的值。下面是所需的语法：

[attribute^=value]  // begins with value
[attribute$=value]  // ends with value
[attribute*=value]  // contains value

图 4 jQuery 筛选器

位置的筛选器	说明
:first	返回所选集合的元素的第一个元素。
：最后一个	返回所选集合的元素的最后一个元素。
： not(selector)	筛选出匹配指定的选择器的所有元素。
：即使	返回所选集合中的所有甚至元素。
：奇数页	返回所选集合中的所有付息日不固定的元素。
子筛选器	说明
： nth-child(expr)	返回所有子任何的元素父与给定的表达式匹配。该表达式可以是索引或数学序列（对于示例、 3n + 1)，包括标准将 sequences 如奇数页，并甚至。
：第一个：子	返回其父级的第一个子的所有元素。
：最后一个子	返回其父项的最后一个子的所有元素。
：仅-子	返回其父级的唯一子的所有元素。
内容筛选器	说明
： contains(text)	返回包含指定的文本的所有元素。
：空	返回与无子级的所有元素。 (文本被视为一个子节点）。
： has(selector)	返回包含与给定的选择器的至少一个元素的所有元素。
：父	返回具有至少一个子的所有元素。 (文本被视为一个子节点）。
可见性筛选器	说明
：隐藏	从视图中返回当前隐藏的所有元素。 "hidden"类型的 input 的元素被添加到列表。
：可见	返回当前可见的所有元素。
属性筛选器	说明
[attribute]	返回具有指定的属性的所有元素。
[属性 = 值]	返回指定的属性设置为指定的值的所有元素。
[属性! = value]	返回其指定的属性（如果存在）的值不同于给定的所有元素。

属性筛选器可以还链接通过只将两个或多个它们端的端像下面这样：

[align=right][valign=top]

特别是强大筛选器是第 n 个子。它支持多种不同的输入表达式，如下所示：

:nth-child(index)
:nth-child(even)
:nth-child(odd)
:nth-child(sequence)

在第一种格式中 n 指向提供索引的源选取器选择 HTML 元素的第 n 个子。如果您指定奇数或偶数筛选器，将返回位于任何奇数或偶数位置 (0-基于) 的所有元素。最后，可以传递第 n 个子与数学序列如 3n 以指示 3 的倍数的根表达式。

例如，下面选择器选取表（标记为 DataGrid 1）中由序列 3n + 1、（1、 4、 7 和等，) 的位置上的所有行记住它从零开始的索引：

#DataGrid1 tr:nth-child(3n+1)

下一个被一个更复杂的表达式，并且它演示不可思议的功能和灵活性 jQuery 选择器：

#DataGrid1 tr:nth-child(3n+1):has(td[align=right]) td:odd

它如下：在上一步选择的所有表行的（位置 1、 4、 7，等），现在您只采取这些单元格（<td> 标记）属性的对齐等于的"权限"的值。此外，剩余的行您只需要具有奇数页的索引的列上单元格。让我们考虑 图 5 中的 HTML 表。 图 6 中, 具有黄色背景单元格都是查询的结果。

图 5 一个 HTML 表

<table id="DataGrid1" border="1">
    <tr>
       <td>Column1</td>
       <td>Column2</td></tr>
    <tr>
       <td>Val1</td>
       <td align="right">Num1</td></tr>
    <tr>
       <td>Val2</td>
       <td align="right">Num2</td></tr>
    <tr>
       <td>Val3</td>
       <td align="right">Num3</td></tr>
    <tr>
       <td>Val4</td>
       <td>Num4</td></tr>
    <tr>
       <td>Val5</td>
       <td>Num5</td></tr>
    <tr>
       <td>Val6</td>
       <td>Num6</td></tr>
    <tr>
       <td>Val7</td>
       <td>Num7</td></tr>
</table>

图 6 选择表上的某些单元格

窗体筛选器

已提到，jQuery 选择器的总体语法是接近于 CSS 3.0 选择器，使用一些额外的伪元素（如中列出的那些只是扩展的语法图 7 .

该：输入的筛选器特别，指向所有逻辑 input 元素可能会发现在页上，并且不限于 <input> 标记。实际上，它包括 <textarea> 元素和用于显示 listboxes 和下拉列表的 <select> 元素。 图 7 中的选择器不匹配 CSS 选择器，但提供方便快捷方式选取同类的元素（如给定类型的所有输入的标记。作为示例选择器：文本的功能与以下：

form input[type=text]

图 7 窗体筛选器

选择器	说明
：输入	返回在收集包括 textarea 和下拉列表的输入的数据的角色的所有元素。
：文本	返回所有输入的元素的 type 属性是文本。
：密码	返回所有输入的元素的 type 属性是密码。
：复选框	返回所有输入的元素的 type 属性是复选框。
：广播	返回所有输入的元素的 type 属性是单选。
：提交	返回所有其类型属性的 input 的元素提交。
：重置	返回所有输入的元素的 type 属性被重置。
：图像	返回所有输入的元素的 type 属性是图像。
：按钮	返回所有输入的元素的 type 属性为按钮。
：文件	返回所有输入的元素的 type 属性是文件。
：隐藏	返回所有输入的元素的 type 属性隐藏。
：启用	返回当前启用的所有输入的元素。
：禁用	返回当前被禁用的所有输入的元素。
：检查	返回当前签的所有复选框或单选元素。
：选择	返回当前选定的所有列表元素。

其他好的助手可用来获取所启用或禁用的页面中的所有输入的元素和所有复选框和单选按钮检查以及列出当前选定的项目。

换行集的操作

HTML 元素选择器将返回的符合打包 jQuery 对象的一个新实例中。此对象包含所有的 DOM 引用一个 JavaScript 数组。结果通常称为一换行。即使已发现没有匹配的元素，换行的集是永远不会为空。您可以通过如下所示参照 jQuery 对象的长度属性检查这种情况下：

// All TDs with a child IMG
var w_set = new jQuery("#DataGrid1 td:has(img))");
if (w_set.length == 0)
    alert("No match found.");
else
    alert(w_set.length)

显示 jQuery 的灵活性的高级别不将，一强大功能但然后后您要查找的所有元素您需要处理它们。最简单的可能方法需要设置一个循环，并集合，如下中每个项上运行功能：

var ws = $("#DataGrid1 tr:nth-child(3n+1)");
for(i = 0; i<ws.length; i++)
{
   processElement(ws[i]);
}
function processElement(elem)
{
   ...
}

这在手动迭代中, 您 DOM 元素直接访问，传统的 JavaScript 编程中一样。

jQuery 库提供了几个与手动迭代的备用路由。很好地，足够，jQuery 迭代导致更紧凑的且更可读性好的代码。第一种方法基于每个函数。

提到，jQuery 中每个函数执行用户定义回调与换行集相关联的任何元素。非常大量操作的方法但，存在，使得甚至更快并更加轻松地执行换行集上的常见操作。是例如可以使用 css 函数应用于换行集的 CSS 样式。以下是在窗体中设置的所有输入元素的背景颜色和边框样式的示例：

$("form input").css(
   {'background-color' : 'yellow', 
    'border-style' : 'dashed'}
);

不可否认，此简短的示例是有点误导性可能会提示该 jQuery 应该用于 CSS 本身不会和操作。 css 功能对它适用于动态应用的样式取决于用户交互或某些其他运行的时条件十分强大。

同样，您可以添加、删除和甚至切换换行的集合中元素的 CSS 类。您执行此操作通过 addClass、 removeClass 和 toggleClass 函数。该属性函数允许在所有元素中设置一个或多个属性。是例如以下是如何禁用所有输入的元素：

$("form input").attr(
   {'disabled' : 'disabled'}
);

html 函数设置标记的 HTML 内容。它在内部使用 innerHTML 属性。若要设置在内部文本标记的而，您使用文本函数传递文本设置为该参数。这是要了解 jQuery 像一个跨浏览器库的好处的好方法。属性 innerHTML 可视为 de 事实标准属性受所有浏览器相同的方式。

不能是类似属性只能设置文本的说相同。此属性是在 Internet Explorer 中的 innerText 和 textelement Firefox 中。 jQuery 文本函数将隐藏的差异，并在所有浏览器中提供相同的功能。

jQuery Chainability

jQuery 的最佳功能之一是它 chainability 为可能的因为 jQuery 对象本身，以及大多数函数和筛选器，返回 jQuery 对象。为修改此函数本身，返回的对象将包含原始的换行的集。是例如当如果换行集应用的 css 函数，返回的 jQuery 对象便会包含以及具有一组修改 CSS 样式元素在同一个组。如果在应用筛选器，您将得到一个较小的设置为由该函数筛选。值得注意您还必须提供一个不函数来排除与指定的查询匹配的所有元素。

连接 jQuery 函数无法更容易。您要做的就是附加新函数调用返回前一次调用该 jQuery 对象。下面是一个示例：

$("form input")
.not("[type!=text]")
.css(
   {'background-color' : 'yellow', 
    'border-style' : 'dashed'})
.attr("value", "test");

以下示例表达式将选择所有输入的字段的 type 属性等于文本和将几个 CSS 样式和值属性设置为固定值。（请注意在示例，我使用 Not 函数只是，将第三个链接添加到链。结果的不条件可以集成到 $ 查询更清晰的代码所导致)

它是不说明链接产生的方法更压缩代码，但它一定不会导致更快的代码。链接是一种技术，您解决问题，作为一的名开发人员可以或不可能觉得熟悉。如果您在遇到与这些压缩表达式之一的难度要分为部分来简化调试。

最后，注意并非所有的 jQuery 方法都返回修改后的 jQuery 对象。方法 html 或文本，对于是实例只返回分别指向源的第一个元素的 HTML 或文本内容的一个字符串包装组。 jQuery 的确切语法方法请参阅 Docs.jquery.com/Main_Page。

了解您的 HTML

多浏览 jQuery 的深度，越多，您了解了解正在使用详细 HTML 的重要性。 ASP.NET 服务器控件往往会隐藏这些输出的 HTML 的结构。另一方面，服务器控件只被引入了使开发人员专注声明性属性而不是 HTML 的详细信息。年的经验证明这不是始终正确的方法。

目前，确实需要为 XHTML 保留的可访问性、样式和一致性的总控制 HTML。顺便说一下，这一事实细微之间建立链接 jQuery 和 ASP.NET MVC 框架。并且 ASP.NET MVC 框架会包含在包中最新版本的 jQuery 不重合。

也就是说，也是值得注意将逻辑来使用 jQuery 选择器的标记可能会创建逻辑与在 DOM 可能会导致难以维护应用程序的形状之间的不需要的耦合。

如果您正在寻找有关有趣的方式使用 JavaScript 的多个想法，最后，查看列表在 MSDN 上的 JavaScript 文章.

将向 Dino 您想询问的问题和提出的意见提出发送至 cutting@Microsoft.com.

Dino Esposito 是 IDesign 和 Microsoft .NET: Architecting Applications for the Enterprise (Microsoft Press 2008) 的 co-author 架构师。基于在意大利，Dino 是世界各地的业内活动中发表演讲。您可以加入在他的博客 weblogs.asp。 net / despos.

通过

其他资源