编写jquery插件

最新推荐文章于 2022-08-11 22:05:14 发布

_徐林

最新推荐文章于 2022-08-11 22:05:14 发布

阅读量257

点赞数

分类专栏： js Jquery

本文链接：https://blog.csdn.net/TestDatas/article/details/80394730

版权

js 同时被 2 个专栏收录

6 篇文章

订阅专栏

Jquery

1 篇文章

订阅专栏

通

1.过 $.extend()来扩展jQuery 2.通过$ .fn 向jQuery添加新的方法
3.通过$.widget()应用jQuery UI的部件工厂方式创建
通常我们使用第二种方法来进行简单插件开发，说简单是相对于第三种方式。第三种方式是用来开发更高级jQuery部件的，该模式开发出来的部件带有很多jQuery内建的特性，比如插件的状态信息自动保存，各种关于插件的常用方法等，非常贴心，这里不细说。
下面开发一个简单的插件
看下面代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/jquery-3.3.1.js"></script>
        <script src="js/plugs.js"></script>
    </head>
    <body>
        <a href="http://www.baidu.com">我的博客</a>
        <a href="https://blog.csdn.net/testdatas">我的论文</a>
        <a href="http://fanyi.youdao.com/">我的网站</a>

    <script type="text/javascript">
      $(function(){
       $("a").plugName({

       });
    })


</script>
    </body>
</html>

下面是自己写的jquery插件

$.fn.plugName=function(){

    this.css("color","red");//这个this是指选择器DOM元素集合
    //return  加上这个 可以支持jquery的链式调用
    return this.each(function(){//这个this指的是选择器的dom元素集合
        this.append($(this).attr('href'));//这个this指的是dom元素
    })

}

效果如下
这里写图片描述

下面来让插件接收方法

插件js文件

$.fn.plugParam=function(options){
    //设置默认参数  json格式的集合
    var defaults={
        "color":"red",
        "fontSize":"20px"
    }
    //$.extend来处理插件接收
    var setParam=$.extend({},defaults,options);
    return  this.css({
        "color":setParam.color,
        "fontSize":setParam.fontSize
    })
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/jquery-3.3.1.js"></script>
        <script src="js/plugs.js"></script>
    </head>
    <body>
        <a href="http://www.baidu.com">我的博客</a>
        <a href="https://blog.csdn.net/testdatas">我的论文</a>
        <a href="http://fanyi.youdao.com/">我的网站</a>

    <script type="text/javascript">
    $(function(){
       $("a").plugParam({
        "color":"blue",
        "fontSize":"50px"
       });
    })


</script>
    </body>
</html>