jQuery返回定位插件的詳細介紹
本篇內容介紹了“jQuery返回定位插件的詳細介紹”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
成都創(chuàng)新互聯(lián)成立于2013年，是專業(yè)互聯(lián)網(wǎng)技術服務公司，擁有項目做網(wǎng)站、成都網(wǎng)站設計網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元蓮花做網(wǎng)站,已為上家服務,為蓮花各地企業(yè)和個人服務,聯(lián)系電話:028-86922220
一、jQuery 提供開發(fā)者開發(fā)插件的幾種模式
1.$.extend(); //這個方法是綁定在$上面的?？梢酝ㄟ^$直接調用
2.$.fn.方法名 //這個方法是綁定在Dom對象上面的可以通過$('').方法名();調用
3.$.widget //通過jQuery UI 部件工廠模式創(chuàng)建。
二、插件的開發(fā)過程
1.$.extend();
這個方法其實很簡單，只是像$上面添加了一個靜態(tài)的方法而已。主要用途是對插件api的擴展.
eg:
//$.extend();為了防止，變量和方法之間的相互污染，我們采用閉包的模式。
(function($,factory){
var obj = factory();
$.extend({
sayHelloWorld:obj.firstApply,
})
$.secondApply = obj.secondApply;
})(jQuery,function(){
var obj = {
firstApply(){
console.log('hello world');
},
secondApply(){
console.log('直接綁定到$上');
},
};
return obj;
});
$.sayHelloWorld();//hello world
$.secondApply(); //直接綁定到$上
/*從上面的2種綁定方式可以看出用$.extend();對jQuery方法進行拓展，
其實和直接綁定到$上是一樣的效果*/2.$.fn.方法名。 (方法名 其實就是插件名)。
a.插件結構
app
//$.fn.插件名字 (logText);
(function($,factory){
$.fn.logText = factory();
})(jQuery,function(){
var logText = function(){
console.log(this.text());
return this;
}
return logText;
});
$("#app").logText(); //app 通過DOM元素之間調用該方法。并返回該對象。這也是jQuery實現(xiàn)鏈式操作的技巧。
var h = $("#app").logText().height(); // app
console.log(h); //18
//這樣就可以自定義方法了。
在jQuery插件的開發(fā)過程中，其實主要是通過第二種模式($.fn.插件名)開發(fā)的。因為jQuery的強大之處就是對Dom的操作.
b.一個插件的強大之處就是參提供周全的參數(shù)。以及方便使用者對參數(shù)進行擴展。
app
//$.fn.插件名字 (myPuglin);
(function(global,$,factory){
var common = factory(); //封裝插件使用到的函數(shù)。
$.fn.myPuglin = function(opts){ //插件的名稱
var defaults = {}; //默認的api
opts = $.extend(defaults,opts || {}); //對api的拓展
/*
*
* 要執(zhí)行的功能
*
*/
console.log(opts.hello);
return this;
}
})(window,jQuery,function(){
var common = {
a(opt){
return opt;
},
};
return common;
});
$("#app").myPuglin({hello:'hello world'}); //hello world
準備工作已經(jīng)完畢。那么下面會一個插件為列子，來講解
3.工作中經(jīng)常用到的列表到詳情。返回來需要保留該位置的插件。(返回定位) savePositon(); $.fn.savePosition
Title
第一頁 第1個li
第一頁 第2個li
第一頁 第3個li
第一頁 第4個li
第一頁 第5個li
第一頁 第6個li
第一頁 第7個li
第一頁 第8個li
第一頁 第9個li
第一頁 第10個li
第一頁 第11個li
第一頁 第12個li
第一頁 第13個li
第一頁 第14個li
第一頁 第15個li
第二頁 第1個li
第二頁 第2個li
第二頁 第3個li
第二頁 第4個li
第二頁 第5個li
第二頁 第6個li
第二頁 第7個li
第二頁 第8個li
第二頁 第9個li
第二頁 第10個li
第二頁 第11個li
第二頁 第12個li
第二頁 第13個li
第二頁 第14個li
第二頁 第15個li
重慶分公司
重慶分公司