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 相关文章推荐
地震发生中逃生十大法则
May 12 Javascript
javascript中关于break,continue的特殊用法与介绍
May 24 Javascript
如何判断微信内置浏览器(通过User Agent实现)
Sep 01 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
Oct 30 Javascript
Bootstrap table右键功能实现方法
Feb 20 Javascript
jQuery中使用validate插件校验表单功能
May 24 jQuery
微信小程序wx.request拦截器使用详解
Jul 09 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
Jul 22 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
Aug 02 Javascript
js实现图片粘贴到网页
Dec 06 Javascript
js实现简易点击切换显示或隐藏
Nov 29 Javascript
浅谈react useEffect闭包的坑
Jun 08 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
CURL状态码列表(详细)
2013/06/27 PHP
在PHP语言中使用JSON和将json还原成数组的方法
2016/07/19 PHP
jquery 与NVelocity 产生冲突的解决方法
2011/06/13 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
2011/08/20 Javascript
jQuery中需要注意的细节问题小结
2011/12/06 Javascript
Javascript中valueOf与toString区别浅析
2013/03/19 Javascript
当达到输入长度时表单自动切换焦点
2014/04/06 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
2015/02/26 Javascript
php常见的页面跳转方法汇总
2015/04/15 Javascript
JavaScript中的replace()方法使用详解
2015/06/06 Javascript
简介JavaScript中的setTime()方法的使用
2015/06/11 Javascript
JavaScript基础篇(6)之函数表达式闭包
2015/12/11 Javascript
BootStrap fileinput.js文件上传组件实例代码
2017/02/20 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
2018/03/23 Javascript
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
vue实现移动端悬浮窗效果
2018/12/01 Javascript
vue配置文件实现代理v2版本的方法
2019/06/21 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
2020/04/03 Javascript
[07:54]DOTA2 MV《我的动力鞋》 ImbaTV 出品
2014/11/21 DOTA
python 字典(dict)按键和值排序
2016/06/28 Python
Python设计模式之MVC模式简单示例
2018/01/10 Python
使用django实现一个代码发布系统
2019/07/18 Python
pytorch判断是否cuda 判断变量类型方式
2020/06/23 Python
Python matplotlib模块及柱状图用法解析
2020/08/10 Python
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
2013/01/31 HTML / CSS
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
《胡杨》教学反思
2014/02/16 职场文书
2014年迎新年活动方案
2014/02/19 职场文书
个人合作协议书范本
2014/04/18 职场文书
员工年度工作总结2015
2015/05/18 职场文书
民事诉讼代理词
2015/05/25 职场文书
讲座开场白台词和结束语
2015/05/29 职场文书
婚礼家长致辞
2015/07/27 职场文书
加强党性修养心得体会
2016/01/21 职场文书
javascript实现计算器功能详解流程
2021/11/01 Javascript
Redis 中使用 list,streams,pub/sub 几种方式实现消息队列的问题
2022/03/16 Redis