
$(function(){
                //继承前
				var s1 = {};
				var s2 = {"name":"欧阳干翔","sex":"女"};
				console.info(s1.name,s1.sex);
				console.info(s2.name,s2.sex);
				//开始继承
				$.extend(s1,s2);
				//继承后
				console.info(s1.name,s1.sex);
				console.info(s2.name,s2.sex);
})

效果图：

2.用于扩展jQuery方法（类似于类方法）


$(function(){
                $.extend({
					abcd:function(){
						alert(1234);
					},
					getMax:function(a,b){
						return a>b?a:b;
					},
					getMin:function(a,b){
						return a<b?a:b;
					}
				});
 
				//调用类方法
				var max = $.getMax(3,7);
				console.info(max);
 
				console.info($.getMin(22,34));
				$.abcd();
})

我们先用$.abcd()会发现根本没有这个方法，但是我们定义完后就会出现我们逍遥的效果。

同时，完成一个案例

自定义比较两个数的最大值最小值的两个方法。

效果图：

2、$.fn.extend()

作用：扩展jQuery方法（类似对象方法），$.fn.extend({方法名:function(){方法体}})，多个方法之间用逗号隔开


$(function(){
          $.fn.extend({
					xx:function(){
						//遍历
						$(this).each(function(i,ck){//ck指的是每一个复选框
							ck.checked = true;//让其选中
						})
					},
					yy:function(){
						//遍历
						$(this).each(function(i,ck){//ck指的是每一个复选框
							ck.checked = false;//让其选中
						})
					}
				})
				//案例3：实现全选效果
				//按钮实现全选
				$("#ok").click(function(){
					$(".aaa").xx();
				})
 
				$("#nook").click(function(){
					$(".aaa").yy();
				})
 
				//用复选框完成全选
				$("#qx").on("click",function(){
					//让其他复选框的状态跟全选框一致
					// console.info($("#qx").prop("checked"));
					// if($(this).prop("checked")){//说明全选框选中
					if($(this).is(":checked")){//说明全选框选中
							$(".aaa").xx();
					}
					else{
						$(".aaa").yy();
					}
				})
 
				//完善全选
				$(".aaa").click(function(){
					var f = true;//假设复选框是选中的
					//遍历
					$(".aaa").each(function(i,ck){//ck是每一个复选框
						if(ck.checked==false){
							f = false;
						}
					})
					$("#qx").prop("checked",f);
				})
})
 
<body>
		
		<input type="button" name="" id="ok" value="全选" />
		<input type="button" name="" id="nook" value="取消全选" />
		<input type="checkbox" name="" id="qx" value="全选" />全选
		<input type="checkbox" class="aaa" id="" value="躺着上网课" />躺着上网课
		<input type="checkbox" class="aaa" id="" value="吃辣条" />吃辣条
		<input type="checkbox" class="aaa" id="" value="玩soul" />玩soul
		<input type="checkbox" class="aaa" id="" value="嗯哼" />嗯哼
	
	</body>

实现全选和取消全选，使用这种方法的好处是，可以在很多地方调用。而不是仅限于这一处

二、第三方插件

第三方插件挺多的，但是今天只讲官方插件的表单验证

1.插件名：jQuery validation

2.使用步骤：下载插件----->引入库

3.验证的规则要看validate的规则。

4.验证的方式推荐使用js方式，所以今天只讲js方式

验证以及错误提示：

$("").validate({

        ruels:{

字段验证

        },

messages:{

信息错误提示

        }

})

错误信息提示的样式 label.error{

样式

}


$(function(){
          $("#myf").validate({
					/* 定义规则 */
					rules: {
						/* 一一去写对应的框的规则 */
						/* 只有一个规则的写法 user:"required"*/
						user: {
							required: true,
							rangelength: [2, 4]
						},
						pwd: {
							required: true,
							rangelength: [3, 3]
						},
						pwd1: {
							equalTo: "#mypwd"
						},
						email: {
							required: true,
							email: true
						}
					},
					/* 不满足规则时的错误信息 */
					messages: {
						user: {
							required: "必须要填写",
							rangelength: "2-4位数"
						},
						pwd: {
							required: "必须要填写",
							rangelength: "3位数"
						},
						pwd1: {
							equalTo: "密码输入不一样"
						},
						email: {
							required: "必须要填写",
							email: "格式不正确"
						}
					}
				});
 
})
 
<body>
		<form action="a.html" id="myf">
			用户名：<input type="text" name="user" /><br>
			密码:<input type="password" name="pwd" id="mypwd" /><br>
			确认密码:<input type="password" name="pwd1" /><br>
			邮箱:<input type="text" name="email" /><br>
			<input type="submit" value="登录" />
		</form>
	</body>

总结：

今天的分享就到这里啦，今天分享的表单验证插件个人感觉好用，比自己写方便，还有很多的插件能用，感兴趣的小伙伴可以去下载并使用。jQuery部分的学习分享就告一段落了，准被学习JavaWeb了，如果这篇文章对你有帮助的话可以点个赞，接下来九歌会持续分享，敬请期待！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/402323