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

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

Etui۹(･༥･´)و ̑̑

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

阅读量587

点赞数 1

分类专栏： jQuery JavaScript 文章标签： jquery javascript js 自定义jQuery插件

本文链接：https://blog.csdn.net/m0_47015897/article/details/117337467

版权

JavaScript 同时被 2 个专栏收录

30 篇文章 0 订阅

订阅专栏

jQuery

7 篇文章 0 订阅

订阅专栏

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

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

本文自定义扩展的方法：

给 $ 添加4个工具方法:
- min(a, b) : 返回较小的值
- max(c, d) : 返回较大的值
- leftTrim() : 去掉字符串左边的空格
- rightTrim() : 去掉字符串右边的空格
给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="反选"/>

<!--
1. 扩展jQuery的工具方法
  $.extend(object)
2. 扩展jQuery对象的方法
  $.fn.extend(object)
-->
<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)

(function(){
    // 1. 给 $ 添加4个工具方法:
    // * min(a, b) : 返回较小的值
    // * max(c, d) : 返回较大的值
    // * leftTrim() : 去掉字符串左边的空格
    // * rightTrim() : 去掉字符串右边的空格

    //扩展$的方法
    $.extend({
        min: function (a, b){
            return (a<b ? a:b); 
        },
        max: function(a, b){
            return (a>b ? a:b);
        },
        leftTrim: function(str){
            return str.replace(/^\s+/, "");
        },
        rightTrim: function(str){
            return str.replace(/\s+$/, "");
        }
    });

    // 2. 给jQuery对象 添加3个功能方法:
    // * checkAll() : 全选
    // * unCheckAll() : 全不选
    // * reverseCheck() : 全反选

    //扩展jQuery对象的方法
    $.fn.extend({
        checkedAll: function(){
            this.prop('checked', true);//this是jQuery对象
        },
        unCheckedAll: function(){
            this.prop('checked', false);
        },
        reverseChecked: function(){
            //this是jQuery对象
            this.each(function(){
                //this是DOM元素
                this.checked = !this.checked;
            });
        }
    });

})();

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

Etui۹(･༥･´)و ̑̑

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
自定义jQuery插件——jQuery方法的扩展与jQuery对象的扩展

本文内容：如何实现jQuery对象和方法的扩展jQuery提供了两个方法($.extend和＄.fn.extend)，可以让用户自行扩展插件(自定义的方法)，以下将通过例举代码的形式体现出两者的效果。本文自定义扩展的方法：给 $ 添加4个工具方法:min(a, b) : 返回较小的值max(c, d) : 返回较大的值leftTrim() : 去掉字符串左边的空格rightTrim() : 去掉字符串右边的空格给jQuery对象添加3个功能方法:checkAll() : 全选
复制链接

扫一扫

专栏目录