为什么这个函数不给我它绑定的元素的名称？答案

【问题标题】：Why won't this function give me the name of the element it's bound to?为什么这个函数不给我它绑定的元素的名称？
【发布时间】：2012-07-26 22:21:12
【问题描述】：

我有一些用 class="tab" 定义的 html 元素。

在我的 jquery 文件中，我定义了以下函数：

  $('.tab').mouseleave( function() {
    alert($(this).name);
  });

当我触发 mouseleave 时，对于名为“Contact”的类“tab”的元素，我确实收到了警报 - 但它显示“未定义”。我期待看到“联系人”。

$(this) 给了我什么 - 它真的给了我 DOM 元素吗？

注意。最终，我希望能够计算出鼠标离开元素的哪一侧（北、南、东或西）。所以我正在做这个警报，以确保我实际上可以访问该元素的宽度和高度。到目前为止，我似乎无法访问该信息。

【问题讨论】：

name 属性只能用于input 元素。
你的名字是什么意思？它是一个属性还是您所指的标记名？
@spaceman12 你给了我-1吗？
“$(this) 给了我什么” ...见这里：api.jquery.com/jQuery/#jQuery1

标签： javascript jquery

【解决方案1】：

这是因为 $ 给出了一个包装元素的数组。因此 $(this) 将是一个包含一个元素的数组。 $(this).attr("name") 会给你名字，因为 attr 知道它是一个数组。如果你愿意，你可以使用 $(this)[0].name 或只是 this.name

【讨论】：

【解决方案2】：

$(this) 将为您提供 JQuery 对象。

this 为您提供 DOM 元素。

如果该 HTML 元素支持“名称”属性，您可以通过调用 $(this).prop('name') 来获取名称。

目前只有表单元素（input、select、textarea、form）支持“name”属性；将 POST 动词发送到服务器时发送到服务器的名称-值对的“名称”部分（即，您使用“POST”方法发布表单）。

进一步阅读：

http://forum.jquery.com/topic/please-explain-attr-vs-prop-change-in-1-6

.prop() vs .attr()

http://timmywillison.com/2011/When-to-use-.attr()-and-.prop().html

【讨论】：

【解决方案3】：

jQuery 允许您像这样获取宽度和高度：

$(this).height(); //is the computed height eg. 200 without the dimension

对于您的具体代码示例，请尝试$(this).prop('name'); 或$(this).attr('name'); //now deprecated

这将从<input name="foo" />获取foo

如果您的元素具有 name 属性，您也可以尝试this.name，该属性仅应用于input 元素。但是，如果您没有该属性，它可能会返回 undefined 并引发错误。

$(this) 是一个 jQuery 对象，其中包含 DOM 元素。 this 是直接的 DOM 元素。

【讨论】：

【解决方案4】：

name 是一种原生 javascript 方法，您正在使用 $(this)，它是一个 jQuery 对象，而不是原生 DOM 元素，它只是 this：

$('.tab').mouseleave( function() {
   alert(this.name);
});

FIDDLE

【讨论】：

啊，someone 终于使用了 DOM，而不是用不必要的 jQuery 方法包装一切。 +1 =)
@adeneo 这个在 jQuery $(document).ready() 函数中工作吗？
@DavidThomas - 这就是为什么我决定回答，即使有六个其他答案。 BeeBand，是的，它无处不在！

【解决方案5】：

     $('.tab').mouseleave( function() {
    alert($(this).attr('name'));
  });

【讨论】：

【解决方案6】：

您正在使用 jQuery 对象，使用 attr 或 prop 函数获取属性值：

$('.tab').mouseleave( function() {
    // either should work
    alert($(this).attr('name'));
    alert($(this).prop('name'));
});

【讨论】：

.attr() 在几个版本前已代替 .prop() 贬值。
不是的，attr 用于属性，prop 用于属性，尽管它们大部分都有效，但有某些首选用途，在许多情况下应该使用 prop attr 的属性，尤其是属性。
好的，那我不太对 - .prop() 是首选，因为 .attr() 经常会混淆属性和属性 - 请参阅此 SO 帖子：stackoverflow.com/questions/5874652/prop-vs-attr

【解决方案7】：

名字是一个属性，对吧？所以检查 $(this).attr('name')

【讨论】：

.attr() 在几个版本之前已代替 .prop() 贬值。
prop() 似乎对我不起作用（'undefined'），但 attr() 可以。
@Spikeh 你在哪里看到一个 attr 被弃用了？ api.jquery.com/category/deprecated
我有点错 :) .prop() 是首选，因为 .attr() 的实现经常混淆属性和属性（无论如何在 JQuery 1.6 之前）。 OP 要求检索未指定标签的“名称”属性。 “name”属性应该只存在于表单属性上，如果它存在于其他元素上，它在语法上是不正确的……所以 .prop() 将返回 undefined。 .attr() 将检索任何属性 - 即 $("div").attr('thisisatest') 将从所有 div 中检索“thisisatest”属性，但“thisisatest”不是有效属性。

【解决方案8】：

$(this) 为您提供了一个包装原生 DOM 元素的 jQuery 对象。

this 是您寻找的 DOM 元素。

this 是您可以找到更全面的描述的地方。

【讨论】：