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 相关文章推荐
js身份证验证超强脚本
Oct 26 Javascript
javascript 复杂的嵌套环境中输出单引号和双引号
May 26 Javascript
JavaScript实现拼音排序的方法
Nov 20 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
Oct 16 Javascript
浅谈setTimeout 与 setInterval
Jun 23 Javascript
详解Bootstrap插件
Apr 25 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
Jun 22 Javascript
JS实现页面内跳转的简单代码
Sep 03 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
Mar 03 Javascript
关于微信公众号开发无法支付的问题解决
Dec 28 Javascript
在react中使用vue的状态管理的方法示例
May 02 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
Aug 31 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 curl伪造IP地址和header信息代码实例
2015/04/27 PHP
CodeIgniter配置之config.php用法实例分析
2016/01/19 PHP
PHP中ID设置自增后不连续的原因分析及解决办法
2016/08/21 PHP
php从数据库读取数据,并以json格式返回数据的方法
2018/08/21 PHP
PHP安装BCMath扩展的方法
2019/02/13 PHP
12个非常有创意的JavaScript小游戏
2010/03/18 Javascript
JsDom 编程小结
2011/08/09 Javascript
js创建对象的方式总结
2015/01/10 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
2015/03/25 Javascript
基于javascript实现图片懒加载
2016/01/05 Javascript
JS从数组中随机取出几个数组元素的方法
2016/08/02 Javascript
浅析location.href跨窗口调用函数
2016/11/22 Javascript
jQuery拖拽通过八个点改变div大小
2020/11/29 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
2020/04/26 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
在vue中配置不同的代理同时访问不同的后台操作
2020/09/11 Javascript
[01:11:27]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Optic
2018/04/03 DOTA
python基础入门学习笔记(Python环境搭建)
2016/01/13 Python
python中解析json格式文件的方法示例
2017/05/03 Python
TensorFlow实现RNN循环神经网络
2018/02/28 Python
基于python OpenCV实现动态人脸检测
2018/05/25 Python
django搭建项目配置环境和创建表过程详解
2019/07/22 Python
解析python实现Lasso回归
2019/09/11 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
使用OpenCV校准鱼眼镜头的方法
2020/11/26 Python
6号汽车旅馆预订:Motel 6
2018/02/11 全球购物
Gina Bacconi官网:吉娜贝康尼连衣裙和礼服
2018/04/24 全球购物
个人实用的自我评价范文
2013/11/23 职场文书
银行门卫岗位职责
2013/12/29 职场文书
测绘专业大学生职业生涯规划书
2014/02/10 职场文书
《陋室铭》教学反思
2014/02/26 职场文书
接收函格式
2015/01/30 职场文书
北京故宫的导游词
2015/01/31 职场文书
2015年新教师工作总结
2015/04/28 职场文书
2016大学军训通讯稿
2015/11/25 职场文书
感谢信的技巧及范例
2019/05/15 职场文书