jQuery插件機(jī)制:
在開發(fā)中判沟,有這樣的情況:需要實(shí)現(xiàn)一某種功能,但是我們發(fā)現(xiàn)jQuery中并沒有我需要的方法崭篡,而我們又不可以去修改jQuery源碼挪哄,于是我們可以使用jQuery中提供的插件擴(kuò)展機(jī)制。
常用插件:
https://plugins.jquery.com
插件定義方式:
- jQuery全局插件方法:
$.ajax();//些類方法為jQuery的全局方法琉闪,可以在jQuery環(huán)境下任何地方法直接使用迹炼。
$.extend({
fn1 : function(){},
fn2 : function(){},
...
});
調(diào)用執(zhí)行:
$.fn1();
$.fn2();
- jQuery局部插件:
$("div").css();//局部方法,某個(gè)jQuery對(duì)象調(diào)用
$.fn.extend({
fn1 : function(){},
fn2 : function(){},
...
});
調(diào)用執(zhí)行:
$("div").fn1();
- 插件方法中的this
$.extend({
fn1:function(){
console.log(this === $);//true
}
});
$.fn1();//true,說明方法中的this為jQuery對(duì)象
$.fn.extend({
fn1:function(){
console.log(this.html());//正常輸出元素內(nèi)容
}
});
$("div").fn1();
因?yàn)槿植寮椒ㄖ荒苡?來調(diào)用塘偎,因此方法中的this實(shí)際上就是jQuery本身
而局部插件中的方法疗涉,使用哪個(gè)對(duì)象調(diào)用方法,方法中的this就指向誰吟秩,并且對(duì)象是jQuery包裝后的對(duì)象咱扣。
validate插件的簡(jiǎn)單使用
<!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">
<!--
相關(guān)屬性設(shè)置
class="required":必填驗(yàn)證
minlength = "8" maxlength="10":長(zhǎng)度驗(yàn)證
class="email":驗(yàn)證郵箱
class="url":網(wǎng)址驗(yàn)證
class="url":date日期驗(yàn)證
-->
<p>用戶名:<input type="text" class="required" minlength = "8" maxlength="10" name="uname"/></p>
<p>郵箱:<input type="text" class="required email" name="email"/></p>
<p>網(wǎng)址:<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();//調(diào)用插件
</script>