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 相关文章推荐
AJAX使用了UpdatePanel后无法使用alert弹出脚本
Apr 02 Javascript
js null,undefined,字符串小结
Aug 21 Javascript
JsDom 编程小结
Aug 09 Javascript
javascript中判断一个值是否在数组中并没有直接使用
Dec 17 Javascript
自编jQuery插件实现模拟alert和confirm
Sep 01 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
Aug 22 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
Dec 13 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
Feb 26 Javascript
vue使用echarts图表的详细方法
Oct 22 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
Feb 28 Javascript
微信小程序实现音乐播放器
Nov 20 Javascript
js实现倒计时秒杀效果
Mar 25 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
利用discuz自带通行证整合dedecms的方法以及文件下载
2007/03/06 PHP
PHP 远程关机实现代码
2009/11/10 PHP
用php实现选择排序的解决方法
2013/05/04 PHP
PHP查询网站的PR值
2013/10/30 PHP
PHP采集类snoopy详细介绍(snoopy使用教程)
2014/06/19 PHP
微信支付的开发流程详解
2016/09/13 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/01/13 Javascript
javascript 隔行换色函数代码
2010/10/24 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
2013/07/09 Javascript
Javascript中string转date示例代码
2013/11/01 Javascript
d3.js中冷门却实用的内置函数总结
2017/02/04 Javascript
详解如何在vue项目中引入elementUI组件
2018/02/11 Javascript
使用vue-cli webpack 快速搭建项目的代码
2018/11/21 Javascript
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
通过npm或yarn自动生成vue组件的方法示例
2019/02/12 Javascript
React Hooks 实现和由来以及解决的问题详解
2020/01/17 Javascript
Python pymongo模块常用操作分析
2018/09/01 Python
Python面向对象程序设计多继承和多态用法示例
2019/04/08 Python
python隐藏终端执行cmd命令的方法
2019/06/24 Python
Python run()函数和start()函数的比较和差别介绍
2020/05/03 Python
10个示例带你掌握python中的元组
2020/11/23 Python
css3 border旋转时的动画应用
2016/01/22 HTML / CSS
日本土著品牌,综合型购物网站:Cecile
2016/08/23 全球购物
美国一家全面的在线零售鞋类公司:SHOEBACCA
2017/01/06 全球购物
英国珠宝和手表专家:Pleasance & Harper
2020/10/21 全球购物
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
学生社团文化节开幕式主持词
2014/03/28 职场文书
化学教育专业自荐信
2014/07/04 职场文书
水利水电专业自荐信
2014/07/08 职场文书
纪律教育学习心得体会
2014/09/02 职场文书
代领报检证委托书范本
2014/10/11 职场文书
八月一日观后感
2015/06/10 职场文书
python批量创建变量并赋值操作
2021/06/03 Python
Python3.8官网文档之类的基础语法阅读
2021/09/04 Python
使用Canvas绘制一个游戏人物属性图
2022/03/25 Javascript