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 相关文章推荐
JQuery与Ajax常用代码实现对比
Oct 03 Javascript
jquery miniui 教程 表格控件 合并单元格应用
Nov 25 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
Jan 27 Javascript
jQuery中prop()方法用法实例
Jan 05 Javascript
使用Curl命令查看请求响应时间方法
Nov 04 Javascript
通过button将form表单的数据提交到action层的实例
Sep 08 Javascript
javascript函数的节流[throttle]与防抖[debounce]
Nov 15 Javascript
jquery获取img的src值实例介绍
Jan 16 jQuery
一文搞懂ES6中的Map和Set
May 20 Javascript
使用RxJS更优雅地进行定时请求详析
Jun 02 Javascript
vue 使用v-for进行循环的实例代码详解
Feb 19 Javascript
JavaScript中时间格式化新思路toLocaleString()
Nov 07 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实现多张图片上传加水印技巧
2013/04/18 PHP
浅析php静态方法与非静态方法的用法区别
2016/05/17 PHP
Zend Framework过滤器Zend_Filter用法详解
2016/12/09 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
PHP7 弃用功能
2021/03/09 PHP
Prototype Template对象 学习
2009/07/19 Javascript
Mootools 1.2教程 Fx.Tween的使用
2009/09/15 Javascript
用js实现小球的自由移动代码
2013/04/22 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
2013/05/08 Javascript
js 数值转换为3位逗号分隔的示例代码
2014/02/19 Javascript
javascript实现json页面分页实例代码
2014/02/20 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
vue如何进行动画的封装
2018/09/26 Javascript
详解vue 不同环境配置不同的打包命令
2019/04/07 Javascript
vue不操作dom实现图片轮播的示例代码
2019/12/18 Javascript
JS document文档的简单操作完整示例
2020/01/13 Javascript
解密Python中的描述符(descriptor)
2015/06/03 Python
Python实现的绘制三维双螺旋线图形功能示例
2018/06/23 Python
详解pyenv下使用python matplotlib模块的问题解决
2018/11/29 Python
Python使用folium excel绘制point
2019/01/03 Python
关于Python 常用获取元素 Driver 总结
2019/11/24 Python
使用tensorflow框架在Colab上跑通猫狗识别代码
2020/04/26 Python
如何用python写个模板引擎
2021/01/14 Python
StubHub德国:购买和出售门票
2017/09/06 全球购物
新西兰优惠网站:Treat Me
2019/07/04 全球购物
英国购买威士忌网站:Master of Malt
2019/09/26 全球购物
幼师自我鉴定范文
2013/10/01 职场文书
店长岗位的工作内容
2013/11/12 职场文书
茶叶生产计划书
2014/01/10 职场文书
美德少年事迹材料
2014/01/23 职场文书
致接力运动员广播稿
2014/02/17 职场文书
担保书怎么写
2014/04/01 职场文书
2016年教师节感言
2015/12/09 职场文书
幼儿园教师教学反思
2016/03/02 职场文书