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 validation插件表单验证的一个例子
Mar 03 Javascript
jquery下div 的resize事件示例代码
Mar 09 Javascript
基于JS实现简单的样式切换效果代码
Sep 04 Javascript
JavaScript 模块的循环加载实现方法
Dec 13 Javascript
js判断当前页面在移动设备还是在PC端中打开
Jan 06 Javascript
JavaScript中instanceof运算符的使用示例
Jun 08 Javascript
JavaScript编码风格指南(中文版)
Aug 26 Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 Javascript
详解vue 实例方法和数据
Oct 23 Javascript
JS解惑之Object中的key是有序的么
May 06 Javascript
小程序实现左滑删除的效果的实例代码
Oct 19 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
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
德劲1103的维修打理经验
2021/03/02 无线电
.htaccess文件保护实例讲解
2011/02/06 PHP
PHP实现的汉字拼音转换和公历农历转换类及使用示例
2014/07/01 PHP
PHP 实现base64编码文件上传出现问题详解
2020/09/01 PHP
nicejforms——美化表单不用愁
2007/02/20 Javascript
jQuery入门第一课 jQuery选择符
2010/03/14 Javascript
javascript权威指南 学习笔记之变量作用域分享
2011/09/28 Javascript
jQuery登陆判断简单实现代码
2013/04/21 Javascript
解析Javascript中难以理解的11个问题
2013/12/09 Javascript
前端必备神器 Snap.svg 弹动效果
2014/11/10 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
2015/01/09 Javascript
Javascript中拼接大量字符串的方法
2015/02/05 Javascript
原生js和jquery实现图片轮播淡入淡出效果
2015/04/23 Javascript
PHP+mysql+Highcharts生成饼状图
2015/05/04 Javascript
JS获取鼠标相对位置的方法
2016/09/20 Javascript
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
详解vue-cli 脚手架项目-package.json
2017/07/04 Javascript
js实现计时器秒表功能
2019/12/16 Javascript
JS脚本实现定时到网站上签到/签退功能
2020/04/22 Javascript
使用Python制作获取网站目录的图形化程序
2015/05/04 Python
深入理解Python中命名空间的查找规则LEGB
2015/08/06 Python
Python使用Tkinter实现机器人走迷宫
2018/01/22 Python
Django管理员账号和密码忘记的完美解决方法
2018/12/06 Python
Python数据可视化:幂律分布实例详解
2019/12/07 Python
python 经典数字滤波实例
2019/12/16 Python
python随机模块random使用方法详解
2020/02/14 Python
CSS3动画特效在活动页中的应用
2020/01/21 HTML / CSS
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
宝拉珍选官方旗舰店:2%水杨酸精华液,收缩毛孔粗大和祛痘
2018/07/01 全球购物
护士自我评价范文
2014/01/25 职场文书
普通党员四风问题对照检查材料
2014/09/27 职场文书
四风自我剖析材料思想汇报
2014/10/01 职场文书
学校2014年度工作总结
2014/12/06 职场文书
计算机专业自荐信范文
2015/03/26 职场文书
个人售房合同协议书
2016/03/21 职场文书
2021年最新用于图像处理的Python库总结
2021/06/15 Python