这篇文章主要介绍了jQuery中的prop和attr区别是什么,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
在JQuery
中,对CheckBox
的操作分两个阶段,一个是JQuery1.6
之前的版本,一个是1.6之后的版本
在1.6之前,我们这么做:
<input type ='checkbox' id='checkbox'/><script>var isChecked = $('#checkbox').attr('checked');$('#checkbox').attr('checked',true);<script/>
但是细心的同学会发现,在jQuery1.6
之后,如果还像上面这么做,那肯定会出问题: $('#checkbox').attr('checked')
;获取到的值并不是true
和false
,而是checked
或者undefined
那在1.6之后如何进行操作呢?
jQuery
在之后的版本中对属性和特性进行了比较细致的区分,什么是特性呢? 特性就是像 checked
,selectedIndex
, tagName
, nodeName
, nodeType
, ownerDocument
, defaultChecked
, 和defaultSelected
等等这些。
那prop()和attr()到底有什么区别呢?
于build-in
属性,attribute
和property
共享数据,attribute
更改了会对property
造成影响,反之亦然,但是两者的自定义属性是独立的数据,即使name
一样,也互不影响,看起来是下面这张图,但是IE6、7
没有作区分,依然共享自定义属性数据
并不是所有的attribute
与对应的property
名字都一致,比如刚才使用的attribute
的class
属性,使用property
操作的时候应该是这样className t.className='active2'
;
对于值是true/false
的property
,类似于input
的checked attribute
等,attribute
取得值是HTML
文档字面量值,property
是取得计算结果,property
改变并不影响attribute
字面量,但attribute
改变会一向property
计算 <input id="test3" type="checkbox"/>
var t=document.getElementById('test3');console.log(t.getAttribute('checked'));//nullconsole.log(t.checked);//false
t.setAttribute('checked','checked'); console.log(t.getAttribute('checked'));//checked console.log(t.checked);//true t.checked=false; console.log(t.getAttribute('checked'));//checked console.log(t.checked);//false
对于一些和路径相关的属性,两者取得值也不尽相同,但是同样attribute
取得是字面量,property
取得是计算后的完整路径 <a id="test4" href="#">Click</a> js var
var t=document.getElementById('test4');console.log(t.getAttribute('href'));//#console.log(t.href);//file:///C:Users/bsun/Desktop/ss/anonymous.html#
感谢你能够认真阅读完这篇文章,希望小编分享的“jQuery中的prop和attr区别是什么”这篇文章对大家有帮助,同时也希望大家多多支持编程网,关注编程网行业资讯频道,更多相关知识等着你来学习!