您的位置：首页 > Web前端 > JQuery

jquery中attr方法和prop方法的区别

2017-05-03 08:58 671 查看
关于
checked
的属性，最重要的概念就是你要记住，它跟
checked
的状态值是毫无关系的，设置
checked="checked"
或者
checked="true"
等属性设置，和它的状态值
true/false
是无关的。，而这里的属性值，事实上只是和
defaultChecked
的状态值有关，并且只能用来设置
checkbox
的初始的值。
checked
的属性值并不会随着
checkbox
的的状态变化而变化，可是
checkbox
的状态值却会。因此，为了能更好的跨浏览器的兼容，决定了
checkbox
的
checked
的状态要使用状态值进行处理。例如：
if(elem.checked)
if($(elem).prop("checked"))
if($(elem).is(":checked"))
这些理论，对于那些动态的属性来说，效果是相同的，例如：
selected
和
value
属性。attr()方法设置或返回被选元素的属性值。根据该方法不同的参数，其工作方式也有所差异。返回被选元素的属性值。prop()方法设置或返回被选元素的属性和值。当该方法用于返回属性值时，则返回第一个匹配元素的值。当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。注意：prop()方法应该用于检索属性值，例如DOM属性（如selectedIndex,tagName,nodeName,nodeType,ownerDocument,defaultChecked,和defaultSelected）。提示：如需检索HTML属性，请使用attr()方法代替。提示：如需移除属性，请使用removeProp()方法。jQuery中，用于获取属性的方法，主要是基于
prop
方法的，我们经常使用的是attr方法，不过在
attr
方法中，有时候会出现一些问题的，这里就看下jquery的API中
attr
的介绍，主要内容翻译自jQuery的API介绍：attr()

1.基本使用方法

attr()
的作用:获取匹配到的第一个元素的一个属性值，或者是为所有匹配的元素进行属性赋值。支持的方法：

.attr(attributeName)

获取匹配到的第一个元素的一个属性值。输入值attributeNameType:String，需要获取的属性名称
.attr()
方法，只能获取匹配到的第一个元素的值，如果你想要获取匹配到的所有的元素的属性值，那么就需要借助jquery中的循环的方法，比如：
.each()
和
.map()
;使用jQuery的
.attr()
方法，获取元素的属性值有两个最重要的优势：1：使用简单，它可以直接对一个jQuery对象使用，并且使用过之后可以继续使用其他的jQuery方法。2：跨浏览器兼容性，有些属性的获取方法在浏览器上不兼容的，甚至于有的在同一浏览器的不同版本之间，都会出现不兼容的问题，.attr()方法降低了这种不兼容性。注：属性值是一个通常会返回一个字符串，偶尔也会返回类似价值或者数字顺序的值。注：在IE6，IE7，IE8中，如果你试图去改变一个input元素的type属性，当这个input已经添加到页面时，会抛出一个错误。在jQuery1.6中，
.attr()
方法查询那些没有设置的属性，则会返回一个undefined。如果你要去恢复或者改变DOM状态值，类似
checked
，
selected
，
disabled
等表单元素的状态，最好使用
.prop()
方法。属性值VS状态值在一些特殊的情况下，属性值和状态值的不同是有很大影响的。在jQuery1.6之前的版本，
.attr()
方法在恢复一些属性时，有时会把状态值也考虑进去，这样的话，就会导致浏览器的兼容问题。在jQuery1.6中，
.prop()
提供的方法可以避免恢复状态值，而
.attr()
方法会恢复状态值。例如：
selectedIndex
,
tagName
,
nodeName
,
nodeType
,
ownerDocument
,
defaultChecked
,和
defaultSelected
这些属性，就应该使用
.prop()
方法进行恢复属性值。在jQuery1.6之前的版本，这些状态值都是可以通过
.attr()
获取的，虽然获取这些状态值并不是
attr
的工作范围。这些个状态值和属性是没有任何联系的，它们仅仅是一个状态。就布尔逻辑型的属性而言，如果我们定义一个这样的HTML的DOM对象。
<inputtype="checkbox"checked="checked"/>
，并且假设这个
HTML
对象在
Javascript
中被命名为
elem
.看一下它们的使用不同方法对
checked
属性取值的结果显示：根据W3C的规范，
“checked”
属性，是一个布尔逻辑型的属性，这就意味着，如果该属性存在的话，那么它对应的状态值的取值结果是正确的，例如，即使该属性没有值，或者被设置成一个空字符串，或者设置为
“false”
,对于布尔逻辑型属性来说都是正确的。然而，关于
checked
的属性，最重要的概念就是你要记住，它跟
checked
的状态值是毫无关系的，设置
checked="checked"
或者
checked="true"
等属性设置，和它的状态值
true/false
是无关的。，而这里的属性值，事实上只是和
defaultChecked
的状态值有关，并且只能用来设置
checkbox
的初始的值。
checked
的属性值并不会随着
checkbox
的的状态变化而变化，可是
checkbox
的状态值却会。因此，为了能更好的跨浏览器的兼容，决定了
checkbox
的
checked
的状态要使用状态值进行处理。例如：
if(elem.checked)
if($(elem).prop("checked"))
if($(elem).is(":checked"))
这些理论，对于那些动态的属性来说，效果是相同的，例如：
selected
和
value
属性。补充注释：在IE9之前的浏览器版本中，使用
.prop()
方法，设置一个
DOM
元素的状态值，相较于那些原始的值（数字，字符串，或者布尔逻辑值）是不同的，如果这个
DOM
元素在被移除文档之前，没有使用
.removeProp()
移除这个状态值，那么它将会导致内存泄露，如果想要比较安全的在
DOM
对象上面设置属性值，而又不会导致内存泄露，那么使用
.data
这句话，没有理解到举例：核心代码如下
<body>
<inputid="check1"type="checkbox"checked="checked">
<labelfor="check1">Checkme</label>
<p></p>
<script>
$("input")
.change(function(){
var$input=$(this);
$("p").html(".attr('checked'):<b>"+$input.attr("checked")
　　　　+"</b><br>"+".prop('checked'):<b>"+$input.prop("checked")
　　　　+"</b><br>"+".is(':checked'):<b>"+$input.is(":checked")
　　　　+"</b>");}).change();
</script>
查看原页面代码，可以点击：attr-prop；这里就不再举例说明
attr
的正常使用方法了，如果你有兴趣，可以点击查看：实例demo

2：使用attr进行赋值操作。

.attr(attributeName,name)

attributeName:String,需要设置的属性名称StringorNumber,需要设置的属性的属性值。

.attr(attributes)

attributes:Object,需要设置的属性组成的一个对象。

.attr(attributeName,function(index,attr))

attributeName:String,设置的属性名称。function(index,attr):Function,函数的返回值设置为属性的值，
this
表示当前选中的元素，接收的第一个参数是表示，当前选中的元素中的位置的序列（从0开始），第二个参数为该元素，对于该属性的原来的属性值。使用
.attr()
方法去设置属性值是非常方便的，尤其是需要设置多个属性，或者需要设置的属性值是一个
function
的返回值时，看下面的
image
标签：
<imgid="greatphoto"src="brush-seller.jpg"alt="brushseller"\>
[/code]设置一个简单的属性，使用
.attr()
可以简单的根据属性名和属性值的改变alt属性的值。
$("#greatphoto").attr("alt","BeijingBrushSeller");
[/code]也可以使用同样的方法，添加一个新的属性：
$("#greatphoto").attr("title","PhotobyKellyClark");
[/code]也可以一次设置多个属性：改变属性
alt
的值，同时添加新的属性
title
。
$(“#greatphoto”).attr({
alt:“BeijingBrushSeller”,
title:“photobyKellyClark”
});
[/code]当设置多个属性时，属性名的引号是可以省略的。警告：当设置class属性时，引号是不可以被省略的。注：jQuery禁止改变
<input>
和
<button>
元素的
type
属性，如果强制去改变，在任何浏览器下，这都会抛出一个异常，这是因为，在IE浏览器下，
type
属性是不可被修改的。所以就在所有的浏览器下，都不能进行设置，保存兼容性的统一。计算后的属性值：通过使用
function
设置属性，可以通过其他的属性值进行计算之后，再进行属性赋值操作，例如：基于一个已有的属性连接处一个新的属性值。
$(“#greatphoto”).attr(“title”,function(i,val){returnval+”–photobyKellyClark”;});
[/code]这种通过
function
计算属性值的方法在一次性对多个元素设置不同的属性值时，尤其的有效。例子:为页面中的所有img设置一些属性，核心代码如下：
<body><img><img><img><div><b>AttributeofAjax</b></div><script>$("img").attr({src:"/resources/hat.gif",title:"jQuery",alt:"jQueryLogo"});$("div").text($("img").attr("alt"));</script></body>
[/code]<br/>根据div在页面中的position，设置它的id属性。
<body><div>Zero-th<span></div><div>First<span></span></div><div>Second<span></span></div><script>$("div").attr("id",function(arr){return"div-id"+arr;}).each(function(){$("span",this).html("(id='<b>"+this.id+"</b>')");});</script></body>
[/code]<br/>OK，这里就暂时叙述到这里了，如果你不明白为什么
.attr()
的取值和
.prop()
的取值有这个差别，那么就先看看前一篇文章，js原生操作HTML对象的属性区别，然后再去看看
jquery
源码中的，
.attr()
方法和
.prop()
方法的实现吧。http://www.zhangyunling.com/?p=38
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航