MyException - 我的异常网
当前位置:我的异常网» jQuery » jQuery中attr,prop差异

jQuery中attr,prop差异

www.MyException.Cn  网友分享于:2013-09-07  浏览:0次
jQuery中attr,prop区别

前2篇jQuery笔记中,分别总结了jQuery中attr()和prop()的用法,大家可能会发现这两个方法在使用起来非常类似

没有看过的童鞋可移步:attr()用法  http://www.cnblogs.com/zwwhnly/p/7383960.html

             prop()用法 http://www.cnblogs.com/zwwhnly/p/7389295.html

本篇笔记主要总结下attr(),prop()之间的区别

假使页面上如如下Html标签:

<input type="checkbox" checked="checked" />
<br />
<input type="radio" checked="checked"/>

 我们先使用attr()来获取checked属性的值,会发现返回的是checked:

$("input[type='checkbox']").attr("checked"); //    返回"checked"
$("input[type='radio']").attr("checked");    //    返回"checked"

 然后我们再使用prop()来获取checked属性的值,会发现返回的是true:

$("input[type='checkbox']").prop("checked"); //    返回true
$("input[type='radio']").prop("checked");    //    返回true

 此时我们在页面上操作下,取消选中该复选框和单选框,然后再分别用attr(),prop()来获取checked属性的值:

$("input[type='checkbox']").attr("checked"); //    返回"checked"
$("input[type='radio']").attr("checked");    //    返回"checked"
$("input[type='checkbox']").prop("checked"); //    返回false
$("input[type='radio']").prop("checked");    //    返回false

从上面的返回值,我们可以发现,虽然已经没有选中,但使用attr()获取的返回值仍然是checked, 而使用prop()获取的返回值从true变为false

 

综上所述,个人建议以下场景使用prop()而不是attr():

1.获取radio,checkbox的选中状态时,使用prop()

 

2.设置radio,checkbox的选中状态时,使用prop()

语法如下:

$("input[type='checkbox']").prop("checked",true);    //    选中
$("input[type='checkbox']").prop("checked",false);    //   取消选中

 

3.获取input标签的disabled属性时,使用prop()

 语法如下:

$("input").prop("disabled");

 

4.设置input标签的disabled属性时,使用prop()

语法如下:

$("input").prop("disabled",true);    //    禁用所有的input元素
$("input").prop("disabled",false);    //   取消禁用所有的input元素

文章评论

不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
程序员和编码员之间的区别
程序员和编码员之间的区别
一个程序员的时间管理
一个程序员的时间管理
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
老程序员的下场
老程序员的下场
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
中美印日四国程序员比较
中美印日四国程序员比较
旅行,写作,编程
旅行,写作,编程
代码女神横空出世
代码女神横空出世
10个调试和排错的小建议
10个调试和排错的小建议
总结2014中国互联网十大段子
总结2014中国互联网十大段子
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
我是如何打败拖延症的
我是如何打败拖延症的
那些争议最大的编程观点
那些争议最大的编程观点
如何成为一名黑客
如何成为一名黑客
每天工作4小时的程序员
每天工作4小时的程序员
 程序员的样子
程序员的样子
编程语言是女人
编程语言是女人
漫画:程序员的工作
漫画:程序员的工作
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
为什么程序员都是夜猫子
为什么程序员都是夜猫子
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
程序员必看的十大电影
程序员必看的十大电影
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
程序员的鄙视链
程序员的鄙视链
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
程序员都该阅读的书
程序员都该阅读的书
程序员应该关注的一些事儿
程序员应该关注的一些事儿
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
我的丈夫是个程序员
我的丈夫是个程序员
Java程序员必看电影
Java程序员必看电影
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有