jQuery自定义插件

2021-11-24 22:32:26 阅读：105 来源： 互联网

标签：jQuery function 插件自定义 checkAll items unCheckAll leftTrim

我们可以扩展jquery，自定义方法，在使用的时候可以直接调用需求： 1. 给 $ 添加4个工具方法: * min(a, b) : 返回较小的值 * max(c, d) : 返回较大的值 * leftTrim() : 去掉字符串左边的空格 * rightTrim() : 去掉字符串右边的空格 2. 给jQuery对象添加3个功能方法: * checkAll() : 全选 * unCheckAll() : 全不选 * reverseCheck() : 全反选 my_jQuery-plugin.js：

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

  // 扩展$的方法
  $.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+$/, '')
    }
  })

  // 扩展jQuery对象的方法
  $.fn.extend({
    checkAll: function () {
      this.prop('checked', true) // this是jQuery对象
    },
    unCheckAll: function () {
      this.prop('checked', false)
    },
    reverseCheck: function () {
      // this是jQuery对象
      this.each(function () {
        // this是dom元素
        this.checked = !this.checked
      })
    }
  })

})()

使用：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"> 
  <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 type="text/javascript" src="js/my_jQuery-plugin.js"></script>
<script type="text/javascript">
  /*
   需求：
   1. 给 $ 添加4个工具方法:
     * min(a, b) : 返回较小的值
     * max(c, d) : 返回较大的值
     * leftTrim() : 去掉字符串左边的空格
     * rightTrim() : 去掉字符串右边的空格
   2. 给jQuery对象 添加3个功能方法:
     * checkAll() : 全选
     * unCheckAll() : 全不选
     * reverseCheck() : 全反选
   */
  console.log($.min(3, 5), $.max(3, 5))
  var string = '   my atguigu    '
  console.log('-----' + $.leftTrim(string) + '-----')
  console.log('-----' + $.rightTrim(string) + '-----')

  //$items为jquery的对象
  var $items = $(':checkbox[name=items]')
  $('#checkedAllBtn').click(function () {
    $items.checkAll()
  })
  $('#checkedNoBtn').click(function () {
    $items.unCheckAll()
  })
  $('#reverseCheckedBtn').click(function () {
    $items.reverseCheck()
  })
</script>
</body>
</html>

标签：jQuery,function,插件,自定义,checkAll,items,unCheckAll,leftTrim
来源： https://www.cnblogs.com/anjingdian/p/15600566.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

jQuery自定义插件