JQ插件機制
阿新 • • 發佈：2018-04-15
JQ插件機制JQ插件概述
所謂的jquery插件,其實就是利用jquery語法,完成的一些工具或者模塊.jquery插件是jQuery功能的擴展.可以讓開發人員能更好更快速的完成某些特定的需求,只需要用很少的代碼就能實現很好的效果。
自定義插件
JQ允許自定義插件,對JQ的方法進行擴展.自定義插件主要分兩種: JQ元素擴展和JQ本身擴展.
- JQ元素擴展:
- 方法: jQuery.fn.extend(object)
- 概述
- 擴展 jQuery 元素集來提供新的方法（通常用來制作插件）。
- 也就是說,該方法可以用來擴展JQ元素的用法
- 示例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JQuery插件機制-jQuery.fn.extend(object)</title> <script type="text/javascript" src="./js/jquery.min.js"></script> </head> <body> <div> 愛好:<input type="checkbox" name="hobby" value="basketball" /> 籃球 <input type="checkbox" name="hobby" value="Football" />足球 <input type="checkbox" name="hobby" value="Volleyball" />排球 <br /> 用戶名:<input type="text" name="username" /><br /> </div> <script type="text/javascript"> $.fn.extend({ check: function() { // 擴展一個check方法，該方法是將所有的多選按鈕全部選中 this.each(function() { this.checked = true; }); }, userNameText: function() { // 自定義一個userNameText方法，該方法的功能是:將文本框自動賦值,並且字體顏色變為灰色 this.each(function() { this.style.color = "gray"; this.value = "請輸入用戶名"; }); } }); //註：如果是加上標簽內的屬性則需要寫在[]內 具體使用如下所示 // $("input[type=checkbox]").check(); //將type等於checkbox的多選框全部選中 $("input[name=hobby]").check(); //將name等於hobby的多選框全部選中 $("input[type=text]").userNameText(); //將type等於text的所有文本框自動賦值,並且字體顏色變為灰色 </script> </body> </html>
- JQ本身擴展:
- 方法: jQuery.extend(object)
- 概述
- 擴展jQuery對象本身,用來在jQuery命名空間上增加新函數
- 簡單來說就是增加全局函數,也就是 $.函數()
- 示例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JQuery插件機制-jQuery.extend(object)</title> <script type="text/javascript" src="./js/jquery.min.js"></script> </head> <body> <script type="text/javascript"> $.extend({ plus: function(a, b) { return a + b; }, // 給$擴展一個plus方法,用於求兩個數的和. minus: function(a, b) { return a - b }, // 給$擴展一個minus方法,用於求兩個數的差. multiply: function(a, b) { return a * b }, // 給$擴展一個plus方法,用於求兩個數的乘積. max: function(a, b) { return a > b ? a : b; } // 給$擴展一個plus方法,用於求兩個數的最大值. }); alert($.plus(2, 3)); //結果5 alert($.minus(2, 3)); //結果-1 alert($.multiply(2, 3)); //結果6 alert($.max(2, 3)); //結果3 </script> </body> </html>
註意事項:
因為所做插件為JQ插件,使用的語法也都是JQ的語法,所以,無論在自定義插件或者使用別人定義好的插件的時候,都要求先引入JQ的js文件,才能正常的使用,切記.
JQ插件機制