8 HTML&JS等前端知识系列之jquery的自定义方法

preface

有时候我们在前端写jquery的时候，会自己自定义些方法，这样可以不需要重复造轮子。先说说2种自定义方法的区别：

1. 不跟在选择器后面的
2. 跟在选择器后面的。

那下面说说如何自定义jquery方法。

使用extend方法来扩展

方法1

下面这样方式来扩展jquery的方法是不能在前面添加选择器的，直接调用方法即可。

代码如下：

<script src="jquery-2.2.3.js"></script>
<script>
    jQuery.extend({
        wocao: function () {    //wocao为方法名，与function用冒号隔开
            return "艹"
        },
    });

    var ret = $.wocao();      // 调用刚才的方法
    alert(ret)

</script>

方法2

这个方法在jQuery和extend之间添加了fn，表示可以跟在选择器之后。如下面所示：

<script src="jquery-2.2.3.js"></script>
<script>
    jQuery.fn.extend({
        fuck:function () {
            return 'hehe'
        },
    })

    var nid = $('h1').fuck();   // 添加了fn，就可以跟在选择器之后，那么下面alert才能出来。
    alert(nid)
</script>

自执行函数与jqueyr自定义的方法

我们自定义的方法通常是放在一个js文件里，所以这又涉及到，当别人引用你这个js脚本时，就要通过自执行函数来完成自定义方法的初始化工作。下面请看例子：

我们新建的一个js文件,文件名是selfdefine.js，文件代码如下：

/**
 * Created by Leo on 2016/12/21.
 */

(function(arg){
    arg.extend({
        wocao: function () {
            return "艹"
        },
    });

  arg.fn.extend({
        fuck:function () {
            return 'hehe'
        },
    });
})(jQuery);

然后在另一个html引用这个js脚本

<script src="jquery-2.2.3.js"></script>
<script src="selfdefine.js"></script>
<script>
    var he = $.wocao();
    alert(he)
    var nid = $('h1').fuck();
    alert(nid)
</script>

访问这个html页面，能够弹框出来。

使用案例：

我们前端需要验证用户输入的IP，以及其他字段，由于第三方的插件看的眼花缭乱，且用起来嫌麻烦，所以呢我们在这里可以自定义jquery的方法来实现对用户输入的验证，我这里是自己单独写的一个js文件，需要调用里面的方法时候，我们首先在html页面引入，代码如下：

    <script src="/static/js/selfdefine.js" type="text/javascript"></script>

其次再看自定义的js文件代码：

/**
 * Created by Leo on 17-3-23.
 */

(function(arg) {
    arg.extend({
        checkip: function (value) {   // 对传入的值 进行校验，判断是否满足IP
            return /^(([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))\.)(([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))\.){2}([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))$/.test(value);
        }
    });

    arg.extend({
        checkNum: function (value) {   // 判断是否为正整数
            return /^[0-9]*[1-9][0-9]*$/.test(Number(value))
        }
    })

    arg.extend({
        checkLength: function(value) { // 判断是否为空,为空返回false
            if(value.length == 0 ){
                return false
            }else{
                return true
            }
        }
    })
})(jQuery);

然后我们看看如何使用这些方法：

我们首先需要对哪些字段检测，那么就if去判断就可以了。代码如下所示：

 if($.checkip(dns_StartIp){   // 检测指定的值是否输入正确，这个值可以从用户输入框内获取
     /* logic code */
 }