假设我有多个按钮,这些按钮使用一个名为submit的类。我将此引用添加到jQuery。单击该按钮时,应禁用该按钮。
我可以使用的脚本:
A.$('.submit').click(function () { this.disabled = true; });
B.$('#submit').click(function () { this.prop('disabled'), true); });
C.$('#submit').click(function () { $(this).disabled = true; });
D.$('.submit').click(function () { $(this).prop("disabled", true); });
正确答案是D。
因此,就我个人而言,我非常确定它是C (这是错误的),因为我在提交之前看到了#。我经常遇到这样的问题,我试着假设我知道正确的选择器是什么。我总是假设#是正确的。
事后看来,这个问题说明它是一个类,所以我认为这就是.的合适之处。然而,如果没有人告诉我这是一个类,我就会猜到了。
有时我会看到像这样引用#imnotaclass或你有什么的id,这让我很困惑。
有没有人能更好地向我解释一下jquery选择器,什么时候使用#、.,或者在jQuery中有关于选择器的文档。其他语言之间不是有连续性的吗,比如css,html。我注意到有了这两个函数,我就可以传入一些东西,并在所有方面使用#。然而,它将是一个id,但它仍然可以工作。
我提出这个问题的原因是为了更好地理解,在考试中正确答案是什么。
发布于 2015-05-30 05:28:38
如果"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选择器的语法基础:
以#开头的选择器指向由id="xxx"标识的ID值,或者设置为DOM元素上的属性。
因此,"#submit"使用id引用单个元素,如下所示
<button id="submit">Press Here</button>以.开头的选择器指向由class="xxx"标识的类名,或者设置为DOM元素上的属性。
因此".submit"引用一个或多个具有给定类名的对象,如下所示
<button class="submit">Press Here</button>ID值在文档中必须是唯一的(只能用于单个元素)。类名可以用于所需的任意多个元素。
如果您想了解有关jQuery使用的选择器的更多信息,可以阅读this tutorial。
如果要在事件处理程序中使用jQuery,则应为:
$('.submit').click(function () {
$(this).prop('disabled', true);
});如.prop()的jQuery documentation所示。
如果"submit"是一个id值,那么正确的答案应该是:
$('#submit').click(function () {
$(this).prop('disabled', true);
});在您的jQuery事件处理程序中,this的值将是您在其上注册事件的DOM元素。这意味着如果您使用this.id之类的东西,那么您必须引用DOM属性或调用DOM方法。
如果要调用jQuery方法,则可以使用$(this)将其转换为jQuery对象,这样就可以使用jQuery方法或属性。
请记住,每个jQuery对象都包含一个由零个或多个DOM元素组成的数组。您可以通过数组语法来访问jQuery对象中的各个DOM元素,就像在$(this)[0]中一样,也可以通过.eq()方法来访问,就像在$(this).eq(0)中一样,并且jQuery对象有一个.length属性,它会像在$(this).length === 1中一样告诉您数组中有多少个DOM元素。
发布于 2015-05-30 06:15:15
这是从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
注释:这些CSS3伪选择器在1.9版之前不受支持:
: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]属性与指定值不匹配的元素。相当于:not([NAME=VALUE])。
:contains(TEXT):具有包含单词“textContent”的文本的元素。区分大小写。
:header: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
https://stackoverflow.com/questions/30539317
复制相似问题