在高版本的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"

jquery 获取自定义属性(attr 和 prop的区别)的更多相关文章

  1. jQuery知识点:attr与prop的区别

    做项目时遇到个莫名的问题,全选的时候仅第一次有效,再次点击全选按钮是无效了,查了查原因,看到篇很不错的文章,问题出在jquery中的attr属性上,这里做下笔记. 原文链接:http://www.cn ...

  2. jquery中的attr与prop的区别,什么时候用attr,什么时候用prop

    只要有 Boolean() 属性的,简单说就是具有true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),(其实这些都是表单类的), ...

  3. Jquery学习笔记: attr和 prop的区别,以及为html标签自定义属性

    一.自定义html标签属性 对于html文件中的html标签,可以自定义属性,如: <a href="#" id="link1" action=" ...

  4. jQuery中.attr()和.prop()的区别

    之前学习jQuery的时候,学习到了两种取得标签的属性值的方法:一种是elemJobj.attr(),另一种是elemJobj.prop().而在学习JS的时候,只有一种方法elemObj.getAt ...

  5. tips:Jquery的attr和prop的区别

    Jquery的attr和prop的区别 描述:想做一个复选框checkbox全选的功能,当勾选全选后,将子项的复选框状态设置成一致的, 但遇到了一个问题,就是attr函数并不能改变子项的checkbo ...

  6. jquery中attr和prop的区别、 什么时候用 attr 什么时候用 prop (转自 芈老头 )

    jquery中attr和prop的区别. 什么时候用 attr 什么时候用 prop   在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这 ...

  7. 【jQuery 区别】attr()和prop()的区别

    1>>> 今天实现一个 点击更新按钮 ,可以勾选上本行的的checkbox的功能: 使用代码: /** * updateproduct.htmls 更新 产品信息 */ $(docu ...

  8. jquery中attr和prop的区别(转)

    在网络上看到这样一篇关于jquery中attr和prop的区别文章,觉得不错,所以转载了. 在jQuery 1.6中,.attr()方法查询那些没有设置的属性,则会返回一个undefined.如果你要 ...

  9. jquery中attr和prop的区别分析

    这篇文章主要介绍了jquery中attr和prop的区别分析的相关资料,需要的朋友可以参考下 在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别 ...

  10. Jquery学习笔记(6)--jquery中attr和prop的区别【精辟】

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

随机推荐

  1. 13年山东省赛 Mountain Subsequences(dp)

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud Mountain Subsequences Time Limit: 1 Sec   ...

  2. JSON序列化选项

    JSON.stringify()除了接受序列化js对象外,还可以接受另外的两个参数,这两个参数用于指定使用什么样的方式序列化js对象. 第一个参数是个过滤器,可以一个数组或者一个函数:第二个参数是一个 ...

  3. mysql创建存储过程

    -- 创建CREATE PROCEDURE proDelAccountById(IN in_accountid int) BEGIN -- 执行sql预计 END -- 调用 ; CALL proDe ...

  4. JavaScript、Ajax与jQuery的关系

    简单总结: 1.JS是一门前端语言. 2.Ajax是一门技术,它提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页面的局部更新. 3.jQuery是一个框架,它对JS进行了封装 ...

  5. python成长之路第三篇(4)_作用域,递归,模块,内置模块(os,ConfigParser,hashlib),with文件操作

    打个广告欢迎加入linux,python资源分享群群号:478616847 目录: 1.作用域 2.递归 3.模块介绍 4.内置模块-OS 5.内置模块-ConfigParser 6.内置模块-has ...

  6. collections——高性能容器数据类型

    由于最近对机器学习算法感兴趣,一直知道python有一个包collections封装了一些比dict,list之类高级点的类,所以抽空研究下,为接下来的工作准备. 主要参考是https://docs. ...

  7. GTW likes math(BC 1001)

    GTW likes math Accepts: 472 Submissions: 2140 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 1 ...

  8. LeetCode_Roman to Integer

    Given a roman numeral, convert it to an integer. Input is guaranteed to be within the range from 1 t ...

  9. 在线程中建立Form遇到的问题

    一个项目由很多Form组成,默认情况下在启动程序时,这些form都会被建立,这会黑屏很长时间,一种方法是用到Form时再建立,结果又发现如果Form设计复杂,建立的过程也会超过1秒以上,于是想到用线程 ...

  10. QTabWidget and QTabBar.的文字的颜色设置,三种方法

    see the code after subclassingTabWidget::TabWidget(QWidget *parent): QTabWidget(parent),mousePressFl ...