jQuery
外掛程式有很多,有UI
類,表單驗證,輸入類,特效類,Ajax
類,滑動類,導航類,工具類,動畫類等等。
jQuery
的外掛主要分為三類:
1、封装对象方法的插件:也就是基于某个DOM元素的jQuery对象,局部性 2、封装全局函数的插件:将独立的函数添加到jquery的命名空间之下。jquery.trim()就是jquery内部作为全局函数的插件添加到内核上去的。 3、选择器插件:扩充自己喜欢的一些选择器。类似于.toggle()
1. 插件的文件名推荐为 jquery.[插件名].js,例如jquery.validate.js 2. 所有的对象方法都应当附加到jQuery.fn对象上,而所有的全局函数都应当附加到jQuery对象本身上 3. 在插件内部,this指向的是当前通过选择器获取的jQuery对象,而不像一般的方法那样,例如click()方法,内部的this指向的是DOM元素 4. 可以通过this.each来遍历所有元素 5. 所有的方法或函数插件,都应当以分号结尾,否则压缩时可能出问题,有的为了更加稳妥些,在插件的开始处加上一个分号 6. 插件应该返回一个jQuery对象,这样可以保证插件的可链式操作。除非插件需要返回的是一些需要获取的量,例如字符串或者数组等 7. 尽量利用闭包技巧历来避免变量名的冲突 8. 引入的自定义插件必须在jQuery库后面
# #jQuery外掛程式開發方式主要有三種:
通过$.extend()来扩展jQuery 通过$.fn 向jQuery添加新的方法 通过$.widget()应用jquery ui的部件工厂方式创建
jQuery命名空間上添加了一個靜態方法,並不能讓我們選取DOM元素,然後再呼叫該方法。而第三種並不常用,也較為複雜
#jQuery外掛程式時,我們有必要了解外掛程式的基本結構,所有的
jQuery外掛程式都宣告為
jQuery.fn物件的方法:
jQuery.fn.showPlugin = function () { //code here };
$("#plugin").showPlugin();
$,這是為了避免命名衝突,如果要用
$ 的話,可以像下面這樣把插件程式碼封裝在一個自執行的
匿名函數中,然後傳入參數jQuery
(function($){ jQuery.fn.showPlugin = function () { //code here }; })(jQUery);
.extend()允許你使用一個或多個物件來擴充基準對象,擴充的方式是依序將右邊的物件合併到基準物件(左邊第一個物件)。
;(function($){ $.extend({ 'nav' : function () { } }) })(jQuery);
$.nav();
$.extend是全局性的,而
$.fn.extend是局部性的,前面之所以要加分號是因為為了防止在此之前引入的
js檔案沒有加分號
$.fn.myPlugin = function() { //在这里面,this指的是用jQuery选中的元素 //example :$('a'),则this=$('a') this.css('color', 'red'); }
this指涉
jQuery選擇器傳回的集合。在外掛裡的
this,經過了一些封裝處理,
this就是表示
jQuery物件。而不需要再次使用
$()進行包裝了
return該對象即可:
$.fn.myPlugin = function() { this.css('color', 'red'); return this.each(function() { //对每个元素进行操作 $(this).append(' ' + $(this).attr('href')); })) }
return
this.each(function () {} 這樣就實作了我們的鍊式運算。
$.fn.myPlugin = function(options) { //经常用options表示有多个参数。 var defaults = { 'color': 'red', 'fontSize': '12px' }; var settings = $.extend(defaults, options); return this.css({ 'color': settings.color, 'fontSize': settings.fontSize }); }
$('a').myPlugin({ 'color': '#2C9929' });
以上是分享關於jQuery插件實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!