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每次Title显示不同的名言
Sep 25 Javascript
js三种排序算法分享
Aug 16 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
Jan 09 Javascript
使用变量动态设置js的属性名
Oct 19 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
Mar 05 Javascript
jquery中trigger()无法触发hover事件的解决方法
May 07 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
Aug 21 Javascript
浅谈JavaScript中的this指针和引用知识
Aug 05 Javascript
Bootstrap Navbar Component实现响应式导航
Oct 08 Javascript
Vue.js表单控件实践
Oct 27 Javascript
Vue自定义指令介绍(2)
Dec 08 Javascript
javascript中layim之查找好友查找群组
Feb 06 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三元运算符知识汇总
2015/07/02 PHP
php简单获取复选框值的方法
2016/05/11 PHP
PHP简单实现无限级分类的方法
2016/05/13 PHP
javascript div 遮罩层封锁整个页面
2009/07/10 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
jquery事件重复绑定的快速解决方法
2014/01/03 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
2014/06/06 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
2016/07/09 Javascript
AngularJS 表达式详细讲解及实例代码
2016/07/26 Javascript
图片加载完成再执行事件的实例
2017/11/16 Javascript
vue使用echarts图表的详细方法
2018/10/22 Javascript
vue.js iview打包上线后字体图标不显示解决办法
2020/01/20 Javascript
解决python中画图时x,y轴名称出现中文乱码的问题
2019/01/29 Python
Python解决pip install时出现的Could not fetch URL问题
2019/08/01 Python
Python字节单位转换实例
2019/12/05 Python
python 通过邮件控制实现远程控制电脑操作
2020/03/16 Python
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
2019/01/23 HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
2013/06/20 HTML / CSS
努比亚手机官网:nubia
2016/10/06 全球购物
美赞臣营养马来西亚旗舰店:Enfagrow马来西亚
2019/07/26 全球购物
The North Face北面荷兰官网:美国著名户外品牌
2019/10/16 全球购物
迪士尼西班牙官方网上商店:ShopDisney西班牙
2020/02/02 全球购物
迪卡侬中国官网:Decathlon中国
2020/08/10 全球购物
请说出这段代码执行后a和b的值分别是多少
2015/03/28 面试题
应届毕业生的自我鉴定
2013/11/13 职场文书
追悼会主持词
2014/03/20 职场文书
农民工工资支付承诺函
2014/03/31 职场文书
导师评语大全
2014/04/26 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
村支部书记群众路线对照检查材料思想汇报
2014/10/08 职场文书
纪委书记群众路线整改措施思想汇报
2014/10/09 职场文书
采购部2015年度工作总结
2015/07/24 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书
Mysql - 常用函数 每天积极向上
2021/04/05 MySQL
CSS预处理框架——Stylus
2021/04/21 HTML / CSS
基于PyQt5制作一个群发邮件工具
2022/04/08 Python