jQuery05(插件)

自定义插件

$.extend

作用:
1.对象继承(对象一，对象二)–>对象一继承对象二
2.扩展jQuery类方法:$.extend({方法名:function(){方法体}})
$.extend的使用以及案例:

 /* 一、自定义插件 */
				//1.1 $.extend()实现对象继承
				//案例1：两个对象的继承
				var person = {
					"name": "清晨",
					"sex": "男",
					"age": 18
				};
				console.log($.type(person));
 
				var stu = {
					"hobby": "打游戏"
				};
				console.log(person);
				console.log(stu);
 
				//使用$.extends() 来实现stu继承person中的属性
				$.extend(stu, person);
				console.log(person);
				console.log(stu);
 
				//extends(三个参数)
				//第一个参数的对象继承后面所有参数的对象
				var v = {
					"like": "美女"
				}
				console.log(v);
				$.extend(v, stu, person);
				console.log(person);
				console.log(stu);
				console.log(v);
                // $.extend()扩展jQuery类方法
				//类方法  java中的静态方法  可以直接通过$.方法()
				$.extend({
					"mydemo": function() {
						console.log("这是我编写的类方法。");
					}
				});
				//调用拓展的类方法
				$.mydemo();
 
				//案例2：求最大值(最小值)
				$.extend({
					//求最大值
					//arguments 数组容器，可以存储函数中的参数个数
					"myMax": function() {
						var max = arguments[0];
						if (arguments.length > 0) {
							for (var i = 0; i < arguments.length; i++) {
								if (arguments[i] > max) {
									max = arguments[i];
								}
							}
						} else {
							return arguments.length;
						}
						return max;
					},
					//求最小值
					"myMin": function() {
						var min = arguments[0];
						if (arguments.length > 0) {
							for (var i = 0; i < arguments.length; i++) {
								if (arguments[i] < min) {
									min = arguments[i];
								}
							}
						} else {
							return arguments.length;
						}
						return min;
					}
				});
 
				console.log($.myMax(44, 22));
				console.log($.myMin(12, 2));

$.fn.extend

扩展jQuery对象方法:$.extend({方法名:function(){方法体}})
$.fn.extend的使用以及案例:

//1.3 $.fn.extend()扩展jQuery对象方法
				$.fn.extend({
					"Demo1": function() {
						console.log("演示一");
					}
				});
 
				$("#obtn1").click(function() {
					$.fn.Demo1();
				});
 
				//案例3：实现全选效果
				//通过$.fn.extend()扩展一个对象方法(作业：实现全选)
				$.fn.extend({
					"mycheck": function() {
						$(this).each(function() {
							// 调用prop属性设置选中
							$(this).prop("checked", true);
						});
					},
					"unmycheck": function() {
						$(this).each(function() {
							// 调用prop属性设置选中
							$(this).prop("checked", false);
						});
					}
				});
 
				//为全选按钮设置一个点击事件并调用对象方法
				$("#qx").click(function() {
					// $("input:checkbox") 得到的是所有的复选框
					$("input:checkbox").mycheck();
				});
				// 取消全选
				$("#unqx").click(function() {
					// $("input:checkbox") 得到的是所有的复选框
					$("input:checkbox").unmycheck();
				});

第三方插件–表单验证

插件名: jQuery Validation
一.使用步骤:
1.下载jQuery插件验证库–jquery.validate.js
2.将类库引入页面
3.两种方式使用验证
(1)HTML标签属性方式
(2)JS方式【推荐方式】
验证及错误信息
$(“表单元素”).validate({
rules:{
字段验证规则
},
massages:{
字段错误信息
}
})
错误样式
表格元素 label.error{
样式
}
二.验证规则说明