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,超强推荐share.js
Dec 23 Javascript
javascript xml为数据源的下拉框控件
Jul 07 Javascript
JSQL 批量图片切换的实现代码
May 05 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
Jun 07 Javascript
jquery easyui使用心得
Jul 07 Javascript
html的DOM中Event对象onabort事件用法实例
Jan 21 Javascript
JS给Textarea文本框添加行号的方法
Aug 20 Javascript
JavaScript代码实现左右上下自动晃动自动移动
Apr 08 Javascript
javascript实现仿百度图片的瀑布流加载效果
Apr 20 Javascript
jQuery查看选中对象HTML代码的方法
Jun 17 Javascript
微信小程序实现日历小功能
Nov 18 Javascript
测量JavaScript函数的性能各种方式对比
Apr 27 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中使用Akismet防止垃圾评论的代码
2011/06/10 PHP
php中curl、fsocket、file_get_content三个函数的使用比较
2014/05/09 PHP
php 的反射详解及示例代码
2016/08/25 PHP
PHP编程实现多维数组按照某个键值排序的方法小结【2种方法】
2017/04/27 PHP
PHP实现从上往下打印二叉树的方法
2018/01/18 PHP
PHP面向对象程序设计重载(overloading)操作详解
2019/06/13 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
Laravel关系模型指定条件查询方法
2019/10/10 PHP
javascript 面向对象编程 function也是类
2009/09/17 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
JavaScript实现的多个图片广告交替显示效果代码
2015/09/04 Javascript
在AngularJS框架中处理数据建模的方式解析
2016/03/05 Javascript
javascript按钮禁用和启用的效果实例代码
2017/10/29 Javascript
js构造函数创建对象是否加new问题
2018/01/22 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
vue this.reload 方法 配置
2018/09/12 Javascript
基于layui实现高级搜索(筛选)功能
2019/07/26 Javascript
JS事件循环机制event loop宏任务微任务原理解析
2020/08/04 Javascript
Python正则简单实例分析
2017/03/21 Python
python2.x实现人民币转大写人民币
2018/06/20 Python
Python设置在shell脚本中自动补全功能的方法
2018/06/25 Python
python使用PIL模块获取图片像素点的方法
2019/01/08 Python
python 整数越界问题详解
2019/06/27 Python
利用python中集合的唯一性实现去重
2020/02/11 Python
使用Bazel编译TensorBoard教程
2020/02/15 Python
Python使用QQ邮箱发送邮件实例与QQ邮箱设置详解
2020/02/18 Python
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
2019/01/17 HTML / CSS
马来西亚最好的婴儿商店:Motherhood
2017/09/14 全球购物
农业资源与环境专业自荐信范文
2013/12/30 职场文书
2014年体育教师工作总结
2014/12/03 职场文书
优秀党支部申报材料
2014/12/24 职场文书
裁员通知
2015/04/25 职场文书
2015年人力资源部工作总结
2015/04/30 职场文书
2016大学生形势与政策心得体会
2016/01/12 职场文书
MySQL数据库超时设置配置的方法实例
2021/10/15 MySQL
CSS的calc函数用法小结
2022/06/25 HTML / CSS