jquery中dom元素的attr和prop方法的理解-阿里云开发者社区

开发者社区> 阿豪聊干货> 正文

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

简介: 一、背景   在编写使用高版本[ jQuery 1.6 开始新增了一个方法 prop()]的jquery插件进行编写js代码的时候,经常不知道dom元素的attr和prop方法到底有什么区别?各自有什么应用场景,什么时候使用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()。

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
《jQuery Cookbook中文版》——1.13 克隆DOM元素
jQuery提供clone()方法复制DOM元素。它的用法很简单,只要用jQuery函数选择DOM元素,然后在选择的元素集上调用clone()方法就可以了。结果是返回用于链接的DOM结构的一个副本,而不是原来选中的DOM元素。
938 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10004 0
CSS调试小技巧 —— 调试DOM元素hover,focus,actived的样式
  最近学习html5和一些UI框架,接触css比较多,就来跟大家分享一下css中的一些调试技巧。之前做页面,css都是自己写的,所以要改哪里可以很快的找到,现在使用了UI框架,里面的样式是不可能读完的,所以就要通过调试来找到要修改的地方。
954 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13801 0
JavaScript获取HTML DOM节点元素的方法的总结
         在Web应用程序特别是Web2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式、内容等。如何获取要更新的元素,是首先要解决的问题。令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过):        1. 通过顶层document节点获取:            (1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法。
608 0
《jQuery Cookbook中文版》——1.11 删除DOM元素
在使用remove()从DOM中删除选择的元素时,它们并没有从jQuery包装器集中删除。这意味着,从理论上说,可以继续操作它们,甚至可以在必要的时候将它们重新添加到DOM中。
1245 0
jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解
原文:jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解   jQuery中操纵元素属性的方法:   attr(): 读或者写匹配元素的属性值.
900 0
+关注
阿豪聊干货
Java后端,以代码为情人,期望用代码为世界做出自己的贡献~
134
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载
《2021云上架构与运维峰会演讲合集》
立即下载