• JQuery获取值的各种方式

    JQuery获取input type="text"中的值的各种方式

    [html] view plaincopyprint?
     
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
    2. "http://www.w3.org/TR/xhtml1/DTD/xhtml>  
    3.   
    4. <html xmlns="http://www.w3.org/1999/xhtml">  
    5.   
    6.     <head>  
    7.         <title>JQuery获取文本框的值</title>  
    8.         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
    9.         <script src="jquery-1.5.1.min.js" type="text/javascript"></script>  
    10.           
    11.         <script type="text/javascript">  
    12.         //使用id的方式获取  
    13.         $(document).ready(function(){  
    14.             //1  
    15.             $("#button_text1").click(function(){  
    16.                 var result1 = $("#input_text1").val();  
    17.                 alert("result1 = " + result1);  
    18.             });  
    19.             //2  
    20.             $("#button_text2").click(function(){  
    21.                 var result2 = $("input[id='input_text2']").val();  
    22.                 alert("result2 = " + result2);  
    23.             });  
    24.             //3  
    25.             $("#button_text3").click(function(){  
    26.                 var result3 = $("input[id='input_text3']").attr("value");  
    27.                 alert("result3 = " + result3);  
    28.             });  
    29.             //4. 可以通过type的值来获取input中的值（未演示）  
    30.             /*  
    31.             $("#button_text4").click(function(){  
    32.                 var result4 = $("input[type='text']").val();  
    33.                 alert("result4 = " + result4);  
    34.             });  
    35.             */  
    36.             //5. 可以通过name的值来获取input中的值（未演示）  
    37.             /*  
    38.             $("#button_text5").click(function(){  
    39.                 var result5 = $("input[name='text']").val();  
    40.                 alert("result5 = " + result5);  
    41.             });           
    42.             */  
    43.         });  
    44.         </script>  
    45.     </head>  
    46.   
    47.     <body>  
    48.         <!-- 获取文本框的值：方式一 -->  
    49.         <div id="test1">  
    50.             <input id="input_text1" type="text" value="test1" style=" 100px;" />  
    51.             <button id="button_text1">test1</button>  
    52.         </div>  
    53.         <!-- 获取文本框的值：方式二 -->  
    54.         <div id="test2">  
    55.             <input id="input_text2" type="text" value="test2" style=" 100px;" />  
    56.             <button id="button_text2">test2</button>  
    57.         </div>  
    58.         <!-- 获取文本框的值：方式三 -->  
    59.         <div id="test3">  
    60.             <input id="input_text3" type="text" value="test3" style=" 100px;" />  
    61.             <button id="button_text3">test3</button>  
    62.         </div>  
    63.     </body>  
    64.   
    65. </html>  
    孜孜不倦，必能求索；风尘仆仆，终有归途。
  • 相关阅读:
    现代JVM内存管理方法的发展历程，GC的实现及相关设计概述（转）
    jvm对大对象分配内存的特殊处理（转）
    用java字节码解释i++和++i(转)
    Git 常用命令手记 及 Github协同流程（转）
    经常使用git命令集
    Android手机分辨率基础知识（DPI,DIP计算）
    软件測试自学指南---从入门到精通
    惊！从一场离奇的命案说起
    java设计模式演示样例
    浅谈UML的概念和模型之UML九种图
  • 原文地址：https://www.cnblogs.com/liyuspace/p/8302090.html
Copyright © 2020-2023  润新知