Python语言技术文档

微信小程序技术文档

php语言技术文档

jsp语言技术文档

asp语言技术文档

C#/.NET语言技术文档

html5/css技术文档

javascript

点击排行

您现在的位置:首页 > 技术文档 > jquery

jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析

来源:中文源码网    浏览:357 次    日期:2024-04-25 17:36:45
【下载文档:  jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析.txt 】


jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
本文实例讲述了jQuery.extend 与 jQuery.fn.extend的用法及区别。分享给大家供大家参考,具体如下:
jQuery是一个JavaScript类,如$("#input1") 生成一个 jQuery类的实例。
jQuery为开发插件提拱了两个方法:jQuery.fn.extend()和jQuery.extend()。
1、jQuery.extend()
(1)扩展 jQuery 类本身,为jQuery类添加类方法(静态方法)
jQuery.extend({
  add: function(a, b) { alert(a + b); }
});
jQuery.add(10,20); //30
(2)jQuery.extend(object, object1, [objectN])用一个或多个其他对象来扩展一个对象,返回被扩展的对象
var obj = { name: 'Alice', age: 25, career: "teacher" };
var object = { name: 'Bruce', career: "doctor" };
jQuery.extend(obj, object); //obj = { name: 'Bruce', age: 25, career: "doctor" }
2、jQuery.fn.extend()
把对象挂载到 jQuery 的 prototype 属性,来扩展一个新的 jQuery 实例方法,也就是通过这个 extend 添加的新方法,实例化的 jQuery 对象都能使用,因为它是挂载在 jQuery.fn 上的方法。
查看jQuery源码可发现,jQuery.fn = jQuery.prototype。jQuery.fn挂在原型上,由于对原型的修改会影响所有实例,因此fn上的方法会对每一个jQuery实例有效。
对jQuery.fn的扩展,就是为jQuery类添加成员函数,jQuery类的实例可以使用这个成员函数。
jQuery.fn.extend({
clickFunc: function() {
$(this).click(function(){
alert($(this).val());
});
}
});
$("#input1").clickFunc(); //输出文本框的文本
3、jQuery.extend()与 jQuery.fn.extend()的区别
jQuery.extend()是为jQuery类添加类方法(静态方法),需要通过jQuery类来调用(直接使用 $.xxx 调用);
jQuery.fn.extend()是为jQuery类添加成员函数(实例方法),所有jQuery实例都可以直接调用(需要使用 $().xxx 调用)。
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。

相关内容