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实现轮显新闻标题链接
Aug 13 Javascript
javascript正则表达式之search()用法实例
Jan 19 Javascript
javascript实现删除前弹出确认框
Jun 04 Javascript
详解JavaScript中Date.UTC()方法的使用
Jun 12 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
Nov 01 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
Jul 18 Javascript
用最少的JS代码写出贪吃蛇游戏
Jan 12 Javascript
JS运动改变单物体透明度的方法分析
Jan 23 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
Feb 22 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
Apr 28 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
Jul 02 Javascript
如何使用vue3打造一个物料库
May 08 Vue.js
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
自动分页的不完整解决方案
2007/01/12 PHP
php+mysql分页代码详解
2008/03/27 PHP
php empty() 检查一个变量是否为空
2011/11/10 PHP
php实现图片添加水印功能
2014/02/13 PHP
destoon安装出现Internal Server Error的解决方法
2014/06/21 PHP
php中$_POST与php://input的区别实例分析
2015/01/07 PHP
php数据结构之顺序链表与链式线性表示例
2018/01/22 PHP
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
firefox下input type=&quot;file&quot;的size是多大
2011/10/24 Javascript
js实现商城星星评分的效果
2015/12/29 Javascript
jQuery添加options点击事件并传值实例代码
2016/05/18 Javascript
Vue2递归组件实现树形菜单
2017/04/10 Javascript
angular.js指令中的controller、compile与link函数的不同之处
2017/05/10 Javascript
vue-cli项目中怎么使用mock数据
2017/09/27 Javascript
为输入框加入数字js校验代码分享
2017/11/02 Javascript
vue组件中的数据传递方法
2018/05/14 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
vue父组件给子组件的组件传值provide inject的方法
2019/10/23 Javascript
[11:27]《一刀刀一天》之DOTA全时刻20:TI4总奖金突破920W TS赛事分析
2014/06/18 DOTA
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
python实现用户登录系统
2016/05/21 Python
从请求到响应过程中django都做了哪些处理
2018/08/01 Python
python3 实现爬取TOP500的音乐信息并存储到mongoDB数据库中
2019/08/24 Python
Python过滤掉numpy.array中非nan数据实例
2020/06/08 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
详解html5页面 rem 布局适配方法
2018/01/12 HTML / CSS
高中微机老师自我鉴定
2014/02/16 职场文书
文明村创建实施方案
2014/03/27 职场文书
二年级学生评语大全
2014/04/23 职场文书
对外汉语专业大学生职业生涯规划范文
2014/09/13 职场文书
小学教师自我评价
2015/03/04 职场文书
学习经验交流会策划书
2015/11/02 职场文书
初中语文教学反思范文
2016/03/03 职场文书
学校运动会开幕词
2016/03/03 职场文书
详解Python魔法方法之描述符类
2021/05/26 Python
TV动画《政宗君的复仇》第二季制作决定PV公布
2022/04/02 日漫