zoukankan      html  css  js  c++  java
  • JQuery获取input type="text"中的值的各种方式

    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=" 100px;" />
    <button id="button_text1">test1</button>
    </div>
    <!-- 获取文本框的值:方式二 -->
    <div id="test2">
    <input id="input_text2" type="text" value="test2" style=" 100px;" />
    <button id="button_text2">test2</button>
    </div>
    <!-- 获取文本框的值:方式三 -->
    <div id="test3">
    <input id="input_text3" type="text" value="test3" style=" 100px;" />
    <button id="button_text3">test3</button>
    </div>
    </body>

    </html>

  • 相关阅读:
    【2、koa】async和await(ES7)
    外部获取异步方法中的数据两种方式callback&Promise
    filter方法
    【ES6】let、var、const
    ubuntu下安装typora
    自我修养之产品思维与能力
    vue
    allure-pytest 测试报告分享给大家
    最近公司遇到了APR攻击,顺便了解一下知识
    Sybase数据库连接配置
  • 原文地址:https://www.cnblogs.com/HuiLove/p/6953523.html
Copyright © 2011-2022 走看看