jquery如果取得input的值

在小红书上，你可能会看到各种风格的文章，但今天要分享的是关于如何使用jQuery来获取输入框（input）的值，这是一个非常实用的技能，无论是在个人项目还是工作中，都能派上用场。

让我们从一个简单的HTML输入框开始，假设我们有一个文本输入框，其HTML代码如下：

```html

```

这个输入框有一个ID，叫做“myInput”，在jQuery中，我们可以通过这个ID来选择这个元素，并获取它的值。

### 使用jQuery获取输入框的值

```html

```

你可以使用`.val()`方法来获取输入框的值，这个方法是jQuery中用于获取表单元素值的标准方法。

```javascript

$(document).ready(function() {

$('#myInput').val(); // 获取输入框的值

});

```

这段代码会在文档加载完成后执行，它会选择ID为“myInput”的输入框，并获取其值。

### 实际应用场景

想象一下，你正在开发一个表单，用户需要输入一些信息，你可能想要在用户输入时实时显示他们输入的内容，或者在他们提交表单之前验证输入，以下是如何实现这些功能的一些示例。

#### 实时显示输入内容

如果你想在用户输入时，实时在页面上显示他们输入的内容，你可以这样做：

```html

```

在这个例子中，我们使用了`.on('input', function() {...})`来监听输入框的输入事件，每当用户输入时，`.val()`方法就会被调用，获取当前的值，并将其设置为`displayArea`元素的文本内容。

#### 验证输入

在用户提交表单之前，你可能想要验证他们输入的内容，确保他们输入的是一个有效的电子邮件地址，你可以这样做：

```html

```

在这个例子中，我们使用了一个正则表达式来验证电子邮件地址的格式，当用户点击提交按钮时，`.val()`方法会获取输入框的值，并使用正则表达式进行测试，根据测试结果，我们会在页面上显示相应的反馈信息。

### 总结

通过这些示例，你可以看到jQuery在处理表单输入时的强大功能，`.val()`方法不仅可以获取输入框的值，还可以在需要时设置其值，这使得jQuery成为前端开发中处理表单数据的有力工具。

jQuery的灵活性和易用性使其成为许多开发者的首选库，通过这些基本操作，你可以构建更加动态和交互性强的网页应用，无论你是新手还是有经验的开发者，jQuery都是一个值得学习和使用的强大工具。