jQuery返回定位插件的详细介绍
本篇内容介绍了“jQuery返回定位插件的详细介绍”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
成都创新互联成立于2013年，是专业互联网技术服务公司，拥有项目做网站、成都网站设计网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元莲花做网站,已为上家服务,为莲花各地企业和个人服务,联系电话:028-86922220
一、jQuery 提供开发者开发插件的几种模式
1.$.extend(); //这个方法是绑定在$上面的。可以通过$直接调用
2.$.fn.方法名 //这个方法是绑定在Dom对象上面的可以通过$('').方法名();调用
3.$.widget //通过jQuery UI 部件工厂模式创建。
二、插件的开发过程
1.$.extend();
这个方法其实很简单，只是像$上面添加了一个静态的方法而已。主要用途是对插件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实现链式操作的技巧。
var h = $("#app").logText().height(); // app
console.log(h); //18
//这样就可以自定义方法了。
在jQuery插件的开发过程中，其实主要是通过第二种模式($.fn.插件名)开发的。因为jQuery的强大之处就是对Dom的操作.
b.一个插件的强大之处就是参提供周全的参数。以及方便使用者对参数进行扩展。
app
//$.fn.插件名字 (myPuglin);
(function(global,$,factory){
var common = factory(); //封装插件使用到的函数。
$.fn.myPuglin = function(opts){ //插件的名称
var defaults = {}; //默认的api
opts = $.extend(defaults,opts || {}); //对api的拓展
/*
*
* 要执行的功能
*
*/
console.log(opts.hello);
return this;
}
})(window,jQuery,function(){
var common = {
a(opt){
return opt;
},
};
return common;
});
$("#app").myPuglin({hello:'hello world'}); //hello world
准备工作已经完毕。那么下面会一个插件为列子，来讲解
3.工作中经常用到的列表到详情。返回来需要保留该位置的插件。(返回定位) 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
