1.单行文本框应用
小示例：实现文本款选中时添加边框和背景色
<head>
<script src="jquery.js"></script>
<style>
.focus{
border : 1px solid #f00;
background: #fcc;
}
</style>
</head>
<body>
<!--单行文本框-->
<form action = "#" method = "post" id = "regform">
<fieldset>
<legend>个人基本信息</legend>
<div>
<lable for="username">名称：</lable>
<input id = "username" type= text>
</div>
<div>
<lable for="pass">密码：</lable>
<input id = "pass" type= "password" value = 'gaga' readonly >
</div>
<div>
<lable for="msg">详细信息：</lable>
<textarea id = "msg" type= text readonly >我是一只小小鸟，想要飞也飞不高</textarea>
</div>
</fieldset>
</form>
<hr>
</body>//jq代码
$(function(){
$(":input").focus(function(){//获取焦点
$(this).addClass("focus");//添加样式
}).blur(function(){//失去焦点
$(this).removeClass("focus");//去掉样式
});
});
2.多行文本框的应用
小示例:1.实现点击按钮实现文本框的放大和缩小
2.点击按钮实现滚动条位置变化
<!--多行文本框-->
<form>
<div class= "msg">
<div clas = "msg2">
<span class = "bigger" style = "background: green; border: 2px solid">放大</span>
<span class = "smaller" style = "background: green;border: 2px solid">缩小</span>
<span class = "upper" style = "background: pink; border: 2px solid">向上</span>
<span class = "lower" style = "background: pink;border: 2px solid">向下</span>
</div>
<div>
<textarea id = "comment" rows = 8 cols = 20>多行文本框应用，自定义动画方法animate(),$comment.animate({height : "+=50"}.400);文本域的高度会在0.4秒内增大50px,具有一定的缓冲效果，注意在动画过程中，需要判断评论框是否正处于动画，如果处于动画过程中则不追加其他动画，一面造成动画队列不必要的积累。
</textarea>
</div>
</div>
</form>
<hr>//jq代码
var $comment = $("#comment");
$(".bigger").click(function(){//“放大”绑定事件
if(!$comment.is(":animated")){//判断是否正处于动画
if($comment.height()<500){//若果当前文本域的高度小于500
$comment.animate({height:"+=50"},400); //文本域高度增加50
}
}
});
$(".smaller").click(function(){//“缩小”绑定事件
if(!$comment.is(":animated")){
if($comment.height()>50){
$comment.animate({height:"-=50"},400);
}
}
});
$(".upper").click(function(){//“向上”绑定事件
if(!$comment.is(":animated")){
$comment.animate({scrollTop:"-=50"},400);
}
});
$(".lower").click(function(){//“向下”绑定事件
if(!$comment.is(":animated")){
$comment.animate({scrollTop:"+=50"},400);
}
});
3.复选框的应用
小示例：两种方式实现全选或全部选
1.打钩全选，则复选框所有选项被打钩
2.复选框所有选项被打钩，则全选打钩
<form>
panda爱好的运动是：
<input type = checkbox id ="checkall" />全选/全不选<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>
<hr>//jq代码
//1.根据全选、全不选决定下面复选框是否都打钩
$("#checkall").click(function(){//给全选/不全选复选框绑定单击事件
if(this.checked){//如果被选中即打钩的话
$('[name=items]:checkbox').attr("checked",true);//所有name为items的复选框全部打钩
}else{
$('[name=items]:checkbox').attr("checked",false);//反之去掉勾
}
});
//2.根据复选框是否都打钩决定全选、全部选
//1。定义一个标志位flag决定是否全选
//2。循环复选框，全选中了则flag=true,有一个没选中则flag=false
//3。 根据flag值来判断全选框是否选中、】
$('[name=items]:checkbox').click(function(){//给复选框每个选项绑定单击事件，每次打钩都判断是否全部打钩，如果都打钩则全选框打钩
var flag =true;//，默认值为true，全选状态
$('[name=items]:checkbox').each(function(){//循环所有复选框
if(!this.checked){//只要有一个没选中则flag=false
flag= false;
}
})
$("#checkall").attr('checked',flag);
});
4.下拉框应用
小示例：实现点击按钮左边的单选框内容移到右面去
<hr>
<!--单选框-->
<form>
<table>
<tr>
<td><div class = centent>
<select multiple id = select style = "width:100px;height:160px;">
<option value = 1>pick one</option>
<option value =2>pick two</option>
<option value= 3>pick three </option>
<option value = 4>pick four</option>
<option value = 5>pick five</option>
<option value =5>pick six</option>
<option value = 7>pick seven</option>
</select>
<div>
<span id= "ad" style = "background: pink;border: 2px solid">选中添加到右边; </span><br>
<span id= "adall" style = "background: pink;border: 2px solid">全部添加到右边; </span>
</div>
</div></td>
<td>
<div>
<select multiple id = select2 style = "width:100px;height:160px;">
</select>
<div>
<span id= remove style = "background: mediumpurple;border: 2px solid">选中删除到左边</span><br>
<span id = removeall style = "background: mediumpurple;border: 2px solid">全部删除到左边</span>
</div>
</div>
</td>
</tr>
</table>
</form>//jq代码
//选中的下拉框先删除追加到右边
$("#ad").click(function(){//给‘选中添加到右边’绑定单击事件
var $option = $("#select option:selected");//找到单选框中选中的元素放到变量
$option.appendTo("#select2");//追加到右边的单选框
});
$("#adall").click(function(){//给‘全部添加到右边’绑定事件
var $option = $("#select option");//获取单选框下所有选项
$option.appendTo("#select2");
});
$("#remove").click(function(){//给‘选中删除到左边’绑定单击事件
var $option = $("#select2 option:selected");
$option.appendTo("#select");//把选中选项追加到左边单选框
});
$("#removeall").click(function(){//给‘全部删除到左边’绑定单击事件
var $option = $("#select2 option");
$option.appendTo("#select");
})tip: appendTo()方法，它是先把自己的remove（），然后再把内容追加到指定位置。
