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 相关文章推荐
七夕情人节丘比特射箭小游戏
Aug 20 Javascript
js实现的彩色方块飞舞奇幻效果
Jan 27 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
Jan 28 Javascript
全屏js头像上传插件源码高清版
Mar 29 Javascript
jquery文字填写自动高度的实现方法
Nov 07 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
Nov 09 Javascript
vue之nextTick全面解析
May 17 Javascript
angular4实现tab栏切换的方法示例
Oct 21 Javascript
Bootstrap Table实现定时刷新数据的方法
Aug 13 Javascript
vuejs router history 配置到iis的方法
Sep 20 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
Jan 27 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
May 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学习笔记 面向对象中[接口]与[多态性]的应用
2011/06/16 PHP
php设计模式 Adapter(适配器模式)
2011/06/26 PHP
php 中文字符串首字母的获取函数分享
2013/11/04 PHP
php实现上传图片保存到数据库的方法
2015/02/11 PHP
ThinkPHP实现附件上传功能
2017/04/27 PHP
PHP实现的分页类定义与用法示例
2017/07/05 PHP
javascript开发技术大全-第1章javascript概述
2011/07/03 Javascript
图片翻转效果具体实现代码
2014/01/09 Javascript
javascript判断chrome浏览器的方法
2014/03/26 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
2015/11/03 Javascript
JS实现的表格行上下移动操作示例
2016/08/03 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
js仿淘宝商品放大预览功能
2017/03/15 Javascript
angular实现IM聊天图片发送实例
2017/05/08 Javascript
js中getBoundingClientRect的作用及兼容方案详解
2018/02/01 Javascript
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
node.js通过url读取文件
2020/10/16 Javascript
python实现自动登录人人网并采集信息的方法
2015/06/28 Python
python结合selenium获取XX省交通违章数据的实现思路及代码
2016/06/26 Python
python文件名和文件路径操作实例
2017/09/29 Python
Django跨域请求问题的解决方法示例
2018/06/16 Python
Django认证系统实现的web页面实现代码
2019/08/12 Python
Python函数的返回值、匿名函数lambda、filter函数、map函数、reduce函数用法实例分析
2019/12/26 Python
Python中os模块功能与用法详解
2020/02/26 Python
python GUI库图形界面开发之PyQt5 Qt Designer工具(Qt设计师)详细使用方法及Designer ui文件转py文件方法
2020/02/26 Python
5行Python代码实现图像分割的步骤详解
2020/05/25 Python
python 发送get请求接口详解
2020/11/17 Python
Python基于template实现字符串替换
2020/11/27 Python
matplotlib之pyplot模块之标题(title()和suptitle())
2021/02/22 Python
青年志愿者活动方案
2014/08/17 职场文书
办理信用卡收入证明范例
2014/09/13 职场文书
2014年培训工作总结范文
2014/11/27 职场文书
表扬信格式模板
2015/05/05 职场文书
新郎婚礼致辞
2015/07/27 职场文书
导游词之千岛湖
2019/09/23 职场文书
晶体管单管来复再生式收音机
2021/04/22 无线电