jQuery获取attr()与prop()属性值的方法及区别介绍


Posted in Javascript onJuly 06, 2016

今天在项目中使用<select></select>下拉菜单时,使用juery操作,使页面加载完菜单默认选中的值为2,我一开始的操作如下:

<!--html部分-->
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
/**js部分**/
$("select").attr("selected","selected");

咋一看好完美,木问题,但是我发现在Safari浏览器中,根本不起作用!!仔细查看一番发现,在Safari浏览器中,属性确实是设置成功了,既value=2的那一项确实是<option value="2" selected="selected">2</option>。那问题出在哪呢?冷静,不要方,万能的stack说只要把attr改成prop就行了,卧槽还真行了,这是啥诡异事件。好吧,我们需要来研究研究了,不用想,肯定是需要祭出官方文档了。

1.attr() : 获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性。 •.attr( attributeName ) •.attr( attributeName )

•.attr( attributeName, value ) •.attr( attributeName, value )
•.attr( attributes )
•.attr( attributeName, function(index, attr) )

2.prop() : 获取匹配的元素集中第一个元素的属性(property)值或设置每一个匹配元素的一个或多个属性。 •.prop( propertyName ) •.prop( propertyName )

•.prop( propertyName, value ) •.prop( propertyName, value )
•.prop( properties )
•.prop( propertyName, function(index, oldPropertyValue) )

看出区别了吗,没错,是参数有区别,attr()传入的是attributeName,而prop()传入的是propertyName,现在我们的问题转移了,我们需要研究的是attributeName和propertyName之间的区别了。

Attributes vs. Properties

在这里,我们可以将attribute理解为“特性”,property理解为为“属性”从而来区分俩者的差异。
如果把DOM元素看成是一个普通的Object对象,这个对象在其定义时就具有一些属性(property),比如把select的option当做一个对象:

var option = {
selected:false,
disabled:false,
attributes:[],
...
}

现在,我们一目了然了,attribute是一个特性节点,每个DOM元素都有一个对应的attributes属性来存放所有的attribute节点,它是一个类数组的容器。attributes的每个数字索引以名值对(name=”value”)的形式存放了一个attribute节点。而property就是一个属性,是一个以名值对(name=”value”)的形式存放在Object中的属性。

回到一开始的问题,根据W3C的表单规范 ,在selected属性(property)是一个布尔属性, 这意味着,如果这个特性(attribute)存在, 即使该特性没有对应的值,或者被设置为空字符串值,或甚至是"false",相应的属性(property)都还是为true。 selected特性(attribute)值不会因为复选框的状态而改变,而selected属性(property)会因为复选框的状态而改变。因此,跨浏览器兼容的检索和更改DOM属性,比如元素的checked, selected, 或 disabled状态,请使用.prop()方法。

jquery中attr和prop的区别介绍

在高版本的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"
Javascript 相关文章推荐
jscript之Read an Excel Spreadsheet
Jun 13 Javascript
js数字输入框(包括最大值最小值限制和四舍五入)
Nov 24 Javascript
jquery中event对象属性与方法小结
Dec 18 Javascript
教你用javascript实现随机标签云效果_附代码
Mar 16 Javascript
用JS中split方法实现彩色文字背景效果实例
Aug 24 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
Sep 21 Javascript
jQuery旋转插件jqueryrotate用法详解
Oct 13 Javascript
Javascript typeof与instanceof的区别
Oct 18 Javascript
Angularjs验证用户输入的字符串是否为日期时间
Jun 01 Javascript
js继承的这6种方式!(上)
Apr 23 Javascript
vue多个元素的样式选择器问题
Nov 29 Javascript
在antd中setFieldsValue和defaultVal的用法
Oct 29 Javascript
jQuery+ajax实现实用的点赞插件代码
Jul 06 #Javascript
jQuery操作iframe中js函数的方法小结
Jul 06 #Javascript
jQuery深拷贝Json对象简单示例
Jul 06 #Javascript
jQuery基于ID调用指定iframe页面内的方法
Jul 06 #Javascript
JS如何判断json是否为空
Jul 06 #Javascript
移动端 一个简单易懂的弹出框
Jul 06 #Javascript
Bootstrap选项卡与Masonry插件的完美结合
Jul 06 #Javascript
You might like
php切割页面div内容的实现代码分享
2012/07/31 PHP
php中读写文件与读写数据库的效率比较分享
2013/10/19 PHP
php有道翻译api调用方法实例
2014/12/22 PHP
JS获取父节点方法
2009/08/20 Javascript
js arguments对象应用介绍
2012/11/28 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
2014/07/14 Javascript
javascript实现window.print()去除页眉页脚
2014/12/30 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
2015/03/14 Javascript
javascript实现行拖动的方法
2015/05/27 Javascript
javascript实现网站加入收藏功能
2015/12/16 Javascript
jQuery Validate表单验证入门学习
2015/12/18 Javascript
js实现跨域的多种方法
2015/12/25 Javascript
jQuery unbind()方法实例详解
2016/01/19 Javascript
JavaScript中日期函数的相关操作知识
2016/08/03 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
2017/01/20 Javascript
js 输入框 正则表达式(菜鸟必看教程)
2017/02/19 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
jQuery响应滚动条事件功能示例
2017/10/14 jQuery
Vue.js与 ASP.NET Core 服务端渲染功能整合
2017/11/16 Javascript
jQuery实现开关灯效果
2020/08/02 jQuery
[04:55]完美世界副总裁蔡玮:DOTA2的自由、公平与信任
2013/12/18 DOTA
python基础教程之类class定义使用方法
2014/02/20 Python
Python编程中装饰器的使用示例解析
2016/06/20 Python
详解python并发获取snmp信息及性能测试
2017/03/27 Python
shell命令行,一键创建 python 模板文件脚本方法
2018/03/20 Python
python变量命名的7条建议
2019/07/04 Python
python实现BP神经网络回归预测模型
2019/08/09 Python
Python Subprocess模块原理及实例
2019/08/26 Python
pandas 空数据处理方法详解
2019/11/02 Python
Python嵌套函数,作用域与偏函数用法实例分析
2019/12/26 Python
汤米巴哈马官方网站:Tommy Bahama
2017/05/13 全球购物
世界闻名的衬衫制造商:Savile Row Company
2018/07/30 全球购物
简述synchronized和java.util.concurrent.locks.Lock的异同
2014/12/08 面试题
努力学习保证书
2015/02/26 职场文书
python实现web邮箱扫描的示例(附源码)
2021/03/30 Python
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python