充分利用jQuery选择器

我无意中听到了前几天与我一起工作的开发人员的评论:“如果你不能选择它,你就无法使用它”。这听起来像是你可以应用于日常生活的经典远东哲学谚语之一,但我知道在这种情况下她说的是非常流行的jQuery Javascript库中的选择器。

jQuery的选择器是您通常首先接触库的地方。那些广泛使用CSS的人会发现jQuery的选择器非常熟悉,因为jQuery广泛使用了CSS的选择器语法。其他不熟悉CSS开发的人无疑会学习jQuery和CSS选择器的新东西。

在本文中,我将向您展示jQuery的选择器语法,如何优化jQuery选择器以及如何将更高级的选择器组合应用于标记元素。让我们从jQuery选择器基础开始。

学习基础知识

JQuery对象(通常被视为$())用于根据所使用的选择器包装元素数组。例如$('div.content P')将包含具有一类内容的div的子节点的所有段落包装到单个jQuery对象中。包装完成后,对象数组可以应用jQuery(和JavaScript)方法。

如果您按ID选择项目,则阵列中只有一个对象。

  • 第一项
  • 第二项
  • 第三项
  • 第四项

$( '#itemThree')仅选择第三个列表项和ItemThree将是此选择器的jQuery对象数组中的唯一元素。

在许多网站设计中,ID不会分配给网页中的元素。如果是这种情况,您如何选择上面演示的特定元素?看看这个清单:

  • 第一项
  • 第二项
  • 第三项
  • 第四项

运用$( '礼:EQ(2)')将获得第三个列表项(请注意,计算JavaScript中的数组项,因此jQuery,从0开始)。虽然我讨厌对这样的事情感到困惑,但你也应该知道这一点$( '礼:第n个孩子(3)')也会得到这个元素。为什么第n个孩子()从1开始计数?这是因为CSS被称为'1索引'和选择器第n个孩子()出生在CSS世界,而不是JavaScript。

如果您的网页中有多个列表,如果您尝试匹配一个列表中的一个项目,则需要使用选择器更具体。在列出的列表的情况下,您可以使用$('#list Li:eq(2)')要么$('#list Li:nth-child(3)')得到第三个项目。

您可以通过在选择器中使用组标识符(如HTML标记或类名)将多个元素作为数组包装在jQuery对象中。运用$( '内容')将所有具有一类内容的HTML元素收集到jQuery对象数组中。同样,$( 'P')将文档中的所有段落包装到单个jQuery对象中。

驯服选择器

使用jQuery时你真正需要注意的一件事是jQuery选择器引擎Sizzle(John Resig,从右到左)读取选择器。Sizzlejs.com)。这意味着冗长的选择器需要更多的资源,并且可能需要更多的时间来执行。看看以下HTML标记:

培根ipsum dolor坐在amet萨拉米香肠球尖短腰鼓腿...

培根ipsum dolor坐在amet萨拉米香肠球尖短腰鼓腿...

这是一个相当简单的示例,但如果您想在第二个列表中选择第二个列表项,则可以使用jQuery选择器:

$('。container .selection li:nth-child(2)')

jQuery选择器引擎基本上说:“首先查找所有第二个子项列表项。然后查看它们是否包含在名为selection的类中。之后,检查选择是容器的后代。如果你有很多类似嵌套的项目,这可能会产生大量的开销,因为每次使用选择器时jQuery都必须遍历DOM(文档对象模型)树。最好尽可能具体,在这种情况下你可以使用id选择器中的列表项,$( '#三个')

The selector properly wraps the second list item in the second unordered list

选择器正确地将第二个列表项包装在第二个无序列表中

具有在它们之间具有空格的元素标识符的选择器也称为后代选择器。使用的选择器将查找具有选择类的类容器的所有后代,无论DOM树选择有多远。如果你想确保选择是容器的直接子代,你可以这样编写选择器:

$('。container> .selection li:nth-child(2)')

大于号符号将强制选择引擎确保具有类选择的元素是具有类容器的那些项的直接后代。

缓存选择器

可能有一段时间你必须使用冗长的选择器,或者你可能需要一遍又一遍地使用特定的选择器。一个非常好的例子是当你使用需要操作的数据表时。优化操作的一种简单方法是通过将jQuery选择器对象包含在变量中来缓存它:

var cell7 = $('table tr td:nth-child(7));

然后你可以一遍又一遍地使用该变量来操作元素:

cell7.css('font-weight','bold'); cell7.each(function(){var newValue = $(this).html()+ 3.14; $(this).html(newValue);});

由于变量包含包装对象,因此您无需再次遍历DOM以获取该选择器的数据。

通过对基本jQuery选择器的理解,现在是时候将注意力转移到一些更高级的选择器语法上了。

学习高级选择器

jQuery在许多JavaScript库中提供的巨大优势是它能够使用CSS中使用的相同选择器,无论选择器有多复杂。您可以使用CSS样式伪选择器以及属性选择器。

JQuery中的属性选择器提供类似正则表达式的功能,甚至可以以提供条件功能的方式组合。我将使用这个HTML标记块来演示:

红三角
蓝色三角形
绿色三角形
绿色广场
紫色广场
黄色广场
红圈
黄圈
橙色圆圈

如果要选择类“以”开头“黄色的div,您将使用^(克拉)符号:

$( '的div [类^ = “黄色”]')

如何选择所有具有以黄色开头或具有类三角形的类的项目?

$('div [class ^ =“yellow”],[class =“triangle”]')

这里(代字号)表示属性选择器应该查找类“包含单词”三角形的项目。通过用逗号分隔属性选择器,您将为搜索提供OR条件。如果删除逗号,则调用AND条件并且不会返回任何对象,因为没有具有“黄色三角形”类的元素。在使用jQuery时,您可以继续将属性选择器链接在一起。

Using the OR style selector to wrap the appropriate elements

使用OR样式选择器包装适当的元素

JQuery属性选择器将使用任何可识别的HTML属性。这些选择器使您能够通过应用过滤器来根据属性的值检索元素。您可以通过访问了解有关属性选择器的更多信息api.jquery.com/category/selectors/attribute-selectors/

(如果你想使用属性选择器,我已经设置了一个你可以操作并运行的样本Jsfiddle.net)。

使用带有表单的选择器

您可以使用jQuery的属性选择器来处理表单,这些类型的选择器通常非常适合实现特定效果,例如在提交表单后清除表单:

$( '输入[类型= “文本”]')VAL( '')。

如果要清除其他输入元素,可以将其他属性定义放入选择器:

$( '输入[类型= “文本”],[类型=“号码] ')VAL('')。

但请谨慎使用!我见过很多开发人员使用以下选择器,并想知道为什么他们的表单,按钮和所有,清空:

$( '输入')VAL( '')。

将清除所有表单的输入值,包括表单中包含的任何提交或重置元素的文本。具体使用jQuery选择器是一个很好的教训。

有时您会希望专门的选择器与表单元素一起使用。你可以使用:检查伪选择器选择所有选中的复选框和:输入伪选择器用于包装表单中的所有输入。我们以下面的形式为例:







电子邮件电话

运用$('form [name =“myForm”]输入:选中')将使用具有CHECKED属性的复选框包装输入。如果要从表单中选择所有输入,并且它是页面上唯一的表单,则可以使用$( ':输入')

了解更多

现在您已经学习了jQuery选择器语法,并看到了组合和连接jQuery库选择器的方法,您就可以开始将jQuery添加到Web项目中。

为了真正磨练你的jQuery技能,我鼓励你花一些时间研究库中可用的各种选择器。你可以在jQuery网站上这样做api.jquery.com/category/selectors/



翻译字数超限