jquery获取input type=text中的值的各种方式(总结)


Posted in Javascript onDecember 02, 2016

 实例如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml>

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <title>JQuery获取文本框的值</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <script src="jquery-1.5.1.min.js" type="text/javascript"></script>
    
    <script type="text/javascript">
    //使用id的方式获取
    $(document).ready(function(){
      //1
      $("#button_text1").click(function(){
        var result1 = $("#input_text1").val();
        alert("result1 = " + result1);
      });
      //2
      $("#button_text2").click(function(){
        var result2 = $("input[id='input_text2']").val();
        alert("result2 = " + result2);
      });
      //3
      $("#button_text3").click(function(){
        var result3 = $("input[id='input_text3']").attr("value");
        alert("result3 = " + result3);
      });
      //4. 可以通过type的值来获取input中的值(未演示)
      /*
      $("#button_text4").click(function(){
        var result4 = $("input[type='text']").val();
        alert("result4 = " + result4);
      });
      */
      //5. 可以通过name的值来获取input中的值(未演示)
      /*
      $("#button_text5").click(function(){
        var result5 = $("input[name='text']").val();
        alert("result5 = " + result5);
      });      
      */
    });
    </script>
  </head>

  <body>
    <!-- 获取文本框的值:方式一 -->
    <div id="test1">
      <input id="input_text1" type="text" value="test1" style="width: 100px;" />
      <button id="button_text1">test1</button>
    </div>
    <!-- 获取文本框的值:方式二 -->
    <div id="test2">
      <input id="input_text2" type="text" value="test2" style="width: 100px;" />
      <button id="button_text2">test2</button>
    </div>
    <!-- 获取文本框的值:方式三 -->
    <div id="test3">
      <input id="input_text3" type="text" value="test3" style="width: 100px;" />
      <button id="button_text3">test3</button>
    </div>
  </body>

</html>

以上这篇jquery获取input type=text中的值的各种方式(总结)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript与C# Windows应用程序交互方法
Jun 29 Javascript
js日历功能对象
Jan 12 Javascript
JavaScript在多浏览器下for循环的使用方法
Nov 07 Javascript
使用Plupload实现直接上传附件至七牛云存储
Dec 26 Javascript
基于JavaScript代码实现微信扫一扫下载APP
Dec 30 Javascript
js下将金额数字每三位一逗号分隔
Feb 19 Javascript
JS获取和修改元素样式的实例代码
Aug 06 Javascript
BootStrap Tooltip插件源码解析
Dec 27 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
Jan 31 Javascript
vue全局组件与局部组件使用方法详解
Mar 29 Javascript
微信小程序后端(java)开发流程的详细步骤
Nov 13 Javascript
vuecli项目构建SSR服务端渲染的实现
Oct 30 Javascript
vue.js入门(3)——详解组件通信
Dec 02 #Javascript
javascript实现鼠标点击页面 移动DIV
Dec 02 #Javascript
jquery对所有input type=text的控件赋值实现方法
Dec 02 #Javascript
bootstrap使用validate实现简单校验功能
Dec 02 #Javascript
在网页中插入百度地图的步骤详解
Dec 02 #Javascript
PHP获取当前页面完整URL的方法
Dec 02 #Javascript
jQuery插件fullPage.js实现全屏滚动效果
Dec 02 #Javascript
You might like
使用PHP制作新闻系统的思路
2006/10/09 PHP
PHP通用检测函数集合
2006/11/25 PHP
基于curl数据采集之单页面采集函数get_html的使用
2013/04/28 PHP
解决File size limit exceeded 错误的方法
2013/06/14 PHP
Yii框架获取当前controlle和action对应id的方法
2014/12/03 PHP
php简单实现查询数据库返回json数据
2015/04/16 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
PHP中常用的三种设计模式详解【单例模式、工厂模式、观察者模式】
2019/06/14 PHP
dojo 之基础篇(三)之向服务器发送数据
2007/03/24 Javascript
通过JavaScript控制字体大小的代码
2011/10/04 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
2014/12/14 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
javascript每日必学之循环
2016/02/19 Javascript
AngularJS入门教程之服务(Service)
2016/07/27 Javascript
js轮盘抽奖实例分析
2020/04/17 Javascript
javascript 中的事件委托详解
2016/10/25 Javascript
微信小程序 生命周期函数详解
2017/05/24 Javascript
js微信应用场景之微信音乐相册案例分享
2017/08/11 Javascript
原生js中ajax访问的实例详解
2017/09/19 Javascript
Nodejs实现多文件夹文件同步
2018/10/17 NodeJs
Vue Object.defineProperty及ProxyVue实现双向数据绑定
2020/09/02 Javascript
[57:09]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第一场 1月26日
2021/03/11 DOTA
python原始套接字编程示例分享
2014/02/21 Python
在Python中操作字典之update()方法的使用
2015/05/22 Python
详解python3中socket套接字的编码问题解决
2017/07/01 Python
Python使用numpy模块实现矩阵和列表的连接操作方法
2019/06/26 Python
如何使用django的MTV开发模式返回一个网页
2019/07/22 Python
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
python实现视频读取和转化图片
2019/12/10 Python
python读取excel进行遍历/xlrd模块操作
2020/07/12 Python
Idea安装python显示无SDK问题解决方案
2020/08/12 Python
15款Python编辑器的优缺点,别再问我“选什么编辑器”啦
2020/10/19 Python
python实现马丁策略回测3000只股票的实例代码
2021/01/22 Python
大学生党员个人对照检查材料范文
2014/09/25 职场文书
副检察长四风问题对照检查材料思想汇报
2014/10/07 职场文书
详解SQL报错盲注
2022/07/23 SQL Server