本文共 2154 字,大约阅读时间需要 7 分钟。
Write By Monkeyfly
以下内容均为原创,如需转载请注明出处。
在 jQuery
里,我们要获取一个标签元素的属性,可以用 attr()方法
或者 prop()方法
,那么两者有什么区别呢?
jQuery attr()
方法 和 prop()
方法attr()
方法设置或返回被选元素的属性值。prop()
方法设置或返回被选元素的属性和值。注:单纯从定义看的话,两个方法的作用都是一样的。而且用法也都差不多,如下所示。
作用一:返回被选元素的属性值。语法如下:
$(selector).attr(attribute)$(selector).prop(property)
作用二:设置被选元素的属性和值。语法如下:
$(selector).attr(attribute,value)$(selector).prop(property,value)
作用三:设置多个属性和值。语法如下:
$(selector).attr( { attribute:value, attribute:value ...} ) //对象的写法,键值对$(selector).prop( { property:value, property:value,...} ) //对象的写法,键值对
作用四:使用函数设置属性和值。语法如下:(平时很少用到)
//第二个参数:规定返回要设置的属性值的函数。/*该函数包括两个参数:* index - 检索集合中元素的 index 位置。* oldvalue / currentvalue - 检索被选元素的当前属性值。*/$(selector).attr(attribute,function(index,oldvalue))$(selector).prop(property,function(index,currentvalue))
我们会发现:
attr
,一个是 prop
。attr
的 全拼是 attribute
。 prop
的全拼是 property
。它们是两个不同的单词,虽说都有 属性
的意思,但其中的寓意必然不一样。property
和 attribute
的 区别
property
n.
属性,性质,性能;财产;所有权attribute
n.
属性;特质由此可见,两者非常容易混淆,因为在中文上的翻译都特别接近。但实际上,它们两个是不同的东西,属于不同的范畴。
attribute
理解为 “特性”
,而将 property
理解为 “属性”
。“属性”
关键字的话,你会发现,属性
对应的英文直接就是 property
。而且百度含义对 “属性” 的 详细释义 是:指事物本身固有的不可缺少的性质。。现在,我们知道了:
property
属性。它是与生俱来的,并不是后天赋予的。比如说,某些对象在定义时就具有某一些属性。attribute
特性。本身没有的,后天赋予的。比如说,某些对象在创建后,自定义赋予的一些属性。对应到 js
中就是:
property
是 DOM
中的属性,是 JavaScript
里的对象;attribute
是 HTML
标签上的特性(属性),它的值只能够是字符串;对应到 jQuery
中就是:
HTML
元素本身就带有的固有属性,或者说 W3C
标准里就包含有这些属性,更直观的说法就是,编辑器里面可以智能提示出来的一些属性,如:src、href、value、class、name、id等
。在处理时,使用 prop()
方法。HTML
元素我们自定义的 DOM
属性,即元素本身是没有这个属性的,如:data-*
。在处理时,使用 attr()
方法。attr()
方法 和 prop()
方法 的返回值$(eleStr).attr()
$("button").click(function(){ console.log( $("img").attr("class") );//如果属性存在,则返回属性值;如果属性不存在,则返回 undefined console.log( $("img").prop("class") );//如果属性存在,则返回属性值;如果属性不存在,则返回 空("")});
$(eleStr).prop()
$("button").click(function(){ console.log( $("input").prop("checked") ); //如果属性值存在,则返回 true;如果属性值不存在,则返回 false。 console.log( $("input").attr("checked") );//如果属性值存在,则返回 checked;如果属性值不存在,则返回 undefined。 });
如果要从根源上弄清楚二者的区别,可以参考下面这篇博文,分析的特别到位。