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

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

• ：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选择。

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

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

表单选择器

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

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

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

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

还有一个$(":checked")选择器，它将选择所有选中或选中的元素。 它适用于复选框，单选按钮和select元素的选项。 如果只想检索select元素的选项，则应改用$(":selected") 。

此演示中各个元素周围的黄色边框表明它们是由我们的特定选择器选择的。

可见性选择器

您应该了解两个更重要的选择器：：visible和：hidden 。 顾名思义，它们分别返回所有可见或隐藏的元素。

在jQuery中，元素在四种情况下被认为是隐藏的：

• 其display属性设置为none ，
• 其width和height设置为零，
• 它的任何祖先都是隐藏的，或者
• 它是带有type="hidden"的表单元素。

关于高度和宽度的规则在jQuery 3中已更改，将在下一节中讨论。

由于其不透明度设置为0或可见性设置为隐藏的元素仍会占用空间，因此它们被视为可见。 这意味着$("elem").css( "visibility", "hidden" ).is( ":hidden" )将返回false 。

从下面的演示中可以明显看出，任何不透明度为零的元素都将被视为可见，在该示例中，透明div从:visible选择器获取其橙色：

请参阅CodePen上的SitePoint （ @SitePoint ）提供的笔可见性选择器 。

jQuery 3中的更改

随着jQuery 3的发布，与选择器的关系发生了一些变化。 在某些情况下，如:visible和:hidden类的自定义选择器现在的速度提高了17倍 。

此外，从现在开始，如果元素具有从DOM getClientRects方法返回的布局框，则无论该元素的高度还是宽度为零，都将被视为可见。

如果选择器字符串仅包含一个哈希符号，该库现在也将引发错误。 在以前的版本中， $("#")返回一个空集合，而find("#")抛出错误，但是从现在开始，它们都将被视为无效。

缓存返回的元素

jQuery使使用复杂的选择器选择任何元素变得非常容易。 例如，要选择类externalLink所有链接，只需使用$("a .externalLink") 。 但是，选择这样的元素是一项性能密集型任务，因为jQuery需要针对每个此类调用重新扫描DOM。

当您必须多次使用同一选择器时，最好将返回的元素缓存在变量中。 这样可以避免多次扫描并提高性能。

举个例子：

$("a .externalLink").click( function () {
  $("a .externalLink").removeClass("marked");
  $("a .externalLink").addClass("visited");
});

可以写成：

var $linkExternal = $("a .externalLink");
$linkExternal.click( function () {
  $linkExternal.removeClass("marked");
  $linkExternal.addClass("visited");
});

这样，浏览器只需扫描文档一次，而无需扫描三遍。 即使在这种情况下性能提升可能很小，但是当您使用大量选择器时，改进仍将是很明显的。

顺便说一句， :visible选择器的性能也通过使用缓存得到了改善。

摘要

本教程几乎涵盖了您可能在项目中使用的所有jQuery选择器。 我还试图指出使用这些选择器时应记住的细微差别。 如果您对本文有任何疑问，请在评论中让我知道！

翻译自: https://www.sitepoint.com/comprehensive-jquery-selectors/

jquery选择器连续选择