实例效果：

代码演示：

<!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. Spring整合Disruptor

    原文:https://segmentfault.com/a/1190000014469173 什么是Disruptor 从功能上来看,Disruptor 是实现了“队列”的功能,而且是一个有界队列.那 ...

  2. C#编程（二十七）----------创建泛型类

    创建泛型类 首先介绍一个一般的,非泛型的简化链表类,可以包含任意类型的对象,以后再把这个类转化为泛型类. 在立案表中,一个元素引用下一个元素.所以必须创建一个类,他将对象封装在链表中,并引用下一个对象 ...

  3. Java锁的设计

    1.自旋锁 自旋锁是采用让当前线程不停地的在循环体内执行实现的,当循环的条件被其他线程改变时 才能进入临界区.如下 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 public ...

  4. SharePoint 2013 安装.NET Framework 3.5 报错

    环境描述 操作系统:Windows Server 2012 R2 Datacenter版本 安装报错 中途接手安装SharePoint Server 2013 with sp1,配置向导报错如下: A ...

  5. IOS的唯一标识符问题(转)

    引用地址 http://www.zhihu.com/question/22599526/answer/21938878 网上搜了下IOS手机标志的种类,直接引用过来. UDID [[UIDevice ...

  6. [转] OpenStack IPSec VPNaaS

    OpenStack IPSec VPNaaS ( by quqi99 ) 作者:张华  发表于:2013-08-03版权声明:可以任意转载,转载时请务必以超链接形式标明文章原始出处和作者信息及本版权声 ...

  7. CSS3 Flex布局整理(一)

    一.说明 1.在以往的布局方案中,都是基于盒装模型,依赖display属性+position属性+float属性等. 他对于那些特殊布局非常不方便,比如,垂直居中等. 并且不同浏览器的盒模型还有些差异 ...

  8. LRU和LFU的区别

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/guoweimelon/article/details/50855351 一.概念介绍 LRU和LFU ...

  9. HashMap 与 ConcurrentHashMap

    1. HashMap 1) 并发问题 HashMap的并发问题源于多线程访问HashMap时, 如果存在修改Map的结构的操作(增删, 不包括修改), 则有可能会发生并发问题, 表现就是get()操作 ...

  10. JavaScript：RegExp 对象

    ylbtech-JavaScript:RegExp 对象 1.返回顶部 RegExp 对象 RegExp 对象表示正则表达式,它是对字符串执行模式匹配的强大工具. 直接量语法 /pattern/att ...