dingshi7798
dingshi7798

jquery选择器连续选择_全面了解jQuery选择器

jquery选择器连续选择

本文由Matt Smith和Tim Severien进行同行评审。 感谢所有SitePoint的同行评审员使SitePoint内容达到最佳状态！

无论您是要操纵网页上元素的内容，向其添加事件还是进行其他操作，都需要首先选择它。 这就是jQuery选择器发挥作用的地方：它们构成了库的关键部分。

在本教程中，我将介绍所有这些选择器，并指出使用它们时需要记住的重要事项。

jQuery选择器

这些选择器的主要目的是选择网页上满足某些条件的元素。 这些条件可以是诸如其ID，类名，属性之类的任何东西，也可以是所有这些或全部的组合。 jQuery中的大多数选择器都基于现有CSS选择器，但是该库也有自己的自定义选择器。

基本选择器

您可以使用ID $("#id") ，类$(".class")或标签名称$("li")来选择网页上的元素。 您还可以使用这些选择器的组合，例如$(".class tag")或选择多个选择器的组合结果，例如$("selectorA, selectorB, selectorC") 。

jQuery还提供了我下面列出的其他一些基本选择器：

  • ：header Selector —假设您必须在

    选择所有标题，例如

    ，

    ，

    。 在这种情况下，您可以使用详细的$("section h1, section h2, section h3")选择器，也可以使用更短的$("section :header")选择器。 两者将做相同的工作，而后一个则相对容易阅读。 标头选择器已在此演示中将所有标题的背景设置为黄色。

  • ：target Selector —该选择器返回其id与文档URI的片段标识符或哈希值匹配的元素。 例如，如果URI为“ https://sitepoint.com/#hash”。 然后，选择器$("h2:target")将选择元素

    。

  • ：animated Selector —运行选择器时，此选择器返回所有正在进行动画的元素。 这意味着其动画在选择器执行后开始的任何元素都不会被返回。 另外，请记住，如果您使用的是不带效果模块的自定义jQuery构建，则此选择器将引发错误。 在此演示中，仅动画框由于选择器而变为橙色。

基于索引的选择器

除了我们上面讨论的基本选择器之外，您还可以根据元素的索引选择元素。 jQuery提供了自己的基于索引的选择器集，这些选择器使用基于零的索引。 这意味着要选择第三个元素，您将必须使用索引2。

这是所有基于索引的选择器的列表：

  • ：eq（n）选择器—此选择器将返回索引为n的元素。 从版本1.8开始，它接受正和负索引值。 当提供负值时，从最后一个元素开始向后计数。
  • ：lt（n）选择器—此选择器将返回索引小于n所有元素。 从版本1.8开始，它还接受正值和负值。 就像:eq(n)选择器一样，当提供负值时，从最后一个元素开始向后计数。
  • ：gt（n）选择器—此选择器类似于:lt(n) 。 唯一的区别是它将返回索引大于或等于n所有元素。
  • ：first Selector —这将返回网页上的第一个匹配的DOM元素。 它等效于:eq(0)和:lt(1) 。 :first和:first-child选择器之间的区别是:first-child可以选择多个元素，每个元素都是其父元素的第一个孩子。
  • ：last Selector —与:first选择器类似，但返回最后一个子代。
  • ：even Selector —这将返回所有带有偶数索引的元素。 由于jQuery中的索引是从零开始的，因此选择器会选择第一个孩子，第三个孩子，依此类推。 这似乎违反直觉，但这就是它的工作原理。
  • ：odd Selector —这和:even选择器一样，但是返回带有奇数索引的元素。

在以下示例中，您可以单击三个按钮:lt ， :gt和:eq ，它们将随机生成一个索引并将结果选择器应用于列表：

请参阅CodePen上的SitePoint （ @SitePoint ） 基于笔索引的选择器 。

如您所见，使用:first和:last仅选择网页上相应的first和last元素，而不是在每个父级中。

子选择器

jQuery使您能够根据元素的子项的索引或类型来选择它们。 CSS子选择器与jQuery子选择器的不同之处在于它们不使用基于零的索引。

这是所有子选择器的列表：

  • ：first-child —此选择器返回作为其父级的第一个子级的所有元素。

  • ：first-of-type-这个选择所有其他元素，它们是同类元素中的第一个兄弟元素。

  • 免费学习PHP！

    全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

    原价$ 11.95 您的完全免费

    免费获得这本书

    ：last-child —这将选择父母的最后一个孩子。 就像:first-child ，如果有很多父母，它可以选择多个元素。

  • ：last-of-type —它选择所有在其父代中最后一个子代的子代。 如果有多个父母，则可以选择多个元素。

  • ：nth-​​child（） -这有点复杂。 它可以接受各种值作为参数，例如大于或等于1的数字， even和odd字符串或诸如4n+1的方程式。

  • ：nth-​​last-child（） —此选择器类似于上一个选择器，接受相同的参数。 唯一的区别是它从最后一个孩子开始计数。

  • ：nth-​​of-type（） —对于同名的同级兄弟，此选择器返回作为其父元素的第n个子元素的所有元素。

  • ：nth-​​last-of-type（） —该选择器的功能类似于:nth-of-type()选择器，但计数从末尾开始。

  • ：only-child-顾名思义，此选择器返回作为其父级唯一子级的所有元素。 如果父母有一个以上的孩子，则不会选择任何内容。

  • ：only-of-type —此选择器返回没有相同类型的同级的所有元素。

这个交互式演示将向您展示所有这些选择器的工作方式。 就像上一个演示一样，您需要做的就是单击按钮：

请参阅CodePen上的SitePoint （ @SitePoint ）的笔子选择器 。

您应注意，这一次将边框分别添加到每个div first和last孩子。

属性选择器

您还可以根据元素的属性值选择元素。 使用这些选择器时，应牢记一件非常重要的事情：这些选择器将多个以空格分隔的值视为单个字符串。 例如， $("a[rel='nofollow']")将与$("a[rel='nofollow other']")不匹配。

这是所有基于属性的选择器的列表：

  • $（“ [attribute | ='value']”）） —“属性包含前缀选择器”返回属性值等于或以给定字符串开头或后跟连字符的所有元素。

  • $（“ [attribute * ='value']”）） —此“属性包含选择器”返回属性值包含给定子字符串的所有元素。 值的位置无关紧要。 只要它与给定值匹配，选择器就会选择该元素。

  • $（“ [attribute〜='value']”）） —此选择器返回属性值包含以空格分隔的给定单词的所有元素。

  • \ $（“ [attribute $ ='value']”）） -此选择器返回所有属性以给定字符串结尾的元素。

此演示演示了这些选择器如何使用不同的属性值：http://codepen.io/brathi/pen/aZovZN

  • $（“ [attribute ='value']”）） —此选择器返回属性值完全等于给定字符串的所有元素。

  • （“ [attribute ^ ='value']”） -此选择器将返回所有属性值完全以给定字符串开头的元素。

  • （“ [attribute！='value']”）） —此选择器返回所有没有给定属性或属性值不等于选择器中指定元素的元素。

该演示演示了最后三个选择器的作用。

如果只想检查元素是否具有指定的属性，而不关心其值，则可以使用$("[attribute]")选择器。

内容选择器

这些选择器基于元素内部的内容。 此类别中有四个选择器。

  • ：contains（text） —此选择器返回所有具有指定文本的元素。 文本可以直接出现在元素内部，也可以出现在其后代之一内部。 使用此选择器选择元素时，请记住文本区分大小写。

  • ：has（selector） —该元素返回所有元素中至少有一个与指定选择器匹配的元素。 例如， $("section:has(h2)")将选择所有具有h2元素的部分。 h2不必是直子。 它可以存在于后代中的任何地方。

该演示演示了:contains(text)和:has(selector)在不同情况下的工作方式：

该演示清楚地显示了:contains(text)选择器仅如何照顾您提供的文本大小写。 只要文本和大小写完全匹配，选择器就不会在意文本前后的内容。

  • ：empty —返回没有子元素的所有元素，包括文本节点。

  • ：parent —此选择器返回具有至少一个子节点的所有元素。 子节点可以是元素或文本节点。 从这个意义上讲，它是:empty选择器的反函数。

层次选择器

这些选择器使用DOM层次结构作为选择元素的标准，它解释了类别的名称。 这是所有这些选择器的列表：

  • $（“ ancestor hindant”） —此选择器返回给定父级的所有后代元素。 后代可以是孩子，孙子等。

  • $（“ parent> child”） —此选择器比上一个选择器更具体，仅返回父级的直接子级。

  • $（“ prev + next”） —该选择器返回与next选择器匹配的所有元素，它们的父元素与prev相同，并且紧随其后的是兄弟prev 。

  • $（“上一页〜兄弟姐妹”） -这一次返回后的所有兄弟姐妹prev元素，具有相同的父为prev ，比赛siblings选择。

该演示演示了所有使用中的层次结构选择器。

从演示中可以明显看出，下一个相邻的兄弟姐妹和下一个兄弟姐妹选择器对它们之前的兄弟姐妹没有任何影响。 这就是为什么第二段即使与

元素相邻也只是蓝色的原因。

表单选择器

jQuery为表单中的大多数输入元素提供了较短的选择器版本。 这些被归类为表单选择器 。

例如，要选择一个按钮元素或一个类型为button的元素，可以使用较短的$(":button")选择器，而不是较长的$("button, input[type='button']")版本。 同样，要选择所有类型为radio的元素，可以使用$(":radio")选择器代替$("[type=radio]") 。

该演示演示了如何使用所有这些选择器来计数表单中的元素。

您也可以分别使用$(":enabled")和$(":disabled")选择器选择所有启用或禁用的元素。 您应该仅在支持禁用属性的元素上使用这些选择器，例如