实例效果：

代码演示：

<!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;width: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>

jQuery对象合并、jQuery添加静态方法、jQuery添加DOM实例方法的更多相关文章

  1. 详细图解jQuery对象，以及如何扩展jQuery插件

    详细图解jQuery对象,以及如何扩展jQuery插件 早几年学习前端,大家都非常热衷于研究jQuery源码.我还记得当初从jQuery源码中学到一星半点应用技巧的时候常会有一种发自内心的惊叹,“原来 ...

  2. 前端基础进阶（十一）：详细图解jQuery对象，以及如何扩展jQuery插件

    早几年学习前端,大家都非常热衷于研究jQuery源码.我还记得当初从jQuery源码中学到一星半点应用技巧的时候常会有一种发自内心的惊叹,“原来JavaScript居然可以这样用!” 虽然随着前端的发 ...

  3. JQuery $ $.extend(),$.fn和$.fn.extend javaScript对象、DOM对象和jQuery对象及转换 工具方法(utility)

    一.为什么jquery前面要写$ Javascript没有package的概念,而作者又希望所有jQuery相关的API都能通过一个全局性的对象来容纳. 名为jQuery的全局变量就是这样一个对象,不 ...

  4. 【转】jQuery源码分析-03构造jQuery对象-源码结构和核心函数

    作者:nuysoft/高云 QQ:47214707 EMail:nuysoft@gmail.com 毕竟是边读边写,不对的地方请告诉我,多多交流共同进步.本章还未写完,完了会提交PDF. 前记: 想系 ...

  5. jQuery1.11源码分析(9)-----初始化jQuery对象的函数和关联节点获取函数

    这篇也没什么好说的,初始化jQuery对象的函数要处理多种情况,已经被寒冬吐槽烂了.关联节点获取函数主要基于两个工具函数dir和sibling,前者基于指定的方向遍历,后者则遍历兄弟节点(真的不能合并 ...

  6. jQuery使用（一）：jQuery对象与选择器

    一.简单的一些介绍 1.jQuery是由普通的是由一些系列操作DOM节点的函数和一些其他的工具方法组成的js库. 2.为什么要使用jQuery库? jQuery面向用户良好的设计在使用过程中彻底解放了 ...

  7. jquery 1.7.2源码解析（二）构造jquery对象

    构造jquery对象 jQuery对象是一个类数组对象. 一)构造函数jQuery() 构造函数的7种用法: 1.jQuery(selector [, context ]) 传入字符串参数:检查该字符 ...

  8. jQuery介绍 DOM对象和jQuery对象的转换与区别

    jQuery介绍 DOM对象和jQuery对象的转换与区别 jQuery介绍      jQuery: http://jquery.com/      write less, do more.   j ...

  9. jQuery.buildFragment源码分析以及在构造jQuery对象的作用

    这个方法在jQuery源码中比较靠后的位置出现,主要用于两处.1是构造jQuery对象的时候使用 2.是为DOM操作提供底层支持,这也就是为什么先学习它的原因.之前的随笔已经分析过jQuery的构造函 ...

随机推荐

  1. lodash用法系列(2),处理对象

    Lodash用来操作对象和集合,比Underscore拥有更多的功能和更好的性能. 官网:https://lodash.com/引用:<script src="//cdnjs.clou ...

  2. CentOS 安装 Redis (高可用)

    原文:https://www.sunjianhua.cn/archives/centos-redis.html 下载地址: http://download.redis.io/releases/ 官方文 ...

  3. Odoo8出现Internal Server Error的解决办法之一

    转载地址:http://blog.sina.com.cn/s/blog_7cb52fa80102vaf3.html     问题: 不知怎么回事,我的Odoo8出错了,重装也一样出错信息如下 Inte ...

  4. Android 自动编译、打包生成apk文件 2 - 使用原生Ant方式

    from://http://blog.csdn.net/androiddevelop/article/details/11100109 相关文章列表: <Android 自动编译.打包生成apk ...

  5. BootStrap中的button使用

    原文地址:http://www.phloxblog.in/bootstrap-buttons/#.U5xYso2fclm 站点中事件的触发往往依赖于button或者超链接.因此,button能够觉得是 ...

  6. nginx如何启用对HTTP2的支持 | nginx如何验证HTTP2是否已启用

    nginx启用HTTP2特性 查看当前nginx的编译选项 1 #./nginx -V 2   3 nginx version: nginx/1.9.15 4 built by gcc 5.4.0 2 ...

  7. Linux文本行倒序排列6种方法

    Linux文本行倒序排列6种方法 1. 命令方法: nl filename | sort -nr | cut -f2 这个方法很unix风格,使用多命令组合完成某种功能是典型的unix特点 单命令: ...

  8. 使用pm2管理node.js应用

    中文文档:https://pm2.io/doc/zh/runtime/quick-start/ pm2是从nodejs衍生出来的服务器进程管理工具,可以做到开机就启动nodejs.当然了,有些运维同学 ...

  9. Tomcat6和Tomcat7配置SSL通信的比较

    <Tomcat6和Tomcat7配置SSL通信的比较> 作者:chszs,转载需注明.博客主页: http://blog.csdn.net/chszs 在项目开发过程中,尝尝会遇到Tomc ...

  10. 开源3D软件——大集合【转】

    要3D打印一件作品,自然少不了3D建模.以下是一些免费开源3D模型设计软件: Blender Blender是最受欢迎的免费开源3D模型制作软件套装. 跨平台支持所有的主要操作系统. 功能非常强大,但 ...