jquery插件开发

最新推荐文章于 2024-01-05 19:47:22 发布

大喵君七七

最新推荐文章于 2024-01-05 19:47:22 发布

阅读量205

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_37055021/article/details/78853714

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

index.html文件

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- ÉÏÊö3¸ömeta±êÇ©*±ØÐë*·ÅÔÚ×îÇ°Ãæ£¬ÈÎºÎÆäËûÄÚÈÝ¶¼*±ØÐë*¸úËæÆäºó£¡ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">


  </head>
  <body>
    <h1>hello word</h1>
    <!-- <div id="thediv">测试</div> -->
    <a href="">dddd</a>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="jquery-3.2.1.min.js"></script>
    <script src="jqueryTest.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
   <!--  <script src="js/bootstrap.min.js"></script>-->
  </body>

  <script type="text/javascript">
      /*$("#thediv").color("yellow"); */
      $('a').myPlugin({
          'color': '#2C9929',
          'fontSize': '20px'
      });
  </script>
</html>

jqueryTest.js文件

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

    color: function(value){
      return this.css("color",value);
    }
    //如果用了 this.each(function() {
    //要用 $(this)


  });*/

$.fn.myPlugin = function(options) {
    var defaults = {
        'color': 'red',
        'fontSize': '12px'
    };
    var settings = $.extend({},defaults, options);//将一个空对象做为第一个参数
    return this.css({
        'color': settings.color,
        'fontSize': settings.fontSize
    });
}

})(jQuery);

Reference:

jQuery官网学习中心关于插件开发的文章： http://learn.jquery.com/plugins/
jQuery官网插件中心：http://plugins.jquery.com/
jQuery官网插件发布指南：http://plugins.jquery.com/docs/publish/
JavaScript Hoist ：http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html
Google Web Developer Tool : https://developers.google.com/closure/

大喵君七七

关注

0
点赞
踩
0

收藏

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

index.html文件<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, init
复制链接

扫一扫