自定义jQuery插件——jQuery方法的扩展与jQuery对象的扩展

妖狐艹你老母 2023-10-08 12:51 16阅读 0赞

本文内容：  
如何实现jQuery对象和方法的扩展

jQuery提供了两个方法($.extend和＄.fn.extend)，可以让用户自行扩展插件(自定义的方法)，以下将通过例举代码的形式体现出两者的效果。

本文自定义扩展的方法：

1.  给 $ 添加4个工具方法:
    
     *  min(a, b) : 返回较小的值
     *  max(c, d) : 返回较大的值
     *  leftTrim() : 去掉字符串左边的空格
     *  rightTrim() : 去掉字符串右边的空格
2.  给jQuery对象 添加3个功能方法:
    
     *  checkAll() : 全选
     *  unCheckAll() : 全不选
     *  reverseCheck() : 全反选

例举源码：  
1、html文件

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>25_扩展插件</title>
      <style type="text/css">
        * {
          
          margin: 0px;
        }
    
        .div1 {
          
          position: absolute;
          width: 100px;
          height: 100px;
          top: 50px;
          left: 10px;
          background: red;
        }
      </style>
    </head>
    <body>
    <input type="checkbox" name="items" value="足球"/>足球
    <input type="checkbox" name="items" value="篮球"/>篮球
    <input type="checkbox" name="items" value="羽毛球"/>羽毛球
    <input type="checkbox" name="items" value="乒乓球"/>乒乓球
    <br/>
    <input type="button" id="checkedAllBtn" value="全　选"/>
    <input type="button" id="checkedNoBtn" value="全不选"/>
    <input type="button" id="reverseCheckedBtn" value="反选"/>
    
    
    <script src="js/jquery-1.10.1.js" type="text/javascript"></script>
    <script src="js/Etui_jQuery_plugin.js"></script>
    <script type="text/javascript">
      var str = $.leftTrim('   abc   ');
      console.log(str+'a');
      str = $.rightTrim(str);
      console.log(str+'a')
    
      //测试jQuery扩展的方法
      $('#checkedAllBtn').click(function(){
          
        $('[name = items]').checkedAll();
      });
      $('#checkedNoBtn').click(function(){
          
        $('[name = items]').unCheckedAll();
      });
      $('#reverseCheckedBtn').click(function(){
          
        $('[name = items]').reverseChecked();
      });
    </script>
    </body>
    </html>

2、js文件(Etui\_jQuery\_plugin.js)

如有疑惑，可参照B站尚硅谷前端jQuery教程(https://www.bilibili.com/video/BV1ts411E7ag?p=39)  
希望本文对你有所帮助，加油！