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键盘
May 02 Javascript
js实现DIV的一些简单控制
Jun 04 Javascript
Javascript 网页黑白效果实现代码(兼容IE/FF等)
Apr 23 Javascript
全面解析Bootstrap弹窗的实现方法
Dec 01 Javascript
jQuery插件简单学习实例教程
Jul 01 Javascript
浅谈Javascript数据属性与访问器属性
Jul 26 Javascript
layui表格实现代码
May 20 Javascript
浅谈Angular路由守卫
Aug 26 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
Feb 28 Javascript
JS实现电话号码的字母组合算法示例
Feb 26 Javascript
vue实现多组关键词对应高亮显示功能
Jul 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
如何在PHP中使用Oracle数据库(6)
2006/10/09 PHP
基于initPHP的框架介绍
2013/04/18 PHP
使用session判断用户登录用户权限(超简单)
2013/06/08 PHP
ThinkPHP表单自动验证实例
2014/10/13 PHP
php操作redis缓存方法分享
2015/06/03 PHP
PHP实现根据图片色界在不同位置加水印的方法
2015/08/08 PHP
静态html文件执行php语句的方法(推荐)
2016/11/21 PHP
php + WebUploader实现图片批量上传功能
2019/05/06 PHP
在视频前插入广告
2006/11/20 Javascript
$.ajax json数据传递方法
2008/11/19 Javascript
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
jQuery数据显示插件整合实现代码
2011/10/24 Javascript
可编辑下拉框的2种实现方式
2014/06/13 Javascript
基于JavaScript实现仿京东图片轮播效果
2015/11/06 Javascript
JavaScript常用数组算法小结
2016/02/13 Javascript
jQuery实现发送验证码并60秒倒计时功能
2016/11/25 Javascript
Bootstrap源码解读按钮(5)
2016/12/23 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
2016/12/28 Javascript
jquery获取select,option所有的value和text的实例
2017/03/06 Javascript
Angular事件之不同组件间传递数据的方法
2018/11/15 Javascript
对vue中的事件穿透与禁止穿透实例详解
2019/10/28 Javascript
python设置检查点简单实现代码
2014/07/01 Python
Python实现在线音乐播放器
2017/03/03 Python
python 文件转成16进制数组的实例
2018/07/09 Python
python添加菜单图文讲解
2019/06/04 Python
TensorFlow 输出checkpoint 中的变量名与变量值方式
2020/02/11 Python
keras打印loss对权重的导数方式
2020/06/10 Python
python+opencv实现车道线检测
2021/02/19 Python
css3 中实现炫酷的loading效果
2019/04/26 HTML / CSS
数据库方面面试题
2012/04/22 面试题
高中物理教学反思
2014/02/08 职场文书
本科应届生自荐信
2014/06/29 职场文书
工作骂脏话检讨书
2014/10/05 职场文书
英语教师个人总结
2015/02/09 职场文书
PyCharm配置KBEngine快速处理代码提示冲突、配置命令问题
2021/04/03 Python
SQL中去除重复数据的几种方法汇总(窗口函数对数据去重)
2023/05/08 MySQL