zoukankan      html  css  js  c++  java
  • 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)|(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 */
     }
     
     
    
  • 相关阅读:
    (转)灵活运用 SQL SERVER FOR XML PATH
    Docker
    Springboot
    Redis
    Centos7.6在线安装mysql8.0.16
    Centos7.6安装jdk1.8
    Dubbo
    相关性检验
    逻辑回归和决策树上的一些区别
    postgresql 学习手册(客户端)
  • 原文地址:https://www.cnblogs.com/liaojiafa/p/6209224.html
Copyright © 2011-2022 走看看