jQuery插件开发全之经典解析(一)——w3cdream|前端学习-开发

'I'm W3cdream,创造',前·所·未·有
jQuery插件开发全之经典解析(一)

发布作者:萧强   发布时间:2015-09-16   阅读次数:7533

一,jQuery插件的开发包括两种:

1,一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数。

2,一种是对象级别的插件开发,即给jQuery对象添加方法。下面就两种函数的开发做详细的说明。

二,而类级别的插件开发又分为三种:

1.1 添加一个新的全局函数;

1.3 使用jQuery.extend(object); 

1.4 使用命名空间

三,下面我们就先分别解释类插件开发的几种:

1.1 添加一个新的全局函数

添加一个全局函数,我们只需如下定义:

jQuery.foo = function() {   
//你自己的插件代码
};   
1.3 使用jQuery.extend(object);

jQuery.extend({      
foo: function() {      
//你自己的插件代码    
},         
}); 

1.4 使用命名空间

虽然在jQuery命名空间中,我们禁止使用了大量的javaScript函数名和变量名。但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突,因此我们习惯将一些方法封装到另一个自定义的命名空间。

jQuery.myPlugin = {          
foo:function() {          
//你自己的插件代码         
},                  
};  
采用命名空间的函数仍然是全局函数,调用时采用的方法:  
$.myPlugin.foo();         
$.myPlugin.bar('baz');  
通过这个技巧(使用独立的插件名),我们可以避免命名空间内函数的冲突。


四,对象级插件开发方法:

(function ($) {
    $.fn.myPlugin = function () {

        //此处没有必要将this包在$号中如$(this),因为this已经是一个jQuery对象。

        this.fadeIn('normal', function () {

         //此处callback函数中this关键字代表一个DOM元素

        });

    };
})(jQuery);

$('#element').myPlugin();
实例------例如:

(function ($) {

    $.fn.maxHeight = function () {
     //下面加你的属性
        var max = 0;

        this.each(function () {
     //下面加你的方法
            max = Math.max(max, $(this).height());

      });
        return max;
    };
})(jQuery);

var tallest = $('div').maxHeight(); //返回高度最大的div元素的高度
插件开发好了怎么用呢?很简单。

新建一个html页面,把jquery文件以及刚刚我们MyPlugin.js文件导入到本次页面中。如下:

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 
<script src="MyPlugin.js" type="text/javascript"></script> 
js代码: 
<script type="text/javascript"> 
$(document).ready(function () { 
$("#w3cdream").click(function () { 
$("#w3cdream").myPlugin(); 
}); 
}); 
</script> 
其实现在99.9999%的插件都是用对象级开发方法开发的,所以大家对类级开发方法理解一下就行了,主要还是对象级开发方法,jQuery插件开发基础及整理都这里,等待后续的教程。


本文由:W3C梦想站-逆风 整理,如需转载正注明出处,

转载请注明出处:http://www.w3cdream.com/content-sort-8-article-483.html 

常用昵称:萧强,全端布道者

姓名:“刘晓强”,W3CDream创始人,目前就职于易点付。专注于web前端和移动端方面知识的研究,熟练掌握photoshop和AI,喜爱Flat UI设计和Metro UI风格,熟练掌握CSS3+HTML5技术、LESS CSS和Sass CSS,还有jQuery框架方面及一些前端框架bootstrap响应式设计等。新浪微博
友荐云推荐

JQuery新手练习场

热点文章

新闻资讯

标签云

友情赞助