jq中prop和attr的区别以及各自的使用
在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了。
关于它们两个的区别,网上的答案很多。这里谈谈我的心得,我的心得很简单:
- 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
- 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
上面的描述也许有点模糊,举几个例子就知道了。
<a href="http://www.baidu.com" 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值。
再举一个例子:
<input id="chk1" type="checkbox" />是否可见
<input id="chk2" type="checkbox" checked="checked" />是否可见
像checkbox,radio和select这样的元素,选中属性对应“checked”和“selected”,这些也属于固有属性,因此需要使用prop方法去操作才能获得正确的结果。
$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true
如果上面使用attr方法,则会出现:
$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"
全文完。
转载来自http://www.cnblogs.com/Showshare/p/different-between-attr-and-prop.html
jq中prop和attr的区别以及各自的使用的更多相关文章
- jq中.prop()与attr()的区别
一,定义 prop() 方法设置或返回被选元素的属性和值.prop() 方法应该用于检索属性值 attr() 方法设置或返回被选元素的属性和值.如需检索 HTML 属性,请使用 attr() 方法代 ...
- jQ中prop与attr的区别
1.prop适用于HTML元素本身就带有的固有属性 2.attr适用于HTML元素我们自定义的属性 <input type="checkbox" value="复选 ...
- jquery中prop和attr的区别
jquery中prop和attr的区别 prop: prop(name|properties|key,value|fn) **概述** 获取在匹配的元素集中的第一个元素的属性值. 随着一些内置属性的D ...
- jquery中prop()和attr()的区别
相比attr,prop是1.6.1才新出来的,两者从中文意思理解,都是获取/设置属性的方法(attributes和properties).只是,window或document中使用.attr()方法在 ...
- 第82天:jQuery中prop()和attr()的区别
在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很多.这里谈谈我的心得,我的心得很简单: ...
- 关于jQuery表单选择中prop和attr的区别。
今天用jQuery学习表单这一章节的内容,再次遇到表单全选时,不能进行第二次全选的情况.反复查看测试仍然找不到是什么原因.后来在网上查到原来是jQuery1.6以后的版本用到的是prop.用attr的 ...
- 【jq】prop和attr的区别
prop()函数的结果: 1.如果有相应的属性,返回指定属性值. 2.如果没有相应的属性,返回值是空字符串. attr()函数的结果: 1.如果有相应的属性,返回指定属性值. 2.如果没有相应的属性, ...
- jquery中的prop和attr比较区别
近期和一同事争执prop和attr的区别,也查了很多,同事说它只是特性和固有属性的区别,但是我也查到了一些其他的,故此,来总结一下吧! 1.固有属性和特别属性 对于HTML元素本身就带有的固有属性,在 ...
- jquery里prop和attr的区别
本文通过具体的实例来讲述jquery里prop和attr的区别及使用方法. 在jquery里,我们要获取一个标签元素的属性,可以用attr或者prop,那么两者有什么区别呢? 其实很简单: attr可 ...
随机推荐
- Ubuntu 10.10安装和使用pythonbrew简介
http://blog.csdn.net/nuccch/article/details/17595161 一.安装Pythonbrew 通过pythonbrew工具实现多版本Python管理,首先安装 ...
- JAVA加解密 -- 数字签名算法
数字签名 – 带有密钥的消息摘要算法 作用:验证数据完整性.认证数据来源.抗否认(OSI参考模型) 私钥签名,公钥验证 RSA 包含非对称算法和数字签名算法 实现代码: //1.初始化密钥 KeyPa ...
- Android中Service概述
Service是Android中一种非常重要的组件,一般来说有两种用途:用Service执行长期执行的操作,而且与用户没有UI界面的交互:某个应用程序的Service能够被其它应用程序的组件调用以便提 ...
- 怎样优化cocos2d/x程序的内存使用和程序大小
再次感谢原创者:Steffen Itterheim.原创博客原文地址: http://www.learn-cocos2d.com/2012/11/optimize-memory-usage-bundl ...
- css - 公众号样式
/* * @Author: WJ_LONG * @Date: 2018-09-06 15:32:06 * @Last Modified by: WJ_LONG * @Last Modified tim ...
- 用unity3d切割图片
原地址:http://www.cnblogs.com/leng-yuye/archive/2012/05/31/2528148.html 需求:把图片的像素中不为alpha的部分切出来保存成单个图片. ...
- js 值和类型
js中变量是没有类型的,只有值才有类型. 变量随时可以持有任何类型的值. <!DOCTYPE html> <html lang="zh"> <head ...
- HTML5事件-自定义右键菜单
WEB领域中,为实现上下文菜单,开发人员面临的主要问题是如何确定应该显示这个上下文菜单(Windows 中,右键单击:Mac 中,Ctrl+单击), 以及如何屏蔽与该操作相关联的默认上下文菜单. 解决 ...
- 由"永恒之蓝"病毒而来的电脑知识科普
永恒之蓝病毒事件: 继英国医院被攻击,随后在刚刚过去的5月12日晚上20点左右肆虐中国高校的WannaCry勒索事件,全国各地的高校学生纷纷反映,自己的电脑遭到病毒的攻击,文档被加密,壁纸遭到篡改,并 ...
- "《 Serial Drivers 》by Alessandro Rubini" 学习笔记
Introduction to "serial device driver" (My study note) 膜拜大神的作品. Standing on the should ...