tip1：
注意使用<label>的for标签，对应input的id。（for 属性规定 label 与哪个表单元素绑定。）
tip2:
注意：jquery从1.6版本开始，哪些属性应该用attr()访问，哪些应该用prop()访问。
第一个原则：只添加属性名称该属性就会生效应该使用prop();
第二个原则：只存在true/false的属性应该使用prop();
按照官方说明，如果是设置disabled和checked这些属性，应使用prop()方法，而不是attr()方法。
1、获取焦点和失去焦点改变样式
input:focus,textarea:focus{ border: 1px solid #ff3300; background-color: #fcc; } /*IE6并不支持除超链接元素之外的:hover伪类选择符。*/
so，
$(":input").focus(function(){
$(this).addClass("focus");
}).blur(function(){
$(this).removeClass("focus");
});
// :input表示选择表单中的input,select,textarea,button元素，input仅仅选择input元素。
2、改变文本框/滚动条高度
var $comment=$("#commnet"); $(".bigger").click(function(){ if($comment.is(":animated")){ // if($comment.height()<500){ // $comment.animate({height:"+=50"},400); // } //高度变大 $comment.animate({scrollTop:"-=50"},400); //向上滚动 } }); $(".smaller").click(function(){ if($comment.is(":animated")){ // if($comment.height()>50){ // $comment.animate({height:"-=50"},400); // } //高度变小 $comment.animate({scrollTop:"+=50"},400); //向下滚动 } })
3、复选框应用
<form action="#" method="post" id="regForm"> 你爱好的运动是？ <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="CheckRev" value="反选"> <input type="button" id="send" value="提交"> </form>
$(function () { // 全选/全不选 $("#CheckAll").click(function () { $("[name=items]:checkbox").prop("checked", this.checked); }); // 反选 $("#CheckRev").click(function () { $("[name=items]:checkbox").each(function () { this.checked = !this.checked; }) }); // 提交 $("#send").click(function () { var str = "你选择中的是:"; $("[name=items]:checkbox:checked").each(function () { str += $(this).val() + "/"; }) alert(str); }) // 跟全选联动 $("[name=items]:checkbox,#CheckRev").click(function(){ //#CheckRev添加了反选的联动 var flag=true; $("[name=items]:checkbox").each(function(){ if(!this.checked){ flag=false; } }); $("#CheckAll").prop("checked",flag); }) });
4、下拉框应用
<div class="fz"> <div class="content l"> <select multiple id="select1" style=" 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> <option value="8">选项8</option> </select> <div> <span id="add">选中添加到右边>></span><br/> <span id="add_all">全部添加到右边>></span> </div> </div> <div class="content l"> <select multiple id="select2" style=" 100px; height: 160px;"></select> <div> <span id="remove"><<选中删除到左边</span><br/> <span id="remove_all"><<全部删除到左边</span> </div> </div> </div>
$(function () { // 选中添加到右边 $("#add").click(function(){ var $option=$("#select1 option:selected"); // var $remove=$option.remove(); // $remove.appendTo("#select2"); // 删除和追加可以用appendTo()方法直接完成 $option.appendTo("#select2"); }); // 全部添加到右边 $("#add_all").click(function(){ var $option=$("#select1 option"); $option.appendTo("#select2"); }); // 双击添加到右边 $("#select1").dblclick(function(){ var $option=$("option:selected",this); $option.appendTo("#select2"); }) });
5、表单验证：
<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>
$(function () { $("form :input.required").each(function(){ var $required=$("<strong class='red'>*</strong>"); $(this).parent().append($required); }); $("form :input").blur(function(){ $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="请输入正确的email"; $parent.append("<span class='formtips onError'>"+errorMsg+"</span>"); }else{ var okMsg="输入正确"; $parent.append("<span class='formtips onSuccess'>"+okMsg+"</span>"); } } }).keyup(function(){ //新增，keyup()用户每次松开按键的时候触发 $(this).triggerHandler("blur"); //trigger()不仅会触发为元素绑定的blur事件，也会触发浏览器默认的blur事件， // 即不能将光标定位到文本框上。而triggerHander("blur")只会触发为元素绑定的blur，而不触发浏览器默认的blur事件 }).focus(function(){ //新增，focus()元素得到焦点的时候触发 $(this).triggerHandler("blur"); }); // 表单提交 $("#send").click(function(){ $("form .required:input").trigger("blur"); var numError=$("form .onError").length; if(numError){ return false; }else{ alert("注册成功！"); } }) });