实例效果：

代码演示：

<!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. __NSArrayI removeObjectAtIndex:]: unrecognized selector sent to instance

    同样是删除cell问题,帮我看看问题出现在哪,谢谢! 我的类文件myFile是继承UIViewController的(目的是为了能够在一个view里切换不同的tableView),在myFile.h中 ...

  2. excel 单元格内容太多，替换有问题

    excel 单元格内容太多,替换有问题

  3. android 读取 raw 中的文件。

    file.getParentFile().mkdir(); file.createNewFile(); InputStream inputStream = context.getResources() ...

  4. Android倒计时功能的实现

    Android中的倒计时的功能(也能够直接使用CountDownTimer这个类直接实现,相关此Demo可查看我的博客).參考了网上写的非常好的一个倒计时Demo: watermark/2/text/ ...

  5. ibatis.net：第五天，QueryForObject

    xml <statement id="LoadOrder" parameterClass="int" resultClass="Order&qu ...

  6. Linux内核：分析coredump文件 - 内核代码崩溃

    转自:http://blog.csdn.net/guowenyan001/article/details/12975221 一.分析Core文件 1.1 找到core文件目录,启动mycrash:my ...

  7. 让Orchard支持多个Layout

    默认Orchard只有一个Layout,有的时候,我们的站点往往需要多个母版页.那么,如果要让Orchard支持多个Layout,以下是一种解决方案. 一:创建LayoutFilter using S ...

  8. cat、tac、rev、nl命令

    当日志文件log.log很长,但又要按内容从后往前查看时,可以使用如下命令: tac log.log | more cat     由第一行开始显示内容,并将所有内容输出    tac     从最后 ...

  9. 谈谈Enter回车键提交表单那些事 回车搜索 enter搜索

    我们在做系统前端的时候,往往会用到form标签,采用jquery插件做表单验证.我们信誓旦旦的一位把一切都做好的时候,并且检查一遍又一遍的时候,意向不到的事情发生了,也许是出于一种意外,而这种意外我们 ...

  10. 奇怪吸引子---Bouali

    奇怪吸引子是混沌学的重要组成理论,用于演化过程的终极状态,具有如下特征:终极性.稳定性.吸引性.吸引子是一个数学概念,描写运动的收敛类型.它是指这样的一个集合,当时间趋于无穷大时,在任何一个有界集上出 ...