jQuery插件机制:
在开发中,有这样的情况:需要实现一某种功能,但是我们发现jQuery中并没有我需要的方法,而我们又不可以去修改jQuery源码,于是我们可以使用jQuery中提供的插件扩展机制。
常用插件:
https://plugins.jquery.com
插件定义方式:
- jQuery全局插件方法:
$.ajax();//些类方法为jQuery的全局方法,可以在jQuery环境下任何地方法直接使用。
$.extend({
fn1 : function(){},
fn2 : function(){},
...
});
调用执行:
$.fn1();
$.fn2();
- jQuery局部插件:
$("div").css();//局部方法,某个jQuery对象调用
$.fn.extend({
fn1 : function(){},
fn2 : function(){},
...
});
调用执行:
$("div").fn1();
- 插件方法中的this
$.extend({
fn1:function(){
console.log(this === $);//true
}
});
$.fn1();//true,说明方法中的this为jQuery对象
$.fn.extend({
fn1:function(){
console.log(this.html());//正常输出元素内容
}
});
$("div").fn1();
因为全局插件方法只能用$来调用,因此方法中的this实际上就是jQuery本身
而局部插件中的方法,使用哪个对象调用方法,方法中的this就指向谁,并且对象是jQuery包装后的对象。
validate插件的简单使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--jquery引入-->
<script src="../js/jquery.min.js"></script>
<!--validate插件引入-->
<script src="jquery.validate.js"></script>
<!--依赖插件引入-->
<script src="jquery.validate.messages_zh.js"></script>
</head>
<body>
<form action="123.html">
<!--
相关属性设置
class="required":必填验证
minlength = "8" maxlength="10":长度验证
class="email":验证邮箱
class="url":网址验证
class="url":date日期验证
-->
<p>用户名:<input type="text" class="required" minlength = "8" maxlength="10" name="uname"/></p>
<p>邮箱:<input type="text" class="required email" name="email"/></p>
<p>网址:<input type="text" class="required url" name="url"/></p>
<p>日期:<input type="text" class="required date"/></p>
<input type="submit" value="提交"/>
</form>
</body>
</html>
<script type="text/javascript">
$("form").validate();//调用插件
</script>