老生长谈的$.extend()方法

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操作的一些方法也可传递参数;
时间: 2024-10-27 02:00:56

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

关于CSS中浮动和定位问题的老生长谈

1 盒子模型 关于盒子模型的知识,想必大家都是非常熟悉的,是个被嚼碎了的话题,盒子概念的理解很简单,但是深入的理解W3C盒子模型和IE的盒子模型是需要费点心思的,特别是对于应用盒子模型做到网页元素的精确排版布局,也是一项重大的挑战. 1.1 W3C的盒子模型 标准的W3C盒子模型的范围包括有margin border padding content,重要的是,这里的content部分不包括border和padding,盒子的height和width是指content部分的宽高. 1.2 IE盒子

jquery的2.0.3版本源码系列(3):285-348行,extend方法详解

目录 1 . jquery extend的基本使用 通过285行的源码 jQuery.extend = jQuery.fn.extend = function() { ,extend方法要么是直接挂在到jQuery的静态方法,要么是挂载到fn上其实就是原型上(参考283行的赋值操作)的实例方法.extend方法可以传一个对象,类似于插件的方式,也可以传多个对象进行拷贝. <script src="js/jquery-2.0.3.js"></script> <

jQuery中extend方法

$.extend 用一个或多个其他对象来扩展一个对象,返回被扩展的对象. 参数类型1:只传入一个对象就是对jQuery的工具方法进行扩展. 1 $(function(){ 2 $.extend({ 3 console: function(sMsg){ 4 console.log(sMsg); 5 } 6 }); 7 $.console('jQuery');// jQuery 8 }); 参数类型2:传入多个对象就是对第一个对象进行扩展. 1 $(function(){ 2 var oTarget

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

jQuery.extend()方法和jQuery.fn.extend()方法源码分析 这两个方法用的是相同的代码,一个用于给jQuery对象或者普通对象合并属性和方法一个是针对jQuery对象的实例,对于基本用法举几个例子: html代码如下: <!doctype html> <html> <head> <title></title> <script src='jquery-1.7.1.js'></script> <

backbone之extend方法(刚明白了点)

话说这个extend困扰我好几天了,今天终于想明白了点. 在之前先要知道什么是实例方法和静态方法. 首先定义一个类(js不支持类,但是别人都这么说,我也不知道为啥),如:var Person=function(){} //函数表达式或 function person(){}//函数声明, 然后在类上加.方法名,如 Person.say=function(){ console.log('I am a Person,I can say.') };这就是一个静态方法,调用时直接.方法名()就可以了.

Python List extend()方法-用于在列表末尾一次性追加另一个序列中的多个值(用新列表扩展原来的列表)

描述 extend() 函数用于在列表末尾一次性追加另一个序列中的多个值(用新列表扩展原来的列表). 语法 extend()方法语法: list.extend(seq) 参数 seq -- 元素列表. 返回值 该方法没有返回值,但会在已存在的列表中添加新的列表内容. 实例 以下实例展示了 extend()函数的使用方法: #!/usr/bin/python aList = [123, 'xyz', 'zara', 'abc', 123]; bList = [2009, 'manni']; aLi

jQuery的$.extend方法使用

一.需求 项目中有多个模块用到jQuery中的DataTable插件.开始开发时,各自使用自己的配置,导致表格的一些统一的配置被分散到各个模块中.现想将这些统一的配置提取到公共js中,以便于方便修改统一配置(做人做事都有一个度,不是非黑即白,水至清则无鱼.程序也是一样,都想将代码写成统一的,但是各模块的功能又是有区别的,所以总是统一.特性.再到统一部分). 二.方案 一般像这种有配置参数的jQuery的插件(DataTable.Flot等),都会有一个默认的配置,在实现中基本都会用到$.exte

自定义extend方法

最近计划封装一个原生的js控件,突然发现习惯了jquery的extend方法,使用原生JavaScript竟无从下手.所以只能自己尝试写一个类似jquery extend功能的方法了. 核心代码如下: function () {        var _isObject, _extend;        _isObject = function (o) { return Object.prototype.toString.call(o) === '[object Object]'; } //判断

JQuery添加扩展方法(理解$.extend(),与$.fn.extend()方法区别)

理解$.extend(),与$.fn.extend()方法区别 1.$.extend()方法 $.extend()方法在JQuery中有两个用法,第一次是扩展方法, 第二个方法是 jQuery.extend([deep], target, object1, [objectN]) 返回值:Object 把2个对象合并得到新的target,deep是可选的(递归合并) 合并 settings 和 options,修改并返回 settings. jQuery 代码: var settings = {