1.首先jQuery是什么呢?
简单来说:“jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(框架)于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互
简单了解一下jQuery是什么,就让我们来了解一下他的插件中的自定义插件与表单验证吧!
2.自定义插件(补充一下:$这个符号其实是jQuery的缩写)
2.1:$.extend
[作用1]:对象继承:$.extend(对象1,对象2)---->对象1继承对象2
语法格式:$.extend(对象1,对象2),对象1继承对象2中的属性。
代码语言:javascript复制var p1 = {};
var p2 = {"name":"大锤","age":18};
console.info("继承前p1:" p1.name "," p1.age);
console.info("继承前p2:" p2.name "," p2.age);
$.extend(p1,p2);
console.info("继承后:" p1.name "," p1.age);
console.info("继承后:" p2.name "," p2.age);
在输出继承前的内容时 很明显p1中是空的 什么都没有,$.extend(p1,p2);
之后,p1继承了p2中的内容。再次输出就会输出继承后的属性。
那么假如说,我们有三个对象呢?一个对象继承了另外两个对象该怎么写?我们来看一下代码
代码语言:javascript复制var p1 = {};
var p2 = {"name":"大锤","age":18};
var p3 = {"sex":"男"};
console.info("继承前p1:" p1.name "," p1.age "," p1.sex);
console.info("继承前p2:" p2.name "," p2.age "," p2.sex);
console.info("继承前p3:" p3.name "," p3.age "," p3.sex);
$.extend(p3,p1,p2);
console.info("继承后p1:" p1.name "," p1.age "," p1.sex);
console.info("继承后p2:" p2.name "," p2.age "," p2.sex);
console.info("继承后p3:" p3.name "," p3.age "," p3.sex);
p1对象继承p2,也就是p1里面有了两个属性。然后p3对象继承p1对象,p3中本来有一个sex属性,现在继承到p1继承到p2的两个属性。现在p3中有三个属性。
【作用2】扩展jQuery类方法:$.extend({方法名:function(){方法体}})注意,多个方法之间用逗号隔开
上面继承了对象的属性,那么方法可以继承吗?哎,来看一下
$.accd();请问现在有效果吗?报错 对吧。应该根本就没有这个方法。看我怎么写 他就不报错了。
代码语言:javascript复制$.extend({
abcd:function(){
console.info("你好呀.这个是我们自己写的方法");
}
})
$.abcd();
现在我们在来刷新一下页面看效果,是不是输出了一句话。
案例:扩展.max()和min()方法
代码语言:javascript复制$.extend({
min:function(a,b){
return a>b?b:a;
},
max:function(a,b){
return a>b?a:b;
}
})
console.info($.min(10,20));//求两个数字的最小值
console.info($.max(10,20));//求两个数字的最大值
其实有点类似java中的静态方法定义,使用的时候类似静态方法调用
【其次】$.fn.extend
上面我们说给jQuery类扩展方法,类似于java中的静态方法是$. 来直接使用。而我们之前用的很多方法是由元素来调用的。接下来 我们学习一下怎么扩展元素的方法
【作用】扩展jQuery对象方法:$.fn.extend({方法名:function(){方法体}})注意多个方法之间用逗号隔开
案例:扩展复选框的全选和取消全选功能【升级之前的版本】
代码语言:javascript复制$.fn.extend({
//全选
check: function() {
$(this).each(function() {
this.checked = true;
})
},
//全不选
uncheck: function() {
$(this).each(function() {
this.checked = false;
})
}
})
$("#checkAll").click(function() {
$(".hobby").check();//使用全选方法
})
$("#checkNoAll").click(function(){
$(".hobby").uncheck();//使用全不选方法
})
现在我们可以直接用元素来调用我们自定义的方法了
3.表单验证:
首先:要使用插件所以我们需要先把插件下载下来。validate插件下载路径:https://jqueryvalidation.org
注意:validate插件下载路径不在jQuery官网
下面呢,先详细介绍一下具体步骤
- 使用步骤:【1.2】下载jQuery插件验证库 jQuery.validate.js
validate插件下载路径:https://jqueryvalidation.org
【1.2】将类库引入页面
下载完成后是一个压缩包文件,解压找到dist目录下的jquery.validate.js文件,就是我们要用的插件类
案例:演示表单验证(用户名、密码、确认密码、年龄、邮箱、网址)
页面示例代码:
代码语言:javascript复制<body>
<form action="http://www.baidu.com" method="post" id="myForm">
用户名:<input type="text" name="uname"/><br>
密码:<input type="text" name="upwd"/><br>
确认密码:<input type="text" name="upwd2"/><br>
邮箱:<input type="text" name="uemail"/><br>
网址:<input type="text" name="uurl"/><br>
年龄:<input type="text" name="uage"/><br>
<input type="submit" value="注册" />
</form>
</body>
语法格式:
以验证用户名不能为空为例:
$(function(){
$("#myForm").validate({
rules:{
//用户名不能为空
uname:"required"
},
messages:{
uname:"用户名不能为空"
}
})
})
rules:里面写要验证的属性,以及验证
messages:里面写对应属性验证的提示信息,如果没有写messages就会默认使用插件提供的信息。上面的例子只有一个不能为空验证。如果不能为空的同时,要求长度必须在5--10之间。又该怎么写。
代码语言:javascript复制$("#myForm").validate({
rules:{
/* 用户名不能为空,并且长度:5--10 */
uname:{
required:true,
rangelength:[5,10]
}
},
messages:{
uname:{
required:"用户名不能为空",
rangelength:"用户名长度必须在5-10之间"
}
}
})
注意:在添加多个验证时,一定要注意语法格式,用用大括号把验证括起来。验证信息也是一样
现在我们的验证信息都是黑色字体,有人说了,验证的提示信息不应该都是红色的字体吗?怎么设置红色字体呢?这个简单,不过需要我们写在样式里面了