Code
2023-03-06 10:00:02

.prop（）与.attr（）

所以jQuery1.6有了新的函数prop（）。

$(selector).click(function(){
    //instead of:
    this.getAttribute('style');
    //do i use:
    $(this).prop('style');
    //or:
    $(this).attr('style');
})

或者在这种情况下，他们会做同样的事情吗？

如果我必须切换到使用prop（），那么如果我切换到1.6，所有旧的attr（）调用都会中断？

更新

选择器='#id'$（选择器）.click（函数）{//而不是：var getAtt=this.getAttribute（'style'）；//我是否使用：var thisProp=$（this）.prop（'style'）；//或：var thisAttr=$（this）.attr（“样式”）；console.log（getAtt、thisProp、thisAttr）；});<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js“></script>测试</div>

（另请参见此小提琴：http://jsfiddle.net/maniator/JpUF2/)

控制台将getAttribute作为字符串记录，将attr作为字符串记录但将prop作为CSSStyleDeclaration记录，为什么？这对我未来的编码有何影响？

当前回答

通常你会想使用财产。仅将属性用于：

获取自定义HTML属性（因为它未与DOM属性同步）。获取与DOM属性不同步的HTML属性，例如获取标准HTML属性的“原始值”，如＜input value＝“abc”＞。

2014-02-02 20:36:51

其他回答

轻轻提醒使用prop（），例如：

if ($("#checkbox1").prop('checked')) {
    isDelete = 1;
} else {
    isDelete = 0;
}

上面的函数用于检查checkbox 1是否选中，如果选中：返回1；如果没有：返回0。函数prop（）在这里用作GET函数。

if ($("#checkbox1").prop('checked', true)) {
    isDelete = 1;
} else {
    isDelete = 0;
}

上面的函数用于设置要检查的checkbox 1，并始终返回1。现在函数prop（）用作SET函数。

别搞砸了。

P/S：当我检查Image src属性时。如果src为空，prop返回页面的当前URL（错误），attr返回空字符串（正确）。

2015-10-17 16:12:52

在prop（）与attr（）中，几乎没有其他注意事项：

selectedIndex、tagName、nodeName、nodeType、ownerDocument、defaultChecked和defaultSelected。。应使用.prop（）方法检索和设置。这些属性没有相应的属性，只是财产。输入类型复选框.attr（'checked'）//返回已检查.prop（'checked'）//返回true.is（“：checked”）//返回trueprop方法返回选中、选中、禁用或禁用的布尔值，只读。。而attr返回定义的字符串。所以，你可以直接在if条件下使用.prop（'checked'）。.attr（）在内部调用.prop（），因此.attr比直接通过.prop（）访问它们慢。

2020-05-14 16:58:16

所有内容都在文档中：

属性和财产之间的差异在特定情况下可能很重要。在jQuery1.6之前，.attr（）方法在检索某些属性时有时会考虑属性值，这可能会导致不一致的行为。从jQuery1.6开始，.prop（）方法提供了显式检索属性值的方法，.attr（）方法检索属性。

所以使用道具！

2011-05-03 19:35:47

有一件事.attr（）可以做到。prop（）不能做到：影响CSS选择器

这是我在其他答案中没有看到的问题。

CSS选择器[名称=值]

将响应.attr（'name'，'value'）但不总是.prop（'name'，'value'）

.prop（）仅影响少数属性选择器

输入[name]（谢谢@TimDown）

.attr（）影响所有属性选择器

输入[值]输入[名称]span[名称]input[data自定义属性]（.data（'custom-attribute'）都不会影响此选择器）

2019-06-11 20:31:17

2012年11月1日更新

我最初的答案特别适用于jQuery1.6。我的建议保持不变，但jQuery 1.6.1稍微改变了一些事情：面对预测的一堆破碎的网站，jQuery团队将attr（）恢复到了接近（但不完全相同）其布尔属性的旧行为。John Resig也在博客中谈到了这一点。我可以看到他们遇到的困难，但仍然不同意他的建议，更喜欢attr（）。

原答覆

如果您只使用过jQuery，而没有直接使用过DOM，那么这可能是一个令人困惑的变化，尽管这在概念上肯定是一个改进。不过，对于使用jQuery的大量网站来说，这并不太好，因为这一变化会导致网站崩溃。

我将总结主要问题：

通常需要prop（）而不是attr（）。在大多数情况下，prop（）执行attr（）以前的操作。在代码中用prop（（）替换对attr（的调用通常是有效的。财产通常比属性更容易处理。属性值只能是字符串，而属性可以是任何类型。例如，选中的属性是布尔值，样式属性是每个样式都有单独财产的对象，大小属性是数字。如果同时存在具有相同名称的属性和属性，通常更新一个属性会更新另一个属性，但输入的某些属性（例如value和checked）并非如此：对于这些属性，属性始终表示当前状态，而属性（旧版本的IE除外）对应于输入的默认值/检查（反映在defaultValue/defaultChecked属性中）。这一更改删除了一些停留在属性和财产前面的神奇jQuery层，这意味着jQuery开发人员必须了解财产和属性之间的区别。这是一件好事。

如果您是一名jQuery开发人员，对财产和属性的整个业务感到困惑，那么您需要后退一步，稍微了解一下，因为jQuery不再试图保护您不受这些东西的影响。关于这个主题的权威但有些枯燥的词汇，有一些规范：DOM4、HTMLDOM、DOMLevel 2、DOMLevel 3。Mozilla的DOM文档适用于大多数现代浏览器，并且比规范更容易阅读，因此您可能会发现它们的DOM参考很有用。有一节是关于元素财产的。

作为财产比属性更容易处理的示例，请考虑一个最初选中的复选框。这里有两种可能的有效HTML：

<input id="cb" type="checkbox" checked>
<input id="cb" type="checkbox" checked="checked">

那么，如何确定jQuery是否选中了复选框？查看堆栈溢出，您通常会发现以下建议：

如果（$（“#cb”）.attr（“checked”）==true）｛…｝如果（$（“#cb”）.attr（“check”）==“checked”）｛…｝如果（$（“#cb”）.is（“：checked”））｛…｝

这实际上是世界上使用选中的布尔属性最简单的事情，自1995年以来，它在每个主要的可脚本化浏览器中都存在并完美运行：

if（document.getElementById（“cb”）.checked）｛…｝

该属性还使选中或取消选中复选框变得微不足道：

document.getElementById（“cb”）.checked=false

在jQuery1.6中，这明确地变成

$（“#cb”）.prop（“checked”，false）

使用checked属性编写复选框脚本的想法是无益的，也是不必要的。这是你需要的。

使用checked属性来检查或取消选中复选框的正确方法并不明显属性值反映的是默认状态，而不是当前的可见状态（除了在一些旧版本的IE中，这使得事情变得更加困难）。属性告诉页面上的复选框是否被选中。看见http://jsfiddle.net/VktA6/49/.

2011-05-03 23:06:19

推荐文章

aliyun

最新文章

标签

2024 code 京ICP备15047053号-1