首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >了解元素类型

了解元素类型
EN

Stack Overflow用户
提问于 2015-05-30 05:25:28
回答 2查看 72关注 0票数 3

假设我有多个按钮,这些按钮使用一个名为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,但它仍然可以工作。

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

EN

回答 2

Stack Overflow用户

发布于 2015-05-30 05:28:38

如果"submit"是一个类名,那么正确答案应该是A:

代码语言:javascript
运行
复制
$('.submit').click(function () { this.disabled = true; });

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

事件处理程序中的代码对于选项B、C和D是错误的,因此它们不可能被认为是正确的。

这个问题似乎要检查您对三件事的了解: 1) CSS选择器语法,2)如何设置DOM元素的属性,3) jQuery事件处理程序中this的值是什么,以及如何使用它。

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

代码语言:javascript
运行
复制
// use direct DOM property access
this.disabled = true;

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

至于CSS选择器的语法基础:

#开头的选择器指向由id="xxx"标识的ID值,或者设置为DOM元素上的属性。

因此,"#submit"使用id引用单个元素,如下所示

代码语言:javascript
运行
复制
<button id="submit">Press Here</button>

.开头的选择器指向由class="xxx"标识的类名,或者设置为DOM元素上的属性。

因此".submit"引用一个或多个具有给定类名的对象,如下所示

代码语言:javascript
运行
复制
<button class="submit">Press Here</button>

ID值在文档中必须是唯一的(只能用于单个元素)。类名可以用于所需的任意多个元素。

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

如果要在事件处理程序中使用jQuery,则应为:

代码语言:javascript
运行
复制
$('.submit').click(function () { 
    $(this).prop('disabled', true); 
});

.prop()jQuery documentation所示。

如果"submit"是一个id值,那么正确的答案应该是:

代码语言:javascript
运行
复制
$('#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元素。

票数 4
EN

Stack Overflow用户

发布于 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:(选项)当前选定的元素

表单选择器添加和注意:在此上下文中,inputbuttonselecttextarea都被视为输入元素。

: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

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/30539317

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档