jQuery.extend()、jQuery.fn.extend()扩展方法示例详解

jQuery自定义了jQuery.extend()和jQuery.fn.extend()方法.

其中jQuery.extend()方法能够创建全局函数或者选择器,

而jQuery.fn.extend()方法能够创建jQuery对象方法.

例如:

复制代码代码如下:

jQuery.extend({ 
showName : function(name){ 
alert(name) 

}); 
jQuery.showName("深蓝");

jQuery.extend()除了可以创建插件外,还可以用来扩展jQuery对象. 
例如:

复制代码代码如下:

var a = { 
name : "blue", 
pass : 123 

var b = { 
name : "red", 
pass : 456, 
age : 1 

var c = jQuery.extend({},a,b);

c拥有a,b对象的属性,由于,b对象在a对象之后,其name属性优先在c对象里.

jQuery.extend()方法为插件传递系列选项,包括默认值.

复制代码代码如下:

function fn(options){ 
var options = jQuery.extend({ //默认参数选项列表 
name1 : value1, 
name2 : value2, 
name3 : value3 
},options); //使用函数的参数覆盖或合并到默认参数选项列表中 
//函数体 

fn({ name1 : value3, name2 : value2 , name3 : value1 });//使用新值 
fn({ name4 : value3, name5 : value2 });//在默认上添加新选项 
fn(); //保持默认选项值

当在调用该方法时,传递新的参数值,就会覆盖掉默认的参数选项值,否则,使用默认参数值.

使用JQuery.fn对象创建JQuery对象方法

可以通过jQuery.fn对象来添加属性和方法,实际上jQuery.fn对象就是挂接在jQuery.prototype上的,jQuery把它简写了.

fn 是什么东西呢。查看jQuery代码,就不难发现。

复制代码代码如下:

jQuery.fn = jQuery.prototype = {

   init: function( selector, context ) {//.... 

   //......

};

原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。

例如:

复制代码代码如下:

jQuery.fn.test = function(){ 
alert("这是jQuery对象方法!"); 

jQuery("div").click(function(){ 
$(this).test(); //在当前的jQuery对象上调用test()方法 
});

我们可以调用jQuery.fn.extend()方法来创建jQuery对象方法.

复制代码代码如下:

jQuery.fn.extend({ 
test : function(){ 
return this.each(function(){ 
alert(this.nodeName) 
}); 

}); 
jQuery("body *").click(function(){ 
$(this).test(); //调用jQuery对象方法 
});

一句话:jQuery.extend是对JQuery类的自定义扩展,jQuery.fn.extend是对JQuery对象的自定义扩展.

时间: 2024-11-07 15:48:45

jQuery.extend()、jQuery.fn.extend()扩展方法示例详解的相关文章

jquery getScript动态加载JS方法改进详解[转载]

转载自http://www.jb51.net/article/31973.htm 有许多朋友需要使用getScript方法动态加载JS,本文将详细介绍此功能的实现方法 $.getScript(url,callback) 这个方法是jquery自身提供的一个用于动态加载js的方法.当网站需要加载大量js时,动态的加载js就是一个比较好的方法,当需要某个功能时再将相应的js加载进来. 但是自己在使用过程中却发现了一些不尽如意的地方. 每次需要执行该功能的时候都会去请求一次这个js,这样不是在帮倒忙嘛

PHP exif扩展方法开启详解(亲测)

本节主要介绍了如何开启PHP exif扩展方法,主要在于对php.ini文件的修改 服务器配置说明: 1.在php.ini文件中找到;extension=php_exif.dll,去掉前面的分号 2.在php.ini文件中找到;extension=php_mbstring.dll,去掉前面的分号,并将此行移动到extension=php_exif.dll之前,使之首先加载*. 3.找到[exif]段,把下面语句的分号去掉. ;exif.encode_unicode = ISO-8859-15 ;

jquery sortable的拖动方法示例详解1

转自:https://www.jb51.net/article/45803.htm 所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象 ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象 ui.position - 表示相对当前对象,鼠标的坐标值对象{top,left} ui.offset - 表示相对于当前页面,鼠标的坐标值对象{top,left} ui.item - 表示当前拖拽的元素 ui.placeh

jquery sortable的拖动方法示例详解

转自:https://hb-keepmoving.iteye.com/blog/1154618 所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象   ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象   ui.position - 表示相对当前对象,鼠标的坐标值对象{top,left}   ui.offset - 表示相对于当前页面,鼠标的坐标值对象{top,left}   ui.item - 表示当前拖

jquery源码解析:jQuery延迟对象Deferred(工具方法)详解2

请接着上一课继续看. $.Deferred()方法中,有两个对象,一个是deferred对象,一个是promise对象. promise对象有以下几个方法:state,always,then,promise,pipe,done,fail,progress. deferred对象除了有promise对象的所有方法外(通过jQuery.extend( obj, promise ),把promise对象的所有方法复制到deferred对象中),还有其他三个:resolve,reject,notify.

jquery源码解析:jQuery延迟对象Deferred(工具方法)详解1

请先看上一课的回调对象.Deferred是通过extend添加到jQuery中的工具方法.如下所示: jQuery.extend({ Deferred: function( func ) { }, when: function( subordinate /* , ..., subordinateN */ ) { }}); 首先,来介绍下Deferred的使用: var cb = $.Deferred(); setTimeout(function(){ alert(1); cb.resolve()

python中的tcp示例详解

python中的tcp示例详解  目录 TCP简介 TCP介绍 TCP特点 TCP与UDP的不同点 udp通信模型 tcp客户端 tcp服务器 tcp注意点 TCP简介 TCP介绍 TCP协议,传输控制协议(英语:Transmission Control Protocol,缩写为 TCP)是一种面向连接的.可靠的.基于字节流的传输层通信协议,由IETF的RFC 793定义. TCP通信需要经过创建连接.数据传送.终止连接三个步骤. TCP通信模型中,在通信开始之前,一定要先建立相关的链接,才能发

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 = {

jQuery中 $.extend 和 $.fn.extend 解释

$.extend() (1)第一种:拓展jQuery的全局(静态)函数的 方式:--->一个参数 例如: $.extend({ add : function(){ alert("1"); }, miu : function(){ alert("2"); } }) //此方式在jQuery对象本身:可以通过 jQuery.add(), jQuery.miu() 直接调用: (2)第二种:对象合并,即可以实现某个函数的重载:--->多个参数 例如: var