jQuery 自定义插件（详细步骤）

  • 自定义插件方法

  • html 中使用：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="jquery-3.4.1.js"></script>
  <script src="jquery-dzm-min.js"></script>
  <script>
    $(function () {
      // 调用自定义插件中的方法
      $('button').on('click', function () {
        $(this).setBgColor('red');
      })
    })
  </script>
</head>
<body>
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
  <button>按钮4</button>
  <button>按钮5</button>
  <button>按钮6</button>
</body>
</html>
  • jquery-dzm-min.js :
// 自定义jQuery插件
$.fn.setBgColor = function (color) {
  this.css({'background-color': color});
}
  • demo 效果:

版权声明：本文为zz00008888原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。