jQuery05(插件)

区分java的类方法以及对象方法

--类(静态)方法:例如DBHelper.getCon()

public static Connection getConn(){
					Connection conn = null;
					try{
						conn = DriverManager.getConnection('jdbc:sqlserver://localhost:1433;DatabaseName=db_sb',SA,123);
					}catch(Exception e){
						
					}
					return conn;
				}

对象方法:StuDao sd = new StuDao(); sd.addStu();

一、自定义插件

$.extend() 能够实现继承,能够扩展类方法(类似java的静态方法 直接可通过$工具调用)

1.1 $.extend()实现对象继承

案例1:两个对象的继承

var person = {
				 	"name":"zhangsan",
				 	"sex":"男",
				 	"age":18
				 };
				 console.log($.type(person));
				 var stu = {
				 	"hobby":"打游戏"
				 };
				 console.log(person);
			 console.log(stu);
				 // 使用$.extend()来实现将stu继承person中的属性
				 $.extend(stu,person);
				 console.log(person);
				 console.log(stu);

extend(三个参数及以上)

第一个参数的对象继承后面所有参数的对象

var tqq = {
			 	"love":100
				 }
				 console.log(tqq);
				 $.extend(tqq,stu,person);
				 console.log(person);
				 console.log(stu);
				 console.log(tqq);

1.2 $.extend()扩展jQuery类方法

类方法===java中的静态方法 可以直接通过$.方法()

$.extend({
					"mydemo":function(){
						console.log("这就是我编写的类方法");
					}
				});
				
				// 调用拓展的类方法
				$.mydemo();

案例2:求最大值(最小值)

方法1:

	$.extend({
					// 实现最大值的类方法制作
					 "myMax":function(a,b){
					 	return a>b?a:b;
					 }

方法2:

arguments 数组容器,可以存储函数中的参数个数

$.extend({
"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;
					},
});

1.3 $.fn.extend()扩展jQuery对象方法

$.fn.extend({
					"demo1":function(){
						console.log("拓展的某个对象的方法");
					}
				});
				
				$("#obtn1").click(function(){
					// $(this).demo1();
					$.fn.demo1();
				});

案例3:实现全选效果

通过$.fn.extend()扩展一个对象方法(作用:实现全选)

$.fn.extend({
					"mycheck":function(){
						// $(this) 所有的复选框
						// console.log($(this));
						$(this).each(function(){
							// console.log($(this).val());
							// 调用prop属性设置选中
							$(this).prop("checked",true);
						});
					},
					"unmycheck":function(){
						$(this).each(function(){
							// console.log($(this).val());
							// 调用prop属性设置选中
							$(this).prop("checked",false);
						});
					}
				});

为全选按钮设置一个点击事件并调用对象方法

$("#qx").click(function(){
					// $("input:checkbox") 得到的是所有的复选框
					$("input:checkbox").mycheck();
				});
				// 取消全选
				$("#unqx").click(function(){
					// $("input:checkbox") 得到的是所有的复选框
					$("input:checkbox").unmycheck();
				});

二、第三方插件:表单验证插件

引入jQuery第三方表单验证插件

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

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值