jQuery插件 - Sukksa's Blog

归档69

ES613 Vue12 javaScript9 jQuery7 Ajax4 git4 react4 cesium3 DOM3 shader3 TypeScript2 less1 node1 note1 Threejs1 实战1

393 字

2 分钟

jQuery插件

2021-10-25

jQuery

我们可以扩展 jQuery 来实现自定义方法。这种方式也称为编写 jQuery 插件。
在使用jQuery插件时，应该先引入jQuery库文件，然后在引用jQuery插件

扩展jQuery的工具方法#

扩展jQuery的工具方法，$.extend(object) 用来在jQuery命名空间上增加新函数：

1
  //min方法返回一个较小值，max返回一个较大值
2
  $.extend({
3
    min: function (a, b) {
4
      return a < b ? a : b
5
    },
6
    max: function (a, b) {
7
      return a > b ? a : b
8
    }
9
  })
10
  //使用
11
  $.min(3, 5) //3
12
  $.max(3, 5) //5

扩展jQuery对象的方法#

扩展jQuery对象的方法，$.fn.extend(object) 扩展 jQuery 对象来提供新的方法

1
    $.fn.extend({
2
  // checkAll() : 全选
3
    checkAll: function () {
4
        this.prop('checked', true) // this是jQuery对象
5
        return this   // this是jQuery对象
6
    },
7
  // unCheckAll() : 全不选
8
    unCheckAll: function () {
9
        this.prop('checked', false)
10
        return this
11

12
    },
13
  // reverseCheck() : 全反选
14
    reverseCheck: function () {
15
        // this是jQuery对象
16
        this.each(function () {
17
            // this是dom元素
18
            this.checked = !this.checked
19
        })
20
        return this
21
    }
22
    })
23
  // 使用, 全选复选框，并将复选框的value更改为111
24
  $(':checkbox[name=items]').checkAll().attr("value", "111")

注：插件函数最后要 return this 以支持链式调用；

多库共存#

问题 : 如果有2个库都有$, 就存在冲突
解决 : jQuery库可以释放$的使用权, 让另一个库可以正常使用, 此时jQuery库只能使用jQuery了

API : jQuery.noConflict()

1
  //自定义js文件
2
  (function () {
3
    window.$ = function () {
4
      console.log('my lib $()...')
5
    }
6
  })()
7

8
  //调用
9
  // 释放$的使用权
10
  jQuery.noConflict()
11
  // 调用myLib中的$
12
  $()
13
  // 要想使用jQuery的功能, 只能使用jQuery
14
  jQuery(function () {
15
    console.log('文档加载完成')
16
  })