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日历功能对象
Jan 12 Javascript
jquery 倒计时效果实现秒杀思路
Sep 11 Javascript
express的中间件bodyParser详解
Dec 04 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
Dec 02 Javascript
简单讲解AngularJS的Routing路由的定义与使用
Mar 05 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
May 31 Javascript
全面接触神奇的Bootstrap导航条实战篇
Aug 01 Javascript
使用JS中的exec()方法构造正则表达式验证
Aug 01 Javascript
Bootstrap的基本应用要点浅析
Dec 19 Javascript
JavaScript中使用Async实现异步控制
Aug 15 Javascript
Vue递归实现树形菜单方法实例
Nov 06 Javascript
vue 实现element-ui中的加载中状态
Nov 11 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
用Socket发送电子邮件(利用需要验证的SMTP服务器)
2006/10/09 PHP
PHP反转字符串函数strrev()函数的用法
2012/02/04 PHP
php把数据表导出为Excel表的最简单、最快的方法(不用插件)
2014/05/10 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
基于jquery的多功能软键盘插件
2012/07/25 Javascript
javascript全局变量封装模块实现代码
2012/11/28 Javascript
使用js获取地址栏中传递的值
2013/07/02 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
2015/04/01 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
2015/04/06 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
2016/10/10 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
2016/11/07 Javascript
jQuery UI插件实现百度提词器效果
2016/11/21 Javascript
React Native预设占位placeholder的使用
2017/09/28 Javascript
Parcel 打包示例(React HelloWorld)
2018/01/16 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
2018/08/13 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
2018/09/11 Javascript
详解JavaScript栈内存与堆内存
2019/04/04 Javascript
关于JavaScript中异步/等待的用法与理解
2020/11/18 Javascript
Python实现子类调用父类的方法
2014/11/10 Python
Python的动态重新封装的教程
2015/04/11 Python
python实现线程池的方法
2015/06/30 Python
python实现爬取千万淘宝商品的方法
2015/06/30 Python
python实现旋转和水平翻转的方法
2018/10/25 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
Python 2/3下处理cjk编码的zip文件的方法
2019/04/26 Python
python 实现两个线程交替执行
2020/05/02 Python
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
2020/04/07 HTML / CSS
法国面料和小百货在线商店:Mondial Tissus
2019/03/23 全球购物
Johnson Fitness澳大利亚:高级健身器材
2021/03/16 全球购物
工厂搬迁方案
2014/05/11 职场文书
会展策划与管理专业求职信
2014/06/09 职场文书
个人求职自荐信范文
2015/03/06 职场文书
Pytorch中TensorBoard及torchsummary的使用详解
2021/05/12 Python
pytorch中的model.eval()和BN层的使用
2021/05/22 Python
Python Pandas解析读写 CSV 文件
2022/04/11 Python