거의 사용되지 않는 jQuery 선택기

선택기가 중요합니다. 대부분의 jQuery 메서드가 작동하려면 일종의 요소 선택이 필요합니다. 예를 들어 click 이벤트를 버튼에 첨부하려면 먼저 버튼을 선택해야 합니다.

일반적인 jQuery 선택기는 기존 CSS 선택기를 기반으로 하기 때문에 아마도 매우 익숙할 것입니다. 그러나 널리 사용되지 않는 일부 선택기가 있습니다. 이 튜토리얼에서는 덜 알려졌지만 중요한 선택기에 중점을 둘 것입니다.

모든 선택기(*)

이 선택기는 다음을 포함하여 문서의 모든 요소를 ​​선택하므로 범용 선택기라고 합니다. 93f0f5c25f18dab9d176bd4f6de5d30e, 6c04bd5ca3fcae76e30b72ad730ca86d, 3f1c4e4b6b16bbbd69b2ee476dc4f83a 或 2cdf5bf648cf2f33323966d7f58a7f3f 상표. 이 데모는 내 요점을 설명합니다.

으아악

이 선택기를 다른 요소와 함께 사용하면 속도가 매우 느려질 수 있습니다. 그러나 이는 선택기가 사용되는 방식과 실행되는 브라우저에 따라 다릅니다. 파이어폭스에서는 $("#selector > *").find("li") 比 $("#selector > ul").find("li").有趣的是，Chrome 执行 $("#selector > *").find("li") 的速度稍快一些。所有浏览器执行 $("#selector *").find("li") 的速度都比 $("#selector ul").find("li" 慢). 이 선택기를 사용하기 전에 성능을 비교하는 것이 좋습니다.

다음은 all 선택기의 실행 속도를 비교하는 데모입니다.

애니메이션 선택기(:animated)

:animated 选择器来选择在此选择器运行时动画仍在进行中的所有元素。唯一的问题是它只会选择使用 jQuery 进行动画处理的元素。此选择器是 jQuery 扩展，不会受益于本机 querySelectorAll() 메소드를 통해 가져온 성능 향상을 사용할 수 있습니다.

또한 jQuery를 사용하여 CSS 애니메이션을 감지할 수 없습니다. 그러나 animationend 이벤트를 사용하여 애니메이션이 끝나는 시점을 감지할 수 있습니다.

아래 데모를 시청하세요.

위 데모에서 $(":animated").css("background","#6F9") 之前，仅对奇数 <code class="inline">div 元素进行动画处理;.因此，只有那些 div 元素会更改为绿色。之后，我们对 div 元素的其余部分调用 animate 函数。如果您现在点击 按钮，所有 div 요소를 실행하면 모든 요소가 녹색으로 바뀌어야 합니다.

속성이 선택기와 동일하지 않습니다([attr!="value"])

범용 속성 선택기는 일반적으로 특정 이름이나 값을 가진 속성이 존재하는지 여부를 감지합니다. 반면에 [attr!="value"] 选择器将选择所有不具有指定属性或该属性存在但不等于特定值的元素。它相当于 :not([attr="value"])。与 [attr="value"] 不同，[attr!="value"] 不是 CSS 规范的一部分。因此，使用 $("css-selector").not("[attr='value']")는 최신 브라우저의 성능을 향상시킬 수 있습니다.

아래 코드 조각은 mismatch 类添加到所有 li 元素，其 data-category 属性不等于 css JavaScript를 사용하여 올바른 속성 값을 디버깅하거나 설정할 때 유용합니다.

으아악

데모에서는 두 목록을 모두 확인하고 요소의 카테고리 속성 값을 수정했습니다.

선택기 포함 (:contains(text))

이 선택기는 지정된 문자열을 포함하는 모든 요소를 ​​선택하는 데 사용됩니다. 일치 문자열은 관련 요소 내부 또는 해당 하위 항목 내에 직접 위치할 수 있습니다.

아래 예는 이 선택기를 더 잘 이해하는 데 도움이 될 것입니다. Lorem Ipsum이라는 문구가 나오는 모든 항목에 노란색 배경을 추가하겠습니다.

태그부터 시작해 보겠습니다.

으아악

Lorem Ipsum이라는 문구가 7개의 다른 위치에 나타나는 것을 관찰하세요. 한 인스턴스에서는 의도적으로 작은 대문자를 사용하여 일치 항목이 대소문자를 구분함을 나타냅니다.

모든 일치 항목을 강조 표시하는 JavaScript 코드는 다음과 같습니다.

으아악

문자열 주위의 따옴표는 선택 사항입니다. 즉, $("section:contains('Lorem Ipsum')") 和 $("section:contains(Lorem Ipsum)") 均有效在上面的代码片段中。我仅针对部分元素，因此列表元素内的 Lorem Ipsum 文本应保持不变。此外，由于大小写不匹配，第二个 section 요소 내부의 텍스트도 강조 표시되어서는 안 됩니다. 이 데모에서 볼 수 있듯이 바로 그런 일이 발생합니다.

有选择器 (:has(selector))

此选择器将选择至少包含一个与给定选择器匹配的元素的所有元素。需要匹配的选择器不必是直接子级。 :has() 不是 CSS 规范的一部分。在现代浏览器中，您应该使用 $("pure-css-selector").has(selector) 而不是 $("pure-css-selector:has(选择器)") 以提高性能。

此选择器的一个可能的应用是操作其中包含特定元素的元素。在我们的示例中，我将更改内部包含链接的所有列表元素的颜色。

这是演示的标记：

<ul>
  <li>Pellentesque <a href="dummy.html">habitant morbi</a> tristique senectus.</li>
  <li>Pellentesque habitant morbi tristique senectus.</li>
  (... more list elements here ...)
  <li>Pellentesque habitant morbi tristique senectus.</li>
  <li>Pellentesque <a href="dummy.html">habitant morbi</a> tristique senectus.</li>
</ul>

以下是更改列表元素颜色的 JavaScript 代码：

$("li:has(a)").each(function(index) {
  $(this).css("color", "crimson");
});

这段代码背后的逻辑非常简单。我循环遍历所有包含链接的列表元素并将其颜色设置为深红色。您还可以操作列表元素内的文本或将它们从 DOM 中删除。我确信这个选择器可以用在很多其他情况下。在 CodePen 上查看此代码的实时版本。

基于索引的选择器

除了像 :nth-child() 这样的 CSS 选择器之外，jQuery 也有自己的一组基于索引的选择器。这些选择器是 :eq(index)、:lt(index) 和 :gt(index)。与基于 CSS 的选择器不同，这些选择器使用从零开始的索引。这意味着 :nth-child(1) 将选择第一个子级，而 :eq(1) 将选择第二个子级。要选择第一个孩子，您必须使用 :eq(0)。

这些选择器也可以接受负值。当指定负值时，将从最后一个元素开始向后计数。

:lt(index) 选择索引小于指定值的所有元素。要选择前三个元素，您将使用 :lt(3)。这是因为前三个元素的索引值分别为 0、1 和 2。使用负索引将选择向后计数后到达的元素之前的所有值。同样，:gt(index) 选择索引大于指定值的所有元素。

:lt(4)  // Selects first four elements
:lt(-4) // Selects all elements besides last 4
:gt(4)  // Selects all elements besides first 5
:gt(-4) // Selects last three elements
:gt(-1) // Selects Nothing
:eq(4)  // Selects fifth element
:eq(-4) // Selects fourth element from last

尝试单击演示中的各个按钮以更好地了解索引选择器。

表单选择器

jQuery 定义了许多选择器，以便轻松选择表单元素。例如， :button 选择器将选择所有按钮元素以及按钮类型的元素。同样， :checkbox 将选择所有类型为 checkbox 的输入元素。几乎所有输入元素都定义了选择器。考虑下面的表格：

<form action="#" method="post">
  <div>
    <label for="name">Text Input</label>
    <br>
    <input type="text" name="name" />
    <input type="text" name="name" />
  </div>
  <hr>
  <div>
    <label for="checkbox">Checkbox:</label>
    <input type="checkbox" name="checkbox" />
    <input type="checkbox" name="checkbox" />
    <input type="checkbox" name="checkbox" />
    <input type="checkbox" name="checkbox" />
  </div>
</form>

我在这里创建了两个文本元素和四个复选框。该表单非常基本，但它应该让您了解表单选择器的工作原理。我们将使用 :text 选择器计算文本元素的数量，并更新第一个文本输入中的文本。

var textCount = $(":text").length;
$(".text-elements").text('Text Inputs : ' + textCount);

$(":text").eq(0).val('Added programatically!');

我使用 :text 选择所有文本输入，然后使用 length 方法来计算它们的数量。在第三条语句中，我使用前面讨论的 :eq() 选择器来访问第一个元素，然后设置其值。

请记住，从 jQuery 1.5.2 开始，对于未指定任何 type 属性的元素，:text 返回 true。

看看演示。

标头选择器 (:header)

如果您想选择网页上的所有标题元素，可以使用简短的 $(":header") 版本，而不是详细的 $ ("h1 h2 h3 h4 h5 h6") 选择器。此选择器不是 CSS 规范的一部分。因此，首先使用纯 CSS 选择器，然后使用 .filter(":header") 可以获得更好的性能。

例如，假设网页上有一个 article 元素，并且它具有三个不同的标题。现在，为了简洁起见，您可以使用 $("article :header") 而不是 $("article h1,article h2,article h3")。为了使其更快，您可以使用 $("article").filter(":header")。这样您就可以两全其美。

要对所有标题元素进行编号，您可以使用以下代码。

$("article :header").each(function(index) {
  $(this).text((index + 1) + ": " + $(this).text());
  // Adds numbers to Headings
});

尝试一下随附的演示。

最终想法

在本教程中，我讨论了使用 jQuery 时可能遇到的不常见选择器。虽然大多数选择器都有可供您使用的替代方案，但了解这些选择器的存在仍然是件好事。

我希望您在本教程中学到了一些新东西。如果您有任何问题或建议，请评论。

위 내용은 거의 사용되지 않는 jQuery 선택기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!