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 组件之旅(三):用 Ant 构建组件
Oct 28 Javascript
javascript中的float运算精度实例分析
Aug 21 Javascript
2014 HTML5/CSS3热门动画特效TOP10
Dec 07 Javascript
jQuery中animate用法实例分析
Mar 09 Javascript
原生js和jQuery写的网页选项卡特效对比
Apr 27 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
Nov 01 Javascript
vue.js初学入门教程(2)
Nov 07 Javascript
JavaScript函数参数的传递方式详解
Mar 06 Javascript
微信小程序 页面传值详解
Mar 10 Javascript
Angular4 中内置指令的基本用法
Jul 31 Javascript
JS排序算法之希尔排序与快速排序实现方法
Dec 12 Javascript
mint-ui在vue中的使用示例
Apr 05 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模板技术原理【一】
2008/01/10 PHP
PHP字符串与数组处理函数用法小结
2020/01/07 PHP
jQuery+CSS 实现的超Sexy下拉菜单
2010/01/17 Javascript
JavaScript原型继承之基础机制分析
2011/08/26 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
2012/10/24 Javascript
js文件缓存之版本管理详解
2013/07/05 Javascript
JS 对输入框进行限制(常用的都有)
2013/07/30 Javascript
JavaScript的setAttribute兼容性问题解决方法
2013/11/11 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
2014/05/29 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
2016/02/19 Javascript
基于Turn.js 实现翻书效果实例解析
2016/06/20 Javascript
JavaScript之promise_动力节点Java学院整理
2017/07/03 Javascript
原生JS写Ajax的请求函数功能
2017/12/22 Javascript
微信小程序实现留言板
2018/10/31 Javascript
localstorage实现带过期时间的缓存功能
2019/06/28 Javascript
JavaScript相等运算符的九条规则示例详解
2019/10/20 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
2019/11/04 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
2020/09/17 Javascript
python中global用法实例分析
2015/04/30 Python
python 截取 取出一部分的字符串方法
2017/03/01 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
Python爬取爱奇艺电影信息代码实例
2019/11/26 Python
Pandas之缺失数据的实现
2021/01/06 Python
纯HTML+CSS3制作导航菜单(附源码)
2013/04/24 HTML / CSS
.NET概念性的面试题
2012/02/29 面试题
电子信息专业学生自荐信
2013/11/09 职场文书
高中生操行评语
2014/04/25 职场文书
电工技术比武方案
2014/05/11 职场文书
2014县政府领导班子三严三实对照检查材料思想汇报
2014/09/26 职场文书
考研英语辞职信
2015/05/13 职场文书
李强感恩观后感
2015/06/17 职场文书
小学数学国培研修日志
2015/11/13 职场文书
用python画城市轮播地图
2021/05/28 Python
如何利用opencv判断两张图片是否相同详解
2021/07/07 Python
python字符串的一些常见实用操作
2022/04/06 Python