轩枫阁

首页 / 授人以渔 / JQuery / jQuery中的prop()与attr()的用法区别

jQuery中的prop()与attr()的用法区别

attr()方法

一般jQuery中,获取或设置属性的值是通过attr()方法。如:

  • 返回文档中所有图像的src属性值:$(“img”).attr(“src”);
  • 为所有图像设置src和alt属性:$(“img”).attr({ src: “test.jpg”, alt: “Test Image” });

prop()方法

而jquery的1.6版本中,增加了prop(),方法,有什么用意呢?大家都知道有的浏览器只要写disabled,checked就可以了,而有的要写成disabled = “disabled”,checked=”checked”,比如用attr(“checked”)获取checkbox的checked属性时选中的时候可以取到值,值为”checked”但没选中获取值就是undefined。

jq提供新的方法“prop”来获取这些属性,就是来解决这个问题的,以前我们使用attr获取checked属性时返回”checked”和undefined,现在使用prop方法获取属性则统一返回true和false。

那么,我们的结论是
1.添加属性名称该属性就会生效应该使用prop();
2.是有true,false两个属性使用prop();如checked、selected、disabled
3.其他则使用attr();

 prop()使用方法

语法:prop(name|properties|key,value|fn)
获取在匹配的元素集中的第一个元素的属性值。

随着一些内置属性的DOM元素或window对象,如果试图将删除该属性,浏览器可能会产生错误。jQuery第一次分配undefined值的属性,而忽略了浏览器生成的任何错误

  • 选中复选框为true,没选中为false:

  • 禁用页面上的所有复选框:

  • 禁用和选中所有页面上的复选框:

  •  通过函数来设置所有页面上的复选框被选中:

官方建议attr(),prop()的使用表

Attribute/Property .attr() .prop()
accesskey  
align  
async
autofocus
checked
class  
contenteditable  
draggable  
href  
id  
label  
location ( i.e. window.location )
multiple
readOnly
rel  
selected
src  
tabindex  
title  
type  
width ( if needed over .width() )
278/435
280/435

相关文章

文章评论

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]