jQuery 插件——免费版

文章目录

• 一、自定义插件言
• 二、第三方插件
• 三、总结

---

一、自定义插件

(1)  $.extend

概述：

        作用1——对象继承

        作用2——扩展jQuery类方法

代码如下（示例）：

//1.1 $.extend()实现对象继承
				//案例1：两个对象的继承
				var person = {
					"name": "耶啵",
					"sex": "男",
					"age": 26
				};
				console.log($.type(person));
				var stu = {};
	//使用$.extend()来实现将stu继承person中的属性
				// $.extend(stu,person);
				// console.log(person);
				// console.log(stu); 
				//extend (三个参数)
				var wyb = {
					"love": 100
				}
				console.log(wyb);
				$.extend(wyb, stu, person);
				$.extend(stu, person);
				console.log(person);
				console.log(stu);
				console.log(tqq);
	//1.2 $.extend()扩展jQuery类方法
				$.extend({
					"mydemo": function() {
						console.log("这就是我编写的类方法");
					}
				});
				//调用扩展的类方法
				$.mydemo();

 (2)  $.fn.extend

概述：

        作用——扩展 jQuery 元素集来提供新的方法（通常用来制作插件）

代码如下（示例）：

	//案例3：实现全选效果
				//1.3 $.fn.extend()扩展jQuery对象方法(作用：实现全选)
				$.fn.extend({
					"mycheck":function(){
						console.log(123);
					}
				});
				//为全选按钮设置一个点击事件并调用对象方法
				$("#qx").click(function() {
					// $("input:checkbox") 得到的是所有的复选框
				});

---

二、第三方插件

  (1)  $.fn.extend

        1.1表单验证

概述：

        插件名——jQuery Validation

           使用步骤
                【1】.下载jQuery插件验证库
                                    jquery.validate.js
                【2】.将类库引入页面
                【3】.两种方式使用验证
                             HTML标签属性方式
                             JS方式【推荐】

代码如下（示例）：

<!-- 第三方插件（表单验证） -->
		<script type="text/javascript">
			$(document).ready(function(){
				// 获取表单标签调用设置插件的方法
				$("#myForm").validate({
					// 规则rules
					rules:{
						// 账号username
						username:{
							required:true
						},
						// 验证邮箱规则
						myeamil:{
							required:true,
							email:true
						}
					},
					// 自定义错误信息messages
					messages:{
						// 账户的错误信息提示
						username:{
							required:"用户名不能为空"
						},
						myeamil:{
							required:"邮箱不能为空",
							email:"邮箱的格式不满足要求"
						}
					}
				});
			
			})
		</script>

---

总结