分类导航

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了将jQuery选择器转换为javascript querySelector，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我试图使用querySELEctor复制这个jQuery选择器：

$("*:not(#player > div)")

我知道我可以使用querySELEctor(‘*’)选择所有元素,但是如何排除匹配#player>的元素DIV

解决方法

大多数jQuery选择器可以移植到querySELEctor()或CSS,但不是所有jQuery选择器,因为jQuery扩展了某些现有选择器,并完全引入了完全非标准的选择器.

在您的特定情况下,与jQuery不同,：not()只接受CSS中的简单选择器. #player> div是一个复杂的选择器,由两个简单的选择器和一个组合器组成.有关详细信息,请参阅此问

Why is my jQuery :not() selector not working in CSS?

您的jQuery选择器没有标准化的等价物.您必须排除#player> div元素分别通过document.querySELEctorAll(‘#player> div’),并从原始元素集中删除与该集匹配的元素.

… well,actually,虽然没有办法表达：不是(#player> div)在一个复杂的选择器中,因为>组合器仍然可以使用不少于四个复杂选择器枚举所有可能性：

:root,:not(#player) > div,#player > :not(div),:not(#player) > :not(div)

这是一个概念验证：

// The following JS + CSS should give all matching elements a 1px solid red border
$(':not(#player > div)').css('border-color','red');

* { margin: 10px; }
html::before { content: 'html - Match'; }
body::before { content: 'body - Match'; }

:root,:not(#player) > :not(div) {
  border-style: solid;
  border-width: 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>body > p - Match</p>
<div>body > div - Match</div>
<div>
  body > div:not(#player) - Match
  <p>:not(#player) > p - Match</p>
  <div>:not(#player) > div - Match</div>
</div>
<div id=player>
  body > div#player - Match
  <p>#player > p - Match</p>
  <div>
    #player > div - Non-match
    <div>#player > div:not(#player) > div - Match</div>
  </div>
</div>

但是,如上所述,选择这些元素并将其从原始集合中删除,或者只是抓住matches() polyfill并以这种方式排除元素,你仍然会好得多.