jquery表单
jQuery 表单操作
jQuery 提供了丰富的 API 用于表单操作，包括表单元素的选择、值获取与设置、事件处理等。
表单元素选择
使用 jQuery 选择器可以方便地选取表单元素：
// 选择所有 input 元素
$('input')
// 选择特定类型的 input
$('input[type="text"]')
// 选择表单内的元素
$('#myForm input')获取与设置表单值
jQuery 提供了 val() 方法用于获取和设置表单元素的值：
// 获取输入框的值
var username = $('#username').val();
// 设置输入框的值
$('#username').val('new value');
// 获取单选按钮的值
var gender = $('input[name="gender"]:checked').val();
// 获取复选框的值（数组）
var hobbies = $('input[name="hobbies"]:checked').map(function() {
return $(this).val();
}).get();表单事件处理
jQuery 可以方便地处理各种表单事件：
// 输入框值改变事件
$('#email').on('change', function() {
console.log('Email changed to: ' + $(this).val());
});
// 表单提交事件
$('#myForm').submit(function(e) {
e.preventDefault(); // 阻止默认提交行为
// 表单验证逻辑
if(!validateForm()) {
return false;
}
// 使用 AJAX 提交表单
$.ajax({
url: $(this).attr('action'),
method: $(this).attr('method'),
data: $(this).serialize(),
success: function(response) {
// 处理成功响应
}
});
});表单序列化
jQuery 提供了表单序列化方法，方便将表单数据转换为字符串或对象：
// 序列化为查询字符串
var formData = $('#myForm').serialize();
// 序列化为对象
var formDataObj = $('#myForm').serializeArray();表单验证
jQuery 可以配合验证插件实现表单验证：
// 简单验证示例
function validateForm() {
var isValid = true;
if($('#username').val().length < 3) {
$('#username').addClass('error');
isValid = false;
} else {
$('#username').removeClass('error');
}
return isValid;
}表单重置
重置表单到初始状态：
$('#myForm')[0].reset(); // 原生 DOM 方法动态表单操作
jQuery 可以动态添加或删除表单元素：
// 添加新输入框
$('#addField').click(function() {
$('<input type="text" name="dynamicField">').appendTo('#formContainer');
});
// 移除输入框
$('#removeField').click(function() {
$('#formContainer input:last').remove();
});这些方法提供了处理表单的完整工具集，可以满足大多数 Web 应用的表单处理需求。
