一、說明
jQuery插件官網:http://plugins.jquery.com/
使用插件時引用順序:插件引用要位于主jquery庫之后。
二、插件應用實例
演示插件jquery.validate.js的使用方法:
①引用jQuery主庫和validate插件。
注意:
- jQuery主庫要先于插件引用;
- 如果想顯示中文錯誤提示,還需要引用jquery.validate.messages_cn.js。
<script type="text/javascript" src="Jscript/jquery-1.4.2.js"> </script> <script type="text/javascript" src="Js-7-1/jquery.validate.js"> </script> <script type="text/javascript" src="Js-7-1/jquery.validate.messages_cn.js"> </script>
<form id="frmV" method="get" action="#"> <div class="divFrame"> <div class="divTitle"> 請輸入下列資料 </div> <div class="divContent"> <div> 標題:<br /> <input id="title" name="title" type="text" class="txt" /> <font color="red">*</font><br /> <span></span> </div> <div> </div> </div> <div class="divBtn"> <input id="sbtUser" type="submit" value="提交" class="btn" /> </div> </div> </form>
②設置驗證規則,注意name要與控件對應。
<script type="text/javascript"> $(function() { $("#frmV").validate( { /*自定義驗證規則*/ rules: { title: { required: true, minlength: 5,maxlength:18 } }, /*錯誤提示位置*/ errorPlacement: function(error, element) { error.appendTo(element.siblings("span")); } } ); }) </script>
三、自定義插件
1.插件分類:
- 封裝方法插件:對象插件
- 封閉函數插件:類插件
2.插件開發注意事項
①插件命名格式: jquery.[插件名].js;
②所有插件都應該以分號;開頭,避免壓縮插件之后出現錯誤;為了保證JQuery的鏈式寫法正確性,插件本身必須返回一個jQuery對象;
③在插件內部,this表示選擇器選中的對象,和平時的this含義不太相同;
④為了避免沖突,在編寫插件時盡量使用jQuery而不是$符號;
⑤對象級別插件所有方法都依附于jquery.fn主體對象;類級別插件所有方法都依附于jquery對象。
⑥編寫對象級別插件是用jQuery.fn.extend()方法進行擴展,編寫類級別插件時是用jQuery.extend()方法進行擴展。
2.對象插件示例:
插件功能比較簡單,當鼠標經過菜單項時自動切換背景顏色。
首先定義插件jquery.color.js
; (function($) { $.fn.extend({ "focusColor":function (color) { var def_col = "#ccc"; var list_bg = "#fff"; color = (color == undefined )? def_col : color; $(this).find("li").each(function() { $(this).mouseover(function() { $(this).css("background-color", color); }).mouseout(function() { $(this).css("background-color", list_bg); }); }); return $(this); } }); })(jQuery);
調用:
<script type="text/javascript"> $(function() { $("#u1").focusColor("green");//調用自定義的插件 }) </script>
3.類插件示例:
定義類級別插件jquery.calc.js。
;$(function () { $.extend({ "addNum": function (a, b) { a = a || 0; b = b || 0; return parseInt(a) + parseInt(b); } }); })(jQuery);
調用:
<script type="text/javascript"> $(function() { $("#Button1").click(function() { $("#Text3").val( $.addNum($("#Text1").val(), $("#Text2").val())); }); }) </script>
作者:陳敬(公眾號:敬YES)
出處:http://www.rzrgm.cn/janes/
博客文章僅供交流學習,請勿用于商業用途。如需轉載,請務必注明出處。
浙公網安備 33010602011771號