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 相关文章推荐
Jquery中使用setInterval和setTimeout的方法
Apr 08 Javascript
jquery validate 自定义验证方法介绍 日期验证
Feb 27 Javascript
JavaScript设计模式之策略模式实例
Oct 10 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
Aug 28 Javascript
javascript类型系统_正则表达式RegExp类型详解
Jun 24 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
Dec 26 Javascript
微信小程序实现图片轮播及文件上传
Apr 07 Javascript
浅谈js获取ModelAndView值的问题
Mar 28 Javascript
原生JS+HTML5实现的可调节写字板功能示例
Aug 30 Javascript
详解vue2.0 资源文件assets和static的区别
Nov 27 Javascript
Vue-cli项目部署到Nginx服务器的方法
Nov 01 Javascript
vue3.0 的 Composition API 的使用示例
Oct 26 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中的mongodb select常用操作代码示例
2014/09/06 PHP
php二维数组合并及去重复的方法
2015/03/04 PHP
如何通过Linux命令行使用和运行PHP脚本
2015/07/29 PHP
浅谈PHP eval()函数定义和用法
2016/06/21 PHP
PHP生成图片验证码功能示例
2017/01/12 PHP
javascript web对话框与弹出窗口
2009/02/22 Javascript
javascipt匹配单行和多行注释的正则表达式
2013/11/20 Javascript
jquery动态加载select下拉框示例代码
2013/12/10 Javascript
JavaScript正则表达式匹配 div  style标签
2016/03/15 Javascript
angularjs使用directive实现分页组件的示例
2017/02/07 Javascript
AngularJS ui-router (嵌套路由)实例
2017/03/10 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
2017/06/16 jQuery
关于使用axios的一些心得技巧分享
2017/07/02 Javascript
在vue中使用Autoprefixed的方法
2018/07/27 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
2018/09/19 Javascript
Node.js+Express+Mysql 实现增删改查
2019/04/03 Javascript
vue实现动态按钮功能
2019/05/13 Javascript
vue实现简单的日历效果
2020/09/24 Javascript
[22:07]DOTA2-DPC中国联赛 正赛 iG vs Magma 选手采访
2021/03/11 DOTA
python爬虫常用的模块分析
2014/08/29 Python
python实现自动更换ip的方法
2015/05/05 Python
Python脚本实现自动发带图的微博
2016/04/27 Python
Ubuntu 16.04 LTS中源码安装Python 3.6.0的方法教程
2016/12/27 Python
python使用tkinter实现简单计算器
2018/01/30 Python
python实现俄罗斯方块
2018/06/26 Python
Python操作mongodb数据库的方法详解
2018/12/08 Python
Django xadmin开启搜索功能的实现
2019/11/15 Python
Python如何把十进制数转换成ip地址
2020/05/25 Python
Python调用jar包方法实现过程解析
2020/08/11 Python
Python3中FuzzyWuzzy库实例用法
2020/11/18 Python
斯德哥尔摩通票:Stockholm Pass
2018/01/09 全球购物
初三政治教学反思
2014/01/30 职场文书
食品安全宣传标语
2014/06/07 职场文书
教师四风问题对照检查材料
2014/09/26 职场文书
优秀少先队员事迹材料
2014/12/24 职场文书
MySQL学习总结-基础架构概述
2021/04/05 MySQL