时间:2021-05-26
jQuery自定义插件
jQuery是一个功能强大的库,提供了开发JavaScript项目所需的所有核心函数。然而,有时候我们还是需要使用自定义代码来扩展这些核心函数来提高开发效率。
jQuery库是为了加快JavaScript的开发速度而设计的,通过简化编写JavaScript的方式,减少代码量。
jQuery编写插件有两种方式
1.添加jQuery对象级别的插件,原理是给jQuery类添加方法。
写法如下:
(function($){ $.fn.extend({ 函数名:function(自定义参数){ //自定义插件代码部分 } });})(jQuery);//第二种写法(function($){ $.fn.函数名=function(自定义参数){ //自定义插件代码 }})(jQuery);//调用方法("#id").函数名(参数);2.添加jQuery类级别的方法,也就是添加静态方法
写法如下:
(function($){ $.extend({ 函数名:function(自定义参数){ //自定义插件代码 } });})(jQuery);//第二种写法(function($){ $.函数名=function(自定义参数){ //自定义插件代码 }})(jQuery);//调用方式$.函数名(参数);jQuery插件的种类
1.对象级别插件开发,即给jQuery对象添加方法,封装对象方法的插件,例如:append()、val()。
2.类级别插件开发,即给jQuery添加全局函数,相当于给类本身添加方法,例如:$.ajax();
jQuery的插件机制
jQuery为开发插件提供了两种方法。
1. jQuery.fn.extend(object),给jQuery对象添加方法。
2. jQuery.extend(object),给jQuery类添加方法。
这两个方法接收的参数都是一个对象,类型为Object,Object里面的”名/值”分别对应”函数名/函数主体”。
fn是什么
查看jQuery源码:
<span style="font-size:12px;">jQuery.fn = jQuery.prototype = { init: function( selector, context ) {//.... //...... }; </span>从源码中查看,可以得出:
jQuery.fn=jQuery.prototype//fn指向jQuery对象的原型,即为jQuery类添加成员函数。这里我写一个简单的例子来实现一个最简单的插件,仅仅是用来说明一下如何使用jQuery开发插件。
<!doctype html><html><head><meta charset="utf-8"><title>自定义jQuery插件</title><script src="plugs/jquery-2.2.3.min.js"></script><script>//这是一个自定义的jQuery插件(function(){ $.fn.extend({ myFirst:function(){ var s="This is my first jQuery"; $(this).append(s); } });})(jQuery);</script></head><body><div id="i1"></div><script>$("#i1").myFirst();</script></body></html>执行以后返回的页面为:
以上仅仅介绍如何使用jQuery开发自定义插件,会使用以后就可以开发更复杂的插件了。
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
Java中自定义异常详解及实例代码下面做了归纳总结,欢迎批评指正自定义异常classChushulingExceptionextendsException{pu
AndroidViewPagerIndicator详解及实例代码关于自定义View的属性零碎知识自定义View和自定义属性的知识不再此提及,这里着重说的是属性在
JQuery+Bootstrap自定义全屏Loading插件/***自定义Loading插件*@param{Object}config*{*content[加载
1.CustomAnimationBannerwithjQuery在该教程中你将学会如何使用jQuery的Easing插件及2DTransform插件创建自定义
缘起我们知道在JQ中,是允许我们自定义一些插件与扩展的。定义的方式也比较简单,采用$.extend就行,那么下面就来看看在JQ中自定义一个插件的实例JQuery