博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jquery中dom元素的attr和prop方法的理解
阅读量:6151 次
发布时间:2019-06-21

本文共 1070 字,大约阅读时间需要 3 分钟。

一、背景

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

二、举例说明

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

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

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

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

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

1 是否选中2 是否选中3 

像上面这个例子中的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()。

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

转载地址:http://yizfa.baihongyu.com/

你可能感兴趣的文章
发布一个TCP 吞吐性能测试小工具
查看>>
java学习:jdbc连接示例
查看>>
PHP执行批量mysql语句
查看>>
Extjs4.1.x 框架搭建 采用Application动态按需加载MVC各模块
查看>>
Silverlight 如何手动打包xap
查看>>
建筑电气暖通给排水协作流程
查看>>
JavaScript面向对象编程深入分析(2)
查看>>
linux 编码转换
查看>>
POJ-2287 Tian Ji -- The Horse Racing 贪心规则在动态规划中的应用 Or 纯贪心
查看>>
Windows8/Silverlight/WPF/WP7/HTML5周学习导读(1月7日-1月14日)
查看>>
关于C#导出 文本文件
查看>>
使用native 查询时,对特殊字符的处理。
查看>>
maclean liu的oracle学习经历--长篇连载
查看>>
ECSHOP调用指定分类的文章列表
查看>>
分享:动态库的链接和链接选项-L,-rpath-link,-rpath
查看>>
Javascript一些小细节
查看>>
禁用ViewState
查看>>
Android图片压缩(质量压缩和尺寸压缩)
查看>>
nilfs (a continuent snapshot file system) used with PostgreSQL
查看>>
【SICP练习】150 练习4.6
查看>>