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新窗口与子窗口传值详解
Feb 11 Javascript
Javascript中arguments用法实例分析
Jun 13 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
Feb 02 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
Aug 29 Javascript
jQuery实现扑克正反面翻牌效果
Mar 10 Javascript
第一次记录Bootstrap table学习笔记(1)
May 18 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
Jun 13 Javascript
JS奇技之利用scroll来监听resize详解
Jun 15 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
Sep 05 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
Dec 12 Javascript
Vue.extend实现挂载到实例上的方法
May 01 Javascript
vue中引入mxGraph的步骤详解
May 17 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下intval()和(int)转换使用与区别
2008/07/18 PHP
Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法
2016/11/03 PHP
event.srcElement 用法笔记e.target
2009/12/18 Javascript
jQuery AJAX 调用WebService实现代码
2010/03/24 Javascript
js Function类型
2011/12/04 Javascript
JavaScript事件委托的技术原理探讨示例
2014/04/17 Javascript
浅谈JavaScript中指针和地址
2015/07/26 Javascript
JavaScript匿名函数之模仿块级作用域
2015/12/12 Javascript
JavaScript实现in-place思想的快速排序方法
2016/08/07 Javascript
js 获取站点应用名的简单实例
2016/08/18 Javascript
Javascript中的神器——Promise
2017/02/08 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
2017/07/10 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
2018/09/01 Javascript
JavaScript寄生组合式继承原理与用法分析
2019/01/11 Javascript
自定义Vue中的v-module双向绑定的实现
2019/04/17 Javascript
vue-router 路由传参用法实例分析
2020/03/06 Javascript
Vue vm.$attrs使用场景详解
2020/03/08 Javascript
[48:27]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
使用Python的Django框架结合jQuery实现AJAX购物车页面
2016/04/11 Python
python检查URL是否正常访问的小技巧
2017/02/25 Python
Python基于tkinter模块实现的改名小工具示例
2017/07/27 Python
Python request post上传文件常见要点
2020/11/20 Python
国外平面设计第一市场:99designs
2016/10/25 全球购物
介绍一下Python下range()函数的用法
2013/11/07 面试题
环保倡议书格式范文
2014/05/14 职场文书
电子专业毕业生自荐信
2014/05/25 职场文书
2014年大学生社会实践自我鉴定
2014/09/26 职场文书
公司向个人借款协议书范本
2014/10/09 职场文书
依法行政工作汇报材料
2014/10/28 职场文书
计算机专业自荐信范文
2015/03/26 职场文书
贫困证明怎么写
2015/06/16 职场文书
标枪加油稿
2015/07/22 职场文书
创业者如何撰写出一份打动投资人的商业计划书?
2019/07/02 职场文书
python 统计代码耗时的几种方法分享
2021/04/02 Python
Python经常使用的一些内置函数
2022/04/11 Python
Linux中如何安装并部署Redis
2022/04/18 Servers