jQuery插件扩展与多库共存

Posted 2021-03-18 jerryleeplus

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery插件扩展与多库共存相关的知识，希望对你有一定的参考价值。

查看扩展写法

　　1、工具类扩展

　　2、对象方法扩展

/*
 扩展jQuery的工具方法 : $.extend(object)
   min(a, b) : 返回较小的值
   max(c, d) : 返回较大的值
   leftTrim() : 去掉字符串左边的空格
   rightTrim() : 去掉字符串右边的空格
 */

//正则
/*
 ^   匹配字符串开始
 s  匹配空格
 +   匹配一次或者多次
 $   匹配字符串的末尾
 */
//扩展$ 
$.extend({
  min: function (a, b) {
    return (a < b) ? a : b
  },
  max: function (a, b) {
    return (a > b) ? a : b
  },
  leftTrim: function (strToBeTrimed) {
    return strToBeTrimed.replace(/^s+/, ‘‘)
  },
  rightTrim: function (strToBeTrimed) {
    return strToBeTrimed.replace(/s+$/, ‘‘)
  }
})


//扩展 $(‘#id‘).XXXXX
//$.fn.extend(object)
// checkAll() : 全选
// unCheckAll() : 全不选
// reverseCheck() : 全反选
$.fn.extend({
  checkAll: function () {
    // console.log(‘checkAll‘)
    this.prop(‘checked‘, true)
  },
  unCheckAll: function () {
    this.prop(‘checked‘, false)
  },
  reverseCheck: function () {
    this.each(function () {
      this.checked = !this.checked
    })
  }
})

其他库也使用$标识时，jQuery可以释放$使用权

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>26_多库共存</title>
  <style type="text/css">
    * {
      margin: 0px;
    }

    .div1 {
      position: absolute;
      width: 100px;
      height: 100px;
      top: 50px;
      left: 10px;
      background: red;
    }
  </style>
</head>
<body>
<!--
问题 : 如果有2个库都有$, 就存在冲突
解决 : jQuery库可以释放$的使用权, 让另一个库可以正常使用, 此时jQuery库只能使用jQuery了
API : jQuery.noConflict()
-->
<script src="js/myLib.js" type="text/javascript"></script>
<script src="js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  //释放$的使用权,让另一个库可以正常使用
  jQuery.noConflict()

  //使用的是myLib.js中的$
  $()

  //使用jQuery
  jQuery(function () {
    jQuery(‘body‘)
  })
</script>
</body>
</html>

以上是关于jQuery插件扩展与多库共存的主要内容，如果未能解决你的问题，请参考以下文章