JQuery获取值的各种方式

时间：2024-02-23 20:23:54

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="width: 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="width: 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="width: 100px;" />  
  61.             <button id="button_text3">test3</button>  
  62.         </div>  
  63.     </body>  
  64.   
  65. </html>  

相关文章