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