jQuery 选择器中的波浪号

Posted 2023-03-05

【中文标题】jQuery 选择器中的波浪号

【英文标题】：Tilde in jQuery selector

【发布时间】：2013-02-03 03:26:48

【问题描述】：

我对 javascript 中波浪号功能的理解是它执行按位非运算（即 1 变为 0，反之亦然；1000 变为 0111）。然而，我最近开始在一个现有项目上工作，我的前任已经包含了很多这样的代码：

var iValuation = $('div[class~="iValuation"]');

谁能告诉我这个例子中波浪号的目的是什么？我以前没有遇到过，也无法在网上找到任何参考。

【问题讨论】：

浏览 api.jquery.com/category/selectors 导致一到 this

这不是 JavaScript 运算符，而是 jQuery 选择器。 API 有关于它们的an entire page。

【参考方案1】：

平铺用作选择器

选择具有指定属性和值的元素 包含给定的单词，由空格分隔。

这根本不是 JavaScript 运算符。

更多来自文档：

此选择器将测试字符串与 属性值，其中“单词”定义为由以下各项分隔的字符串 空白。如果测试字符串完全相等，则选择器匹配 任何单词。

例如：

<input name="man-news" />
<input name="milk man" />
<input name="letterman2" />
<input name="newmilk" />

$('input[name~="man"]') 将只选择第二个input，因为它的属性name 被space 分隔。

详情请参阅here

【讨论】：

值得注意的是，这纯粹是 JQUERY 功能，而不是 Javascript 所固有的。就股票 JS 而言，OP 对波浪号的作用的理解是正确的。

【参考方案2】：

这不是 JavaScript 运算符。它出现在一个字符串中。

由于该字符串被传递给 jQuery 函数，而且它看起来不像是一段 html，它是一个 selector。

具体是attribute selectors之一：

表示具有 att 属性的元素，其值为以空格分隔的单词列表，其中一个恰好是“val”。如果 "val" 包含空格，它永远不会代表任何东西（因为单词是用空格分隔的）。此外，如果“val”是空字符串，它永远不会代表任何东西。

【参考方案3】：

$是jQuery选择器函数，其中包含一个CSS3选择器字符串：根据CSS3 Selector Definition，你遇到的选择器选择：

E[foo~="bar"] 一个 E 元素，其 "foo" 属性值是一个以空格分隔的值的列表，其中一个值正好等于 "bar"

在DOM。因为波浪号被包裹在一个字符串中，所以它不能用作运算符。

【参考方案4】：

如果您想知道

之间的

区别

[class~="foo"]

和

[class*="foo"]

~ 只会匹配周围的空格（例如'foo bar'而不是'foo-1'）* 将匹配 我们周围没有空格的（例如 'foo bar' 和 'foo-1'）

~ - 属性间隔选择器* - 属性包含选择器