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 相关文章推荐
ExtJS 2.2.1的grid控件在ie6中的显示问题
May 04 Javascript
利用location.hash实现跨域iframe自适应
May 04 Javascript
jquery中push()的用法(数组添加元素)
Nov 25 Javascript
jQuery中unbind()方法用法实例
Jan 19 Javascript
javascript实现checkBox的全选,反选与赋值
Mar 12 Javascript
jquery插件unobtrusive实现片段式加载
Jun 15 Javascript
jQuery EasyUI Dialog拖不下来如何解决
Sep 28 Javascript
详解JavaScript正则表达式之RegExp对象
Dec 13 Javascript
js中判断变量类型函数typeof的用法总结
Aug 09 Javascript
基于构造函数的五种继承方法小结
Jul 27 Javascript
微信小程序实现全局搜索代码高亮的示例
Mar 30 Javascript
微信小程序自定义底部弹出框动画
Nov 18 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 多维数组排序实现代码
2009/08/05 PHP
php-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
PHP内存缓存Memcached类实例
2014/12/08 PHP
PHP设计模式之工厂模式(Factory Pattern)的讲解
2019/03/21 PHP
ECMAScript 基础知识
2007/06/29 Javascript
javascript中常用编程知识
2013/04/08 Javascript
javascript实现json页面分页实例代码
2014/02/20 Javascript
什么是cookie?js手动创建和存储cookie
2014/05/27 Javascript
网页收藏夹显示ICO图标(代码少)
2015/08/04 Javascript
图解JavaScript中的this关键字
2020/05/28 Javascript
浅谈jQuery为哪般去掉了浏览器检测
2016/08/29 Javascript
JS实现队列的先进先出功能示例
2017/05/10 Javascript
vue中各组件之间传递数据的方法示例
2017/07/27 Javascript
使用JS获取SessionStorage的值
2018/01/12 Javascript
Vue.js 实现数据展示全部和收起功能
2018/09/05 Javascript
浅谈vue后台管理系统权限控制思考与实践
2018/12/19 Javascript
layui动态加载多表头的实例
2019/09/05 Javascript
python 将字符串转换成字典dict
2013/03/24 Python
python快速排序代码实例
2013/11/21 Python
以Python的Pyspider为例剖析搜索引擎的网络爬虫实现方法
2015/03/30 Python
详解python开发环境搭建
2016/12/16 Python
Django Rest framework之权限的实现示例
2018/12/17 Python
Python编程中flask的简介与简单使用
2018/12/28 Python
Python tkinter 下拉日历控件代码
2020/03/04 Python
使用ITK-SNAP进行抠图操作并保存mask的实例
2020/07/01 Python
利用python清除移动硬盘中的临时文件
2020/10/28 Python
python制作微博图片爬取工具
2021/01/16 Python
如何打造一封优秀的留学推荐信
2014/01/25 职场文书
房产公证书范本
2014/04/10 职场文书
食品安全工作方案
2014/05/07 职场文书
文明礼貌演讲稿
2014/05/12 职场文书
竞聘演讲稿精彩开头和结尾
2014/05/14 职场文书
党员对照检查材料思想汇报(党的群众路线)
2014/09/24 职场文书
2015年禁毒工作总结
2015/04/30 职场文书
创业计划书之甜品店
2019/09/18 职场文书