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 相关文章推荐
简单三步,搞掂内存泄漏
Mar 10 Javascript
让js弹出窗口居前显示的实现方法
Jul 10 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
Sep 12 Javascript
js实例属性和原型属性示例详解
Nov 23 Javascript
仿JQuery输写高效JSLite代码的一些技巧
Jan 13 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
Aug 08 Javascript
Angularjs CURD 详解及实例代码
Sep 14 Javascript
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
Angular项目中$scope.$apply()方法的使用详解
Jul 26 Javascript
vue-cli之router基本使用方法详解
Oct 17 Javascript
javascript用rem来做响应式开发
Jan 13 Javascript
Node.js console控制台简单用法分析
Jan 04 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
PHP5 安装方法
2006/10/09 PHP
Windows下IIS6/Apache2.2.4+MySQL5.2+PHP5.2.1安装配置方法
2007/05/03 PHP
php 阴历-农历-转换类代码
2012/01/16 PHP
typecho插件编写教程(五):核心代码
2015/05/28 PHP
php实现word转html的方法
2016/01/22 PHP
解决PHP程序运行时:Fatal error: Maximum execution time of 30 seconds exceeded in的错误提示
2016/11/25 PHP
Zend Framework实现自定义过滤器的方法
2016/12/09 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
使用jQuery异步加载 JavaScript脚本解决方案
2014/04/20 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
2014/05/29 Javascript
node.js中的fs.utimesSync方法使用说明
2014/12/15 Javascript
使用JavaScript的AngularJS库编写hello world的方法
2015/06/23 Javascript
微信小程序 slider 详解及实例代码
2017/01/10 Javascript
Three.js获取鼠标点击的三维坐标示例代码
2017/03/24 Javascript
jquery网页加载进度条的实现
2017/06/01 jQuery
angular json对象push到数组中的方法
2018/02/27 Javascript
讲解vue-router之什么是嵌套路由
2018/05/28 Javascript
详解关于vue-area-linkage走过的坑
2018/06/27 Javascript
小程序组件之仿微信通讯录的实现代码
2018/09/12 Javascript
JS面向对象编程实现的拖拽功能案例详解
2020/03/03 Javascript
vue实现日历表格(element-ui)
2020/09/24 Javascript
Python中装饰器的一个妙用
2015/02/08 Python
Djang中静态文件配置方法
2015/07/30 Python
Python中列表list以及list与数组array的相互转换实现方法
2017/09/22 Python
python 3.6 tkinter+urllib+json实现火车车次信息查询功能
2017/12/20 Python
Python math库 ln(x)运算的实现及原理
2019/07/17 Python
python下载卫星云图合成gif的方法示例
2020/02/18 Python
python梯度下降算法的实现
2020/02/24 Python
纯CSS3实现移动端展开和收起效果的示例代码
2020/04/26 HTML / CSS
html5 更新图片颜色示例代码
2014/07/29 HTML / CSS
美国翻新电子产品商店:The Store
2019/10/08 全球购物
亚马逊新加坡官方网站:Amazon.sg
2020/03/25 全球购物
几道数据库的概念性面试题
2014/05/30 面试题
Prototype如何为一个Ajax添加一个参数
2015/12/06 面试题
千与千寻观后感
2015/06/04 职场文书
分家协议书范本
2016/03/22 职场文书