jquery获取input type=text中的值的各种方式(总结)

 更新时间:2016年12月02日 09:03:13   投稿:jingxian  
下面小编就为大家带来一篇jquery获取input type=text中的值的各种方式(总结)。小编觉的挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

实例如下:

<!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中的值的各种方式(总结)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • JQuery中$(document)是什么意思有什么作用

    JQuery中$(document)是什么意思有什么作用

    $(document).ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数,因为它可以极大地提高web应用程序的响应速度
    2014-07-07
  • jQuery滚动新闻实现代码

    jQuery滚动新闻实现代码

    这篇文章主要为大家详细介绍了jQuery滚动新闻实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-06-06
  • jQuery ajax调用webservice注意事项

    jQuery ajax调用webservice注意事项

    这篇文章主要为大家详细介绍了jQuery ajax调用webservice的注意事项,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • JQuery 学习笔记 选择器之一

    JQuery 学习笔记 选择器之一

    对于JQuery是啥东东的描述我在此也就不多说了,哈,如果有兴趣的话我相信不会懒的去查吧,哈^^
    2009-07-07
  • 使用jquery动态加载js文件的方法

    使用jquery动态加载js文件的方法

    这篇文章主要介绍了使用jquery动态加载js文件的方法,需要的朋友可以参考下
    2014-12-12
  • jQuery 获取跨域XML(RSS)数据的相关总结分析

    jQuery 获取跨域XML(RSS)数据的相关总结分析

    下面小编就为大家带来一篇jQuery 获取跨域XML(RSS)数据的相关总结分析。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • jquery+css实现动感的图片切换效果

    jquery+css实现动感的图片切换效果

    这篇文章主要介绍了jquery+css实现动感的图片切换效果,效果实现很精致,动画简洁大方,推荐给大家,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • jquery获取文档高度和窗口高度汇总

    jquery获取文档高度和窗口高度汇总

    本文主要给大家汇总介绍了了jQuery获取页面及个元素高度、宽度的方法,非常的实用,有需要的小伙伴可以参考下。下面的例子是基于jquery的参数与方法来快速获取文档或浏览器可视区域的高度与宽度的代码,希望本例子能给你带来一些帮助。
    2016-01-01
  • JQuery解析XML数据的几个简单实例

    JQuery解析XML数据的几个简单实例

    下面小编就为大家带来一篇JQuery解析XML数据的几个简单实例。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • JQuery拖动表头边框线调整表格列宽效果代码

    JQuery拖动表头边框线调整表格列宽效果代码

    当鼠标停留在表头边框线上,接着拖动鼠标,会在表格中出现一条随鼠标移动的竖线,最后放开鼠标,表格列宽会被调整
    2014-09-09

最新评论