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 相关文章推荐
用于判断用户注册时,密码强度的JS代码
Jan 01 Javascript
javascript中字符串拼接需注意的问题
Jul 13 Javascript
javascript 实现子父窗体互相传值的简单实例
Feb 17 Javascript
jQuery中[attribute^=value]选择器用法实例
Dec 31 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
微信公众号菜单配置微信小程序实例详解
Mar 31 Javascript
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
Vue2.0学习之详解Vue 组件及父子组件通信
Dec 12 Javascript
微信小程序实现图片预览功能
Jan 31 Javascript
vue中使用input[type=&quot;file&quot;]实现文件上传功能
Sep 10 Javascript
js实现简单五子棋游戏
May 28 Javascript
在vue-cli3中使用axios获取本地json操作
Jul 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数据库类
2009/05/27 PHP
PHP中将数组转成XML格式的实现代码
2011/08/08 PHP
php读取文件内容至字符串中,同时去除换行、空行、行首行尾空格(Zjmainstay原创)
2012/07/31 PHP
PHP中常用的字符串格式化函数总结
2014/11/19 PHP
PHP书写格式详解(必看)
2016/05/23 PHP
PHP 断点续传实例详解
2017/11/11 PHP
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
jquery教程ajax请求json数据示例
2014/01/13 Javascript
ExtJs纵坐标值重复问题的解决方法
2014/02/27 Javascript
jQuery siblings()用法实例详解
2016/04/26 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
2016/06/23 Javascript
vue项目中v-model父子组件通信的实现详解
2017/12/10 Javascript
Angular服务Request异步请求的实例讲解
2018/08/13 Javascript
小程序页面动态配置实现方法
2019/02/05 Javascript
解决vue scoped scss 无效的问题
2020/09/04 Javascript
[09:37]2018DOTA2国际邀请赛寻真——不懈追梦的Team Serenity
2018/08/13 DOTA
Python中的面向对象编程详解(下)
2015/04/13 Python
Python文件与文件夹常见基本操作总结
2016/09/19 Python
Python如何快速上手? 快速掌握一门新语言的方法
2017/11/14 Python
Python代码实现KNN算法
2017/12/20 Python
python2.6.6如何升级到python2.7.14
2018/04/08 Python
对python生成业务报表的实例详解
2019/02/03 Python
python写程序统计词频的方法
2019/07/29 Python
树莓派安装OpenCV3完整过程的实现
2019/10/10 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
Python3监控疫情的完整代码
2020/02/20 Python
Python基础之字符串常见操作经典实例详解
2020/02/26 Python
python 指定源路径来解决import问题的操作
2021/03/04 Python
html5通过canvas实现刮刮卡效果示例分享
2014/01/27 HTML / CSS
瑞典在互联网上最大的宠物商店:Animail
2020/10/31 全球购物
大学生创业感言
2014/01/25 职场文书
2014年五四青年节活动方案
2014/03/29 职场文书
高中生操行评语大全
2014/04/25 职场文书
道德与公民自我评价
2015/03/09 职场文书
公路施工安全责任书
2015/05/08 职场文书