zoukankan      html  css  js  c++  java
  • 实例说明扩展JQuery方式

    如何扩展Jquery?

    1. 有两种方式来扩展JQuery,分别是:

    $.extend(object): 为域名jQuery增加方法,为静态方法,全局方法,任何人都可以调用,调用的时候,需要直接加上$或者jQuery前缀。

    $.fn.extend(object): $.fn = $.prototype, 因此可以从这里看出,这张扩展方式是在为每个jQuery对象增加方法,因为每个jQuery对象的实例,都可以获得在这里扩展的方案。调用的时候,不需要添加特殊的前缀,直接选取jQuery对象之后,就可以调用了。

    2. jQuery是一个封装的非常好的类,如果使用$(“#id”)可以生成一个jQuery对象,但是注意,jQuery对象并不是真正的HTML标记所对应的对象,而是包含一个标记所对应的数组,数组中的成员才是标记所对应的对象。

    下面代码可以演示这两种方式:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
        <title></title>
        <script type="text/javascript" src="../lib/jquery-1.6.3.js"></script>
        <script type="text/javascript">
    
    
            $(function() {
    
                $.extend({
                            staticextend: function() {
                                alert("This is a static extend function, called staticextend.")
                            }
                        });
    
                $.fn.extend({
                            jqueryextend: function() {
                                alert("all jquery object can call this function, and I am jqueryextend.")
                            }
                        });
    
                //以静态方法的形式直接使用jquery本身的对象调用
                if ($.staticextend) {
                    $.staticextend();
                } else {
                    alert("There is not a function called staticextend in Jquery Object itself.");
                }
                //以静态方法的形式直接调用jqueryextend
                if ($.jqueryextend) {
                    $.jqueryextend();
                } else {
                    alert("There is not a function called jqueryextend in Jquery Object itself. You must get wrong.");
                }
    
                //获取一个jquery实例
                var jdiv = $(".idtest");
                //一个jquery实例本身包含了一个数组对象
                if (jdiv.length>1) {
                    alert("we can see jdiv contains an array object!");
                }
    
                //如果jquery有多个,需要这样调用。
                jdiv.each(function() {
                    alert("I am "+ $(this).attr("id")); //这里不能直接使用this,因为this是htmlelement,没有attr方法。
                    if (jdiv.staticextend) {
                        jdiv.staticextend();
                    } else {
                        alert("There is not a function called staticextend in jdiv ");
                    }
    
                    if (jdiv.jqueryextend) {
                        jdiv.jqueryextend();
                    } else {
                        alert("There is not a function called jqueryextend in jdiv. You must get wrong.");
                    }
                });
    
            });
        </script>
    </head>
    <body>
    
    <div id="one" class="idtest"></div>
    <div id="two" class="idtest"></div>
    </body>
    </html>
    

    如果扩展jquery已经存在的方法,比如拿jqgrid来说,如果你想修改某个方法,让他在方法的执行前后做些事情,这样的话,我们可以这样做:

    var oldEditCell = $.fn.jqGrid.editCell;
    $.jgrid.extend({
        editCell: function (iRow,iCol, ed){
            var ret;
            // do someting before
            ret = oldEditCell.call (this, iRow, iCol, ed);
            // do something after
            return ret; // return original or modified results
        }
    });
    

    在这里,我们覆盖了原始的editCell方法,你可以在这个方法的前后做些事情。


  • 相关阅读:
    安装开发工具
    CSS基础
    CSS动画
    CSS效果
    CSS布局
    CSS预处理语言
    React开发笔记
    Vue2.0学习笔记
    Vue-cli3.0开发笔记
    项目开发技巧
  • 原文地址:https://www.cnblogs.com/kevinhigher/p/2213759.html
Copyright © 2011-2022 走看看