首页 > 编程 > JavaScript > 正文

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

2019-11-19 18:43:18
字体:
来源:转载
供稿:网友

实例如下:

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表