jquery 插件就是一些人用jquery写的一些工具,常见的是jquery UI和jquery easyui,我们在调用时只需要用很少的代码就能实现很好的效果。如easyui的datagrid、combobox、tree等可以实现表格、下拉框、树等形状及需要的操作。但是有一个前提,如果要用jQuery的插件,那么还需要导入jQuery库。
自定义插件
$.extend
【作用1】对象继承: $.extend(对象1,对象2)---->对象1继承对象2
// 案例1:对象间的继承(两个对象)
$.extend($("#a1"),$("#a2"));
var aa = {"name":"zs","sex":"女"}
var bb = {};
$.extend(bb,aa);
console.log(aa);
console.log(bb);
【作用2】扩展jQuery类方法:$.extend( {方法名:function(){ 方法体 } } )
// 案例2:扩展$.max()和$.min()方法
$.extend({
"max":function(){
var max = arguments[0];
for(var i = 0; i<arguments.length;i++){
if(max<arguments[i]){
max = arguments[i];
}
}
return max;
},
"min":function(){
var max = arguments[0];
for(var i = 0; i<arguments.length;i++){
if(max > arguments[i]){
max = arguments[i];
}
}
return max;
}
})
注意多个方法之间用逗号隔开
$.fn.extend
【作用】扩展jQuery对象方法:$.fn.extend( {方法名:function(){ 方法体 } } )
注意多个方法之间用逗号隔开
第三方插件
表单验证
插件名:jQuery Validation
插件在主页中
使用步骤
【1】.下载jQuery插件验证库
jquery.validate.js
【2】.将类库引入页面
【3】.两种方式使用验证
HTML标签属性方式
JS方式【推荐】
验证及错误信息
$("表单元素").validate({
rules:{
字段验证规则
},
messages:{
字段错误信息
}
})
错误样式
表格元素 label.error{
样式
}
// 案例4:演示表单验证(用户名、密码)
$("form").validate({
rules:{
name:{
required:true,
minlength:5
},
pwd:{
required:true,
minlength:6
}
},
messages:{
name:{
required:"账号不能为空",
minlength:"账号最长6位"
},
pwd:{
required:"密码不能为空",
minlength:"密码最长6位"
}
}
})