jQuery 插件

目录

自定义插件

$.extend

【作用1】对象继承： $.extend(对象1，对象2)---->对象1继承对象2

【作用2】扩展jQuery类方法：$.extend( {方法名：function(){ 方法体  } } )  注意多个方法之间用逗号隔开

$.fn.extend

【作用】扩展jQuery对象方法：$.fn.extend( {方法名：function(){ 方法体  } } )  注意多个方法之间用逗号隔开

第三方插件

案例4：演示表单验证（用户名、密码、确认密码、年龄、邮箱、网址）

HTML:

CSS:

jQuery:

---

自定义插件

$.extend

【作用1】对象继承： $.extend(对象1，对象2)---->对象1继承对象2

// 案例1：对象间的继承（两个对象）
//定义一个对象
var person = {"name":"张三","sex":"男"};
var stu = {};
console.log(stu);
$.extend(stu,person);
console.log(stu);
//涉及到三个参数时
//第一个参数的对象会继承后面所有对象的属性
var person = {"name":"张三","sex":"男"};
var age = {"age":"12"};
var stu = {};
console.log(stu);
$.extend(stu,person,age);
console.log(stu);

【作用2】扩展jQuery类方法：$.extend( {方法名：function(){ 方法体  } } )
  注意多个方法之间用逗号隔开

$.extend({
// 此处可以通过键值对的形式创建jQuery的类方法  将来可以通过$直接调用
"a":function(){
console.log("a");
},
"b":function(){
console.log("b");
}
});
$.a();
$.b();
// 案例2：扩展$.max()和$.min()方法
$.extend({
// arguments参数 类似一个数组，存储参数的个数
// 扩展求最大值的类方法
"myMax":function(){//最大值
//打擂台的思想
var max = arguments[0];//假设数组的第一个数为最大值
for(var i=0;i<arguments.length;i++){
if(max < arguments[i]){
max = arguments[i];
}
}
return max;
},
"myMin":function(){//最小值
//打擂台的思想
var min = arguments[0];//假设数组的第一个数为最大值
for(var i=0;i<arguments.length;i++){
if(min > arguments[i]){
min = arguments[i];
}
}
return min;
}
});
console.log($.myMax(1,2,3,4,56));
console.log($.myMin(1,23,121,21));

$.fn.extend

【作用】扩展jQuery对象方法：$.fn.extend( {方法名：function(){ 方法体  } } )
  注意多个方法之间用逗号隔开

$.fn.extend({
//扩展jQuery对象方法
"myDemo":function(){
console.log("这是jQuery对象方法");
}
				
});
//如何调用jQuery对象方法
//$.fn.extend() 存储在加载函数内 作用域
$.fn.myDemo();
// 案例3：扩展复选框的全选和取消全选功能【升级之前的版本】
$.fn.extend({
"checkAll":function(isChecked){
//this是jQuery对象
// this.each(function(){
// 这个this是jQuery对象中的每个DOM对象
// 	this.checked = isChecked;
// })
$(this).prop("checked",isChecked);
}
});
			
			
$("#checkAll").click(function(){
$("input:checkbox").checkAll(this.checked);
})

第三方插件

案例4：演示表单验证（用户名、密码、确认密码、年龄、邮箱、网址）

HTML:

//案例4：演示表单验证（用户名、密码、确认密码、年龄、邮箱、网址）
<form id="formRegister" action="index.html" method="get">
			<fieldset id="">
				<legend>请完善你的表单</legend>
				<p class="p">
					<input type="button" disabled="disabled" class="txt" value="用  户  名" />
					<input type="text" class="info" name="username" id="username" placeholder="请输入用户名" required="required"/>
				</p>
				<p class="p">
					<input type="button" disabled="disabled" class="txt" value="设置密码" />
					<input type="password" class="info" name="password" id="password" placeholder="建议至少使用两种字符组合" required="required" />
				</p>
				<p class="p">
					<input type="button" disabled="disabled" class="txt" value="确认密码" />
					<input type="password" class="info" name="repress" id="repress" placeholder="请在此输入密码" required="required"/>
				</p>
				<p class="p">
				      <input class="txt" disabled type="button" value="邮箱"/>
				      <input class="info tph" type="tel" name="email" pattern="^1\d{10}$" placeholder="请输入邮箱" required>
				    </p>
				    <p class="p">
				      <input class="txt" disabled type="button" value="验  证  码"/>
				      <input class="info codeText" type="text" name="code" placeholder="请输入验证码" required/>
				      <span class="code">HCf6</span>
				    </p>
				    <p class="login_box">
				      <input class="login" type="submit" value="立 即 注 册"/>
			</fieldset>
		</form>

CSS:

<style type="text/css">
			    .myform {
			      width: 600px;
			      margin: 50px auto 0;
			    }
			    .p {
			      border: 1px #cecece solid;
			      /*width: 360px;*/
			      width: 480px;
			      margin: 0 auto 20px;
			    }
			    .txt {
			      height: 36px;
			      width: 80px;
			      background-color: white;
			      box-sizing: content-box;
			      vertical-align: text-bottom;
			      border: none;
			    }
			    .info {
			      box-sizing: content-box;
			      border: none;
			      height: 36px;
			      font-size: 12px;
			      vertical-align: text-bottom;
			      width: 200px;
			      margin-left: -10px;
			      padding-left: 10px;
			    }
			    .code {
			      display: inline-block;
			      float: right;
			      height: 39px;
			      width: 80px;
			      background-color: black;
			      color: white;
			      text-align: center;
			      line-height: 39px;
			    }
			    .login_box {
			      border: none;
			      width: 360px;
			      margin: 0 auto;
			    }
			    .login {
			      width: 360px;
			      height: 36px;
			      background-color: #ff3829;
			      border: none;
			      color: white;
			    }
			    .error{
			      color:red;
			    }
		</style>

jQuery:

			$("#formRegister").validate({
				//插件的使用：2个模块，规则模块，错误信息模块
				rules:{
				            username: {
				              required: true
				            },
				            password: {
				              required: true,
				              rangelength:[8,20]
				            },
				            repress: {
				              required: true,
				              rangelength:[8,20],
				              equalTo: "#password"
				            },
				            email: {
				              required: true,
				              email: true
				            },
				            code: {
				              required: true,
				            },
				            checkbox: 'required'
				          },
				           messages:{
				            username: {
				              required: "请输入用户名"
				            },
				            password: {
				              required: "请输入密码",
				              rangelength:"密码长度必须是8到20位"
				            },
				            repress: {
				              required: "请再次输入密码",
				              rangelength:"密码长度必须是8到20位",
				              equalTo: "两次输入的密码不一致"
				            },
				            email: {
				              required: "请输入邮箱",
							  email:"邮箱格式不正确"
				            },
				            code: {
				              required: "请输入验证码",
				            }
				          }
			})