单行文本框应用
<style type="text/css">
.focus{
border: 1px solid #000;
background-color: #fcc;
}
</style>
<form action="#" method="post" id="regForm">
<fieldset>
<legend>个人基本信息</legend>
<div>
<label for="username">名称：</label>
<input id="username" type="text" name="">
</div>
<div>
<label for="pass">密码：</label>
<input id="pass" type="password">
</div>
<div>
<label for="msg">详细信息：</label>
<textarea id="msg"></textarea>
</div>
</fieldset>
</form>
//获取和失去焦点改变样式
<script>
$(function(){
$(":input").focus(function(){
$(this).addClass("focus");
}).blur(function(){
$(this).removeClass("focus");
});
});
</script>
多行文本框应用
<form action="#" method="post" id="">
<div class="msg">
<div class="msg_caption">
<span class="bigger">放大</span>
<span class="smaller">缩小</span>
<span class="up" >向上</span>
<span class="down" >向下</span>
</div>
<div>
<textarea id="comment" rows="8" cols="20">
多行文本框高度变化，多行文本框高度变化，多行文本框高度变化，多行文本框高度变化，多行文本框高度变化，多行文本框高度变化，多行文本框高度变化，多行文本框高度变化，多行文本框高度变化，多行文本框高度变化，多行文本框高度变化，多行文本框高度变化，多行文本框高度变化，多行文本框高度变化，多行文本框高度变化，多行文本框高度变化，多行文本框高度变化，多行文本框高度变化，多行文本框高度变化，多行文本框高度变化，多行文本框高度变化，
</textarea>
</div>
</div>
</form>
<script>
//多行文本框应用
$(function(){
//获取评论框
var $comment = $('#comment');
//滚动条高度变化
$('.bigger').click(function(){
if(!$comment.is(":animated")){
if($comment.height()<500){
$comment.animate({height: "+=50"},400);
}
}
});
$('.smaller').click(function(){
//判断是否处于动画
if(!$comment.is(":animated")){
if($comment.height() > 50){
$comment.animate({height: "-=50"},400);
}
}
});
//滚动条高度变化
$('.up').click(function(){
if(!$comment.is(':animated')){
$comment.animate({scrollTop: "-=50"}, 400);
}
})
$('.down').click(function(){
if(!$comment.is(':animated')){
$comment.animate({scrollTop: "+=50"}, 400);
}
})
});
</script>
复选框应用(一)
<form method="post" action="">
你喜欢的运动是：<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="网球"／>网球
<input type="checkbox" name="items" value="排球"／>排球
<input type="checkbox" name="items" value="桌球"／>桌球
<input type="button" id="checkall" value="全选"／>
<input type="button" id="checkno" value="全不选"／>
<input type="button" id="checkback" value="反选"／>
<input type="button" id="send" value="提交"／>
</form>
<script>
$('#checkall').click(function(){
$('[name=items]:checkbox').attr('checked', true);
});
$('#checkno').click(function(){
$('[name=items]:checkbox').attr('checked', false);
});
$('#checkback').click(function(){
$("[name=items]:checkbox").each(function(){
this.checked=!this.checked;
})
});
$("#send").click(function(){
var str="你选中的是：\r\n";
$('[name=items]:checkbox:checked').each(function(){
str += $(this).val()+"\r\n";
});
alert(str);
})
</script>
复选框应用(二)
<form method="post" action="">
你爱好的运动是？
<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>
<script type="text/javascript">
$(function(){
//全选
$("#CheckedAll").click(function(){
//所有checkbox跟着全选的checkbox走。
$('[name=items]:checkbox').attr("checked", this.checked );
});
$('[name=items]:checkbox').click(function(){
//定义一个临时变量，避免重复使用同一个选择器选择页面中的元素，提升程序效率。
var $tmp=$('[name=items]:checkbox');
//用filter方法筛选出选中的复选框。并直接给CheckedAll赋值。
$('#CheckedAll').attr('checked',$tmp.length==$tmp.filter(':checked').length);
/*
//一行做过多的事情需要写更多注释。复杂选择器还可能影响效率。因此不推荐如下写法。
$('#CheckedAll').attr('checked',!$('[name=items]:checkbox').filter(':not(:checked)').length);
*/
});
//输出值
$("#send").click(function(){
var str="你选中的是：\r\n";
$('[name=items]:checkbox:checked').each(function(){
str+=$(this).val()+"\r\n";
})
alert(str);
});
});
</script>
建议把上例中 attr()改成prop()
下拉框应用
<div class="centent">
<select multiple="multiple" id="select1" style="width:100px;height:160px;">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
<option value="5">选项5</option>
<option value="6">选项6</option>
<option value="7">选项7</option>
</select>
<div>
<span id="add" >选中添加到右边>></span>
<span id="add_all" >全部添加到右边>></span>
</div>
</div>
<div class="centent">
<select multiple="multiple" id="select2" style="width: 100px;height:160px;">
<option value="8">选项8</option>
</select>
<div>
<span id="remove"><<选中删除到左边</span>
<span id="remove_all"><<全部删除到左边</span>
</div>
</div>
<script type="text/javascript">
$(function(){
//移到右边
$('#add').click(function() {
//获取选中的选项，删除并追加给对方
$('#select1 option:selected').appendTo('#select2');
});
//移到左边
$('#remove').click(function() {
$('#select2 option:selected').appendTo('#select1');
});
//全部移到右边
$('#add_all').click(function() {
//获取全部的选项,删除并追加给对方
$('#select1 option').appendTo('#select2');
});
//全部移到左边
$('#remove_all').click(function() {
$('#select2 option').appendTo('#select1');
});
//双击选项
$('#select1').dblclick(function(){ //绑定双击事件
//获取全部的选项,删除并追加给对方
$("option:selected",this).appendTo('#select2'); //追加给对方
});
//双击选项
$('#select2').dblclick(function(){
$("option:selected",this).appendTo('#select1');
});
});
</script>
表单验证
<form method="post" action="">
<div class="int">
<label for="username">用户名:</label>
<input type="text" id="username" class="required" />
</div>
<div class="int">
<label for="email">邮箱:</label>
<input type="text" id="email" class="required" />
</div>
<div class="int">
<label for="personinfo">个人资料:</label>
<input type="text" id="personinfo" />
</div>
<div class="sub">
<input type="submit" value="提交" id="send"/><input type="reset" id="res"/>
</div>
</form>
<script type="text/javascript">
//<![CDATA[
$(function(){
//如果是必填的，则加红星标识.
$("form :input.required").each(function(){
var $required = $("<strong class='high'> *</strong>"); //创建元素
$(this).parent().append($required); //然后将它追加到文档中
});
//文本框失去焦点后
$('form :input').blur(function(){
var $parent = $(this).parent();
$parent.find(".formtips").remove();
//验证用户名
if( $(this).is('#username') ){
if( this.value=="" || this.value.length < 6 ){
var errorMsg = '请输入至少6位的用户名.';
$parent.append('<span class="formtips onError">'+errorMsg+'</span>');
}else{
var okMsg = '输入正确.';
$parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
}
}
//验证邮件
if( $(this).is('#email') ){
if( this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) ){
var errorMsg = '请输入正确的E-Mail地址.';
$parent.append('<span class="formtips onError">'+errorMsg+'</span>');
}else{
var okMsg = '输入正确.';
$parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
}
}
}).keyup(function(){
$(this).triggerHandler("blur");
}).focus(function(){
$(this).triggerHandler("blur");
});//end blur
//提交，最终验证。
$('#send').click(function(){
$("form :input.required").trigger('blur');
var numError = $('form .onError').length;
if(numError){
return false;
}
alert("注册成功,密码已发到你的邮箱,请查收.");
});
//重置
$('#res').click(function(){
$(".formtips").remove();
});
})
//]]>
</script>
