jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
更新时间：2014年05月08日 16:51:12 作者：
这篇文章主要介绍了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对象的自定义扩展.
例如:
复制代码 代码如下:
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对象的自定义扩展.
相关文章
在深入了解jQuery的各个细节之前，需要对jQuery的设计思想有一个大致的了解。在遇到问题时， 知道应该使用jQuery的哪一个功能，然后迅速从手册中找到具体的用法。本文将详细介绍jQuery的设计思想。下面跟着小编一起来看下吧2017-03-03
这篇文章主要为大家详细介绍了利用jquery制作简易的员工信息添加与删除，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了jQuery实现的自定义滚动条插件的使用方法。需要的朋友可以参考借鉴2016-12-12
制作标签页（通常说成滑动门）的实现思路是当鼠标在标签上时下面div会显示和标签相对应的内容，随着标签的改变，下面的div也会对应改变内容2010-05-05
这篇文章主要为大家详细介绍了jquery插件实现轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
这篇文章主要介绍了jquery实现加载进度条提示效果，感兴趣的小伙伴们可以参考一下2015-11-11
这篇文章主要介绍了jQuery插件实现控制网页元素动态居中显示,实例分析了jQuery插件的实现与元素动态显示的技巧,需要的朋友可以参考下2015-03-03
jquery.form.js框架实现文件上传功能案例解析（springmvc）
这篇文章主要为大家详细介绍了jquery.form.js/springmvc文件上传功能的实现步骤，使用的技术有jquery.form.js框架，以及springmvc框架，具有实用价值，感兴趣的小伙伴们可以参考一下2016-05-05
本文为大家介绍下html伪弹出框的实现，感兴趣的朋友可以了解下2013-09-09
jquery css 设置table的奇偶行背景色2014-06-06
最新评论