博客

JQuery 设置一个输入文本字段的值

  • Post category:jquery

JQuery是一个非常流行的JavaScript库，提供了许多简洁易懂的API，使得JavaScript编程更加方便和高效。下面给出详细的“JQuery 设置一个输入文本字段的值”完整攻略。

步骤一：引入JQuery库

首先，在HTML文档的头部引入JQuery库，可以使用CDN或下载本地库文件的方式引入。示例代码如下：

<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

步骤二：获取输入文本字段对象

接下来，需要获取需要设置值的输入文本字段对象，可以使用JQuery提供的选择器来获取该对象。示例代码如下：

var input = $('input[name="username"]');

上述代码中，使用了选择器input[name="username"]来获取name属性值为”username”的输入文本字段对象。这里使用了$()函数，将选择器转换为JQuery对象。

步骤三：设置输入文本字段的值

获取输入文本字段对象之后，就可以通过val()函数设置它的值。示例代码如下：

input.val('Hello, world!');

上述代码中，使用了val()函数将输入文本字段的值设置为”Hello, world!”。

示例一：设置输入文本字段的默认值

下面是一个示例代码，用于设置输入文本字段的默认值为”Please input your username”：

<input type="text" name="username" value="" />

<script>
  $(function(){
    var defaultVal = 'Please input your username';
    var input = $('input[name="username"]');
    input.val(defaultVal);
  });
</script>

上述代码中，使用了$(function(){…})来包裹匿名函数，使得函数在DOM加载完成后执行。然后获取输入文本字段对象，并使用val()函数设置其默认值。

示例二：设置输入文本字段的值为某个变量

下面是另一个示例代码，用于设置输入文本字段的值为某个变量的值：

<input type="text" name="email" value="" />

<script>
  $(function(){
    var email = 'example@example.com';
    var input = $('input[name="email"]');
    input.val(email);
  });
</script>

上述代码中，同样使用$(function(){…})来包裹匿名函数，然后获取输入文本字段对象，并将其值设置为email变量的值。

以上就是“JQuery 设置一个输入文本字段的值”的完整攻略。

Tags: