4

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

  1. 禁用某些东西 -

    $(selector).attr("disabled","");

  2. 检查单选按钮是否被选中 -

    if($(selector).attr('checked'))

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

来源 -从 jQuery 1.3.2 升级到 jQuery 1.5（或 1.4）

更新

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

您真正需要小心的是不要在整个应用程序中混合使用这些用于相同的属性

如果这些线路现在工作正常，我是否需要更换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

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

放赏金
因为 -

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

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

如果它直接影响 UI 小部件的行为或状态，请使用 prop；否则使用 attr。

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

4

2 回答 2

9

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

过去，jQuery 并没有在属性和属性之间划清界限。通常，DOM 属性表示从文档中检索到的 DOM 信息的状态，例如标记中的 value 属性。DOM 属性表示文档的动态状态；例如，如果用户单击上面的输入元素并键入 def，.prop("value") 是 abcdef，但 .attr("value") 仍然是 abc。

在大多数情况下，浏览器将属性值视为属性的起始值，但选中或禁用等布尔属性具有不寻常的语义。

至于缺少其他相关的重大更改，搜索您的代码attr以适当地使用和替换就足够了prop；考虑attr到大部分时间的使用倾向，大多数调用通常应该被替换。

更新：让我们适当地定义.

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

如果它直接影响 UI 小部件使用的行为或状态prop；否则使用attr.

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

更新 2：

即使设置现在可以工作，我是否仍应将 attr 替换为设置代码中的道具？

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

更新 3：

有没有什么地方可以让我获得某种属性列表，这些属性直接影响 UI 小部件的某些属性？我仍然对决定哪些属性将 attr 替换为 prop 感到困惑。

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

更新 4：

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

实际上是Sizzle负责从选择器中解析匹配的元素（jQuery 带有内置的 Sizzle）。我不知道是什么变化导致了行为的改变，但罪魁祸首是你的id，它以数字开头。这不是有效的 HTML 4.01，但由于某种原因，它在 Sizzle 中也有所不同。解决方法很简单：不要id以数字开头。

您发现的另一种解决方法（将选择器分成两部分并使用.find）是有效的，因为在选择器为 form 的特殊情况下#id，jQuery直接调用 getElementById而不是调用 Sizzle。

于 2012-04-17T07:03:19.363 回答
1

要回答您的更新 #4：

ID 属性不应以数字开头

有效的原因$('#60table')是因为在 jQuery 内部进行了优化，因为document.getElementById('#60table')它通常在浏览器中有效，受到抗议:)

但是，当您开始使用组合表达式时，例如$('#60table input[...]')Sizzle 引擎就会运行，它对其查询使用更严格的规则。

希望有帮助。

于 2012-05-15T16:28:46.017 回答