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插件扩展识别浏览器内核与外壳的类型和版本的实现代码
Oct 22 Javascript
JavaScript中原型和原型链详解
Feb 11 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
Mar 26 Javascript
简介JavaScript中search()方法的使用
Jun 06 Javascript
javascript实现的简单计时器
Jul 19 Javascript
深入理解JavaScript中的对象复制(Object Clone)
May 18 Javascript
原生JS简单实现ajax的方法示例
Nov 29 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
react-native ListView下拉刷新上拉加载实现代码
Aug 03 Javascript
node.js 利用流实现读写同步,边读边写的方法
Sep 11 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
May 18 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 file_exists无效的解决办法
2013/06/26 PHP
php的crc32函数使用时需要注意的问题(不然就是坑)
2015/04/21 PHP
ThinkPHP在Cli模式下使用模板引擎的方法
2015/09/25 PHP
PHP读取文件内容的五种方式
2015/12/28 PHP
php设计模式之策略模式应用案例详解
2019/06/17 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
用javascript关闭本窗口不弹出询问框的方法
2014/09/12 Javascript
Node.js中的process.nextTick使用实例
2015/06/25 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
2017/03/25 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
2017/04/11 jQuery
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
AngularJS 事件发布机制
2018/08/28 Javascript
Node.js Stream ondata触发时机与顺序的探索
2019/03/08 Javascript
微信小程序实现翻牌抽奖动画
2020/09/21 Javascript
js 将多个对象合并成一个对象 assign方法的实现
2020/09/24 Javascript
Python中运行并行任务技巧
2015/02/26 Python
Python中使用platform模块获取系统信息的用法教程
2016/07/08 Python
python批量读取txt文件为DataFrame的方法
2018/04/03 Python
python 将list转成字符串,中间用符号分隔的方法
2018/10/23 Python
windows下 兼容Python2和Python3的解决方法
2018/12/05 Python
对python中不同模块(函数、类、变量)的调用详解
2019/07/16 Python
python小项目之五子棋游戏
2019/12/26 Python
Python 简单计算要求形状面积的实例
2020/01/18 Python
在python中实现求输出1-3+5-7+9-......101的和
2020/04/02 Python
HTML5超文本标记语言的实现方法
2020/09/24 HTML / CSS
美国批发零售网站:GearXS
2016/07/26 全球购物
马来西亚航空官方网站:Malaysia Airlines
2017/07/28 全球购物
Nasty Gal英国:美国女性服饰销售网站
2021/03/02 全球购物
Puccini乌克兰:购买行李箱、女士手袋网上商店
2020/08/06 全球购物
大型车展策划方案
2014/02/01 职场文书
工程专业求职自荐书范文
2014/02/18 职场文书
毕业生个人求职自荐信
2014/02/26 职场文书
古汉语文学求职信范文
2014/03/16 职场文书
党员演讲稿
2014/09/04 职场文书
创业计划书之淘宝网店
2019/10/08 职场文书
vue选项卡切换的实现案例
2022/04/11 Vue.js