实例效果：

代码演示：

<!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. 基于设备树的TQ2440 DMA学习（1）—— 芯片手册

    作者 彭东林pengdonglin137@163.com 平台 TQ2440内核Linux4.9 概述 一直想抽时间学习一下DMA驱动,今天就以S3C2440为例,这款芯片的DMA控制器足够简单,也比 ...

  2. INotifyPropertyChanged接口的实现

    何时实现INotifyPropertyChanged接口 官方解释:INotifyPropertyChanged  接口用于向客户端(通常是执行绑定的客户端)发出某一属性值已更改的通知.官方解释的很模 ...

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

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

  4. Android上的单元测试

    Android上的单元测试 http://www.sina.com.cn  2009年12月04日 16:07  IT168.com [IT168 技术文档]任何程序的开发都离不开单元测试来保证其健壮 ...

  5. 工具：使用过的 API 文档生成工具

    背景 2012 年之前几乎没有为代码增加注释,当然,代码的命名也不见得合理(好的代码胜过面面俱到的注释),后来接触过一些开源框架,优秀的框架都有一个特点:文档和示例非常多,在后来的日子里,几乎会强制自 ...

  6. java解压缩zip和rar的工具类

    package decompress; import java.io.File; import java.io.FileOutputStream; import org.apache.tools.an ...

  7. 真爱如血第七季/全集True Blood迅雷下载

    第七季 True Blood Season 7(2014)看点:由于日本科学家合成了一种人造血,一夜之间,吸血鬼不再是人们心中那富有传奇色彩的怪物,而是能与人类和平相处的朋友.已经播出五年的HBO吸血 ...

  8. ifram 取父窗体的URL地址

    var url=''; try { url = window.top.document.referrer ;     } catch(M) {           if (window.parent) ...

  9. MAC 上的 Live Writer : ecto

    ecto 在这里： http://illuminex.com/ecto/ 它是一款 MAC 上的 live writer，对我来说，没有 writer 之类的工具，我就宁可不写博客。 测试插入图片 测 ...

  10. Java和C#差异点

    语法:----------------------------------------------------------1. Java的byte为-128~127相当于c#的sbyte,c#byte ...