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_14_函数形式参数与arguments
Oct 20 Javascript
jquery统计输入文字的个数并对其进行判断
Jan 07 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
Aug 12 Javascript
JavaScript和CSS交互的方法汇总
Dec 02 Javascript
Javascript函数的参数
Jul 16 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
Feb 07 Javascript
javascript遍历json对象的key和任意js对象属性实例
Mar 09 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
Mar 27 Javascript
详解webpack import()动态加载模块踩坑
Jul 17 Javascript
微信小程序修改swiper默认指示器样式的实例代码
Jul 18 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
Sep 14 Javascript
一次微信小程序内地图的使用实战记录
Sep 09 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获取MAC地址的函数代码
2011/09/11 PHP
php.ini 配置文件的深入解析
2013/06/17 PHP
Laravel 5框架学习之用户认证
2015/04/09 PHP
ZendFramework2连接数据库操作实例
2017/04/18 PHP
PHP面向对象之领域模型+数据映射器实例(分析)
2017/06/21 PHP
根据邮箱的域名跳转到相应的登录页面的代码
2012/02/27 Javascript
疯狂Jquery第一天(Jquery学习笔记)
2012/05/11 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
2013/09/22 Javascript
jQuery的attr与prop使用介绍
2013/10/10 Javascript
js 判断浏览器使用的语言示例代码
2014/03/22 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
多引号嵌套的变量命名的问题
2014/05/09 Javascript
JavaScript中扩展Array contains方法实例
2020/08/23 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
2016/01/23 Javascript
详解PHP后期静态绑定分析与应用
2018/03/21 Javascript
JavaScript之解构赋值的理解
2019/01/30 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
2019/07/02 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
js页面加载后执行的几种方式小结
2020/01/30 Javascript
Python中操作符重载用法分析
2016/04/29 Python
python虚拟环境virualenv的安装与使用
2016/12/18 Python
Python 字符串大小写转换的简单实例
2017/01/21 Python
Python中字典的浅拷贝与深拷贝用法实例分析
2018/01/02 Python
pytorch 在网络中添加可训练参数,修改预训练权重文件的方法
2019/08/17 Python
wxPython窗体拆分布局基础组件
2019/11/19 Python
pandas apply多线程实现代码
2020/08/17 Python
详解pandas apply 并行处理的几种方法
2021/02/24 Python
用CSS禁用输入法(CSS3 UI规范)实例解析
2012/12/04 HTML / CSS
耐克亚太地区:Nike APAC
2019/12/07 全球购物
简历中的自我评价怎么写
2014/01/29 职场文书
开办大学饮食联盟创业计划书
2014/01/29 职场文书
社团活动总结书
2014/06/27 职场文书
民族精神月活动总结
2014/08/28 职场文书
毕业论文答辩演讲稿
2015/06/23 职场文书
让人瞬间清醒的句子,句句经典,字字如金
2019/07/08 职场文书
创业计划书之干洗店
2019/09/10 职场文书