jQuery的extend和fn.extend理解
参考网址:http://www.cnblogs.com/yuanyuan/archive/2011/02/23/1963287.html
http://www.cnblogs.com/xuxiuyu/p/5989743.html
jQuery为开发插件提拱了两个方法,jQuery的API手册中,extend方法挂载在jQuery和jQuery.fn两个不同对象上方法,
但在jQuery内部代码实现的是相同的,只是功能却不太一样。两个方法分别是:
jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法(静态方法)。
jQuery.fn.extend(object); 给jQuery对象添加方法。
fn 是什么东西呢?查看jQuery代码
jQuery.fn = jQuery.prototype = { init: function( selector, context ) {//.... //...... };
原来 jQuery.fn = jQuery.prototype
虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便。
jQuery便是一个封装得非常好的类,比如我们用 语句 $("#btn1") 会生成一个 jQuery类的实例。
jQuery.extend(object); 为jQuery类添加添加类方法,可以理解为添加静态方法。
$.extend({ add:function(a,b){return a+b;} });
便为 jQuery 添加一个为 add 的 “静态方法”,之后便可以在引入 jQuery 的地方,使用这个方法了,
$.add(3,4); //return 7
jQuery.fn.extend(object); 对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。
比如我们要开发一个插件,做一个特殊的编辑框,当它被点击时,便alert 当前编辑框里的内容。可以这么做:
$.fn.extend({ alertWhileClick:function(){ $(this).click(function(){ alert($(this).val());
}); } }); $("#input1").alertWhileClick();//页面上为:<input id="input1" type="text"/>
$("#input1") 为一个jQuery实例,当它调用成员方法 alertWhileClick后,便实现了扩展,每次被点击时它会先弹出目前编辑里的内容。
两者区别总结:
1、两者调用方式不同:
jQuery.extend(),一般由传入的全局函数来调用,主要是用来拓展个全局函数,如$.init(),$.ajax();
jQuery.fn.extend(),一般由具体的实例对象来调用,可以用来拓展个选择器,例如$.fn.each();
2、两者的主要功能作用不同:
jQuery.extend(object); 为扩展jQuery类本身,为自身添加新的方法。
jQuery.fn.extend(object);给jQuery对象添加方法
3、大部分插件都是用jQuery.fn.extend()
jQuery的extend和fn.extend理解的更多相关文章
- 理解jQuery的$.extend与$.fn.extend
https://www.cnblogs.com/xuxiuyu/p/5989743.html 上面这篇博客总结的很棒!!,以下对自己的认识做一个总结 <!DOCTYPE html> < ...
- 插件的理解$.extend()与$.fn.extend()
插件的理解.$.extend()与$.fn.extend() 插件开发包括两种:1.类级别的插件开发,即$.extend()扩展jquery对象本身:2.对象级别的插件开发,即$.fn.exte ...
- jQuery中,$.extend,$obj.extend和$.fn.extend三者的区别
jQuery中,$.extend,$obj.extend和$.fn.extend三者的区别 现在做的一个项目,所使用的框架是基于jQuery扩展的,于是平时学了一下jQuery,了解到了它的扩展函数: ...
- jQuery插件开发中$.extend和$.fn.extend辨析
jQuery插件开发分为两种: 1 类级别 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery. ...
- $.fn与$.fx什么意思; $.extend与$.fn.extend用法区别; $(function(){})和(function(){})(jQuery)
$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效. 如扩展$.fn.abc() 那么你可以这样子:$("#div").abc(); 通常使 ...
- jQuery开发自定义插件 $.extend()与$.fn.extend()
jQuery extend()和jQuery.fn.extend() jQuery提供两个用于封装扩展的方法: 1.$.extend(); 扩展jQuery类方法,即jQuery全局方法 (在全局可直 ...
- $.extend(),与$.fn.extend() 讲解
$.extend(),与$.fn.extend() 讲解(一) (2013-07-11 10:24:31) 转载▼ 转自:http://blog.sina.com.cn/s/blog_a3bd3bd0 ...
- $.extend()和$.fn.extend()用法和区别
$.extend()和$.fn.extend()用法和区别: 在自己制作插件的时候会经常用到$.extend()和$.fn.extend()两个函数,无论从外观还是作用都非常的类似,但是实际上它们的区 ...
- 理解jquery的$.extend()、$.fn.extend()【jQuery插件机制】
/** * 操作数据 | DOM 操作 * @description jQuery类添加类方法,可以理解为添加静态方法,将一个或多个对象的内容合并到目标对象 * @use $.fn.zhang() | ...
随机推荐
- 【代码笔记】iOS-MBProgressHUDDemo
一,工程图. 二,代码. RootViewController.h #import <UIKit/UIKit.h> //加入头文件 #import "MBProgressHUD. ...
- VS窗体换肤
1.首先我们要下载一个皮肤 vs窗体皮肤下载官网:http://irisskin.software.informer.com/download/ 2.创建一个lib文件夹 把下载好的引用放到里面 3. ...
- eclipse以O开头的版本安装tomcat插件
最近闲着无聊想着捣鼓下java web ,轻车熟路的在eclipse下载好IDE,有强迫症的我下载了最新版本的(2017-10),然而下载过来的IDE真的是纯净版的,连java web 的new pr ...
- Mobileye众包地图REM的一些整理
Mobileye的CEO Shashua在CVPR2016上介绍了Road Experience Management(REM),目前仍是视觉高精度地图和定位的(几乎)唯一的解决方案.这两年间,mob ...
- Linux CentOS 6.5 + Apache + Mariadb + PHP环境搭建
Web自动化测试-服务端测试环境部署 by:授客 目录 一. 二. 三. 四. 五. 六. 七. 八. 九. 十. 操作系统环境:CentOS 6.5-x86_64 下载地址:http://www.c ...
- React Native中的约束规范
参考资料:https://github.com/sunyardTime/React-Native-CodeStyle 感谢情书哥无私奉献 ##一.编程规约 ###(一) 命名规约 [强制] 代码中命名 ...
- matlab练习程序(单层感知器)
clear all; close all; clc; %生成两组已标记数据 randn(); mu1=[ ]; S1=[ ; ; 0.4]; P1=mvnrnd(mu1,S1,); mu2=[ ]; ...
- Apache,PHP,MySQL独立安装
最近在工作中常常接触到PHP,自己也写过一些简单的PHP页面.我们知道PHP是在服务器端运行的脚本语言,因此我们需要配置服务器环境.之前为了省事直接使用的是wamp集成环境,但是突然某一天领导要求我们 ...
- CSS3新特性,兼容性,兼容方法总结
css3手册css3手册 边框 border-radius 用于添加圆角效果 语法: border-radius:[ <length> | <percentage> ]{1,4 ...
- 如何用 Python 实现 Web 抓取?
[编者按]本文作者为 Blog Bowl 联合创始人 Shaumik Daityari,主要介绍 Web 抓取技术的基本实现原理和方法.文章系国内 ITOM 管理平台 OneAPM 编译呈现,以下为正 ...