jq的extend()是jq插件扩展很重要的部分,到这里证明是可以自己在jq的基础上,分为两种方法去扩展或开发,为jq本身添加一个方法,可以理解成扩展静态方法和自定义方法。

今天有看到一篇帖子,对这部分的理解十分独到,特意来分享一下。

首先:$.extend({})

用这个方法给jquery本身增加一个hello的方法;

<script type="text/javascript">
$(document).ready(function (){
$.extend({
hello:function(){alert("hello world!")},
});
$("p").click(function(){
$.hello();
})
})
</script>

ps:给jquery新建了一个$.hello(),然后绑定给p元素一个点击事件,点击p元素就可以弹出对话框,hello world! 这只是一个简单的例子还可以去定义更多的静态方法给jquery。

其次:$.fn.extend({})

用这个方法给jquery对象添加一个新的方法;

<script type="text/javascript">
$(document).ready(function (){
$.fn.change = function(){
$(this).css("background","red");
};
$("p").click(function (){
$(this).change();
})
})
</script>

ps:首先用$.fn.extend({}),添加一个新的名为change()方法,然后还是给P元素绑定一个新的方法,$(this).change(),单击p元素是背景颜色会变成红色。

可以简单的对比一下,这两种方法的区别到底在哪里:

  • 第一种$.extend()方法,使用时需要带着jq的标注$.hello();而$.fn.extend()方法使用时绑定在对象上$(this).change();
  • 第一种方法是扩展一个jq方法,第二种是为jq对象扩展一个方法;
  • 可以把第一种方式看成jq的合并数组的工具函数,第二种可以是一种操作方法,类似dom操作的一些方法也可传递参数;

老生长谈的$.extend()方法的更多相关文章

  1. jQuery中的$.extend方法来扩展JSON对象及合并,方便调用对象方法

    $.extend方法可以扩展JSON对象,用一个或多个其他对象来扩展一个对象,返回被扩展的对象. 例一 合并 settings 和 options,修改并返回 settings var setting ...

  2. jQuery extend方法使用及实现

    一.jQuery extend方法介绍 jQuery的API手册中,extend方法挂载在jQuery和jQuery.fn两个不同对象上方法,但在jQuery内部代码实现的是相同的,只是功能却不太一样 ...

  3. jQuery的extend方法的深层拷贝

    一些东西长时间不用就忘了,比如这个jQuery的extend方法的深层拷贝,今天看单页应用的书的时候,看到entend第一个参数是true,都蒙了.也是,自己的大部分对jQuery的学习知识来自锋利的 ...

  4. jQuery.extend()方法和jQuery.fn.extend()方法源码分析

    这两个方法用的是相同的代码,一个用于给jQuery对象或者普通对象合并属性和方法一个是针对jQuery对象的实例,对于基本用法举几个例子: html代码如下: <!doctype html> ...

  5. (转)jQuery中的extend()方法

    本文转自:http://www.xiabingbao.com/jquery/2015/05/30/jquery-extend 原文的排版要比这里美观很多,建议去原文查看.本文仅仅作为个人的mark,方 ...

  6. 对jQuery.extend()方法的分析

    jQuery.extend方法是我们常用的方法,也是jQuery源码中的基础方法.它的主要作用是:将一个或多个“源对象”合并到一个“目标对象”中,并返回目标对象.它主要有三种表现形式: a.jQuer ...

  7. jQuery.extend方法和开发中变量的复用

    最近在用commonJS规范进行客户端开发,遇到如下问题: 一般一个模块内部可能会定义一系列变量或一系列相关变量,比如写了一个颜色选择弹框模块大概会有如下变量定义 var settings = { / ...

  8. 005 列表以及append,extend方法

    定义一个列表: number=[,'changhao','常浩',5.2] 往这个列表里面添加单一新值(类型无限制),需要使用append方法. 例如: number.append() number. ...

  9. jQuery.extend()方法和jQuery.fn.extend()方法

    jQuery.extend()方法和jQuery.fn.extend()方法源码分析 这两个方法用的是相同的代码,一个用于给jQuery对象或者普通对象合并属性和方法一个是针对jQuery对象的实例, ...

随机推荐

  1. Eclispe远程调试tomcat设置

    首先在catelina.sh中添加 JAVA_OPTS="$JAVA_OPTS -Xrunjdwp:transport=dt_socket,address=23787,server=y,su ...

  2. C++ vector容器find查询函数

    vector< ); //查找1 if ( result == L.end( ) ) //没找到 cout << "No" << endl; else ...

  3. css text-overflow:ellipsis 文字多余剪切

    text-overflow: ellipsis;多度剪切white-space: nowrap;禁止换行overflow: hidden;多余隐藏

  4. kernel 4.4.12 外部模块Makefile 脚本编写

    kernel 4.4.12 最简单module的编译 上一篇博客上面有一个最简单的模块源代码,今天就上一个Makefile,运行make 就可以编译一个外部的模块. vim Makefile 这个是我 ...

  5. How to see the "real" available resources ?

    Hi, Hope this will help you : nova hypervisor-stats It will return the statistics of the Hypervisor ...

  6. java.lang.NullPointerException的可能原因及处理

    java.lang.NullPointerException的可能原因及处理 java.lang.NullPointerException具体意思是空指针异常,最常见的问题就是没有初始化. 字符串等数 ...

  7. java实现记住密码功能(利用cookie)

    <br> <input type="text" id="userName" name="userName" value=& ...

  8. 关于计算机改名无法连接TFS的问题

    今天重新导入了两台服务器, 修改了机器名,结果VS2012链接TFS报错 --------------------------- Microsoft Visual Studio ----------- ...

  9. crontab

    在crontab中添加了定时任务,但发现没有得到期望的结果, 这就需要查看crontab的执行历史记录,具体位置如下: cd /var/log tail -100 cron 在cron文件中即可查阅已 ...

  10. 扩展方法 1 简单的string扩展方法

    这里是关于 String的简单扩展方法 (静态类 静态方法 this 类型 这里是string) static class Program { static void Main(string[] ar ...