目录
一、插件
1.区分java的类方法以及对象方法
1.1.插件：就是封装类javascript的一些列方法，导入之后可以调用这些方法。
1.2.如何下载插件？
1.3.如何使用插件？
2.自定义插件 $.extend() | $.fn.extend()
2.1.$.extend()；实现对象继承 (类似java的静态方法 直接可以通过$工具调用)
2.2.自定义插件（方法）
2.3. $.extend()扩展jQuery类方法
2.4. argument 数组容器，可以存储函数中的参数个数
2.5. $.fu.exntend(); 扩展jQuery对象的方法
3.第三方插件:表单验证插件
3.1.规则定义:
二、思维导图
三、案例
1.插件案例：
2.全选案例：
3.购物车案例（由于上个文档还是有bug，因此本次案例是对上次bug进行处理优化后的代码）：
一、插件
1.区分java的类方法以及对象方法
答：类（静态）方法（直接调用，无需实例化对象）；
对象方法：StuDao sd =new StuDao(); sd.addStu();（需要实例化对象调用）；
1.1.插件：就是封装类javascript的一些列方法，导入之后可以调用这些方法。
1.2.如何下载插件？
第一步：浏览器搜索：jQuery，点击插件
第二步：根据需要点击需要的插件
第三步：进入下图界面，根据需求选择，进行双击
第四步：选择需求的版本，点击下载
第五步：选择好版本之后，如图所示：下载即可
1.3.如何使用插件？
案例
2.自定义插件 $.extend() | $.fn.extend()
2.1.$.extend()；实现对象继承 (类似java的静态方法 直接可以通过$工具调用)
2.1.$.extend()；实现对象继承 (类似java的静态方法 直接可以通过$工具调用)
语法：$.extend(被继承对象,继承对象1,继承对象2···);
//例：案例1：两个对象的继承（两个参数）
var person = {
"name":"老王",
"sex":"男",
"age":18
};
console.log(person);
var stu = {};
console.log(stu);
//使用$.extend()来实现将stu继承person中的属性
$.extend(stu,person);
console.log("---------------------------------------------------------------------------")
//例：案例2：三个对象的继承（三个参数）
console.log(stu);
var teacher ={"name":"张老师","phone":"110"};
console.log(teacher);
//使用$.extend()来实现将stu继承person以及teacher中的属性
$.extend(stu,person,teacher);
console.log(stu);
特点：当参数有三个或多个的时候，多个继承对象有一个属性相同，那么被继承人会继承的 那个属性是最后一个继承对象的属性，前面会被覆盖掉，如果是属性不相同，那么， 就会被继承所有。
2.2.自定义插件（方法）
2.3. $.extend()扩展jQuery类方法
//语法：
$.extend({
"方法名":function(){
执行语句;
}
});
2.4. argument 数组容器，可以存储函数中的参数个数
//例：
//获取多个数中最大值
$.extend({
"myMax":function(){
var max =arguments[0];
if(arguments.length>0){
for(var i =0;imax){
max=arguments[i];
}
}
}else{
//如果没有数据，返回0
return arguments.length;
}
return max;
}
});
//调用
console.log($.myMax(45,3,23,3249,6,23));
console.log($.myMax());
2.5. $.fu.exntend(); 扩展jQuery对象的方法
//语法：
$.fn.nextend({
"方法名":function(){
执行语句;
}
});
特点：需要通过对象来调方法,亦或者通过$.fn.方法名;
3.第三方插件:表单验证插件
//语法：
$().validate({
rules:{
对象1的name属性名称:{
规则1,
规则2,
···
},
对象2的name属性名称:{
规则1,
规则2,
···
},
对象n的name属性名称:{
规则1,
规则2,
···
}
},
messages:{
对象1的name属性名称:{
规则1:错误信息提示,
规则2:错误信息提示,
···
},
对象2的name属性名称:{
规则1:错误信息提示,
规则2:错误信息提示,
···
},
对象3的name属性名称:{
规则1:错误信息提示,
规则2:错误信息提示,
···
}
}
});
注意：不能有分号结尾，根据name属性来定义规则和错误信息提示。
3.1.规则定义:
//语法：
$.extend({
"方法名":function(){
执行语句;
}
});
2.4. argument 数组容器，可以存储函数中的参数个数
//例：
//获取多个数中最大值
$.extend({
"myMax":function(){
var max =arguments[0];
if(arguments.length>0){
for(var i =0;imax){
max=arguments[i];
}
}
}else{
//如果没有数据，返回0
return arguments.length;
}
return max;
}
});
//调用
console.log($.myMax(45,3,23,3249,6,23));
console.log($.myMax());
2.5. $.fu.exntend(); 扩展jQuery对象的方法
//语法：
$.fn.nextend({
"方法名":function(){
执行语句;
}
});
特点：需要通过对象来调方法,亦或者通过$.fn.方法名;
3.第三方插件:表单验证插件
//语法：
$().validate({
rules:{
对象1的name属性名称:{
规则1,
规则2,
···
},
对象2的name属性名称:{
规则1,
规则2,
···
},
对象n的name属性名称:{
规则1,
规则2,
···
}
},
messages:{
对象1的name属性名称:{
规则1:错误信息提示,
规则2:错误信息提示,
···
},
对象2的name属性名称:{
规则1:错误信息提示,
规则2:错误信息提示,
···
},
对象3的name属性名称:{
规则1:错误信息提示,
规则2:错误信息提示,
···
}
}
});
注意：不能有分号结尾，根据name属性来定义规则和错误信息提示。
3.1.规则定义:
//语法：
$.fn.nextend({
"方法名":function(){
执行语句;
}
});
特点：需要通过对象来调方法,亦或者通过$.fn.方法名;
3.第三方插件:表单验证插件
//语法：
$().validate({
rules:{
对象1的name属性名称:{
规则1,
规则2,
···
},
对象2的name属性名称:{
规则1,
规则2,
···
},
对象n的name属性名称:{
规则1,
规则2,
···
}
},
messages:{
对象1的name属性名称:{
规则1:错误信息提示,
规则2:错误信息提示,
···
},
对象2的name属性名称:{
规则1:错误信息提示,
规则2:错误信息提示,
···
},
对象3的name属性名称:{
规则1:错误信息提示,
规则2:错误信息提示,
···
}
}
});
注意：不能有分号结尾，根据name属性来定义规则和错误信息提示。
3.1.规则定义:
注意：不能有分号结尾，根据name属性来定义规则和错误信息提示。
二、思维导图
三、案例
1.插件案例：
插件案例
#myForm .error{
color:red;
font-size: 12px;
margin-left: 10px;
}
2.全选案例：
案例
全选|取消全选
1
2
3
4
5
3.购物车案例：
购物车案例
th{
text-align: center;
}
table tr{
text-align: center;
}
全选
商品名称
商品单价
商品数量
商品总价
操作
巧克力
15
牛奶
25
爆米花
5
金额：
元
插件案例 #myForm .error{ color:red; font-size: 12px; margin-left: 10px; }
2.全选案例：
案例
全选|取消全选
1
2
3
4
5
3.购物车案例：
购物车案例
th{
text-align: center;
}
table tr{
text-align: center;
}
全选
商品名称
商品单价
商品数量
商品总价
操作
巧克力
15
牛奶
25
爆米花
5
金额：
元
购物车案例 th{ text-align: center; } table tr{ text-align: center; } 金额： 元
全选 商品名称 商品单价 商品数量 商品总价 操作 巧克力 15 牛奶 25 爆米花 5
