对于jQuery的DOM操作和事件处理，以及动画，在之后会给大家分享。
一：这里先向大家介绍一下jQuery对于表单的操作：
1.表单简介
简介：表单就是用户输入信息后用于服务器用来采集这些信息的html元素。
分类：一个表单可以基本分为表单标签(服务器url以及数据提交方法)，表单域(表单类型，包括文本框，密码框，复选框，单选框，下拉框等)，表单按钮(用于提交数据或者取消提交数据)三部分组成。
2.jQuery在常用表单域中的作用
下面先介绍jQuery在常用表单域中的作用。
2.1单行文本框
文本框是表单域中最基本的元素，基于文本框的应用有很多。此处只介绍如何用jQuery操作得到焦点和失去焦点事件。
首先创建一个表单：
<!DOCTYPE html>
<html>
<head>
<title>单行文本框</title>
</head>
<body>
<form>
<fieldset>
<legend>用户信息</legend>
<div>
<label for="name">姓名：</label>
<input id="name" type="text">
</div>
<div>
<label for="mima">密码：</label>
<input id="mima" type="text">
</div>
</fieldset>
</form>
</body>
</html>
这里用过滤选择器(:input)为文本框添加获取和失去焦点事件：
在头部加入下面代码：
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(":input").focus(function(){
$(this).css("background-color","#D6D6FF");
}).blur(function(){
$(this).css("background-color","green");
});
});
</script>效果如下：
2.2多行文本框
这里我们实现多行文本框放大和缩小以及滚动条高度变化的功能：
先创建一个表单：
<form>
<div class="duoHang">
<div class="button">
<input id="a" type="button" value="放大"/>
<input id="b" type="button" value="缩小"/>
</div>
<div>
<textarea id="comment" rows="7" cols="25">这是一个测试文本</textarea>
</div>
<div>
<input id="c" type="button" value="还原">
</div>
</div>
</form>
这里需要考虑两种极限情况：
(1)当单击"放大"后，如果文本框的高度小于最大值，则在原有的基础上增加50px。
(1)当单击"缩小"后，如果文本框的高度大于最小值，则在原有的基础上减去50px。
当点击还原时，会还原为刚开始的大小。
代码如下：
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var $comment = $('#comment'); //获取文本框
var $fangDa = 0;
var $suoXiao = 0;
$("#a").click(function(){ //"放大"单击事件
if(!$comment.is(":animated")){
if($comment.height() < 500){
$comment.animate({height : "+=50"},500);
$fangDa += 1;
}
}
});
$("#b").click(function(){ //"缩小"单击事件
if(!$comment.is(":animated")){
if($comment.height() > 50){
$comment.animate({height : "-=50"},500);
$suoXiao += 1;
}
}
});
$("#c").click(function(){
if(!$comment.is(":animated")){
for(var i = 0;i < $fangDa;i++){
$comment.animate({height : "-=50"},500);
}
for(var j = 0;j < $suoXiao;j++){
$comment.animate({height : "+=50"},500);
}
}
$fangDa = 0;
$suoXiao = 0;
});
});
</script>
滚动条的代码类似，只是改变height为scrollTop即可。
2.3复选框
对复选框最基本的应用，就是对复选框进行全选，反选和全不选等操作。
下面先创建一个表单：
<form>
你喜欢的东西是什么?<br/>
<input type="checkbox" name="items" value="苹果"/>苹果
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="香蕉"/>香蕉
<input type="checkbox" name="items" value="技术"/>技术</br>
<input type="button" id="CheckedAll" value="全选"/>
<input type="button" id="CheckedNo" value="全不选"/>
<input type="button" id="CheckedRev" value="反选"/>
<input type="button" id="send" value="提交"/>
</form>
可以通过控制元素的checked属性来使复选框处于选中或者不选状态。可以通过attr()方法来设置属性checked的值。
代码如下：
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#CheckedAll").click(function(){
$('[name=items]:checkbox').attr('checked','true');
});
$("#CheckedNo").click(function(){
$('[name=items]:checkbox').attr('checked','false');
});
$("#CheckedRev").click(function(){
$('[name=items]:checkbox').each(function(){
this.checked = !this.checked;
});
});
//复选框被选中后，用于单击"提交"按钮，需要将选中的项的值输出，可以通过
//val()方法获取选中的值
$("#send").click(function(){
var myStr = "你选中的是:\r\n";
$('[name=items]:checkbox:checked').each(function(){
myStr += $(this).val() + "\r\n";
});
alert(myStr);
});
});
</script>效果如下：
这里尝试用一个复选框来代替全选和全不选，表单修改为如下：
<form>
你喜欢的东西是什么?<br/>
<input type="checkbox" id="CheckedAll"/>全选/全不选<br/>
<input type="checkbox" name="items" value="苹果"/>苹果
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="香蕉"/>香蕉
<input type="checkbox" name="items" value="技术"/>技术</br>
<input type="button" id="send" value="提交"/>
</form>
可以加上下面代码：
$("#CheckedAll").click(function(){
$('[name=items]:checkbox').attr('checked','this.checked');
});这里还需要将它和复选框组联系起来，如果复选框组有一个以上没有选中，就取消选中状态；如果复选框组都被选中，则新增的复选框也自动被选中。
这里可以定义一个中间变量flag进行循环判断，或者判断复选框单击总数是否与选中的复选框数量相等。代码如下：
$('[name=items]:checkbox').click(function(){
var flag = true;
$('[name=items]:checkbox').each(function(){
if(!this.checked){
flag = false;
}
});
$('#CheckedAll').attr('checked',flag);
//或者如下代码
var $temp = $('[name=items]:checkbox');
if($temp.length==$temp.filter(':checked').length){
$('#CheckedAll').attr('checked',true);
}
});2.4下拉框
这里介绍实现通过按钮实现将左边选中的选项添加到右边，以及将右边的选项添加到左边，或者双击选项，添加给对方。
下面先创建两个下拉框和多个按钮：
<!DOCTYPE html>
<html>
<head>
<title>单行文本框</title>
</head>
<body>
<div class="xiaLaKuang">
<select multiple id="select1" style="width:100px;height:160px;">
<option value="one"> A </option>
<option value="two"> B </option>
<option value="three"> C </option>
<option value="four"> D </option>
<option value="five"> E </option>
<option value="six"> F </option>
<option value="seven"> G </option>
</select>
<div>
<span id="add_right">选中添加到下边</span>
<span id="add_right_all">添加全部到下边</span>
</div>
</div>
<div class="xiaLaKuang">
<select multiple id="select2" style="width:100px;height:160px;">
</select>
<div>
<span id="add_left">选中添加到上边</span>
<span id="add_left_all">添加全部到上边</span>
</div>
</div>
</body>
</html>
实现这些功能的代码如下：
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
//将选中的值添加到对方
$("#add_right").click(function(){
var $options1 = $('#select1 option:selected');
$options1.appendTo('#select2');
});
$("#add_left").click(function(){
var $options2 = $('#select2 option:selected');
$options2.appendTo('#select1');
});
//将全部的选项添加给对方
$('#add_right_all').click(function(){
var $options1 = $('#select1 option');
$options1.appendTo('#select2');
})
$('#add_left_all').click(function(){
var $options1 = $('#select2 option');
$options1.appendTo('#select1');
})
//双击某个选项添加给对方
$('#select1').dblclick(function() {
var $options1 = $('option:selected',this);
$options1.appendTo('#select2');
});
$('#select2').dblclick(function() {
var $options2 = $('option:selected',this);
$options2.appendTo('#select1');
});
});
</script>效果如下：