jQuery操作DOM之获取表单控件的值

jQuery是一个优秀的JavaScript库，它提供了方便易用的DOM操作方法，可以极大地简化前端开发中的操作。在表单开发中，我们往往需要获取表单各个控件的值，这时候jQuery提供的方法就会非常有用。接下来，我将为大家讲解jQuery操作DOM获取表单控件的值的完整攻略。

获取单个表单控件的值

如果我们要获取单个表单控件的值，可以通过选择器选中对应的元素，然后使用.val()方法获取其值。例如，要获取id为name的文本框的值，可以这样做：

var nameVal = $('#name').val();

在这里，$('#name')表示选择id为name的元素，.val()表示获取该元素值的方法，用变量nameVal接收即可。

获取多个表单控件的值

如果我们需要获取多个表单控件的值，可以使用.serialize()方法获取整个表单的值，然后使用.split()方法将其分割为一个数组，最后以对象的形式存储每个控件的值。例如，要获取表单内所有的输入框的值并以对象形式存储，可以这样做：

var formVal = $('#form').serialize().split('&');
var formObj = {};
for(var i = 0; i < formVal.length; i++){
    var item = formVal[i].split('=');
    formObj[item[0]] = decodeURIComponent(item[1]);
}

在这里，$('#form')表示选择整个表单的元素，.serialize()方法表示将该表单的值序列化，.split('&')表示将序列化后的字符串以&为分割符分为一个数组，之后使用循环将分割后的每个元素再次使用.split('=')方法分割，得到每个控件名和值。最后使用一个对象存储每个控件的值，可以通过renderJson方法输出该对象。

下面是一个完整的HTML示例，演示输入框和按钮，通过获取按钮点击之后获取所有输入框值：

<form id="form">
    <input type="text" id="name" name="name" placeholder="请输入你的名字">
    <input type="text" id="email" name="email" placeholder="请输入你的邮箱">
    <button type="button" id="submit">提交</button>
</form>
<script type="text/javascript">
    $(document).ready(function(){
        $('#submit').click(function(){
            var formVal = $('#form').serialize().split('&');
            var formObj = {};
            for(var i = 0; i < formVal.length; i++){
                var item = formVal[i].split('=');
                formObj[item[0]] = decodeURIComponent(item[1]);
            }
            console.log(formObj);
        });
    });
</script>

在这个例子中，我们使用了$(document).ready()方法确保DOM加载完毕之后才能获取表单的值。接着我们通过选择器获取表单和按钮的元素，绑定按钮的点击事件。当用户点击提交按钮时，我们将表单序列化为字符串，并以&分割成一个数组，然后循环分割每个元素，最终存储到一个对象中，并使用console.log输出该对象。这个例子中输入框很简单，但实际应用中可能存在复杂的表单元素，但是我们只需要按照该方法的步骤来进行操作即可。