jquery插件1

最新推荐文章于 2022-03-22 00:59:45 发布

酷jjs

最新推荐文章于 2022-03-22 00:59:45 发布

阅读量601

点赞数

分类专栏：前端笔记 jquery jquery插件文章标签： jquery插件

本文链接：https://blog.csdn.net/qq_32584661/article/details/69230350

版权

前端笔记同时被 3 个专栏收录

165 篇文章 2 订阅

订阅专栏

jquery

32 篇文章 0 订阅

订阅专栏

jquery插件

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个jquery插件</title>
    <script src="js/jquery.min.js"></script>
    <script src="extend/color.js"></script>   <!--插件的引入-->
    <style>
        .wrap{display:flex;flex-flow: wrap;}
        .box{width:100px;height:100px;border:1px solid #000;margin:10px;}
    </style>
</head>
<body>

<div class="wrap">
    <!--<div class="box"> 1</div>-->
</div>

<script>

    $(function(){
        var  num =11;

        for(var i=1;i<num;i++ ){
            var  oBox=$("<div class='box'>"+i+"</div>")
            $(".wrap").append(oBox)
        };


        $(".box").click(function(){
            $(this).bgcolor("red").color("blue");   //插件的使用
        });



    });
</script>

</body>
</html>

color.js文件内容：

/*
;(function($){
    //这里编写插件代码
})(jQuery);
*/


;(function($){
    $.fn.extend({

        "color":function(value){
            return this.css("color",value);
        },

        "bgcolor":function(value){
            return this.css("background-color",value);
        }

    })

})(jQuery);

效果图预览：

这里写图片描述

酷jjs

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery插件1

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>第一个jquery插件</title> <script src="js/jquery.min.js"></script> <script src="extend/color.js"></script> 
复制链接

扫一扫

专栏目录