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 条评论
登录 后参与评论

相关文章

来自专栏Modeng的专栏

Canvas学习系列一:初识canvas

版权声明:本文为原创文章发布于公众号:Modeng , 你可以随意转载但请务必注明出处!!!关注微信公众号:Modeng,回复 「前端书籍」上百本经...

1713
来自专栏小李刀刀的专栏

简单、通用的JQuery Tab实现

网页上的空间是寸土寸金,虽然显示器的分辨率越来越大,可是直到今天,网页设计中仍然是以至少1024×768 像素的支持为主,也就是说,每一屏页面只有区区 955×...

4675
来自专栏ThoughtWorks

Web开发的基本功

#ThoughtWorkers好声音#第十五期 (图片:网络) 有些东西称为基本功,对于 Web 开发而言,事件处理模型便是其中的一个,我们经常会在代码里遇到...

33913
来自专栏较真的前端

关于事件的前端面试题总结

3025
来自专栏hightopo

原 荐 WebGL 3D 电信机架实战之数据

2336
来自专栏MelonTeam专栏

Android ScrollView设置初始position的方法

最近接了产品的一个需求,需要在一个拥有标题栏,内容区,图片区的滚动视图中,默认隐藏标题栏,而且支持用户手动下拉出现标题。 刚听到这个需求的时候,觉得这个很简单,...

5507
来自专栏AI星球

Markdown的简单实例

图片可以直接拖拽到编辑区即可,插入图片的语法和链接的语法很像,只是前面多了一个 !。 markdown代码:

1762
来自专栏前端小叙

点击图片放大至原始图片大小

有些时候为了排版的整洁,页面展示的图片不得不都是限定宽高的,如果想要点击图片放大至原始大小进行预览,再次点击回到原来样子,就要用到下面的代码了: var _w ...

3767
来自专栏前端知识分享

Vue---父子组件之间的通信

  在vue组件通信中其中最常见通信方式就是父子组件之中的通信,而父子组件的设定方式在不同情况下又各有不同。最常见的就是父组件为控制组件子组件为视图组件。父组件...

932
来自专栏守候书阁

[边学边练]用简单实例学习React

学习之路不可停止,最近在玩 React。也动手尝试写了一个实例。借此整理总结下初步学习 React 的一些基础知识。因为这几天比较忙,没那么多时间,所以实例和文...

1556

扫码关注云+社区

领取腾讯云代金券