实例效果：

代码演示：

<!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. 一个例子来看C#泛型是如何登场的

    有这样一个有关汽车的类. public class Car { public int ID { get; set; } public string Make { get; set; } } 现在,在客 ...

  2. 如何获得ios7系统中的蓝色

    最简洁的办法,直接使用下列代码: [UIColor colorWithRed:0.0 green:122.0/255.0 blue:1.0 alpha:1.0] 最彻底的办法: OS7Colors是U ...

  3. C#编程（四十四）----------string和stringbuilder

    System.String类 首先string类是静态的,System.String是最常用的字符串操作类,可以帮助开发者完成绝大部分的字符串操作功能,使用方便. 1.比较字符串 比较字符串是指按照字 ...

  4. 查询 EBS 系统物料净重、毛重

    /* Formatted on 2018/3/14 23:40:47 (QP5 v5.256.13226.35538) */ SELECT DISTINCT MSI.SEGMENT1 || ',' 物 ...

  5. GO -- 正则表达式

    str := "880218end" match, _ := regexp.MatchString("\\d{16}", str) //六位连续的数字 fmt. ...

  6. 危机边缘第五季/全集Fringe迅雷下载

    本季Fringe Season 5 第五季(2012)看点:Walter 用琥珀将Olivia.Peter.Astrid和自己封存,以便在2036年的未来世界实现自己抵抗观察者的完美计划,“解冻”后的 ...

  7. libgdx 环境搭建

    1:环境搭建: (1)首先进入官网,http://libgdx.badlogicgames.com/download.html  点击下方的Releases.进行下载最新的版本号就可以. 这个为我们开 ...

  8. fabric-ca-server

    fabric-ca-server start -b admin:adminpw -d --db.type mysql --db.datasource "root:rootpwd@tcp(17 ...

  9. 使用idea 在springboot添加本地jar包的方法

    原文地址;https://blog.csdn.net/huxiaodong1994/article/details/80702278 1.首先在与src同级的目录下新建一个lib目录,然后将本地jar ...

  10. hyper-v 尝试更改 状态时 应用程序遇到错误 无法初始化

    刚还原了一个问题,现在 又来一个: 让我崩溃的微软 hyper-v.这次错误 提示也没了. http://social.technet.microsoft.com/Forums/de-DE/751b2 ...