• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > 详谈jQuery中使用attr(), prop(), val()获取value的异同

详谈jQuery中使用attr(), prop(), val()获取value的异同

作者: 字体:[增加 减小] 来源:互联网 时间:2017-05-11

通过本文主要向大家介绍了attr prop,attr和prop的区别,jquery prop attr,attr和val的区别,attr 与val等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

jQuery中有3个获取元素value值的函数比较相似:attr(), prop(), val();拿来比较一下。  

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="jquery-2.1.4.js"></script>

</head>
<body>
<input type="text" value="123"/>
<button id="btn">click</button>
<script>

  $("#btn").click(function(){
    var attr=$("input").attr("value");
    var prop=$("input").prop("value");
    var val=$("input").val();
    console.log(attr);
    console.log(prop);
    console.log(val);
  })
</script>
</body>
</div>

代码如上所示,为输入框设定了初始值:123,此时点击按钮,控制台输出为:

123
123
123
</div>

改变输入框的值,此时控制台输出:    

123
123thgf
123thgf
</div>

如果我们没有为文本框设定初始值,即删除value=”123”后,依旧使用如上js代码,则相应输出如下:

undefined

attr()输出为undefined,而prop()和val()输出为“空”。

输入value值后:控制台输出为:

undefined
asdasd
asdasd
</div>

attr()输出依然为undefined,而prop()和val()则输出实际值。

可见,prop()和val()都能获取到文本框的实际value值,而attr()获取的则始终为文档结构中的value的属性值,与文本框实际值无关,并不会变化。

以上这篇详谈jQuery中使用attr(), prop(), val()获取value的异同就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 详谈jQuery中使用attr(), prop(), val()获取value的异同

相关文章

  • 2017-05-11webpack入门+react环境配置
  • 2017-05-11微信小程序 动态的设置图片的高度和宽度详解及实例代码
  • 2017-05-11详解Vue2.0之去掉组件click事件的native修饰
  • 2017-05-11有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
  • 2017-05-11详谈jQuery中的一些正则匹配表达式
  • 2017-05-11bootstrap suggest下拉框使用详解
  • 2017-05-11js实现tab切换效果
  • 2017-05-11基于jQuery代码实现圆形菜单展开收缩效果
  • 2017-05-11javascript容错处理代码(屏蔽js错误)
  • 2017-05-11JS模拟实现ECMAScript5新增的数组方法

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • NodeJs安装npm包一直失败的解决方法
    • javascript 显示全局变量与隐式全局变量的区别
    • jQuery实现复选框的全选和反选
    • jQuery表格(Table)基本操作实例分析
    • xmlplus组件设计系列之网格(DataGrid)(10)
    • JavaScript原生编写《飞机大战坦克》游戏完整实例
    • 详谈jQuery Ajax(load,post,get,ajax)的用法
    • js手机号4位显示空格,银行卡每4位显示空格效果
    • php输出全部gb2312编码内的汉字方法
    • flexslider.js实现移动端轮播

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有