最新消息:文章中包含代码时,请遵守代码高亮规范!

创建一个基本的jQuery插件【原创】

JavaScript Jonny 695浏览 0评论
$('body').hide();

这是一个很简单的jquery代码,但是每当我们用$函数来选择元素,它就会返回给我们一个jquery对象,这个对象包括我们所有使用过的方法。jquery对象从$.fn对象中获取这些方法,所以我们如果想写自己的方法也需要包含这些方法。
比如我们写一个让宽度变为200px的方法:

$.fn.width200 = function(){
    this.css('width','200px');
};
$('body').width200();

这就算一个jquery最简单的插件了;但是典型jquery对象将包含对任何数量的DOM元素的引用,插件的制作有时还需要自定义一些参数,下面是自定义宽度的小插件,:

$.fn.widthDiy = function(option){
    var d = {
        width:'200'
    };
    var o = $.extend(d,option);
    return this.each(function(){
        this.css('width',o.width + 'px');
    })
};
$('body').widthDiy({
    width:'300'
});

这样一个基本的插件就成了,插件的封装有很多种,我在这里只说一些基础的理解,封装插件有利于提高我们写js的效率,避免代码的冗余。

转载时请注明出处及相应链接,本文永久地址:https://blog.yayuanzi.com/23047.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者Jonny的打赏,我们会更加努力!    如果您想成为作者,请点我

发表我的评论
取消评论

表情