登录  /  注册
首页 > web前端 > js教程 > 正文

jquery插件的创建方法有哪些?jquery插件创建的方法

不言
发布: 2018-08-15 10:33:04
原创
2374人浏览过

本篇文章给大家带来的内容是关于jquery插件的创建方法有哪些?jquery插件创建的方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

一、jQuery插件的创建可以有三种方法

1.通过$.extend()来扩展jQuery

2.通过$.fn 向jQuery添加新的方法

3.通过$.widget()应用jQuery UI的部件工厂方式创建

方法1太简单,创建后通过$.myfunction()方式调用,不能对指定元素调用。

方法3相对于方法2太复杂。

方法2就是常用的创建jq插件的方法。可以对指定元素进行操作。例如$('#title').myfunction();

二、jQuery插件创建格式

$.fn.myfunction = function() {
    //在这里面,this指的是用jQuery选中的元素
    //example :$('a'),则this=$('a')
    this.css('color', 'red');
}
登录后复制

如果想要支持链式调用只需return一下即可。

$.fn.myfunction = function() {
    //在这里面,this指的是用jQuery选中的元素
    //example :$('a'),则this=$('a')
    return this.css('color', 'red');
}
登录后复制

三、让jquery插件接受参数,使用$.extend方法

$.fn.myPlugin = function(options) {
    var defaults = {//设置默认值
        'color': 'red',
        'fontSize': '12px'
    };
    var settings = $.extend(defaults, options);//这种方法会使第一个参数会被修改,为了保持变量defaults的值不变应该使用以下代码
    //var settings = $.extend({},defaults, options);//在extend方法的第一个参数添加一个空对象。
    return this.css({
        'color': settings.color,
        'fontSize': settings.fontSize
    });
}
登录后复制

四、面向对象的jquery插件开发

为了以后代码维护和可读性我们可以进行面向对象的方法开发插件。

var Beautifier = function(ele, opt) {
    this.$element = ele,  //获取当前选中的jq对象。
    this.defaults = {
        'color': 'red',
        'fontSize': '12px'
    },
    this.options = $.extend({}, this.defaults, opt)
}
//定义Beautifier的方法
Beautifier.prototype = {
    beautify: function() {
        return this.$element.css({
            'color': this.options.color,
            'fontSize': this.options.fontSize
        });
    }
}
//在插件中使用Beautifier对象
$.fn.myPlugin = function(options) {
    //创建Beautifier的实体
    var beautifier = new Beautifier(this, options);
    //调用其方法
    return beautifier.beautify();
}
登录后复制

相关推荐:

jQuery简单滚动插件

jQuery创建插件的代码分析_jquery

详解jQuery插件开发方式

10条建议帮助你创建更好的jQuery插件_jquery

以上就是jquery插件的创建方法有哪些?jquery插件创建的方法的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号