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 ...
随机推荐
- JavaEE参考示例 SpringSide 4.0 GA版杀青
SpringSide是以Spring Framework为核心的,Pragmatic风格的JavaEE应用参考示例,是JavaEE世界中的主流技术选型,较佳实践的总结与演示. 经过漫长的7个月和6个R ...
- wpa_cli调试工具的使用
1: run wpa_supplicant first use the following command: wpa_supplicant -Dwext -iwlan0 -C/data/system/ ...
- python 去掉\n\t多余空格
>>> import re >>> sss = "SELECT a.id,\n a.customer_id as user_id,\n ...
- mybatis实战教程(mybatis in action)之九:mybatis 代码生成工具的使用
mybatis 应用程序,需要大量的配置文件,对于一个成百上千的数据库表来说,完全手工配置,这是一个很恐怖的工作量. 所以mybatis 官方也推出了一个mybatis代码生成工具的jar包. 今天花 ...
- fork/join使用示例
fork/join框架是用多线程的方式实现分治法来解决问题.fork指的是将问题不断地缩小规模,join是指根据子问题的计算结果,得出更高层次的结果. fork/join框架的使用有一定的约束条件: ...
- android模块化app开发笔记-2插件间布局文件共享
android编程时布局文件,图片资源等都是放在同一个文件夹下,这样照成一个问题就是我们想重用UI布局文件和图片时就还需要其分离这些资料,相信大部分android程序员都遇到过这样的问题,其痛苦程度不 ...
- HDU 4267-A Simple Problem with Integers（多个BIT）
题意: 2种操作 1 a b k c 在区间[a,b]中的(i-a)%k==0的位置i上的数+c 2 a 查询位置a的值 输出每次查询的值 分析: 开始想到多维的线段树,但比较麻烦,看了题解才知道,用 ...
- bjfu1164 Parity Game
简单规律题.首先想到的是,若01串中1有n个,则可以通过操作,使串中1的个数变为n-1.n-2……1.0个:第2个想到的是,如果n为奇数,可以通过操作,使串中1的个数最多变为n+1,而若n为偶数,则无 ...
- 如何用chrome修改js代码，跳过网站等待时间
用chrome修改js代码 By Z.H. Fu 切问录 [maplewizard.github.io](http://maplewizard.github.io ) 网页中大部分的限制都是由js编写 ...
- ACM1994
/* Problem Description 为自行解决学费,chx勤工俭学收入10000元以1年定期存入银行,年利率为3.7% .利率按年计算,表示100元存1年的利息为3.7元.实际上有时提前有时 ...