专栏首页Java后端技术jquery中dom元素的attr和prop方法的理解

jquery中dom元素的attr和prop方法的理解

一、背景

  在编写使用高版本[ jQuery 1.6 开始新增了一个方法 prop()]的jquery插件进行编写js代码的时候,经常不知道dom元素的attr和prop方法到底有什么区别?各自有什么应用场景,什么时候使用attr方法更合适?什么时候使用prop方法更加方便?今天我就结合自己平常的使用来谈谈这些问题以及我个人的理解。

二、举例说明

  1.我们经常会在自己的页面中使用a标签来进行链接到不同的页面

1 <a id="link" href="http://www.baidu.com" target="_black" class="btn">百度主页</a>

在上面这个例子中,href、target、class、id这些dom属性,是a元素本身就具有的。也是W3C里本身就包含的几个属性,换句话说是IDE中能够自动提示的属性,这些属性就被称为dom元素的固有属性,这种情况下,我建议使用prop方法。

  2.我们经常会使用a标签进行触发自定义事件

1 <a href="#" id="link" action="delete">删除文章</a>

这个例子中该DOM元素的属性有:href、id、action.那么很明显前两个是该dom元素的固有属性,最后一个是我们自己定义的属性。a标签中的固有属性中并不包含该属性。这些属性被称为dom元素的自定义属性,这种情况下,我建议使用attr方法。此时若使用prop方法进行设置和获取该属性的值时就会返回undefined值。

  3.我们经常会使用到checkbox/radio/selector来进行选择

1 <input type="checkbox" id="se" value="3">是否选中
2 <input type="radio" id="sel" checked="checked"/>是否选中
3 <select id="selector">
4     <option id="op" value="1" selected="selected">选择1</option>
5     <option value="2">选择2</option>
6     <option value="3">选择3</option>
7     <option value="4">选择4</option>
8 </select>

像上面这个例子中的checkbox、radio、select等元素的选中属性"checked"和"selected",这些属性也是dom元素的固有属性,因此使用prop方法才能正确的进行获取和设置。

$("#se").prop("checked") == false
$("#sel").prop("checked") == true
$("#op").prop("selected") == true

如果使用attr方法会出现下面的结果

$("#se").attr("checked") == 'undefined'
$("#sel").attr("checked") == 'checked'
$("#op").attr("selected") == 'selected'

但网上也有说官方的建议是:具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr()。

以上是个人理解,欢迎提出不同意见哈~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Docker三十分钟快速入门(下)

      上篇文章我们进行了Docker的快速入门,基本命令的讲解,以及简单的实战,那么本篇我们就来实战一个真实的项目,看看怎么在产线上来通过容器技术来运行我们的项...

    阿豪聊干货
  • 解决Maven工程install时[WARNING] Using platform encoding (UTF-8 actually) to copy filtered resources

      最近的项目在用maven 进行install的时候,发现老师在控制台输出警告:[WARNING] Using platform encoding (UTF-...

    阿豪聊干货
  • 解决svn迁移过程中出现:SVN Error: is not the same repository as的问题

      由于公司业务的需要,新购买了一批机器,那么面临着的就是svn等一系列东西进行迁移的问题,在svn迁移以后,本地的svn代码在切换时出现了SVN Error:...

    阿豪聊干货
  • 第82天:jQuery中prop()和attr()的区别

     这个例子里<a>元素的DOM属性有“href、target和class",这些属性就是<a>元素本身就带有的属性,也是W3C标准里就包含有这几个属性,或者说在...

    半指温柔乐
  • ubuntu16.04 配置Hyperledger Fabric1.4.4环境

    接下来一段时间要学习区块链相关内容,一系列文章,一方面作为笔记,另一方面方便交流学习。

    红桃K
  • Css3新特性应用之过渡与动画

    一、缓动效果 学习和利用贝塞尔曲线,默认支持ease,ease-in,ease-out,ease-in-out和linear等 还提供一个cubic-beize...

    sam dragon
  • Hive安装使用中的一些问题

    1.非root用户连接mysql服务时,报如下错误, ERROR 2002 (HY000): Can't connect to local MySQL serv...

    sparkle123
  • 如何在Java代码中使用SAP云平台CloudFoundry环境的环境变量

    版权声明:本文为博主汪子熙原创文章,未经博主允许不得转载。 https://jerry.blog....

    Jerry Wang
  • Deep城市︱机器学习帮助优化交通流并减少交通排放应用两例

    将人工智能应用于自动驾驶汽车来使交通平稳运行,减少燃料消耗,并改善空气质量监测模型,可能听起来像科幻小说,但伯克利实验室的研究人员和加州伯克利分校合作,已经启动...

    用户1621951
  • 2019年,MyBridge 最受欢迎的顶级开源机器学习项目有哪些?

    在这篇文章中,我们将看到 2019 年在 MyBridge 上最受欢迎的顶级开源机器学习项目。

    AI研习社

扫码关注云+社区

领取腾讯云代金券