选择器

Question

假设我有多个使用名为submit的类的按钮。我将此引用添加到jQuery。单击按钮时;它应该被禁用。

我可以使用的脚本：

一个。$('.submit').click(function () { this.disabled = true; });

B中。$('#submit').click(function () { this.prop('disabled'), true); });

下进行。$('#submit').click(function () { $(this).disabled = true; });

d。$('.submit').click(function () { $(this).prop("disabled", true); });

正确的答案是D。

所以，就个人而言，我很确定它是C.（这是错误的）因为我在提交之前看到了#。我这样做的很多，我试着假设我知道正确的选择器是什么。我一直认为#是正确的。

事后看来，这个问题表明它是一个类，所以我相信.是合适的。但是，如果没有被告知它是一个班级，我会猜到。

有时我会看到id被引用，如#imnotaclass或者你有什么，这让我感到困惑。

有人可以更好地向我解释jquery选择器，何时使用#，.或在jQuery中有关于选择器的文档。其他语言之间是否存在连续性，即css，html。我注意到那些我可以传递一些内容并在所有方面使用#。然而，它将是一个id，但它仍然有效。

我提出这个的原因是为了更好地理解;在考试中，正确的答案是什么。

Answer 1

如果"submit"是类名，那么正确的答案是A：

$('.submit').click(function () { this.disabled = true; });

因为它是唯一一个选择具有该类名的元素并在事件处理程序中正确设置disabled属性的答案。

事件处理程序中的代码对于选项B，C和D是错误的，因此无法将它们视为正确。

问题似乎是检查你对三件事的知识：1）CSS选择器语法，2）如何在DOM元素上设置属性和3）jQuery事件处理程序中this的值是什么？你是如何使用它的。

在事件处理程序中设置disabled属性的两种正确方法是：

// use direct DOM property access
this.disabled = true;

// use jQuery's .prop()
$(this).prop("disabled", true);

至于CSS选择器语法基础：

以#开头的选择器定位HTML中标有id="xxx"的ID值，或设置为DOM元素的属性。

所以"#submit"引用一个id为

的单个元素

<button id="submit">Press Here</button>

以.开头的选择器定位HTML中标有class="xxx"的类名，或者设置为DOM元素的属性。

所以".submit"引用具有给定类名的一个或多个对象，如

<button class="submit">Press Here</button>

ID值必须在文档中是唯一的（仅用于一个元素）。类名可以根据需要用在任意数量的元素上。

如果您想了解有关jQuery使用的选择器的更多信息，可以阅读this tutorial。

如果你打算在事件处理程序中使用jQuery，那就是：

$('.submit').click(function () { 
    $(this).prop('disabled', true); 
});

如.prop()的{{3}}所示。

如果"submit"是一个id值，那么正确的答案是：

$('#submit').click(function () { 
    $(this).prop('disabled', true); 
});

在jQuery事件处理程序中，this的值将是您为事件注册的DOM元素。这意味着如果您使用this.id之类的东西，那么您必须引用DOM属性或调用DOM方法。

如果要调用jQuery方法，则可以使用$(this)将其转换为jQuery对象，以便可以使用jQuery方法或属性。

请记住，每个jQuery对象都包含零个或多个DOM元素的数组。您可以通过$(this)[0]中的数组语法或.eq()中的$(this).eq(0)方法访问jQuery对象中的各个DOM元素，并且jQuery对象具有.length属性它告诉你数组中的DOM元素数量与$(this).length === 1中的数量相同。

Answer 2

摘自the documentation。我在这里发布这个作为@jfriend00的答案的支持信息

Sizzle是jQuery使用的选择器引擎。

注意：在支持的浏览器中，如果请求的选择器不使用document.querySelectorAll()不支持的jQuery扩展，jQuery将尝试使用document.querySelectorAll()来解析CSS选择器查询而不是内部选择器引擎。这是出于性能原因而完成的

选择器

  CSS3

Sizzle几乎支持所有CSS 3 Selectors，包括转义选择器（.foo\+bar），Unicode选择器以及按文档顺序返回的结果。唯一的例外是那些需要额外的DOM事件监听器来跟踪元素状态的例外。

因此，以下伪选择器不支持：

:hover

:active

  :visited，:link

注意：版本1.9之前不支持这些CSS3伪选择器：

:target

:root

:nth-last-child

  :nth-of-type，:nth-last-of-type，:first-of-type，:last-of-type，:only-of-type

:lang()

  其他选择器和惯例
        变化
:not()中的完整选择器列表;例如:not(a.b)，:not(div > p)，:not(div, p)

嵌套的伪选择器;例如:not(:has(div:first-child))
           附加
  [NAME!=VALUE]：NAME属性与指定值不匹配的元素。相当于:not([NAME=VALUE])。

  :contains(TEXT)：textContent包含单词'TEXT'的元素。区分大小写的。

  :header：标题元素（h1，h2，h3，h4，h5，h6）。

  :parent：包含至少一个子节点（文本或元素）的元素。

  :selected：当前选中的（选项）元素
           表单选择器添加
注意：在此上下文中，input，button，select和textarea都被视为输入元素。

  :input：输入元素

  :button：输入button个或具有“按钮”类型的元素

  :checkbox，:file，:image，:password，:radio，:reset，:submit，:text：输入元素具有指定的类型
           位置选择器添加
在此上下文中，“位置”是指元素在选择后根据文档顺序在集合中的位置。例如，div:first将返回包含页面上第一个div的数组，而div:first em将定位页面上的第一个div并选择所有em内部的元素。

注意：位置索引从零开始。



  :first / :last：第一个/最后一个匹配元素

  :even / :odd：偶数/奇数元素

  :eq / :nth：第n个元素;例如:eq(5)找到第6个元素

  :lt / :gt：位于指定位置上方/下方位置的元素



https://github.com/jquery/sizzle/wiki#selectors

了解元素类型

2 个答案:

选择器

CSS3

其他选择器和惯例