标签：
jQuery应用：
1、表单验证：
A:jQuery Validation插件：有时需要将验证的属性写在class中，有时需要将验证信息写在属性中，例如：
<input id="cemail" name="email" size="25" class="require email" minlength=“2”/>
$(document).ready(function(){
$("#commentForm").validate()
})
B：jQuery.metadata.js插件：可以将所有的验证信息都写在class属性中
$(‘#commentForm‘).validate({meta:"validate"});
<inout id="cusername" name="username" size="25" class="{validate:{required:true,minlength:2}}"
C：将class属性移除，利用name属性；
$(document).ready(function(){
$("#commentForm").validate({
rules:{
username:{
required:true,
minlength:2
},
email:{
required:true,
email:true
},
url:"url",
comment:"required"
}
});
})
D：自定义验证信息：
class="{validate:{required:true,message:{required:‘请输入姓名‘,minlength"‘请至少输入2个字符‘}}}"
E：验证码：
<input id="cvalcode" name="valcode" size="25" value="" />
$.validator.addMethod(
"formula",
function(value,element,param){
return value == eval(param);
}
‘请输入数学公式计算后的结果‘
)
在$("#commentForm").validate的rules中添加valcode：{formula：“7+9”}
2、jQueryForm插件：ajaxForm（）以及ajaxSubmit（）方法
$("#myForm").ajaxForm(function(){
$(‘#output1‘).html("提交成功").show();
})
*****************************
$(‘#myForm‘).submit(function(){
$(this).ajaxSubmit(function(){
$(‘#output1‘).html("提交成功").show();
})
return false;
})
*****************************
两个方法都可以传递一个或0个参数，单个参数可以是一个回调函数，可以是一个options对象：
var options={
target:‘#output1‘,
beforeSubmit : showRequest, //提交前回调函数
success : showRespone, //提交成功后的回调函数
url : url, //默认是form中action的值，如果申明，则会被覆盖
type : type, //get，post
setTimeout : 3000,
clearForm : true, //提交成功后，清除所有表单元素的值
resetForm : true, //提交成功后，重置所有表单元素的值
dataType : null //json ……接收服务端返回的类型
}
$(‘#myForm‘).submit(function(){
$(this).ajaxSubmit(options);
return false;
});
beforeSubmit指定的回调函数：
function showRequest(formData,jqForm,options){
//formData是一个数组对象，jqForm是一个jQuery对象，封装了表单元素
var queryString = $.param(formData);
return true;
}
success指定的回调函数：
function showResponse(responseText,statusText,xhr,$form){
//statusText是一个返回状态，success，error……
//responseText携带服务器返回的数据内容，对于缺省的html返回，第一个参数是XMLResquest对象的responseText
}
在提交前验证表单：利用formData参数，利用参数jqForm，利用fieldValue（）方法
3、创建模态窗口---SimpleModal插件
$(“#element-id”).modal()
$.modal(“<div><h1>SimpleModel</h1></div>”)
还可以传一个参数：
$(“#element-id”).modal({options})
$.modal(“<div><h1>SimpleModel</h1></div>”,{options})
<a herf="#" class="simplemodal-close">关闭</a>
"simplemodal-close"是一个默认关闭接口，只要通过调用$.modal.close()方式关闭当前模态窗口
如果想自己定义一个关闭接口，可以修改全局变量：
$.modal.defaults.closeClass = "modalClose";
修改多个默认参数：
$.extend($.modal.defaults,{
closeClass:"modalClose",
closeHtml : "<a herf="#">Close</a>"
})
4、Cookie插件：
A:写入cookie:$.cookie(“the_cookie”, “the_value”);
B:读取cookie：$.cookie(“the_cookie);
C:删除cookie：$.cookie（”the_cookie” , null）
5、jQuery UI插件：拖到排序组件
$(document).ready(function(){
$("#myList").sortable(); //可以拖动
})
//单与单击事件冲突时：
$("#myList").sortable({delay：1});
获取列表元素拖到后的顺序，sortable（“serialize”）
$("#myList").sortable({
delay:1,
stop:function(){
$.post(
"sortable.php",
$("#myList").sortable("serialize"),
function(response){
alert(response);
}
)
}
})
6、编写jQuery插件：
A：
;(function($){
$.fun.extend({
“color”:function(value){},
“border”:function(value){}
})
})(jQuery);
Jquery Mobile:
1、加载顺序：
<link rel="stylesheet" type="text/css" href="jquery.mobile.css">
<script type="text/javascript" src="jquery.js"></script>
………………//这里是项目中的其他js
<script type="text/javascript" src="jquery.mobile.js"></script>
2、在HTML5中，属性名有data-前缀
jQuery性能优化：
1、事件代理时：
$(‘#myTable‘).on(‘click‘,‘td‘,function(){
})
2、使用join（）将数组转化为字符串
3、$.proxy()的使用：
<div id="panel" style="display:none">
<button>close</button>
</div>
//执行下面代码，button元素会消失
$(‘#panel‘).fadeIn(function(){
$("#panel button").click(function(){
$(this).fadeOut();
});
});
//使用$.proxy()解决上述问题
$(‘#panel‘).fadeIn(function(){
$("#panel button").click($.proxy(function(){
//this指向#panel
$(this).fadeOut();
},this));
});
标签：
原文地址：http://www.cnblogs.com/zhanghuiyun/p/5185987.html
