问题

  今天给一个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区别的更多相关文章

  1. jquery中prop和attr的区别

    jquery中prop和attr的区别 prop: prop(name|properties|key,value|fn) **概述** 获取在匹配的元素集中的第一个元素的属性值. 随着一些内置属性的D ...

  2. 第82天:jQuery中prop()和attr()的区别

    在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很多.这里谈谈我的心得,我的心得很简单: ...

  3. 浅谈jquery中prop()和attr()

    我们都知道,一般在jquery中设置属性时要用到attr()方法,现在我们有一个效果,点击按钮切换复选框的选中状态,下面贴出html代码: <input type="checkbox& ...

  4. jquery之prop与attr区别。

    一切看下面代码示例<!DOCTYPE html> <html> <head> <title>全选和反选</title> <script ...

  5. jquery中prop()和attr()的区别

    相比attr,prop是1.6.1才新出来的,两者从中文意思理解,都是获取/设置属性的方法(attributes和properties).只是,window或document中使用.attr()方法在 ...

  6. jquery中prop,attr,data的区别

    这两天翻了jq的源码,今天看到了jq关于数据存储的几个方法,遂总结一下,和小伙伴没分享一下,哪里说的不对,还望批评指正~~~ 废话不多说,直接上代码: $(function(){ $('#div1') ...

  7. jquery中prop()与attr()方法的区别

    一.prop() 简单来说是当需要判断真假时使用,如复选框时: if( $(this).prop('checked')){ //当返回true时在这里调用 }else{ //当返回false时在这里调 ...

  8. jquery中prop()和attr()用法

    jquery1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. 大家都知道有的浏览器只要写disabled,checked就可以了,而有的 ...

  9. jquery中prop()和attr()的使用

    jquery1.6+出现的prop()方法. • 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. • 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. • ...

随机推荐

  1. [LeetCode] 408. Valid Word Abbreviation_Easy

    Given a non-empty string s and an abbreviation abbr, return whether the string matches with the give ...

  2. 解决PuTTY中文乱码

    转载:http://lhdeyx.blog.163.com/blog/static/3181969720091115113716947/ 打开putty,选择 Category中的Windows--- ...

  3. css--clearfix浮动

    解读浮动闭合最佳方案:clearfix: http://www.daqianduan.com/3606.html clearfix清除浮动进化史:http://www.admin10000.com/d ...

  4. webpack1.0--图片

  5. 看开源代码利器—用Graphviz + CodeViz生成C/C++函数调用图(call graph) - 转

    From http://www.linuxidc.com/Linux/2015-01/111501.htm 实际按照上文操作,主要是安装gcc-4.6.2出现一些问题,原先在cygwin下安装,结果提 ...

  6. RMAN备份策略与异机恢复一例

    实验环境: A机器(生产用途):RHEL 6.5 + Oracle 11.2.0.4 + IP Address 192.168.1.11 B机器(备机用途):RHEL 6.5 + Oracle 11. ...

  7. opcode

    https://www.cnblogs.com/JohnABC/p/4531029.html

  8. caffe编译环境的错误:..build_release/src/caffe/proto/caffe.pb.h:23:35: fatal error: google/protobuf/arena.h: 没有那个文件

    在搭建caffe的环境时出现错误: .build_release/src/caffe/proto/caffe.pb.h:23:35: fatal error: google/protobuf/aren ...

  9. 十一 JS继承

    // time:2016.2.1 // des:继承 function Enemy() { this.level = 50; console.log("Enemy constructor&q ...

  10. Mysql版本java问题(com.mysql.cj.jdbc.Driver和com.mysql.jdbc.Driver)

    老版本com.mysql.jdbc.Driver已弃用 String url1 = "jabc:mysql://127.0.0.1:3306/test"; String url1 ...