第十一章 jQuery插件

jQuery插件机制:

在开发中,有这样的情况:需要实现一某种功能,但是我们发现jQuery中并没有我需要的方法,而我们又不可以去修改jQuery源码,于是我们可以使用jQuery中提供的插件扩展机制。

常用插件:

    https://plugins.jquery.com

插件定义方式:

  • jQuery全局插件方法:

    $.ajax();//些类方法为jQuery的全局方法,可以在jQuery环境下任何地方法直接使用。

  $.extend({
        fn1 : function(){},
        fn2 : function(){},
        ...
  });
  调用执行:
          $.fn1();
          $.fn2();  
  • jQuery局部插件:

$("div").css();//局部方法,某个jQuery对象调用

$.fn.extend({
        fn1 : function(){},
        fn2 : function(){},
        ...
  });
调用执行:
  $("div").fn1();
  • 插件方法中的this
        $.extend({
            fn1:function(){
                console.log(this === $);//true
            }
        });
        $.fn1();//true,说明方法中的this为jQuery对象
        $.fn.extend({
            fn1:function(){
                console.log(this.html());//正常输出元素内容
            }
        });
        $("div").fn1();

因为全局插件方法只能用$来调用,因此方法中的this实际上就是jQuery本身
而局部插件中的方法,使用哪个对象调用方法,方法中的this就指向谁,并且对象是jQuery包装后的对象。

validate插件的简单使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--jquery引入-->
        <script src="../js/jquery.min.js"></script>
        <!--validate插件引入-->
        <script src="jquery.validate.js"></script>
        <!--依赖插件引入-->
        <script src="jquery.validate.messages_zh.js"></script>
    </head>
    <body>
        <form action="123.html">
            <!--
                相关属性设置
                class="required":必填验证
                minlength = "8" maxlength="10":长度验证
                class="email":验证邮箱
                class="url":网址验证
                class="url":date日期验证
            -->
            <p>用户名:<input type="text" class="required" minlength = "8" maxlength="10" name="uname"/></p>
            <p>邮箱:<input type="text" class="required email" name="email"/></p>
            <p>网址:<input type="text" class="required url" name="url"/></p>
            <p>日期:<input type="text" class="required date"/></p>
            <input type="submit" value="提交"/>
        </form>
    </body>
</html>
<script type="text/javascript">
    $("form").validate();//调用插件
</script>

自定义插件

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容