jQuery05插件

酒醉猫(^･ｪ･^)

已于 2022-03-21 22:45:01 修改

阅读量1.4k

点赞数 3

文章标签： javascript

于 2022-03-21 22:42:25 首次发布

本文链接：https://blog.csdn.net/weixin_65808248/article/details/123634500

版权

hello！终于要到关于jQuery的最后一次课程啦~那就是---插件

插件呢，分为两种，分别是自定义插件和第三方插件，那么接下来就由小编给大家解说一下叭~

一、自定义插件

1、 $.extend

作用一

对象继承： $.extend（对象1，对象2）-----》对象1继承对象2

案例1：对象间的继承（两个对象）

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

作用二

拓展jQuery类方法： $.extend（ {方法名：function（）{方法体}} ）

【注意多个方法之间用逗号隔开】

案例2：拓展$.max()和min()方法

<script>
                $.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(10,56);
				console.info(max); 
				
				// console.info($.getMin(22,34));
				
				// $.abcd();
</script>

2、$.fn.extend

作用

扩展jQuery对象方法：$.fn.extend（ {方法名：function（）{方法体}} ）

案例3：扩展复选框的全选和取消全选的功能【升级之前的版本】

<script>
                $.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);
				}) 
</script>
<body>
		<h2>案例3：自定义插件实现全选功能</h2>
		<input type="button" id="ok" value="全选" />
		<input type="button" id="nook" value="取消全选" />
		<input type="checkbox" id="qx"/>全选
		<input type="checkbox" value="唱歌" class="aaa"/>唱歌
		<input type="checkbox" value="跳舞" class="aaa"/>跳舞
		<input type="checkbox" value="看电影" class="aaa"/>看电影
</body>

二、第三方插件

表单验证

查看API官方文档

插件名：jQuery Validation

案例4:表单验证(用户名、密码、确认密码、年龄、邮箱、网址url)

<script>    
            $("#myForm").validate({
					rules:{
						//字段规则部分
						uname:{
							required:true,
							rangelength:[6,10]
						},
						upwd1:"required",
						upwd2:{
							required:true,
							equalTo:"#upwd1"
						},
						uemail:{
							required:true,
							email:true
						},
						uage:{
							required:true,
							range:[1,150]
						},
						uurl:{
							required:true,
							url:true
						}
					},
					messages:{
						//错误信息提示部分
						uname:{
							required:"用户名必填",
							rangelength:"长度要在6-10位之间"
						},
						
					}
				})
			})
</script>
<body>
        <form id="myForm">
			用户名:<input type="text" name="uname" /><br/>
			密码:<input type="text" name="upwd1" id="upwd1"/><br/>
			确认密码:<input type="text" name="upwd2" /><br/>
			邮箱:<input type="text" name="uemail" /><br/>
			年龄:<input type="text" name="uage" /><br/>
			网址:<input type="text" name="uurl" /><br/>
			<input type="submit" value="提交" />
		</form>
</body>