zoukankan      html  css  js  c++  java
  • jQuery对象合并、jQuery添加静态方法、jQuery添加DOM实例方法

    实例效果:


    代码演示:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery对象合并、jQuery添加静态方法、jQuery添加DOM实例方法</title>
    <style type="text/css">
        *{padding:5px;margin:5px}
        a{display:block;margin-top:25px;font-weight:bold;}
        input{height:35px;line-height:35px;220px;}
        #Button1{height:45px;}
    </style>
    <script src="/scripts/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
    
        var jQ = jQ || new Object();
    
        //======================$.extend合并实例======================
        $.extend({
            jAL: function () {
                $('input[id=Text1]').val('默认与jQuery对象合并');
            }
        })
        $.extend(jQuery, {
            qAL: function () {
                $('input[id=Text2]').val('与jQuery对象合并');
            }
        })
        $.extend(jQ, {
            AL: function () {
                $('input[id=Text3]').val('与jQ对象合并');
            }
        })
        $(function(){
            $.jAL();
            $.qAL();
            jQ.AL();
        })
        //======================添加静态属性或方法======================
        jQuery.jFN = function () {
            $('input[id=Text4]').val('给jQuery对象添加静态方法');
        }
        jQ.qFN = function () {
            $('input[id=Text5]').val('给jQ对象添加静态方法');
        }
        $(function () {
            jQuery.jFN();
            jQ.qFN();
        })
        //======================添加DOM实例方法======================
        jQuery.fn.fnDOM = function () {
            var dom = $(this);        //切记,这是获取当前的DOM对象
            dom.click(function(){
                $('input[id=Text6]').val('你点击了按钮:jQuery.fn实例');
            })
        }
        $(function () {
            $('input[id=Button1]').fnDOM();
    
            $('input').click(function () {
                var ac = $(this).attr('accesskey');
                if (typeof ac != "undefined") {
                    switch (ac) {
                        case 'jAL': $('textarea[id=TextArea1]').val(jQuery.jAL.toString()); break;
                        case 'qAL': $('textarea[id=TextArea1]').val(jQuery.qAL.toString()); break;
                        case 'AL': $('textarea[id=TextArea1]').val(jQ.AL.toString()); break;
                        case 'jFN': $('textarea[id=TextArea1]').val(jQuery.jFN.toString()); break;
                        case 'qFN': $('textarea[id=TextArea1]').val(jQ.qFN.toString()); break;
                        case 'fn': $('textarea[id=TextArea1]').val(jQuery.fn.fnDOM.toString()); break;
                    }
                }
            })
        })
    </script>
    </head>
    
    <body>
    <a>$.extend合并实例</a>
    <div>
        <input id="Text1" type="text" accesskey="jAL" />
        <input id="Text2" type="text" accesskey="qAL" />
        <input id="Text3" type="text" accesskey="AL" />
    </div>
    <a>添加静态属性或方法</a>
    <div>
        <input id="Text4" type="text" accesskey="jFN" />
        <input id="Text5" type="text" accesskey="qFN" />
    </div>
    <a>添加DOM实例方法</a>
    <div>
        <input id="Text6" type="text" />
        <input id="Button1" type="button" accesskey="fn" value="jQuery.fn实例" />
    </div>
    <a>操作函数</a>
    <div>
        <textarea id="TextArea1" cols="80" rows="10"></textarea>
    </div>
    </body>
    </html>
    
  • 相关阅读:
    [转]protobuf的编译安装
    [转]OpenMP中几个容易混淆的函数(线程数量/线程ID/线程最大数)以及并行区域线程数量的确定
    C++类中静态数据成员MAP如何初始化
    [转]gcc -ffunction-sections -fdata-sections -Wl,–gc-sections 参数详解
    的机器学习开源工具分享
    机器学习常见的采样方法
    图像配准与深度学习方法
    卷积网络中的几何学你了解多少?
    云计算、虚拟化和容器
    在数据科学领域,你掌握这个24个python库就够了!
  • 原文地址:https://www.cnblogs.com/sntetwt/p/4684055.html
Copyright © 2011-2022 走看看