jquery自定义插件怎么实现?

TheDisguiser 2020-08-03 10:14:30 java常见问答 7158

在jQuery中除了它自带的插件其实我们还可以自定义插件,小伙伴们知道要怎么实现吗?下面就一起来看看吧。

jQuery插件编写原则:

1、命名 jQuery.<插件名>.js

2、插件内部,this指向的是当前选择器取得的JQuery对象,不是内部对象, 例如click(), 内部的this指向的是DOM元素

3、this.each可以遍历所有元素

4、插件头部加分号,防止压缩的时候出问题

5、记得采用闭包写法

jQuery自定义插件两种方法:

一、$.extend

(function ($)
{
    $.extend(
    {
        Address: function ()
        {
            console.log("无极之道,在我的内心延续");
        }
    });
})(jQuery);

接着再引用Address():

 function GetAddress()
 {
     $.Address();
 }

PS:为避免$标识符被重新定义,出现冲突,导致无法使用,在匿名函数中通常会以$作为形参,在调用时用jQuery作为实参

二、 $.fn.extend

(function ($)
{
    $.fn.extend(
    {
        Job: function ()
        {
            console.log("此剑之势、愈斩愈烈");
            return this;
        }
    });
})(jQuery);

接着调用$().Job()

  function GetJob()
  {
      // console.log($().Job())
      $("#job")
          .Job()
          .css("background", "red");

以上就是本篇文章的所有内容,自定义插件实际挺简单的,主要还是看思想,更多java常见问题及解决方法可以关注我们了解具体。

推荐阅读:

jquery框架原理是什么?jquery原理解析

jquery框架是什么?定义概念介绍

如何使用jquery插件?