jquery - .attr() 相关的东西在 jquery 升级 1.3.2 到 1.6.4 后停止工作，还有什么可以破坏的？

Question

我从 jquery 1.3.2 升级到 1.6.4，发现现有代码中的一些东西不起作用 -

禁用某些东西 -
$(selector).attr("disabled","");

检查单选按钮是否被选中 -
if($(selector).attr('checked'))

我检查了版本发布的向后不兼容性 1.4 , 1.5和 1.6发现只提到了问题#2，但没有明确提到上面的问题#1。因此，我担心就像问题 #1 一样，我可以在现有代码中找到更多问题。我想我在 http://blog.jquery.com/2011/05/03/jquery-16-released/ 的“数据属性的案例映射”部分中遗漏了一些内容。 .有人可以解释一下吗。

来源 - Upgrading from jQuery 1.3.2 to jQuery 1.5 (or 1.4)

更新

我仍然对适当替换 attr 感到困惑与 prop .我已阅读 .prop() vs .attr()和其他几个问题。到目前为止，无论我在哪里阅读，它都说在大多数情况下我需要这样做。但那是少数情况呢？有人可以给出一些代码示例或情况吗？如何在现有代码中找到此类案例？我也读过https://stackoverflow.com/a/6057122/351903其中提到-

The thing you really need to be careful with is just do not mix the usage of these for the same property throughout your application

我需要更换attr至prop如果这些线路现在工作正常？

$(selector).attr("id")

更新 #2
假设在我现有的代码中，我有如下几行(我猜这会直接影响 UI 小部件的行为或状态)，但目前没有检查是否检查了该元素 -

这是那里

$(selector).attr("checked","checked"); //setting

但这不存在

if($(selector).attr("checked")) //checking

我还应该更换attr至prop在设置代码中，即使设置现在正在工作？

更新#3
有没有什么地方可以让我获得某种属性列表，这些属性直接影响 UI 小部件的某些属性？我仍然对决定哪些属性将 attr 替换为 prop 感到困惑。其他人对这个 jquery 版本有同样的感觉还是我只有一个:D？

更新 #4
看起来，在这两个版本(1.3.2 到 1.6.4)之间的某个地方，jquery 使元素选择更加严格。

细节
在一个模块中，具有以下 HTML -

<div id="60table">
    <div>
        <input type="CHECKBOX" id="60_1" value="1" name="data[reportsInfo][Campaign][2752]">
        <label for="60_1">23 apr new campaign 1</label>
    </div>
    <div>
        <input type="CHECKBOX" id="60_2" value="1" name="data[reportsInfo][Campaign][2753]">
        <label for="60_2">23 apr new campaign 2</label>
    </div>
    <div>
        <input type="CHECKBOX" id="60_3" value="1" name="data[reportsInfo][Campaign][2707]">
        <label for="60_3">2nd camp added</label>
    </div>
</div>

使用 jquery 1.3.2，以下返回输入的实际计数 -

$("#60table INPUT[type='checkbox']").length

但是，现在使用 jquery 1.6.4，上面返回 0(注意输入的位置就像 #60table > div > input 而不是直接在 #60table 下)。我必须做$("#60table").find("INPUT[type='checkbox']").length得到正确的号码。

因此，以下现有代码在升级后停止工作，即使我替换了 attr与 prop -

$("#60table INPUT[type='checkbox']").attr('checked', $("#60").attr("checked")); //I replaced the attr by prop here

所以，我仍然遇到新问题，旧代码在升级后不再工作。

赏金
因为 -

元素选择器逻辑不再起作用 - 我不确定是否还有更多代码不起作用。以为例更新 4 , 当输入的位置是 #60table > div > input , 选择像 $("#60table INPUT[type='checkbox']") 是不是不正确？ .如果是这样，我的项目中是否还有一些其他常见错误可能已经损坏。

更好地解释在哪里用 prop 替换 attr - 我需要更清楚地区分何时使用 prop 而不是 attr，并提供更多示例。根据乔恩的回答 -

If it directly affects the behavior or state of the UI widget use prop; otherwise use attr.

我在哪里可以获得某种属性列表，这些属性直接影响 UI 小部件的某些属性

Answer 1

该问题根本与数据属性的案例映射无关，这仅仅是由于属性/属性 API 的演变:

In the past, jQuery has not drawn a clear line between properties and attributes. Generally, DOM attributes represent the state of DOM information as retrieved from the document, such as the value attribute in the markup . DOM properties represent the dynamic state of the document; for example if the user clicks in the input element above and types def the .prop("value") is abcdef but the .attr("value") remains abc.

In most cases, the browser treats the attribute value as the starting value for the property, but Boolean attributes such as checked or disabled have unusual semantics.

至于缺少其他相关的重大更改，搜索您的代码以了解 attr 的使用应该足够了。并替换为 prop适本地；鉴于 attr往往会在大多数情况下使用，因此通常应该替换大多数调用。

更新:让我们适本地定义。

关键思想是元素具有 HTML 属性:<input name="foo" disabled>具有属性 id和 disabled ; id有一个值，而 disabled才不是。这些属性之一直接影响浏览器呈现以表示此元素的 UI 小部件的属性(输入框被禁用，在桌面应用程序控件的意义上)。所以经验法则是:

If it directly affects the behavior or state of the UI widget use prop; otherwise use attr.

在您提到的示例中，id是不直接影响任何元素的行为或状态的抽象量；因此你应该继续使用attr为了它。

更新 2:

Should I still replace attr to prop in the setting code, even though setting is working now?

是的，您应该这样做，因为 jQuery 的文档是这么说的。正如您在问题前面提到的，混合 prop和 attr可能导致有问题的行为。

更新 3:

Is there some place from where I can get some kind of a list of attributes which directly affect some property of the UI widget? I am still having confusions deciding for which attributes to replace attr to prop.

并不真地。一个适用于此的经验法则是，如果某物是 bool 值，那么 prop很可能是访问它的正确方法。

更新 4:

It looks like, somewhere in between these two versions (1.3.2 to 1.6.4), jquery made element selection more strict.

实际上是Sizzle它负责从选择器(jQuery comes with Sizzle built-in)中解析匹配的元素。我不知道导致行为改变的原因是什么，但罪魁祸首是你的 id以数字开头。 This is not valid HTML 4.01 ，但由于某种原因，它也对 Sizzle 产生了影响。解决方法很简单:不要启动 id用一个数字。

您发现的另一种解决方法(将选择器分成两部分并使用 .find )是有效的，因为在选择器的形式为 #id 的特殊情况下, jQuery directly calls getElementById而不是调用 Sizzle。