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 相关文章推荐
javascript中&quot;/&quot;运算符常见错误
Oct 13 Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
Jan 09 Javascript
JavaScript常用全局属性与方法记录积累
Jul 03 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
Aug 26 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
Jan 06 Javascript
JS动态增删表格行的方法
Mar 03 Javascript
JavaScript操作选择对象的简单实例
May 16 Javascript
jquery.validate使用详解
Jun 02 Javascript
利用Javascript实现BMI计算器
Aug 16 Javascript
jQuery子元素过滤选择器用法示例
Sep 09 Javascript
JavaScript实现url参数转成json形式
Sep 25 Javascript
jquery 判断是否支持Placeholder属性的方法
Feb 07 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环境配置 php5 MySQL5 apache2 phpmyadmin安装与配置图文教程
2007/03/16 PHP
php内核解析:PHP中的哈希表
2014/01/30 PHP
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
js 返回时间戳所对应的具体时间
2010/07/20 Javascript
js获取控件位置以及不同浏览器中的差别介绍
2013/08/08 Javascript
Js点击弹出下拉菜单效果实例
2013/08/12 Javascript
实例讲解JQuery中this和$(this)区别
2014/12/08 Javascript
javascript实现禁止鼠标滚轮事件
2015/07/24 Javascript
基于JavaScript创建动态Dom
2015/12/08 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
2015/12/17 Javascript
JS中多种方式创建对象详解
2016/03/22 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
2016/12/05 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
2016/12/08 Javascript
AngulaJS路由 ui-router 传参实例
2017/04/28 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
2017/07/13 Javascript
基于Vue实现后台系统权限控制的示例代码
2017/08/29 Javascript
微信二次分享报错invalid signature问题及解决方法
2019/04/01 Javascript
Nuxt v-bind绑定img src不显示的解决
2019/12/05 Javascript
前端性能优化建议
2020/09/17 Javascript
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
[01:51]DAC趣味视频-如何成为职业选手.mp4
2017/04/02 DOTA
Python IDE PyCharm的基本快捷键和配置简介
2015/11/04 Python
Python基于辗转相除法求解最大公约数的方法示例
2018/04/04 Python
使用python画个小猪佩奇的示例代码
2018/06/06 Python
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
Python从单元素字典中获取key和value的实例
2018/12/31 Python
python requests证书问题解决
2019/09/05 Python
pytorch方法测试详解——归一化(BatchNorm2d)
2020/01/15 Python
python 线程的五个状态
2020/09/22 Python
html5+css3之CSS中的布局与Header的实现
2014/11/21 HTML / CSS
西班牙网上书店:Casa del Libro
2016/11/01 全球购物
LTD Commodities:礼品,独特发现,家居装饰,家用器皿
2017/08/11 全球购物
金额转换,阿拉伯数字的金额转换成中国传统的形式如:(¥1011)-> (一千零一拾一元整)输出
2015/05/29 面试题
科技馆观后感
2015/06/08 职场文书
爱国主义教育主题班会
2015/08/13 职场文书
在pycharm中无法import所安装的库解决方案
2021/05/31 Python