jQuery获取表单操作 - Javascript

简介

通过jQuery获取表单操作非常方便，可以快速获取表单元素的值、设置表单元素的值、监听表单提交事件等。本文将介绍jQuery获取表单操作的相关方法和示例代码。

获取表单元素的值

可以通过jQuery的val()方法获取表单元素的默认值、当前值和修改后的值。下面是一些常见的表单元素的值获取方法：

1. 获取输入框的值

// 获取输入框的值
var inputVal = $('input').val();
console.log(inputVal);

2. 获取单选按钮的值

// 获取单选按钮的值
var radioVal = $(':radio:checked').val();
console.log(radioVal);

3. 获取复选框的值

// 获取复选框的值
var checkboxVal = $(':checkbox:checked').val();
console.log(checkboxVal);

4. 获取下拉框的选中值

// 获取下拉框的选中值
var selectVal = $('select option:selected').val();
console.log(selectVal);

设置表单元素的值

可以通过jQuery的val()方法、text()方法、html()方法设置表单元素的值。下面是一些常见的表单元素的值设置方法：

1. 设置输入框的值

// 设置输入框的值
$('input').val('Hello world!');

2. 设置文本框的值

// 设置文本框的值
$('textarea').val('Hello world!');

3. 设置下拉框的选中值

// 设置下拉框的选中值
$('select').val('2');

监听表单提交事件

可以通过jQuery的submit()方法监听表单提交事件。下面是一个表单提交事件的示例：

<form>
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="submit" value="提交">
</form>

<script>
  $('form').submit(function(event) {
    event.preventDefault(); // 阻止表单默认的提交行为
    var username = $('input[name=username]').val();
    var password = $('input[name=password]').val();
    console.log('username:', username);
    console.log('password:', password);
  });
</script>

总结

本文介绍了jQuery获取表单操作的相关方法和示例代码。通过这些方法，我们可以快速获取表单元素的值、设置表单元素的值、监听表单提交事件等。让我们更加方便地使用JavaScript操作表单。