当前位置:首页>开发>正文

jquery插件原理 请问如何写JQuery插件

2023-04-08 23:39:17 互联网 未知 开发

jquery插件原理 请问如何写JQuery插件

请问如何写JQuery插件?

一、类级别($.extend)
类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法。
开发扩展其方法时使用$.extend方法,即jQuery.extend(object)
二、 对象级别
对象级别则可以理解为基于对象的拓展,如$("#table").changeColor(...) 这里这个changeColor呢,就是基于对象的拓展了。
开发扩展其方法时使用$.fn.extend方法,即jQuery.fn.extend(object)
三、 jQuery插件开发过程
1、定义作用域:为插件定义私有作用域,外部代码不能直接访问插件内部的代码,插件内部的代码不污染全局变量、
2、为jQuery扩展一个插件:为jQuery的实例添加一个宽展方法。该宽展方法可以接收一些参数。
3、设置默认值:为扩展方法设置默认值,一般会将默认属性对象定义为defaults。使用$.extend(defaults,options)将默认值和传入的参数进行合并。
4、支持jQuery的连接调用:循环把每个元素返回。
5、插件里的方法:为了使代码结构化可视化,需要用到function。在插件里的方法不能被外界调用。
6、自定义回调函数:使用call和apply方法执行回调函数。

jquery插件里$(this)和this的问题

1. $.fn.pluginName = function(opt){}

就是为jquery的prototype定义了函数, 这样, 任何一个jquery对象都可以使用这个成员函数, 这种写法直观明了, 你只要知道的就是$.fn = jQuery.prototype = $.prototype
2. $.fn.extend, 在jquery中重新定义了extend的使用方法, 如果只有一个参数, 那么就是扩展本身, 即$.fn.extend({}), 就是用{}对象扩展$.fn, 也就是jquery的prototype, 这样, 和上面那个就一样了
两者没有什么区别, 怎么用看自己习惯和理解
3. 还有一种写法就是$.extend($.fn, {}) 这个extend不是一个参数, 它作用是用后面的扩展前面的, 即用{}扩展了$.fn, 还是一个意思
4. 关于$(this)和this, 你关键还是要知道this表示的是什么, 如果this是一个dom元素, 那么$(this)是一个jquery元素, 如果this是一个jquery元素, 那么$(this)还是一个jquery元素, 虽然你用==去判断两者是不同的, 但是他们内容都是一样的, 这是我的经验, 我并没有去深入看过源码, jquery的api中似乎也没有说这个.
5. 关于this和$(this)还要注意一点$(.abc).click(function(){})中this是dom元素, $(this)是jquery元素, 而写插件的时候, 由于是扩展prototype, 所以this就是对象实例, 即this就是jquery对象, $(this)还是jquery对象, 他们虽然不是同一对象, 但是内容是完全相同的

Jquery 插件是什么!

可以让你拓展jquery的功能。主要是你把方法拓展到 $.fn 上,那么所有的 juqery 对象都有这个方法了。举个实际的例子吧,我想对拓展一个插件,实现调用 $(p).red() 后所有的p都变红。可以这么写:

$.extend($.fn, {
this.css(color, red)

return this // return this 是为了保留其链式调用的风格
})

这样的话,你以后想要实现任意元素变红,只需要选择出jquery对象,然后调用 .red() 就好了