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 相关文章推荐
jQuery-ui中自动完成实现方法
Jun 10 Javascript
jQuery语法总结和注意事项小结
Nov 11 Javascript
jquery应该如何来设置改变按钮input的onclick事件
Dec 10 Javascript
jQuery实现div浮动层跟随页面滚动效果
Feb 11 Javascript
jquery超简单实现手风琴效果的方法
Jun 05 Javascript
详解React-Todos入门例子
Nov 08 Javascript
vue上传图片组件编写代码
Jul 26 Javascript
Vue-Cli中自定义过滤器的实现代码
Aug 12 Javascript
JS实现简单的点赞与踩功能示例
Dec 05 Javascript
Javascript读写cookie的实例源码
Mar 16 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
Vue常用API、高级API的相关总结
Feb 02 Vue.js
从重置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编程风格规范分享
2014/01/15 PHP
Javascript技巧之不要用for in语句对数组进行遍历
2010/10/20 Javascript
超酷的网页音乐播放器DewPlayer使用方法
2010/12/18 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
2011/05/28 Javascript
jquery getScript动态加载JS方法改进详解
2012/11/15 Javascript
Three.js源码阅读笔记(物体是如何组织的)
2012/12/27 Javascript
js 在定义的时候立即执行的函数表达式(function)写法
2013/01/16 Javascript
Iframe 自动适应页面的高度示例代码
2014/02/26 Javascript
ztree获取当前选中节点子节点id集合的方法
2015/02/12 Javascript
jQuery插件开发的五种形态小结
2015/03/04 Javascript
原生js结合html5制作简易的双色子游戏
2015/03/30 Javascript
AngularJS基础 ng-mousemove 指令简单示例
2016/08/02 Javascript
JS+CSS3制作炫酷的弹窗效果
2016/11/08 Javascript
AngularJS Toaster使用详解
2017/02/24 Javascript
jQuery Masonry瀑布流布局神器使用详解
2017/05/25 jQuery
深入浅析Vue中的slots/scoped slots
2018/04/03 Javascript
React实现全局组件的Toast轻提示效果
2018/09/21 Javascript
详解JavaScript数据类型和判断方法
2020/09/04 Javascript
[01:19:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第二局
2016/03/05 DOTA
python每隔N秒运行指定函数的方法
2015/03/16 Python
Python之list对应元素求和的方法
2018/06/28 Python
浅谈python写入大量文件的问题
2018/11/09 Python
html5定位获取当前位置并在百度地图上显示
2014/08/22 HTML / CSS
Room Mate Hotels美国:西班牙酒店品牌
2018/04/10 全球购物
STUBHUB日本:购买和出售全球活动门票
2018/07/01 全球购物
英国女装网上商店:I Saw It First
2018/10/18 全球购物
自荐信包含哪些内容
2013/10/30 职场文书
关于人生的感言
2014/01/17 职场文书
校运会广播稿100字
2014/01/27 职场文书
大学毕业寄语大全
2014/04/10 职场文书
课前三分钟演讲稿
2014/04/24 职场文书
群众路线教育实践活动民主生活会个人检查对照思想汇报
2014/10/04 职场文书
三年级学生期末评语
2014/12/26 职场文书
股份转让协议书范本
2015/01/27 职场文书
2016教师校本培训心得体会
2016/01/08 职场文书
如何在C++中调用Python
2021/05/21 Python