jquery插件制作簡單示例說明
更新時間:2012年02月03日 15:08:26 作者:
今天剛剛把jquery的插件制作學習了一下,總結一下別人寫的和自己的心得,方便其他初學者的學習,考慮到要學習jquery插件制作的人一定知道jquery插件的好處和通用性,這里就不多說
一、先從一個簡單的實例,不需要帶參數(shù)的一個方法開始
//創(chuàng)建一個匿名函數(shù)
(function($){
//給jQuery附加一個新的方法(詳細見備注1)
$.fn.extend({
//插件的名字
MyFirstName: function() {
//迭代當前匹配元素集合
return this.each(function() {
var obj = $(this);
//自己的代碼
});
}
});
)(jQuery);
備注1:理解$.fn.extend和$.extend的區(qū)別,大概的說前者是將MyFirstName這個方法合并到jquery的實例對象中,例如$(“#txtmy”).add(3,4)這樣調用方法,后者是將MyFirstName這個方法合并到jquery的全局對象中,例如$.add(3,4); 這樣調用方法
詳細區(qū)別見(http://www.fzitv.net/article/29590.htm)
二、有參數(shù)的
//創(chuàng)建一個匿名函數(shù)
(function($){
//給jQuery附加一個新的方法(詳細見備注1)
$.fn.extend({
//插件的名字
MyFirstName: function() {
//定義默認參數(shù)
Var parms={
Parms1:1,
Parms2:2
}
//合并用戶傳的參數(shù)和默認參數(shù),返回給options(詳細見備注2)
var options = $.extend(defaults, options);
//迭代當前匹配元素集合
return this.each(function() {
//把合并后的參數(shù)賦值給o
var o= options;
//迭代當前匹配元素
var obj = $(this);
//自己的代碼
});
}
});
)(jQuery);
備注2:var options = $.extend(defaults, options); 意思是把defaults和options合并,如果后者有和前者名稱一樣的元素,后者覆蓋前者,然后合并給defaults,然后defaults賦值給options,如果是var options = $.extend({},defaults, options);那么是把前者和后者合并給{}這個參數(shù),然后賦值給options,defaluts的結構和值都沒有變化
詳細區(qū)別見(http://www.fzitv.net/article/29591.htm)
復制代碼 代碼如下:
//創(chuàng)建一個匿名函數(shù)
(function($){
//給jQuery附加一個新的方法(詳細見備注1)
$.fn.extend({
//插件的名字
MyFirstName: function() {
//迭代當前匹配元素集合
return this.each(function() {
var obj = $(this);
//自己的代碼
});
}
});
)(jQuery);
備注1:理解$.fn.extend和$.extend的區(qū)別,大概的說前者是將MyFirstName這個方法合并到jquery的實例對象中,例如$(“#txtmy”).add(3,4)這樣調用方法,后者是將MyFirstName這個方法合并到jquery的全局對象中,例如$.add(3,4); 這樣調用方法
詳細區(qū)別見(http://www.fzitv.net/article/29590.htm)
二、有參數(shù)的
復制代碼 代碼如下:
//創(chuàng)建一個匿名函數(shù)
(function($){
//給jQuery附加一個新的方法(詳細見備注1)
$.fn.extend({
//插件的名字
MyFirstName: function() {
//定義默認參數(shù)
Var parms={
Parms1:1,
Parms2:2
}
//合并用戶傳的參數(shù)和默認參數(shù),返回給options(詳細見備注2)
var options = $.extend(defaults, options);
//迭代當前匹配元素集合
return this.each(function() {
//把合并后的參數(shù)賦值給o
var o= options;
//迭代當前匹配元素
var obj = $(this);
//自己的代碼
});
}
});
)(jQuery);
備注2:var options = $.extend(defaults, options); 意思是把defaults和options合并,如果后者有和前者名稱一樣的元素,后者覆蓋前者,然后合并給defaults,然后defaults賦值給options,如果是var options = $.extend({},defaults, options);那么是把前者和后者合并給{}這個參數(shù),然后賦值給options,defaluts的結構和值都沒有變化
詳細區(qū)別見(http://www.fzitv.net/article/29591.htm)
相關文章
IE下使用jQuery重置iframe地址時內存泄露問題解決辦法
這篇文章主要介紹了IE下使用jQuery重置iframe地址時內存泄露問題解決辦法,需要的朋友可以參考下2015-02-02
jQuery Attributes(屬性)的使用(二、類篇)
本系列文章主要講述jQuery框架的屬性(Attributes)使用方法,我將以實例方式進行講述,以簡單,全面為基礎,不會涉及很深,我的學習方法:先入門,后進階!2009-12-12
jQuery實現(xiàn)仿新浪微博浮動的消息提示框(可智能定位)
這篇文章主要介紹了jQuery實現(xiàn)仿新浪微博浮動的消息提示框,具有智能定位功能,涉及jQuery控制頁面元素浮動效果的實現(xiàn)技巧,需要的朋友可以參考下2015-10-10
jquery實現(xiàn)刷新隨機變化樣式特效(tag標簽樣式)
本文主要介紹了tag標簽隨機多彩變化的超鏈接樣式,使用JQ+DIV+CSS實現(xiàn)刷新隨機變化樣式特效。具有很好的參考價值,下面跟著小編一起來看下吧2017-02-02
jQuery實現(xiàn)根據(jù)類型自動顯示和隱藏表單
這篇文章主要給大家分享了jQuery實現(xiàn)根據(jù)類型自動顯示和隱藏表單的代碼,非常的簡單實用,僅僅10行代碼,推薦給大家,希望能給大家一些提示。2015-03-03
jQuery實現(xiàn)的仿百度,仿谷歌搜索下拉框效果示例
這篇文章主要介紹了jQuery實現(xiàn)的仿百度,仿谷歌搜索下拉框效果,結合實例形式分析了基于jQuery的鼠標事件響應與頁面元素動態(tài)操作相關技巧,需要的朋友可以參考下2016-12-12

