jQuery包装器

为了使设计和内容分离而把CSS引入Web技术的时候，需要以某种方式从外部样式表中引用页面元素组。开发出来的方法就是通过使用选择器——基于元素的特性或元素在HTML文档中的位置，简明地表现元素。

例如，选择器 p  a

引用所有嵌套于<p>元素之内的链接（<a>元素）组，jQuery利用同样的选择器，不仅支持目前Css中使用的常见选择器，还支持尚未被大多数浏览器完全实现的更强大的选择器，前面探讨的“斑马条纹”代码中的nth—child选择器，是在CSS3中定义的、更强大的选择器的例子。

收集一组元素，可以使用如下简单的语法：

$ (selector)

或者

JQuery (selector)

也许刚开始你会觉得$符号有点奇怪，但大部分jQuery用户很快就喜欢上它的简洁。

例如，为了获取嵌套在

元素内的一组链接，我们使用如下语句；

$（“p a”）

$函数（JQuery()函数的别名）返回特别的JavaScript对象，它包含着与选择器相匹配的DOM元素的数组。该对象拥有大量预定义的有用方法，能够作用于该组元素。

用编程的话来说，这种构造称为包装器（wrapper），因为它用扩展功能来对匹配的元素进行包装。我们使用术语JQuery包装器或者包装集（wrapped set） "，来指能够在其上用jQuery定义W方法去操作的、匹配元素的集合。

假定我们想让带有CSS类notLongForThisWorld的所有＜div＞元素呈现淡出效果。jQuery语 句如下所示：

$("div.notLongForThisWorld"}.fadeOut();

经常作为jQuery命令引用的许多这类方法的显著特征是，当完成了一个操作（比如淡出操作）时，它们返回相同的一组元素，提供给下一个操作。例如，假定除了让元素呈现淡出效果之外，还想添加新的CSS类removed到每个元素。编写如下代码：

$("div.notLongForThiaWorld"),fadeOut().addClass("removed");

这些jQuery链可以无限延续。任由jQuery链无限制地延续的话，你发现包含长达几十个命令的例子并不罕见。因为每个函数都作用在与最初的选择器相匹配的全部元素之上，所以没有必要循环遍历元素数组。所有这一切，jQury已经在后台为我们完成！

即使选中的对象组被表现为非常复杂的JavaScript对象，如有必要也可以假定它是典型的元素数组。因此以下两个语句产生相同的结果：

$("#someElement"),html(*I have added some text to an element");

或者:

$("#someElement")[01.innerHTML=

"I have added some text to an element";

因为使用了ID选择器，所以只有一个元素与选择器相匹配。第一个示例使用jQuery的html（）方法，将DOM元素的内容用某些HTML标记去替换。第二个示例使用jQuery获取元素数组，用数组下标0去选择第一个元素，然后使用通常的JavaScript方式来替换该元素的内容。

如果想用能匹配多个元素的选择器来获取同样的结果，那么以下两个片段产生一致的结果：$("div.fillMeIn")

.html("I have added some text to a group of nodes");

或者

var elements=$("div.fillMeIn");

 for(i=0;i<elements.length;i++)

elements[i].innerHTML=

"I have added some text to a group of nodes";

随着事情变得愈发复杂，利用jQuery的可链接性，可以持续减少为获得你所求结果的必需代码的行数。除此之外，jQuery不仅支持你所认识和喜爱的选择器，还支持更高级的选择器—作为CSS规范的一部分而定义—甚至支持某些自定义选择器。

以下是几个示例：

$("p:even");

该选择器选择所有偶数的＜p＞元素。

$(*tr:nth-child(1)*);

该选择器选择每个表格的第一行。

$("body>div");

该选择器选择作为＜body＞直接子节点的＜div＞。

$("a(hrefS=pdf]*);

该选择器选择指向PDF文件的链接。

$("body>div:has(a)")

该选择器选择作为＜body＞直接子节点的、包含链接（＜a＞）的＜div＞.

好一个威力强大的家伙！

你可以利用CSS的现有知识起步和快跑，然后学习jQuery支持的更高级的选择器。

选择DOM元素进行操作是页面中常见的需求，但还有些必须做的事情并不涉及DOM元素。下面概览一下除了元素操作之外jQuery提供的更多功能。

最后

以上就是魔幻摩托为你收集整理的jQuery包装器的全部内容，希望文章能够帮你解决jQuery包装器所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。