来源：蜘蛛抓取(WebSpider)
时间：2016-10-28 08:14
标签：
javascript生成随机数
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
您的访问请求被拒绝 403 Forbidden - ITeye技术社区
您的访问请求被拒绝
亲爱的会员，您的IP地址所在网段被ITeye拒绝服务，这可能是以下两种情况导致：
一、您所在的网段内有网络爬虫大量抓取ITeye网页，为保证其他人流畅的访问ITeye，该网段被ITeye拒绝
二、您通过某个代理服务器访问ITeye网站，该代理服务器被网络爬虫利用，大量抓取ITeye网页
请您点击按钮解除封锁&jquery判断复选框选中状态以及区分attr和prop_javascript_ThinkSAAS
jquery判断复选框选中状态以及区分attr和prop
jquery判断复选框选中状态以及区分attr和prop
最近项目中需要用jquery判断input里checkbox是否被选中，发现用attr（）获取不到复选框改变后的状态，最后查资料发现jQuery 1.6以后新增加了prop（）方法，借用官方的一段描述就是：
The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.
上面翻译过来大概就是：prop（）处理来自节点对象自带的属性，它包含了很多原生的property；而attr（）来自对象的attributes，可能是我们在元素节点上添加属性节点才会有的。当然，前面的翻译仅代表本人观点，如有错误，可以提出来~~
简单的来说就是：
对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
上面的描述也许有点模糊，引用一些大神的博客内容加上我的测试，举几个例子就知道了。
第一个例子：元素的固有属性以及自定义属性说明
&a href="" target="_self" class="btn"&百度&/a&
这个例子里&a&元素的DOM属性有“href、target和class"，这些属性就是&a&元素本身就带有的属性，也是W3C标准里就包含有这几个属性，或者说在IDE里能够智能提示出的属性，这些就叫做固有属性。处理这些属性时，建议使用prop方法。
&a href="#" id="link1" action="delete"&删除&/a&
这个例子里&a&元素的DOM属性有“href、id和action”，很明显，前两个是固有属性，而后面一个“action”属性是我们自己自定义上去的，&a&元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时，建议使用attr方法。使用prop方法取值和设置属性值时，都会返回undefined值。
第二个例子：prop（）与attr（）在表单应用上的区别
先来看一段用attr（）方法代码：
&!DOCTYPE html&
&html&
&head&
&meta charset="utf-8" /&
&title& attr() vs prop()&/title&
&/head&
&body&
&h3&用attr（）判断是否选中&/h3&
&input type="checkbox" id="input01" /&我是第一个复选框A&br /&
&input type="checkbox" id="input02" checked="checked"/&我是第二个复选框B&br /&
&input type="button" id="button01" value="获取A的checked状态" /&
&input type="button" id="button02" value="获取B的checked状态" /&
&script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"&&/script&
&script type="text/javascript"&
$(function(){
$("#button01").click(function(){
var $state01=$("#input01").attr("checked");
alert($state01);
$("#button02").click(function(){
var $state02=$("#input02").attr("checked");
alert($state02);
&/script&
&/body&
&/html&
上面这段程序的测试结果是：
从动态图可以看出来，用attr（）获取不到用户选中的状态，它只返回表单的初始值。
再来看一段用prop（）方法代码：
&!DOCTYPE html&
&html&
&head&
&meta charset="utf-8" /&
&title& attr() vs prop()&/title&
&/head&
&body&
&h3&用prop（）判断是否选中&/h3&
&input type="checkbox" id="input01" /&我是第一个复选框A&br /&
&input type="checkbox" id="input02" checked="checked"/&我是第二个复选框B&br /&
&input type="button" id="button01" value="获取A的checked状态" /&
&input type="button" id="button02" value="获取B的checked状态" /&
&script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"&&/script&
&script type="text/javascript"&
$(function(){
$("#button01").click(function(){
var $state01=$("#input01").prop("checked");
alert($state01);
$("#button02").click(function(){
var $state02=$("#input02").prop("checked");
alert($state02);
&/script&
&/body&
&/html&
上面这段程序的测试结果是：
从动态图可以看出来，用prop（）可以实时获取用户的选中与取消操作状态。
因此我总结的差别就是：property记录的值会按照用户操作实时更新，而attribute记录的都是初始值，仅代表本人观点。
希望本文所述对大家学习javascript程序设计有所帮助。
PHP开发框架
开发工具/编程工具
服务器环境
ThinkSAAS商业授权：
ThinkSAAS为用户提供有偿个性定制开发服务
ThinkSAAS将为商业授权用户提供二次开发指导和技术支持
让ThinkSAAS更好，把建议拿来。
开发客服微信jQuery 中，函数 attr 与 prop 间的区别
jQuery 中，函数 attr 与 prop 间的区别
本资源引自： jQuery的attr与prop - dolphinX - 博客园 /dolphinX/p/3348582.html#undefined-----------------------------------------------------------------------------------------------------------------------------------------jQuery1.6中新添加了一个prop方法，看起来和用起来都和attr方法一样，这两个方法有什么区别呢？这要从HTMl 的attribute与property区别说起，attr与prop正是这两个东西的缩写。attribute与propertyattribute和property都可以翻译为属性，为了以示区别，通常把这两个单词翻译为属性与特性。&div id="test"&Click Here&/div&上面这段HTML语句中有三个节点，分别是Element “div”、attribute “id”、Text “click here”，我们最常见的attribute正式指的attribute类型节点，在JavaScript有专门处理attribute的函数&.getAttribute(name) / setAttribute(name,value)。当然attribute不只是我们能够在HTML文档上看到的这几个，我们可以自定义attributed加到DOM节点中&div id="test"&123&/div&
&script type="text/javascript"&
var t=document.getElementById('test');
t.setAttribute('class','active');
t.setAttribute('customizedAttr','customized');
&/script&这样可以div被修改为&div id="test" class="active" customizedattr="customized"&123&/div&通过方法 setAttribute设置的attribute最终都会反映到元素的attribute类型的节点中property是DOM对象的字段，跟我们平常使用的一些对象一样，包含很多字段，这些字段就是property，取值或者设置值和普通字段一样通过”对象.字段“的方式。看起来attribute和property应该没有什么关系才对，怎么会。。。attribute和property容易混倄是因为很多attribute节点还有一个相对应的property属性，比如上面div的”id“ attribute 同样可以用t.id取到（实际上绝大部分人都是这样获取的），通过property更改id后，用getAttibute获取的id是更新后的id。t.id='test1';
console.log(t.getAttribute('id'));//test1同样我们也可以自定义propertyt.customizedProp='customized prop';区别1. 于build-in属性，attribute和property共享数据，attribute更改了会对property造成影响，反之亦然，但是两者的自定义属性是独立的数据，即使name一样，也互不影响，看起来是下面这张图，但是IE6、7没有作区分，依然共享自定义属性数据2. 并不是所有的attribute与对应的property名字都一致，比如刚才使用的attribute 的class属性，使用property操作的时候应该是这样classNamet.className='active2';3. 对于值是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'));//null
console.log(t.checked);//
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&4. 对于一些和路径相关的属性，两者取得值也不尽相同，但是同样attribute取得是字面量，property取得是计算后的完整路径&a id="test4" href="#"&Click&/a&var t=document.getElementById('test4');
console.log(t.getAttribute('href'));//#
console.log(t.href);//file:///C:/Users/bsun/Desktop/ss/anonymous.html#关于浏览器（IE）造成的兼容性问题可以看看attr和prop相信看完上面内容，大家就明白为什么jQuery要添加prop方法了，在jQuery API中也有专门解释Attributes VS. Properties在一些特殊的情况下，attributes和properties的区别非常大。在jQuery1.6之前，.attr()方法在获取一些attributes的时候使用了property值，这样会导致一些不一致的行为。在jQuery1.6中，.prop()方法提供了一中明确的获取property值得方式，这样.attr()方法仅返回attributes。比如，selectedIndex,&tagName,&nodeName,&nodeType,&ownerDocument,&defaultChecked, 和defaultSelected应该使用.prop()方法获取/设置值。&在jQuery1.6之前这些不属于attribute的property需要用.attr()方法获取。这几个并没有相应的attibute，只有property。关于布尔类型 attributes，比如一个这样的HTML标签，它在JavaScript中变量名为elem&input type="checkbox" checked="checked" /&elem.checkedtrue&(Boolean) Will change with checkbox state$( elem ).prop( "checked" )true&(Boolean) Will change with checkbox stateelem.getAttribute( "checked" )"checked"&(String) Initial s does not change$( elem ).attr( "checked" )&(1.6)"checked"&(String) Initial s does not change$( elem ).attr( "checked" )&(1.6.1+)"checked"&(String) Will change with checkbox state$( elem ).attr( "checked" )&(pre-1.6)true&(Boolean) Changed with checkbox state根据，checked属性是一个布尔值，这就意味着只要checked属性在HTML中表现出来了，那么相应的property就应该是true，即使checked没有值，这点儿对其它布尔类型的属性一样适用。然而关于checked 属性需要记住的最重要的一点是：它和checked property并不是一致的。实际上这个attribute和defaultChecked&property一致，而且只应该用来设置checkbox的初始值。checked attribute并不随着checkedbox的状态而改变，但是checked property却跟着变。因此浏览器兼容的判断checkebox是否被选中应该使用propertyif ( elem.checked )
if ( $( elem ).prop( "checked" ) )
if ( $( elem ).is( ":checked" ) )这对其它一些类似于selected、value这样的动态attribute也适用。在IE9之前版本中，如果property没有在DOM元素被移除之前删除，使用.prop()方法设置DOM元素property（简单类型除外：number、string、boolean）的值会导致内存泄露。为了安全的设置DOM对象的值，避免内存泄露，可以使用.data()方法。使用场景其实明白了上面讲的内容，什么时候该使用.attr()什么时候该使用 .prop()就很清楚了，不过还是传一张坊间很流行的图
发表评论：
TA的最新馆藏[转]&[转]&[转]&[转]&[转]&[转]&4621人阅读
JavaScript专区（44）
相比attr，prop是1.6.1才新出来的，两者从中文意思理解，都是获取/设置属性的方法（attributes和properties）。只是，window或document中使用.attr()方法在jQuery1.6之前不能正常运行，因为window和document中不能有attributes。prop应运而生了。
之前看网上对比两者的文章，更是列出一个表来区分什么标签下使用prop，什么标签下使用attr，原谅我是懒惰的人，最害怕要背的东西，所以只有自己想想办法了。
既然我们想知道他们两的区别，最好就看看他们的源代码，不要被代码长度所吓到，我们只看关键的几句：
attr方法代码（jQuery版本1.8.3）
attr: function( elem, name, value, pass ) {
var ret, hooks, notxml,
nType = elem.nodeType;
if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {
if ( pass && jQuery.isFunction( jQuery.fn[ name ] ) ) {
return jQuery( elem )[ name ]( value );
if ( typeof elem.getAttribute === &undefined& ) {
return jQuery.prop( elem, name, value );
notxml = nType !== 1 || !jQuery.isXMLDoc( elem );
if ( notxml ) {
name = name.toLowerCase();
hooks = jQuery.attrHooks[ name ] || ( rboolean.test( name ) ? boolHook : nodeHook );
if ( value !== undefined ) {
if ( value === null ) {
jQuery.removeAttr( elem, name );
} else if ( hooks && &set& in hooks && notxml && (ret = hooks.set( elem, value, name )) !== undefined ) {
return ret;
elem.setAttribute( name, value + && );
return value;
} else if ( hooks && &get& in hooks && notxml && (ret = hooks.get( elem, name )) !== null ) {
return ret;
ret = elem.getAttribute( name );
return ret === null ?
undefined :
prop方法代码（jQuery版本1.8.3）
prop: function( elem, name, value ) {
var ret, hooks, notxml,
nType = elem.nodeType;
if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {
notxml = nType !== 1 || !jQuery.isXMLDoc( elem );
if ( notxml ) {
name = jQuery.propFix[ name ] || name;
hooks = jQuery.propHooks[ name ];
if ( value !== undefined ) {
if ( hooks && &set& in hooks && (ret = hooks.set( elem, value, name )) !== undefined ) {
return ret;
return ( elem[ name ] = value );
if ( hooks && &get& in hooks && (ret = hooks.get( elem, name )) !== null ) {
return ret;
return elem[ name ];
attr方法里面，最关键的两行代码，elem.setAttribute( name, value + “” )和ret = elem.getAttribute( name )，很明显的看出来，使用的DOM的API setAttribute和getAttribute方法操作的属性元素节点。
而prop方法里面，最关键的两行代码，return ( elem[ name ] = value )和return elem[ name ]，你可以理解成这样document.getElementById(el)[name] = value，这是转化成JS对象的一个属性。
既然明白了原理是这样，我们来看看一个例子：
&input type=&checkbox& id=&test& abc=&111& /&
$(function(){
el = $(&#test&);
console.log(el.attr(&style&));
console.log(el.prop(&style&));
console.log(document.getElementById(&test&).style); });
我们接着看：
el.attr(&abc&,&111&)console.log(el.attr(&abc&)); console.log(el.prop(&abc&));
首先用attr方法给这个对象添加abc节点属性，值为111，可以看到html的结构也变了
我们再接着来：
el.prop(&abc&, &222&);console.log(el.attr(&abc&)); console.log(el.prop(&abc&));
我们再用prop方法给这个对象设置了abc属性，值为222，可以看到html的结构是没有变化的。输出的结果就不解释了。
上面已经把原理讲清楚了，什么时候用什么就可以自己把握了。
提一下，在遇到要获取或设置checked,selected,readonly和disabled等属性时，用prop方法显然更好，比如像下面这样：
&input type=&checkbox& id=&test& checked=&checked& /&
console.log(el.attr(&checked&)); console.log(el.prop(&checked&)); console.log(el.attr(&disabled&)); console.log(el.prop(&disabled&));
显然，布尔值比字符串值让接下来的处理更合理。
PS一下，如果你有JS性能洁癖的话，显然prop的性能更高，因为attr需要访问DOM属性节点，访问DOM是最耗时的。这种情况适用于多选项全选和反选的情况。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1317970次
积分：12327
积分：12327
排名：第789名
原创：185篇
转载：49篇
评论：166条
(1)(1)(3)(1)(2)(2)(3)(1)(1)(3)(9)(5)(4)(4)(4)(11)(9)(17)(7)(2)(1)(2)(1)(8)(1)(1)(1)(1)(4)(1)(2)(4)(4)(1)(3)(1)(2)(1)(2)(5)(2)(1)(6)(9)(2)(6)(2)(1)(10)(2)(3)(2)(1)(1)(1)(3)(2)(2)(16)(5)(2)(2)(7)(4)(1)(3)(3)jQuery（7）
1.& 1-9-1前后区别
&script src=&Js/jquery-1.9.0.js& type=&text/javascript&&&/script&
&script type=&text/javascript&&
$(function(){
$(&:button&).click(function(){
//prop与attr区别
//attr在1.9以后attr没有初始化的.attr(&checked&)返回都是undefined
console.log(&prop1=&+$(&:checkbox:eq(0)&).prop(&checked&));
console.log(&attr1=&+$(&:checkbox:eq(0)&).attr(&checked&));
//attr在1.9以后attr初始化的无论是否选中.attr(&checked&)返回都是checked
console.log(&prop2=&+$(&:checkbox:eq(1)&).prop(&checked&));
console.log(&attr2=&+$(&:checkbox:eq(1)&).attr(&checked&));
&input type=&button& value=&bt& id=&bt&/&
&input type=&checkbox& id=&ck& value=&1& /&&label&1&/label&
&input type=&checkbox& id=&ck& value=&2& checked=&checked&/&&label&2&/label&
.attr(&name&);
.attr(&name&,&value&);
.attr({&name&:&value&})
.prop(&name&);
.prop(&name&,&value&);
.prop({&name&:&value&})
.prop(&checked&,function(){
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：24426次
排名：千里之外
原创：25篇
转载：20篇
(1)(4)(5)(5)(1)(5)(3)(2)(1)(8)(3)(6)(1)
