JQuery val()

JQuery val()方法有两种用法。

用于获取匹配元素集中第一个元素的当前值。
它用于设置每个匹配元素的值。

语法:

 $(selector).val()

用于获取值。

 $(selector).val(value)

用于设置值。

 $(selector).val(function(index,currentvalue))

它用于使用函数设置值。

JQuery val()方法的参数

参数	说明
value	这是强制性参数。用于指定属性的值。
function(index,currentvalue)	这是一个可选参数。它用于指定一个函数，该函数返回要设置的值。

JQuery val()示例

val()方法主要用于获取表单元素的值。此方法不接受任何参数。当没有选择任何选项时，此方法返回NULL，并且在一个或多个选择的情况下，它返回一个包含每个选定选项的值的数组。

让我们看一下val()方法的示例。

 <!DOCTYPE html> 
 <html lang="en"> 
 <head> 
   <meta charset="utf-8"> 
   <title>val demo</title> 
   <style> 
   p { 
     color: red; 
     margin: 4px; 
   } 
   b { 
     color: blue; 
   } 
   </style> 
   <script src="/JQuery-1.10.2.js"></script> 
 </head> 
 <body> 
 <p></p> 
 <select id="single"> 
   <option>Single</option> 
   <option>Double</option> 
  <option>Triple</option> 
 </select> 
 <script> 
 function displayVals() { 
   var singleValues = $("#single").val(); 
   $("p").html( "<b>Value:</b> " + singleValues); 
 } 
 $("select").change( displayVals ); 
 displayVals(); 
 </script> 
 </body> 
 </html>

输出:

让我们看看带有单个和多个选择框的JQuery val()方法的示例。

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="utf-8">
   <title>val demo</title>
   <style>
   p {
     color: red;
     margin: 4px;
   }
   b {
     color: blue;
   }
   </style>
   <script src="/JQuery-1.10.2.js"></script>
 </head>
 <body>
 <p></p>
 <select id="single">
   <option>Single</option>
   <option>Single2</option>
   <option>Single3</option>
 </select>
 <select id="multiple" multiple="multiple">
   <option selected="selected">Multiple</option>
   <option>Multiple2</option>
   <option>Multiple3</option>
 </select>
 <script>
 function displayVals() {
   var singleValues = $("#single").val();
   var multipleValues = $("#multiple").val() || [];
   $("p").html( "<b>Single:</b> " + singleValues +
     " <b>Multiple:</b> " + multipleValues.join( ", ") );
 }
 $("select").change( displayVals );
 displayVals();
 </script>
 </body>
 </html>

输出:

JQuery val(value)示例

此方法用于设置文本字符串，数字，与每个匹配值对应的字符串数组元件。此方法可帮助您通过传入函数来设置值。

让我们看一下val(value)方法的示例。

 <!DOCTYPE html>
 <html>
 <head>
 <script src="/JQuery-1.10.2.js"></script>
 <script>
 $(document).ready(function(){
     $("button").click(function(){
         $("input:text").val("bianchenghao6");
     });
 });
 </script>
 </head>
 <body>
 <p>Name: <input type="text" name="user"></p>
 <button>Set the value of the input field</button>
 </body>
 </html>

输出:

名称:

JQuery css()

JQuery text()