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

这里有一个Input元素,任务是使用JQuery设置它的值。下面是讨论的一些例子。
要了解示例, 首先要了解几种方法。
jQuery val()方法:
此方法返回/设置所选元素的value属性。
如果使用此方法返回值, 它将返回FIRST选定元素的值。
如果使用此方法设置值, 它将为一组选定元素设置一个或多个value属性。
语法如下:
返回值属性:

$(selector).val()

设置值属性:
$(selector).val(value)

使用函数设置value属性:
$(selector).val(function(index, curValue))

参数:
【jQuery如何设置输入文本字段的值(代码实例)】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" valuehttps://www.lsbin.com/= "" /> < br > < br > < button id = "setText" > setText < / button > < script > $("#setText").click(function(event) { $('#input').val("lsbin"); }); < / script > < / body > < / html >

输出如下:
在单击按钮之前:
jQuery如何设置输入文本字段的值(代码实例)

文章图片
单击按钮后:
jQuery如何设置输入文本字段的值(代码实例)

文章图片
范例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" valuehttps://www.lsbin.com/= "" /> < br > < br > < button id = "setText" > setText < / button > < script > $("#setText").click( function(event) { $('body input').val( "lsbin"); }); < / script > < / body > < / html >

输出如下:
在单击按钮之前:
jQuery如何设置输入文本字段的值(代码实例)

文章图片
单击按钮后:
jQuery如何设置输入文本字段的值(代码实例)

文章图片

    推荐阅读