jQuery学习之prop和attr的区别_百度知道
jQuery学习之prop和attr的区别
提问者采纳
attr(&/#test&quot，值为222.prop(&quot，什么时候使用prop.getElementById(&quot，而有的要写成disabled =&quot，就是来解决这个问题的。提一下。以前我们使用attr获取checked属性时返回&quot，可以看到html的结构是没有变化的;)); /undefined console，而有的要写成disabled =&quot.style)，在遇到要获取或设置CSSStyleDeclaration对象 });222&quot.prop(&undefined首先用attr方法给这个对象添加abc节点属性,readonly和disabled等属性时; console，可以看到html的结构也变了el，用prop方法显然更好,值为&quot。输出的结果就不解释了;checked&id=&abc& &#47.2; &#47.log(el，因为attr需要访问DOM属性节点; abc=&checked console.attr(& checked=&quot.prop(&el.log());console，比如用attr(&abc&true 111&checkbox&和&quot, & /CSSStyleDeclaration对象 ));& /)获取checkbox的checked属性时选中的时候可以取到值.style和上面那条一样接着看.3，因为abc是在这个的属性节点中;abc&style&checked&quot.getElementById(“test”)。PS一下;/)).log(el，如果你有JS性能洁癖的话;/disabled&checked&quot.prop(“abc”)输出undefined,&abc&quot.attr(&undefined console，checked=&checked&;&&)获取checkbox的checked属性时选中的时候可以取到值;test&quot，所以输出了style对象至于input type=&quot.prop(&checked&&#47。大家都知道有的浏览器只要写;&#47，checked=&&#47，访问DOM是最耗时的，再正常不过了false显然，什么时候用什么就可以自己把握了;id=&quot，显然prop的性能更高;checked&&#47, /111&quot，是具有原生的style对象属性的.log(el.attr(&quot，checked就可以了;&gt，所以通过prop是取不到的el.prop(&abc&111 console.添加属性名称该属性就会生效应该使用test&和&disabled&quot。这种情况适用于多选项全选和反选的情况;？; &#47，因为attr是获取的这个对象属性节点的值.attr(“abc”)输出结果为111;) console，值为111.attr(“style”)输出undefined，以前我们使用attr获取checked属性时返回&quot，自然输出undefinedel.log(el.prop(&quot。所以;.attr(&quot？1;.log(el：el,值为&222我们再用prop方法给这个对象设置了abc属性; // /&#47.6开始，布尔值比字符串值让接下来的处理更合理.log(test&quot.log(input type=& &#47.log(el，什么时候使用attr,现在使用prop方法获取属性则统一返回true和false，比如像下面这样;abc&111 checked&但没选中获取值就是undefined.prop(“style”)输出CSSStyleDeclaration对象，checked就可以了，因为在有些浏览器中比如说只要写disabled，对于一个DOM对象;/ /&#47.attr(&quot今天在用JQuery的时候发现一个问题用;disabled&)).为什么jquery 1;：& console，很显然此时没有这个属性节点;););但没选中获取值就是undefinedjq提供新的方法“prop”来获取这些属性.6+增加了;)).log($(function(){ el = $(&quot.prop()方法;checked&disabled&checked&/).attr(&quot,false两个属性使用&#47，从1;));));style&quot。上面已经把原理讲清楚了，jq提供新的方法“prop”来获取这些属性;checked&)).是有;;checked&quot.log(el。那么;))。看些例子&lt,现在使用prop方法获取属性则统一返回true和checkbox&quot
工程信息部总经理
其他类似问题
为您推荐：
其他1条回答
百度不让发链接？？？？
下面是一个人的博客，写的很好
jquery中attr和prop的区别
在高版本的jquery引入prop方法后，什么时候该用prop？什么时候用attr？它们两个之间有什么区别？这些问题就出现了。
关于它们两个的区别，网上的答案很多。这里谈谈我的心得，我的心得很简单：
对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
上面的描述也许有点模糊，举几个例子就知道了。
这个例子里&a&元素的DOM属性有“href、target和class&，这些属性就是&a&元素本身就带有的属
性，也是W3C标准里就包含有这几个属性，或者说在IDE里能够智能提示出的属性，这些就叫做固有属性。处理这些...
您可能关注的推广
jquery的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁jQuery学习之prop和attr的区别示例介绍_百度知道
jQuery学习之prop和attr的区别示例介绍
提问者采纳
&!--&真假属性&--&&input&type=&radio&&id=&input1&&checked&&input&type=&radio&&id=&input2&&&&!--&自定义属性&--&&input&id=&input3&&type=&text&&de=&abcd&&/&$(&#input1&).attr(&checked&);//&checked$(&#input1&).prop(&供憨垛窖艹忌讹媳番颅checked&);//&true$(&#input2&).attr(&checked&);//&undefined$(&#input2&).prop(&checked&);//&false$(&#input3&).attr(&de&);//&abcd$(&#input3&).prop(&de&);//&undefined
其他类似问题
为您推荐：
您可能关注的推广
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁相比attr，prop是1.6.1才新出来的，两者从中文意思理解，都是获取/设置属性的方法（attributes和properties）。只是，window或document中使用.attr()方法在jQuery1.6之前不能正常运行，因为window和document中不能有attributes。prop应运而生了。
既然我们想知道他们两的区别，最好就看看他们的源代码，不要被代码长度所吓到，我们只看关键的几句：
attr: function( elem, name, value, pass ) {&
var ret, hooks, notxml,&
nType = elem.nodeT&
// don't get/set attributes on text, comment and attribute nodes&
if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {&
if ( pass && jQuery.isFunction( jQuery.fn[ name ] ) ) {&
return jQuery( elem )[ name ]( value );&
// Fallback to prop when attributes are not supported&
if ( typeof elem.getAttribute === "undefined" ) {&
return jQuery.prop( elem, name, value );&
notxml = nType !== 1 || !jQuery.isXMLDoc( elem );&
// All attributes are lowercase&
// Grab necessary hook if one is defined&
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 ) {&
elem.setAttribute( name, value + "" );&
} else if ( hooks && "get" in hooks && notxml && (ret = hooks.get( elem, name )) !== null ) {&
ret = elem.getAttribute( name );&
// Non-existent attributes return null, we normalize to undefined&
return ret === null ?&
undefined :&
prop方法代码（jQuery版本1.8.3）
prop: function( elem, name, value ) {&
var ret, hooks, notxml,&
nType = elem.nodeT&
// don't get/set properties on text, comment and attribute nodes&
if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {&
notxml = nType !== 1 || !jQuery.isXMLDoc( elem );&
if ( notxml ) {&
// Fix name and attach hooks&
name = jQuery.propFix[ name ] ||&
hooks = jQuery.propHooks[ name ];&
if ( value !== undefined ) {&
if ( hooks && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ) {&
return ( elem[ name ] = value );&
if ( hooks && "get" in hooks && (ret = hooks.get( elem, name )) !== null ) {&
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")); //undefined&
console.log(el.prop("style")); //CSSStyleDeclaration对象&
console.log(document.getElementById("test").style); //CSSStyleDeclaration对象&
el.attr(“style”)输出undefined，因为attr是获取的这个对象属性节点的值，很显然此时没有这个属性节点，自然输出undefined
el.prop(“style”)输出CSSStyleDeclaration对象，对于一个DOM对象，是具有原生的style对象属性的，所以输出了style对象
至于document.getElementById(“test”).style和上面那条一样
el.attr("abc","111")&
console.log(el.attr("abc")); //111&
console.log(el.prop("abc")); //undefined
首先用attr方法给这个对象添加abc节点属性，值为111，可以看到html的结构也变了
el.attr(“abc”)输出结果为111，再正常不过了
el.prop(“abc”)输出undefined，因为abc是在这个的属性节点中，所以通过prop是取不到的
el.prop("abc", "222");&
console.log(el.attr("abc")); //111&
console.log(el.prop("abc")); //222
我们再用prop方法给这个对象设置了abc属性，值为222，可以看到html的结构是没有变化的。输出的结果就不解释了。
上面已经把原理讲清楚了，什么时候用什么就可以自己把握了。
提一下，在遇到要获取或设置checked,selected,readonly和disabled等属性时，用prop方法显然更好，比如像下面这样：
&input type="checkbox" id="test" checked="checked" /&
console.log(el.attr("checked")); //checked&
console.log(el.prop("checked")); //true&
console.log(el.attr("disabled")); //undefined&
console.log(el.prop("disabled")); //false
显然，布尔值比字符串值让接下来的处理更合理。
PS一下，如果你有JS性能洁癖的话，显然prop的性能更高，因为attr需要访问DOM属性节点，访问DOM是最耗时的。这种情况适用于多选项全选和反选的情况。
大家都知道有的浏览器只要写disabled，checked就可以了，而有的要写成disabled = "disabled"，checked="checked"，比如用attr("checked")获取checkbox的checked属性时选中的时候可以取到值,值为"checked"但没选中获取值就是undefined。
jq提供新的方法“prop”来获取这些属性，就是来解决这个问题的，以前我们使用attr获取checked属性时返回"checked"和"",现在使用prop方法获取属性则统一返回true和false。
那么，什么时候使用attr()，什么时候使用prop()？
1.添加属性名称该属性就会生效应该使用prop();
2.是有true,false两个属性使用prop();
3.其他则使用attr();
项目中jquery升级的时候大家要注意这点！
更多信息请查看
更多信息请查看
易贤网手机网站地址：
【】&&&&&【点此处查询各地各类考试咨询QQ号码及交流群】
由于各方面情况的不断调整与变化，易贤网所提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！
云南各地招聘
&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp会员注册
本站不参与评论，（&&点此深度交流 ）
自觉遵守：爱国、守法、自律、真实、文明的原则
尊重网上道德，遵守中华人民共和国各项有关法律法规
严禁发表危害国家安全，破坏民族团结、国家宗教政策和社会稳定，含侮辱、诽谤、教唆、淫秽等内容的评论
承担一切因您的行为而直接或间接导致的民事或刑事法律责任
您在本站发表的评论，本站有权保留、转载、引用或者删除
参与本评论即表明您已经阅读并接受上述条款本文介绍了prop和attr的区别。jQuery中有这么两个东西 —— attr()与prop()，很多开发者在使用时，经常容易混淆，今天HTML5学堂小编-其其就带你一起看看attr和prop方法。jQuery文档中，attr和prop的参数都是一样的，而这两个东西都被认为是属性，那么他们之间到底有什么区别呢？下面我们一起验证下。attr与prop的真身attr全称attribute(属性)prop全称property(属性)虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的。到这里可能还有些模糊，下面我们来直接举个例子。html代码&input id=&box& type=&checkbox&/&js代码$(&#box&).attr(&checked&) // undefined$(&#box&).prop(&checked&) // false可以看到attr获取一个标签内没有的东西会得到undefined，而prop获取的是这个DOM对象的属性，因此checked为false。我们继续看，加上checked属性后。&input id=&box& type=&checkbox& checked/&$(&#box&).attr(&checked&) // checked$(&#box&).prop(&checked&) // true这已经可以证明attr的局限性，它的作用范围只限于HTML标签内的属性。id，type等属性也属于对象属性，prop也可以操作，那么问题来了，自定义属性prop能否成功支持呢，我们也试试。&input id=&box& type=&checkbox& checked data-new=&自定义属性&/&$(&#box&).attr(&data-new&) // 自定义属性$(&#box&).prop(&data-new&) // undefined可以看出来，prop不支持自定义属性，经过自己的亲手试验，应该已经明白了他们之间的区别了吧。总结-使用经验1、对标签内的属性使用attr来读取和设置。2、对DOM对象固有的一些属性，使用prop获取和设置。HTML5学堂小编-其其。耗时：1h欢迎沟通交流~HTML5学堂技术交流群（长按二维码）HTML5学堂(HTML5_Course)　
　文章为作者独立观点，不代表微头条立场
的最新文章
HTML5学堂 - 陈林与大家分享本周群问题。今天的文章主要涉及了display与visibility的区别、border-radius的兼容问题、Date()与new Date()区别、cookie的优势与劣势以及http状态码。在学习的过程中发现学到的东西很容易遗忘？发现很多东西在学习或者初次接触的时候是能够理解的，但是过不了多久脑子里似乎已经没有什么东西了？对于前端开发工程师来说，自身所拥有的技术，是未来发展以及薪资发展的基础，如何让自己的记忆长期且牢固的保存？今天要为大家介绍一款工具——Git。如果开发者们有进入大公司的发展的想法，这种工具是必不可少的。相信我们做开发的朋友们，SVN必然会接触，对于大公司来说，SVN略low，它们使用的通常是Git —— 分布式版本控制系统。在之前的文章当中，我们依次介绍了iframe跨域、JSONP跨域以及postMessage跨域。今天我们将针对跨域进行收尾，讲解最后一种，也是比较常见的服务器代由。同时我们针对之前提到的这4类跨域方法进行一个比较和总结。加班，似乎已经成为了国人的工作文化，特别在IT行业当中，加班更是成了家常便饭。那么为何会经常出现加班的现象，我们该如何去正确的看待加班，本文将带着大家合理的分析加班以及应对的措施。HTML5学堂 - 利利与大家来聊聊“搜索引擎机制”的话题。本文主要讲解搜索引擎的工作原理，搜索引擎营销SEM，什么是自然排名与竞价排名，前端相关的SEO知识。HTML5学堂 - 利利教你在工作中，如何向上级或同事朋友提出问题。本文主要讲解我们为何要学会提问，不同的提问会有不同的结果，什么样的提问是合理的，以及自我模拟，解决问题。你知道什么是鸡肋吗？所谓的鸡肋，就是放弃不了但又觉得多余的东西。今天利利给大家谈谈HTML5当中的“鸡肋”知识，也期待大家一起来讨论与分享你遇到的“鸡肋”知识。HTML5学堂 - 利利与你分享换位思考与用户体验。换位思考的能力是很影响一个人发展的能力，比如简历上的换位思考、工作中的换位思考、产品上的换位思考。作为一枚前端攻城狮用户体验自然是少不了，那我们该如何做好用户体验呢？HTML5学堂 - 国荣与你一起了解世界知识产权日。今天是第16个世界知识产权日，世界知识产权日的目的是什么？作为前端工程师的我们，能为世界知识产权做出哪些行动？最近从入门到精通（放弃或跑路）书籍刷爆了整个朋友圈，为何一定要修改这类书籍的标题呢？除了这种标题比较好修改之外，存在一定的原因，HTML5学堂 - 利利跟你一起讨论该话题。对于开发人员来说，几乎每个移动端的项目（专题类和游戏类）均需要使用到图片预加载，那么如何让自己不再每次都重新书写图片预加载的代码呢？一起来看“开发图片预加载框架”对于想学习HTML5的新手来说，HTML5是什么东西，要怎么样去了解HTML5就相当于是去探索一片“未知的大陆”。而今天的这篇文章就是我们探寻HTML5的航行的开始，希望能够为你照亮前方的路。HTML5学堂：最近看到一道考察面向对象、原型继承的面试题，关于一只小狗狗和一只“精力旺盛”的小狗狗的故事~正则验证身份证号码HTML5学堂：曾经一直觉得用正则验证身份证号码是很简单的~但是，当真正挖掘身份证号码的规HTML5学堂：本文介绍了prop和attr的区别。jQuery中有这么两个东西 —— attr()与proHTML5学堂：HTML5学习不用愁，HTML5学堂逛一逛~~~呵呵，我竟然如此不要脸的给自己打广告，也是够HTML5学堂：利利前段时间写了几个数组、字符串的方法，其中有一个是克隆（复制）一个数组。于是，最近一直在琢平日里（下班后以及节假日），你会做哪些事情呢？1 玩游戏（LOL等各类游戏）2 睡觉啊~~~3 看电影、视频HTML5学堂是一个热爱H5的讲师们组成的组织。致力于构建一个前端、HTML5的分享平台。能够给学生提供一些HTML5学堂：而今的HTML5的浪潮到底如何，HTML5浪潮会为我们带来什么？作为一个行内的新手，如何在浪CSS3我在5年之前就有用了，包括公司项目都一直在很前沿的技术。最近在写慕课网的七夕主题，用了大量的CSS3HTML5学堂是一个热爱H5的讲师们组成的组织。致力于构建一个前端、HTML5的分享平台。能够给学生提供一些dialog标签dialog标签用于弹出浮层操作，传统开发中弹出层基本上都是通过javascript或者通过本文来自国外的博客文章，大家来尝试一下吧~There are a lot of articles that 编者按：电商设计行业怎么样？学完了有哪些就职方向？设计师们都在干些啥？如何走好电商设计这条路？今天@TTTi在编写代码的整个过程中，开发人员经常会一次又一次的改写或者重用相同的代码段，消除这种重复过程的方法之一是把我HTML5学堂：在上一篇文章当中，我们把对象进行了基本的解释，本文当中，我将为大家解释什么是面向对象？为何要HTML5学堂：开发永远和理论不相同，一旦考虑IE低端浏览器，所有的HTML5新增功能都成了浮云~~~从HTHTML5学堂：在HTML版本从4.0升级到5.0之后，可以采用HTML5_Course收罗HTML5与HTML5的相关技术。在这里有原创的HTML5、CSS3、JavaScript等前端知识，也有来自互联网的HTML5全新动态~HTML5学堂由几位讲师倾情打造，或许这里没有最牛的技术，但却将HTML5最浅显易懂的表达了出来。热门文章最新文章HTML5_Course收罗HTML5与HTML5的相关技术。在这里有原创的HTML5、CSS3、JavaScript等前端知识，也有来自互联网的HTML5全新动态~HTML5学堂由几位讲师倾情打造，或许这里没有最牛的技术，但却将HTML5最浅显易懂的表达了出来。