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 相关文章推荐
通过ifame指向的页面高度调整iframe的高度
Oct 05 Javascript
jquery获取下拉列表的值为null的解决方法
Mar 18 Javascript
浮动的div自适应居中显示的js代码
Dec 23 Javascript
jQuery 取值、赋值的基本方法整理
Mar 31 Javascript
JavaScript中的object转换成number或string规则介绍
Dec 31 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
May 25 Javascript
jquery自定义表格样式
Nov 23 Javascript
原生JavaScript实现Ajax的方法
Apr 07 Javascript
JS小数运算出现多为小数问题的解决方法
Jun 02 Javascript
基于JavaScript实现Tab选项卡切换效果
Nov 24 Javascript
BACKBONE.JS 简单入门范例
Oct 17 Javascript
js 毫秒转天时分秒的实例
Nov 17 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快速url重写更新版[需php 5.30以上]
2010/04/25 PHP
深入讲解PHP Session及如何保持其不过期的方法
2015/08/18 PHP
Laravel 解决419错误 -ajax请求错误的问题(CSRF验证)
2019/10/25 PHP
在textarea中屏蔽js的某个function的javascript代码
2007/04/20 Javascript
二行代码解决全部网页木马
2008/03/28 Javascript
深入认识javascript中的eval函数
2009/11/02 Javascript
ajax java 实现自动完成功能
2012/12/19 Javascript
JavaScript中的this关键字介绍与使用实例
2013/06/21 Javascript
json数据与字符串的相互转化示例
2013/09/18 Javascript
Javascript事件实例详解
2013/11/06 Javascript
手机端页面rem宽度自适应脚本
2015/05/20 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
2015/11/25 Javascript
学习JavaScript设计模式之状态模式
2016/01/08 Javascript
jQuery操作属性和样式详解
2016/04/13 Javascript
AngularJS 指令的交互详解及实例代码
2016/09/14 Javascript
Angular 常用指令实例总结整理
2016/12/13 Javascript
详解使用Node.js 将txt文件转为Excel文件
2017/07/05 Javascript
vue axios 二次封装的示例代码
2017/12/08 Javascript
微信小程序项目实践之验证码倒计时功能
2018/07/18 Javascript
vue实现微信获取用户信息的方法
2019/03/21 Javascript
TypeScript开发Node.js程序的方法
2019/04/30 Javascript
使用JavaScript计算前一天和后一天的思路详解
2019/12/20 Javascript
Vue项目利用axios请求接口下载excel
2020/11/17 Vue.js
python+mysql实现学生信息查询系统
2019/02/21 Python
在python里面运用多继承方法详解
2019/07/01 Python
浅谈tensorflow中Dataset图片的批量读取及维度的操作详解
2020/01/20 Python
使用Django的JsonResponse返回数据的实现
2021/01/15 Python
培训自我鉴定
2014/01/31 职场文书
2015教师年度考核评语
2015/03/25 职场文书
2015年公司工作总结
2015/04/25 职场文书
工程服务质量承诺书
2015/04/29 职场文书
小学运动会入场词
2015/07/18 职场文书
消防宣传标语大全
2015/08/03 职场文书
JavaScript继承的三种方法实例
2021/05/12 Javascript
Java 超详细讲解ThreadLocal类的使用
2022/04/07 Java/Android
HTML中link标签属性的具体用法
2023/05/07 HTML / CSS