jQuery如何设置输入文本字段的值?代码实例

2021年3月28日15:49:45 发表评论 969 次浏览

这里有一个Input元素,任务是使用JQuery设置它的值。下面是讨论的一些例子。

要了解示例, 首先要了解几种方法。

jQuery val()方法:

此方法返回/设置所选元素的value属性。

如果使用此方法返回值, 它将返回FIRST选定元素的值。

如果使用此方法设置值, 它将为一组选定元素设置一个或多个value属性。

语法如下:

返回值属性:

$(selector).val()

设置值属性:

$(selector).val(value)

使用函数设置value属性:

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

参数:

value: 此参数是必需的。它指定值属性的值。

function(index, currentValue):此参数是可选的。它指定了返回要设置的值的函数。

  • index:它返回集合中元素的索引位置。
  • curValue:它返回所选元素的当前值属性。

范例1:在此示例中, 输入元素的值设置为val()方法通过从其ID中选择输入元素。

<!DOCTYPE HTML>
< html >
  
< head >
     < title >
         JQuery | Set value of input text.
     </ title >
     < script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js" >
     </ script >
  
</ head >
  
< body style = "text-align: center;" >
     < h1 style = "color: green;" >  
              lsbin  
         </ h1 > Input Box:
     < input id = "input" 
            type = "text" 
            class = "Disable" 
            value = "" />
     < br >
     < br >
     < button id = "setText" >
         setText
     </ button >
     < script >
         $("#setText").click(function(event) {
             $('#input').val("lsbin");
         });
     </ script >
</ body >
  
</ html >

输出如下:

在单击按钮之前:

jQuery |设置输入文本字段的值1

单击按钮后:

jQuery |设置输入文本字段的值2

范例2:在此示例中, 输入元素的值设置为val()方法通过从其父元素<body>中选择输入元素, 然后选择<input>元素。

<!DOCTYPE HTML>
< html >
  
< head >
     < title >
         JQuery 
       | Set value of input text.
     </ title >
     < script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js" >
     </ script >
  
</ head >
  
< body style = "text-align: center;" >
     < h1 style = "color: green;" >  
              lsbin  
         </ h1 > Input Box:
     < input id = "input"
            type = "text" 
            class = "Disable"
            value = "" />
     < br >
     < br >
     < button id = "setText" >
         setText
     </ button >
     < script >
         $("#setText").click(
           function(event) {
             $('body input').val(
               "lsbin");
         });
     </ script >
</ body >
  
</ html >

输出如下:

在单击按钮之前:

jQuery |设置输入文本字段的值3

单击按钮后:

jQuery |设置输入文本字段的值4

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: