javascript - .prop( ) VS .attr( )

  显示原文与译文双语对照的内容
0 0

因此,1.6 具有新函数 prop()


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

或者在这种情况下,他们做同样的事情?

如果我做对使用旧 attr()prop(),所有的调用将会被破坏,如果我不得不 switch switch 到 1.6?

更新

参见这个小提琴的 http://jsfiddle.net/maniator/JpUF2/

控制台将 getAttribute 作为字符串记录,attr 作为字符串,而 prop 作为 CSSStyleDeclaration,为什么? 这对我将来的编码有什么影响?

时间: 原作者:

0 0

这个变化已经很长一段时间了。 多年以来,他们一直在使用一个名为 attr()的函数,它主要检索DOM属性,而不是你期望的名称。 attr()prop()的隔离应该有助于减轻HTML属性和DOM属性之间的混淆。$.fn.prop() 获取指定的DOM属性,而 $.fn.attr() 获取指定的HTML属性。

为了完全理解它们的工作方式,这里对HTML属性和DOM属性之间的差异进行了扩展解释。:

HTML属性

语法:

<body onload="foo()">

目的: 允许标记为事件,呈现和其他目的提供相关数据。

可视化:HTML Attributes 类属性显示在正文中。 可以通过以下代码访问:


var attr;
attr = document.body.getAttribute("class");
//IE 8 Quirks and below
attr = document.body.getAttribute("className");

属性以字符串形式返回,并且与浏览器不一致。 然而,在某些情况下,它们是至关重要的。 如上面所示,IE 8怪癖模式( 以及下面) 期望 get/set/removeAttribute 属性的名称,而不是属性名。 这是很重要的原因之一,因为它很重要。

DOM属性

语法:

document.body.onload = foo;

目的: 提供访问属于元素节点的属性。 这些属性类似于属性,但只能通过JavaScript访问。 这是一个重要的区别,它有助于阐明DOM属性的作用。 从属性 请注意,属性是完全不同的,因为这事件处理程序赋值是无用的,因此将不会收到事件( body没有onload事件,只有onload属性) 。

可视化:DOM Properties

在这里,你将在Firebug的"dom"选项卡下看到一个属性列表。 这些是DOM属性。你将立即注意到其中的一些,你将在不知道它们之前使用它们。 它们的值就是你通过JavaScript接收的内容。

文档

例子

html : <textarea id="test" value="foo"></textarea>

JavaScript: alert($('#test').attr('value'));

在早期版本的jQuery中,这将返回一个空字符串。 在 1.6中,它返回正确的值,foo

没有看到任何函数的新代码,我可以自信地说,混淆与HTML属性和DOM属性之间的差异有关,而不是代码本身。 希望这可以帮你清理一些东西。

-Matt

原作者:
0 0

属性在DOM中;属性在解析为DOM的HTML中。

详细信息

如果更改属性,更改将反映在 DOM ( 有时使用不同名称) 中。
示例:更改标记的class 属性将在DOM中更改该标记的className 属性
如果标记上没有属性,则仍然有相应的具有空或者默认值的DOM属性。
示例:虽然你的标记没有 class 属性,但DOM属性 className的确存在一个空字符串值。

编辑

如果你改变了一个,另一个将被控制器改变,反之亦然。 这里控制器不是在jQuery中,而是在浏览器的本机代码中。

原作者:
0 0

正是HTML属性和DOM对象之间的区别导致了混淆。 对于那些对DOM元素的原生属性( 如 this.srcthis.valuethis.checked 等) 感到舒适的,.prop 是一个非常温暖的家庭欢迎。 对于其他人来说,这只是一个混乱的层。 让我们来弄清楚。

查看 .attr.prop 之间差异的最简单方法是以下示例:


<input blah="hello">

  1. $('input').attr('blah'): 按预期返回 'hello' 。 这里没有 suprises 。
  2. $('input').prop('blah'): 返回 undefined --,因为它试图执行 [HTMLInputElement].blah --,而DOM对象上不存在这种属性。 它只是作为元素 换句话说,的属性存在 [HTMLInputElement].getAttribute('blah')

现在我们改变一些东西:


$('input').attr('blah', 'apple');
$('input').prop('blah', 'pear');

  1. $('input').attr('blah'): 返回 'apple' eh? 为什么"梨子"不在这里元素上最后设置。 因为属性在输入属性上被更改,而不是DOM输入元素本身,所以它们基本上彼此独立工作。
  2. $('input').prop('blah'): 返回 'pear'

真正需要请谨慎对待只是不混合使用的东西有这些为同一属性的用法在整个应用程序中针对上原因。

请看演示差异的fiddle: http://jsfiddle.net/garreh/uLQXc/


.attr vs .prop:

圆形 1: 样式


<input style="font:arial;"/>

  • .attr('style') --返回匹配元素 换句话说,"font:arial;"的内联样式
  • .prop('style') --返回样式声明对象 换句话说,CSSStyleDeclaration

舍入 2: 值


<input value="hello" type="text"/> 

$('input').prop('value', 'i changed the value');

  • .attr('value') --返回 'hello' *
  • .prop('value') --返回 'i changed the value'

* 注意:由于这个原因,jQuery有一个 .val() 方法,它内部相当于 .prop('value')

原作者:
0 0

磅;DR博士

在大多数情况下使用 prop() 超过 attr()

属性是输入元素的当前状态。 属性是默认值。

属性可以包含不同类型的东西。 属性只能包含字符串

原作者:
0 0

脏 checkedness 就是这样一个例子,不同的是可以观察

要查看它,运行以下代码 Fragment:

  • 单击该按钮。两个复选框都已经被选中。
  • 取消选中两个复选框。
  • 再次单击该按钮。只有 prop 复选框被选中。 爆炸 !

$('button').on('click', function() {
 $('#attr').attr('checked', 'checked')
 $('#prop').prop('checked', true)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>attr <input id="attr" type="checkbox"></label>
<label>prop <input id="prop" type="checkbox"></label>
<button type="button">Set checked attr and prop.</button>

例如 disabled 上的一些属性,添加或者删除内容属性 disabled="disabled" 总是切换属性( 在HTML5中调用IDL属性),因为 http://www.w3.org/TR/html5/forms.html#attr-fe-disabled 表示:

禁用的IDL属性必须反映已经禁用的内容属性。

所以你可能会得到舍弃它,尽管它是丑陋的,因为它会修改HTML但不需要的。

对于其他属性,如 checked="checked"input type="checkbox" 上,事情打破,因为一旦你点击它时,它就成为脏,然后添加或者删除该内容属性 checked="checked" 不切换checkedness再也

这就是为什么你应该使用 .prop,因为它直接影响了有效属性,而不是依赖复杂的副作用。

0 0

通常你需要使用属性。 仅使用属性:

  1. 获取自定义的HTML属性( 因为它没有与DOM属性同步) 。
  2. 获取与DOM属性不同步的HTML属性,比如 获取标准HTML属性的"原值",如 <input value="abc">.
原作者:
...