jQuery-插件，优化

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));

});