preface
有时候我们在前端写jquery的时候，会自己自定义些方法，这样可以不需要重复造轮子。先说说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)|(1dd)|(2([0-4]d|5[0-5]))).)(([1-9]|([1-9]d)|(1dd)|(2([0-4]d|5[0-5]))).){2}([1-9]|([1-9]d)|(1dd)|(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 */
}