重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
本篇内容介绍了“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
这个返回定位的插件基本就开发完毕了。当然对于实际的项目中,还有很多的改动。比如返回的时候,一定要把设置的标志参数去掉。
“jQuery返回定位插件的详细介绍”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!