jquery选择器连续选择_jQuery选择器简介

您可能已经知道， CSS3引入了一组新的选择器，使我们能够在添加HTML类较少的情况下选择文档中的元素 。 但是，新CSS选择器依赖于浏览器的功能，因此在某些情况下不适用。 jQuery有一组选择器，这可能是另一种选择。

使用jQuery选择器而非CSS的原因有两个。 首先，jQuery 涵盖了不支持特定类型CSS选择器的旧版浏览器的兼容性 。 其次，在构建交互式功能时，我们可能希望根据用户操作（例如单击鼠标或悬停）来选择元素。

使用jQuery选择器是完成这项工作的简便方法。

索引选择器

索引选择器根据其顺序匹配元素。 在CSS3中，我们具有first-child()和last-child()选择器，用于选择第一个和最后一个元素。 在jQuery中，有:eq() :lt() :gt() :even()和:odd() 。

假设我们有以下无序列表。

<ul>
	<li>List 1</li>
	<li>List 2</li>
	<li>List 3</li>
	<li>List 4</li>
	<li>List 5</li>
</ul>

我们要选择第三个<li>并添加一个HTML类。 使用jQuery可以使用:eq() 。 请记住，由于JavaScript索引从0开始，所以第三个<li>实际上是索引的第二个，给您：

$('td:eq(2)').addClass('selected');

可见性选择器

可见性选择器根据其可见性匹配元素。 因此，我们可以选择可见或不可见的元素。 CSS3，目前没有这种选择器。

在下面的示例中，我们有一个<div>元素，通过分配display: none;可以将其隐藏display: none; 。

<div style="display:none;">
	This is hidden
</div>

要选择<div> ，可以使用:hidden选择器以这种方式进行。

$('div:hidden').removeAttr('style');

但是:hidden选择器不适用于使用“可见性：隐藏”隐藏的元素。 当元件它工作display模式被设定为none象我们上面示出，或当元件的宽度和高度被设置为0 。

要选择可见元素，可以使用:visible 。

元素选择器

使用jQuery，我们还可以在元素包含指定元素时选择它们。 假设我们有两个<section>。 一个包含标题，而另一个不包含任何内容。 使用：has选择器，我们可以选择包含标题的<section>，如下所示。

$('section:has(h2)'').addClass('selected');

目前，CSS3没有类似的选择器。

文本包含选择器

我们还可以选择包含指定文本的元素。 假设我们有三个段落，例如，我们只想选择一个包含“ Hello ”的段落。

<p>Hello</p>
<p>World</p>

使用:contains()我们可以这样做。

$('div:contains('World')'').addClass('world');

这将选择第一段和第二段。 请注意，文本值区分大小写，这意味着“世界”不等于“世界”。 因此，选择器中指定的文本必须与所选元素处的文本匹配。

动画选择器

最后，jQuery允许我们选择动画进行中的元素。 jQuery提供了一组元素动画方法，例如.slideToggle() .slideUp() .slideDown() .show()和.show() .hide() 。 我们可以使用:animated选择器来选择使用这些方法设置动画的元素，就像这样。

$('li:animated').addClass('animation');

结论

CSS3确实比CSS2更高级，其中引入了一些新的选择器。 但是在特定情况下，您可能需要使用jQuery选择器而不是CSS，因此，如果您是这种情况，希望本文对您有所帮助。

翻译自: https://www.hongkiat.com/blog/jquery-selectors/