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 switch case 另类写法
Mar 14 Javascript
JQuery魔力之$(&quot;tagName&quot;)与selector
Mar 05 Javascript
图片动画横条广告带上下滚动的JS代码
Oct 25 Javascript
JavaScript中number转换成string介绍
Dec 31 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
Aug 24 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
Mar 13 Javascript
Vue中保存用户登录状态实例代码
Jun 07 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
Jan 02 Javascript
vue使用ajax获取后台数据进行显示的示例
Aug 09 Javascript
CryptoJS中AES实现前后端通用加解密技术
Dec 18 Javascript
vue使用代理解决请求跨域问题详解
Jul 24 Javascript
layui动态绑定事件的方法
Sep 20 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+ajax实现无刷新分页
2015/11/18 PHP
MSN消息提示类
2006/09/05 Javascript
jquery实现简单的自动播放幻灯片效果
2015/06/13 Javascript
js中最容易被忽视的事件问题大总结
2016/05/15 Javascript
JavaScript的this关键字的理解
2016/06/18 Javascript
第六篇Bootstrap表格样式介绍
2016/06/21 Javascript
第一次接触神奇的Bootstrap菜单和导航
2016/08/01 Javascript
Vue计算属性的使用
2017/08/04 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
2017/10/24 Javascript
在vue中实现点击选择框阻止弹出层消失的方法
2018/09/15 Javascript
BootstrapValidator实现表单验证功能
2019/11/08 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
2019/11/09 Javascript
[03:52]显微镜下的DOTA2第三期——英雄在无聊的时候干什么
2014/06/20 DOTA
[48:00]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第二场 11.04
2020/11/04 DOTA
Python中List.index()方法的使用教程
2015/05/20 Python
Python实现字典去除重复的方法示例
2017/07/31 Python
Anaconda2 5.2.0安装使用图文教程
2018/09/19 Python
Python3简单实现串口通信的方法
2019/06/12 Python
简单了解python PEP的一些知识
2019/07/13 Python
在自动化中用python实现键盘操作的方法详解
2019/07/19 Python
django 微信网页授权认证api的步骤详解
2019/07/30 Python
浅析python redis的连接及相关操作
2019/11/07 Python
PyTorch中的padding(边缘填充)操作方式
2020/01/03 Python
python 装饰器的实际作用有哪些
2020/09/07 Python
PyTorch中clone()、detach()及相关扩展详解
2020/12/09 Python
CSS3教程(4):网页边框和网页文字阴影
2009/04/02 HTML / CSS
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
2012/07/11 HTML / CSS
HTML5 textarea高度自适应的两种方案
2020/04/08 HTML / CSS
活动总结报告范文
2014/05/04 职场文书
商业项目策划方案
2014/06/05 职场文书
竞选班长演讲稿400字
2014/08/22 职场文书
公司授权委托书
2014/10/17 职场文书
2015新年寄语(一句话)
2014/12/08 职场文书
教师创先争优承诺书
2015/04/27 职场文书
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python
MYSQL如何查看进程和kill进程
2022/03/13 MySQL