JQuery的attr 与 val区别


Posted in Javascript onJune 12, 2016

.attr(attributeName)

attributeName:需要获取属性的名称。

获取匹配集中第一个元素的属性值。1.6中attr返回属性的值为undefined,如果没有设置(set)。另外,.attr不应该在普通对象、数组(array)、窗口(window)或者文档中(document)。如果需要获取或者设置DOM属性,则应该使用.prop()方法。

使用.attr方法获取元素属性的值有两个主要优点:

方便(Convenience):这个方法可以在JQuery对象上直接调用和串联别的JQuery的方法。

跨浏览器的一致性(Cross-browser consistency):有报告说一些属性值在跨浏览器时的不一致性,甚至在同一浏览器的不同版本上也有不一致性。.attr减少这种不一致性

.val()

获取匹配集中第一个元素当前的值。

.val()就去主要用来获取表单中元素的值,例如input, select 或者textarea。

不同

<input data-name="user" id="name" value="aaaa" /> 
?$('#name').val() ;/* 'aaaa'*/ 
$('#name').attr('data-name'); /*user*/

下面通过一段代码给大家介绍jQuery attr("value") 和 val的区别

//2509行
if ( !getSetInput || !getSetAttribute ) {
jQuery.attrHooks.value = {
get: function( elem, name ) {
var ret = elem.getAttributeNode( name );
return jQuery.nodeName( elem, "input" ) ?
// Ignore the value *property* by using defaultValue
elem.defaultValue :
ret && ret.specified ? ret.value : undefined;
},
}

这边返回值的逻辑判断有变化

jQuery.nodeName( elem, "input" ) ?elem.defaultValue :ret && ret.specified ? ret.value :undefined;
// Ignore the value *property* by using defaultValue

要我们使用defaultValue.

JavaScript

attrHooks: {
type: {
set: function( elem, value ) {
if ( !jQuery.support.radioValue && value === "radio" && jQuery.nodeName(elem, "input") ) {
// Setting the type on a radio button after the value resets the value in IE6-9
// Reset value to default in case type is set after value during creation
var val = elem.value;
elem.setAttribute( "type", value );
if ( val ) {
elem.value = val;
}
return value;
}
}
}
},

而1.8.3代码如下

JavaScript

//2361行
attrHooks: {
type: {
set: function( elem, value ) {
// We can't allow the type property to be changed (since it causes problems in IE)
if ( rtype.test( elem.nodeName ) && elem.parentNode ) {
jQuery.error( "type property can't be changed" );
} else if ( !jQuery.support.radioValue && value === "radio" && jQuery.nodeName(elem, "input") ) {
// Setting the type on a radio button after the value resets the value in IE6-9
// Reset value to it's default in case type is set after value
// This is for element creation
var val = elem.value;
elem.setAttribute( "type", value );
if ( val ) {
elem.value = val;
}
return value;
}
}
},
// Use the value property for back compat
// Use the nodeHook for button elements in IE6/7 (#1954)
value: {
get: function( elem, name ) {
if ( nodeHook && jQuery.nodeName( elem, "button" ) ) {
return nodeHook.get( elem, name );
}
return name in elem ?
elem.value :
null;
},
set: function( elem, value, name ) {
if ( nodeHook && jQuery.nodeName( elem, "button" ) ) {
return nodeHook.set( elem, value, name );
}
// Does not return so that setAttribute is also used
elem.value = value;
}
}
},

可见1.9删除了attrHooks.value方法导致非IE的attr("value")为undefined或默认值,而IE的attr("value")为""或默认值

Javascript 相关文章推荐
js url传值中文乱码之解决之道
Nov 20 Javascript
jQuery获得内容和属性方法及示例
Dec 02 Javascript
js中split和replace的用法实例
Feb 28 Javascript
jQuery实现加入购物车飞入动画效果
Mar 14 Javascript
JS实现的按钮点击颜色切换功能示例
Oct 19 Javascript
JS求Number类型数组中最大元素方法
Apr 08 Javascript
JS 验证码功能的三种实现方式
Nov 26 Javascript
vsCode安装使用教程和插件安装方法
Aug 24 Javascript
vue弹出框组件封装实例代码
Oct 31 Javascript
关于vue路由缓存清除在main.js中的设置
Nov 06 Javascript
js判断非127开头的IP地址的实例代码
Jan 05 Javascript
微信小程序实现列表左右滑动
Nov 19 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
Jun 12 #Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
Jun 12 #Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
Jun 12 #Javascript
javascript jquery对form元素的常见操作详解
Jun 12 #Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
Jun 12 #Javascript
浅谈JS中逗号运算符的用法
Jun 12 #Javascript
Node.js Addons翻译(C/C++扩展)
Jun 12 #Javascript
You might like
php中数字0和空值的区别分析
2014/06/05 PHP
ThinkPHP实现二级循环读取的方法
2014/11/03 PHP
PHP使用mysql_fetch_row查询获得数据行列表的方法
2015/03/18 PHP
php把时间戳转换成多少时间之前函数的实例
2016/11/16 PHP
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
2010/09/19 Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
2011/04/07 Javascript
原生js 秒表实现代码
2012/07/24 Javascript
jquery 判断滚动条到达了底部和顶端的方法
2014/04/02 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
2014/08/01 Javascript
微信小程序wx:for和wx:for-item的用法详解
2018/04/01 Javascript
解决vue的 v-for 循环中图片加载路径问题
2018/09/03 Javascript
JS与SQL方式随机生成高强度密码示例
2018/12/29 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
2019/05/27 Javascript
微信小程序 高德地图路线规划实现过程详解
2019/08/05 Javascript
[03:17]DOTA2英雄基础教程 剧毒术士
2013/12/12 DOTA
用Python的Django框架完成视频处理任务的教程
2015/04/02 Python
python3.5使用tkinter制作记事本
2016/06/20 Python
Python多进程multiprocessing.Pool类详解
2018/04/27 Python
python爬取足球直播吧五大联赛积分榜
2018/06/13 Python
详解pandas的外部数据导入与常用方法
2019/05/01 Python
Python基础之字符串常见操作经典实例详解
2020/02/26 Python
Python如何把Spark数据写入ElasticSearch
2020/04/18 Python
Python中Yield的基本用法
2020/10/18 Python
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
护士见习期自我鉴定
2014/02/08 职场文书
司法所长先进事迹
2014/06/02 职场文书
大学生标准自荐书
2014/06/15 职场文书
英语专业求职信
2014/07/08 职场文书
2014学习优秀共产党员先进事迹材料思想汇报
2014/09/14 职场文书
设立有限责任公司出资协议书
2014/11/01 职场文书
给老师的保证书怎么写
2015/05/09 职场文书
辩护词范文大全
2015/05/21 职场文书
“5.12”护士节主持词
2015/07/04 职场文书
同事离别感言
2015/08/04 职场文书
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis