jQuery中prop和attr区别
问题
今天给一个button加onclick事件,由于最后button根据需要转成字符串,因此不能使用jQurey.click(),只能给button添加onclick属性的方式。
于是,$button.prop("onclick", "invoke(1)"),但在浏览器中观看结果时傻了,button根本没有添加上onclick的属性。
咦?我上个a标签就是使用$a.prop("href", "javascript:invoke(1)"),而且正常运行,怎么给button加onclick就不行了?
然后我试了一下,$button.attr("onclick", "invoke(1)");是可以得到正常结果的。
问题来了,为什么有的使用prop有的却需要使用attr?
prop与attr
prop()是 jQuery 1.6 开始新增了一个方法,官方建议具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr()。
我们可以将attribute理解为“特性”,property理解为为“属性”从而来区分俩者的差异。
如果把DOM元素看成是一个普通的Object对象,这个对象在其定义时就具有一些属性(property),比如把select的option当做一个对象:
var option = {
selected:false,
disabled:false,
attributes:[],
...
}
attribute是一个特性节点,每个DOM元素都有一个对应的attributes属性来存放所有的attribute节点,它是一个类数组的容器。attributes的每个数字索引以名值对(name=”value”)的形式存放了一个attribute节点。而property就是一个属性,是一个以名值对(name=”value”)的形式存放在Object中的属性。
<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方法。
问题解答
根据上边的介绍,我们来看一看html对于a标签和button标签的解释
我们能够明确的看到:
href为a标签的属性,应该使用prop来设置。
onclick不是button的属性,应该使用attr来设置。
jQuery中prop和attr区别的更多相关文章
- jquery中prop和attr的区别
jquery中prop和attr的区别 prop: prop(name|properties|key,value|fn) **概述** 获取在匹配的元素集中的第一个元素的属性值. 随着一些内置属性的D ...
- 第82天:jQuery中prop()和attr()的区别
在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很多.这里谈谈我的心得,我的心得很简单: ...
- 浅谈jquery中prop()和attr()
我们都知道,一般在jquery中设置属性时要用到attr()方法,现在我们有一个效果,点击按钮切换复选框的选中状态,下面贴出html代码: <input type="checkbox& ...
- jquery之prop与attr区别。
一切看下面代码示例<!DOCTYPE html> <html> <head> <title>全选和反选</title> <script ...
- jquery中prop()和attr()的区别
相比attr,prop是1.6.1才新出来的,两者从中文意思理解,都是获取/设置属性的方法(attributes和properties).只是,window或document中使用.attr()方法在 ...
- jquery中prop,attr,data的区别
这两天翻了jq的源码,今天看到了jq关于数据存储的几个方法,遂总结一下,和小伙伴没分享一下,哪里说的不对,还望批评指正~~~ 废话不多说,直接上代码: $(function(){ $('#div1') ...
- jquery中prop()与attr()方法的区别
一.prop() 简单来说是当需要判断真假时使用,如复选框时: if( $(this).prop('checked')){ //当返回true时在这里调用 }else{ //当返回false时在这里调 ...
- jquery中prop()和attr()用法
jquery1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. 大家都知道有的浏览器只要写disabled,checked就可以了,而有的 ...
- jquery中prop()和attr()的使用
jquery1.6+出现的prop()方法. • 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. • 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. • ...
随机推荐
- [Java in NetBeans] Lesson 09. Switch / If-Else Ladder
这个课程的参考视频和图片来自youtube. 主要学到的知识点有: 1. Nested If-else statement (if-else ladder) /** * 90 and above == ...
- js计算斐波拉切
function feibo(a){ if(!a || a <= 0){ throw new Error("参数错误,必须大于0"); }else if(a == 1){ r ...
- Selenium基础知识(二)鼠标操作
一.鼠标操作 这个需要使用webdriver下的ActionChains类,这个类是操作鼠标操作的: from selenium.webdriver import ActionChains 鼠标操作可 ...
- 22.用demo通过点击切换图片路径
用demo通过点击切换图片路径 html: <img src="images/driving.png" class="driving"/> js: ...
- 原生js---ajax---post方法传数据
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Opcode是啥以及如何使用好Opcache
转载 https://www.zybuluo.com/phper/note/1016714 啥是Opcode? 我们在日常的PHP开发过程中,应该经常会听见Opcache这个词,那么啥是Opcode ...
- sql 一列拼接成一行,再分割成列
原始数据,需要拼接成一行 select * from (select d.*,(SELECT count ([Keyword])FROM [DragonGuoShi].[dbo].[ArticleIn ...
- Spark Streaming 002 统计单词的例子
1.准备 事先在hdfs上创建两个目录: 保存上传数据的目录:hdfs://alamps:9000/library/SparkStreaming/data checkpoint的目录:hdfs://a ...
- Beta阶段冲刺2.0
1. 提供当天站立式会议照片一张 2. 每个人的工作 (有work item 的ID) 成员 昨天已完成的工作 今天计划完成的工作 工作中遇到的困难 具体贡献 郑晓丽 "我的活动详情&quo ...
- SNMP 安装及使用
一.SNMP的安装 1.安装 snmp服务,python扩展等 参考:http://lihuipeng.blog.51cto.com/3064864/915965 [root@localhost] y ...