jQuery插件扩展与多库共存

2021-04-30 08:38

阅读:692

标签:height   tle   返回   htm   checked   back   字符   margin   空格   

查看扩展写法

  1、工具类扩展

  2、对象方法扩展

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

//正则
/*
 ^   匹配字符串开始
 \s  匹配空格
 +   匹配一次或者多次
 $   匹配字符串的末尾
 */
//扩展$ 
$.extend({
  min: function (a, b) {
    return (a  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>

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插件扩展与多库共存

标签:height   tle   返回   htm   checked   back   字符   margin   空格   

原文地址:https://www.cnblogs.com/jerryleeplus/p/12153165.html


评论


亲,登录后才可以留言!