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 */
     }
     
     
    
  • 相关阅读:
    python模块—socket
    mac os系统的快捷键
    教你如何将UIImageView视图中的图片变成圆角
    关于ASP.NET MVC
    iOS 日期格式的转换
    将App通过XCode上传到AppStore 出现这个错误“An error occurred uploading to the iTunes Store”的解决方法
    关于MAC OS下面两个软件的功能改进——Dictionary和Fit 输入法
    分享一下上个星期的香港行程
    【博客园IT新闻】博客园IT新闻 iPhone 客户端发布
    解决Entity Framework Code First 的问题——Model compatibility cannot be checked because the database does not contain model metadata
  • 原文地址:https://www.cnblogs.com/liaojiafa/p/6209224.html
Copyright © 2011-2022 走看看