Jquery中$与$.fn的差别
当今web开发往往离不开Jquery的使用，Jquery以其简洁的使用方式、良好的浏览器兼容性赢得了软件研发同行的青睐，作为当中的一员，自然也不例外，虽然刚開始时非常排斥Jquery，今天我谈一下对Jquery中$与$.fn的认识和理解，不正确地方深望指正：
1、什么是$?
答：jquery的还有一种表现形式；
2、看以下的样例：
样例01：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>$与$.fn的差别——demo 01</title>
<script type="text/javascript" src="./jquery-1.6.2.js"></script>
<script type="text/javascript">
$.test = function(a,b) {
return a+b;
};
alert($.test(4,4));
</script>
</head>
<body>
</body>
</html>
样例02：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>$与$.fn的差别——demo 02</title>
<script type="text/javascript" src="./jquery-1.6.2.js"></script>
<script type="text/javascript">
$.extend({
test:function(a,b) {
return a+b;
}
});
alert($.test(4,4));
</script>
</head>
<body>
</body>
</html>
上面两个样例中的黄色背景出的代码有什么不同和同样？
答：除了功能同样以外最大的同样点在于调用函数（或方法）的方式同样；上面两个样例最大的不同点在于声明创建test方法的方式不同。
3、看以下的样例：
样例03：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>$与$.fn的差别——demo 03</title>
<script type="text/javascript" src="./jquery-1.6.2.js"></script>
<script type="text/javascript">
$.fn.test = function() {
return $(this).val();
};
$(function(){
alert($("#name").test());
});
</script>
</head>
<body>
<input type="hidden" id="name" name="name" value="高焕杰"/>
</body>
</html>
样例04：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>$与$.fn的差别——demo 04</title>
<script type="text/javascript" src="./jquery-1.6.2.js"></script>
<script type="text/javascript">
$.fn.extend({
test:function() {
return $(this).val();
}
});
$(function(){
alert($("#name").test());
});
</script>
</head>
<body>
<input type="hidden" id="name" name="name" value="高焕杰"/>
</body>
</html>
上面两个样例中的绿色背景出的代码有什么不同和同样？
答：除了功能同样以外最大的同样点在于调用函数（或方法）的方式同样；上面两个样例最大的不同点在于声明创建test方法的方式不同。
4、Jquery中$与$.fn的差别是什么？
答：在回答这个问题曾经，须要明白一个事实：Jquery的方法是能够拓展的，上面这4个样例都是对Jquery方法的拓展，从调用声明创建方法的方式来看，能够归结为两类：一类直接由$符调用；还有一类由$("")来调用，讲到这里你是不是想到了Java语言中的静态方法和实例方法，是的，假设从java类的角度认识调用创建的Jquery方法可能更好理解些，虽然Javascript没有明白的类的概念。好了如今能够回答问题了：$拓展的方法是静态方法，能够使用$直接调用，其拓展的方式有两种，一般使用$.extend({});；而$.fn拓展的方法是实例方法，必须由“对象”$("")来调用，其拓展的方式相同有两种，一般使用$.fn.extend({ })。
5、知识延展，到底什么是fn?
答：相同在回答这样一个问题曾经请打开一个Jquery文件（0分下载） 搜索这样一个字符“jQuery.prototype”，告诉我你看到了什么：jQuery.fn
= jQuery.prototype = {......},嗯嗯，也许你已经猜到了——fn就是prototype，是这样吗？请看以下的两个样例：
样例05：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>$与$.fn的差别——demo 05</title>
<script type="text/javascript" src="./jquery-1.6.2.js"></script>
<script type="text/javascript">
$.prototype.test = function() {
return $(this).val();
};
$(function(){
alert($("#name").test());
});
</script>
</head>
<body>
<input type="hidden" id="name" name="name" value="高焕杰"/>
</body>
</html>
样例06：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>$与$.fn的差别——demo 06</title>
<script type="text/javascript" src="./jquery-1.6.2.js"></script>
<script type="text/javascript">
$.prototype.extend({
test:function() {
return $(this).val();
}
});
$(function(){
alert($("#name").test());
});
</script>
</head>
<body>
<input type="hidden" id="name" name="name" value="高焕杰"/>
</body>
</html>
上面两个样例通过将fn改为prototype以后能够执行，呵呵呵，你猜对了。
0分下载demo:Jquery中$与$.fn的差别实例.zip
Jquery中$与$.fn的差别的更多相关文章
- $.extend() 或 jQuery.extend() 与 $.fn.Xxx 或 jQuery.fn.extend(object) 之jQuery插件开发
jQuery为开发插件提拱了两个方法 语法现象1:$.extend() 或 jQuery.extend() 或 jQuery.extend(object)//可以理解为为jQuery类添加类方法或静态 ...
- jquery中onclick="fn"中$(this)所代表的对象
jquery中onclick="fn"中$(this)所代表的对象 js方法 function qiehuan(){ var src = $(this).attr("da ...
- jquery中的$.fn的用法
JQuery里的原型prototype分析 http://www.nowamagic.net/librarys/veda/detail/653 jquery中的$.fn的用法 ...
- jquery中filter(fn)的使用研究
jquery中filter(fn)给出的官方说明是: 筛选出与指定函数返回值匹配的元素集合 这个函数内部将对每个对象计算一次 (正如 '$.each'). 如果调用的函数返回false则这个元素被删除 ...
- Jquery中$与$.fn的区别
Jquery中$与$.fn的区别 当今web开发往往离不开Jquery的使用,Jquery以其简洁的使用方式.良好的浏览器兼容性赢得了软件研发同行的青睐,作为其中的一员,自然也不例外,尽管刚开始时很排 ...
- JQuery中的each()的使用
each()函数是基本上所有的框架都提供了的一个工具类函数,通过它,你可以遍历对象.数组的属性值并进行处理. jQuery和jQuery对象都实现了该方法,对于jQuery对象,只是把each方法简单 ...
- jQuery中的$.fn【转】
$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效,下面有个不错的示例,喜欢的朋友可以参考下 $.fn是指jquery的命名空间,加上fn上的方法及属性,会 ...
- jQuery中的end()
要说end(),我们就不得不说prevObject. 在jQuery中,每个jQuery对象都有一个prevObject属性 var $p = $('p'); 这个属性是做什么的呢? jQuery内部 ...
- jquery的$.与$.fn的区别
这个是jquery插件的形式,举个例子: <div id="myDiv"></div> (function($){ $.fn.extend({ test:f ...
随机推荐
- AngularJS：实现动态添加输入控件功能（转）
http://www.cnblogs.com/ilovewindy/p/3849428.html <!DOCTYPE html> <html> <head> < ...
- android adt与android sdk有什么关系，他们在开发中各起到什么作用
ADT(Android Development Tools):目前Android开发所用的开发工具是Eclipse,在Eclipse编译IDE环境中,安装ADT,为Android开发提供开发工具的升级 ...
- u-boot 源码修改 bootcmd，IP ，BOOTARGS等参数
uboot1.1.6\include\configs\smdk6410.h #define CONFIG_BOOTCOMMAND"nand read 0xc0008000 0x200000 ...
- 消息提示和消息推送插件toastr
http://www.jq22.com/yanshi476 比较棒的消息提示和消息推送插件toastr function myIntervalshow() { // showPopup1(300, 1 ...
- [转] C# 中的static静态变量
logitechyan原文关于C#中static静态变量 C#静态变量使用static 修饰符进行声明,在类被实例化时创建,通过类进行访问不带有 static 修饰符声明的变量称做非静态变量,在对象被 ...
- spring中的BeanFactory与ApplicationContext的作用和区别？
BeanFactory类关系继承图 1. BeanFactory类结构体系: BeanFactory接口及其子类定义了Spring IoC容器体系结构,由于BeanFactory体系非常的庞大和复杂, ...
- 《Python核心编程》 第四章 Python对象- 课后习题
练习 4-1. Python对象.与所有Python对象有关的三个属性是什么?请简单的描述一下. 答:身份.类型和值: 身份:每一个对象都有一个唯一的身份标识自己,可以用id()得到. 类型:对象的 ...
- 【Linux学习】 包含子目录的makefile简单应用
1 .目录结构 practice6 / ui / ui.h ui.c practice6 / dal / dal.h dal.c practice6 / bll / bll.h bll.c pr ...
- hadoop的压缩解压缩,reduce端join,map端join
hadoop的压缩解压缩 hadoop对于常见的几种压缩算法对于我们的mapreduce都是内置支持,不需要我们关心.经过map之后,数据会产生输出经过shuffle,这个时候的shuffle过程特别 ...
- Lucene Query Term Weighting
方法 public static Query TermWeighting(Query tquery,Map<String,Float>term2weight){ BooleanQuery ...