Question

新手问题请耐心等待。我正在关注这个tutorial。它说明了如何编写一个非常简单的插件。但请问如何使用/调用此插件？

<script>
    function changeColor($obj, color) {  
        $obj.css({color : color});  
    }  

    $.fn.myPlugin = function(options) {  

        return this.each(function() {  
            var $this = $(this);  

            changeColor($this, options.color);          
        });  
    };
</script>

Answer 1

jsFiddle

<强> HTML

<div>Hello World!</div>

JavaScript（已包含jQuery）

function changeColor($obj, color) {
    $obj.css({
        color: color
    });
}

$.fn.myPlugin = function (options) { 
    return this.each(function () {
        var $this = $(this);

        changeColor($this, options.color);
    });
};
$("div").myPlugin({
    color: "red"
});

<小时/> 这是一个完整的HTML代码结构：

<!doctype html>
<html>
  <head>
    <title></title>
  </head>

  <body>
    <div>Hello World!</div>

    <!-- Prepend http: in case you're working from the local file system -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
      function changeColor($obj, color) {
          $obj.css({
              color: color
          });
      }

      $.fn.myPlugin = function (options) { 
          return this.each(function () {
              var $this = $(this);

              changeColor($this, options.color);
          });
      };


      $("div").myPlugin({
          color: "red"
      });
    </script>
  </body>
</html>

如何使用这个最简单的jQuery插件

1 个答案: