Jquery中$与$.fn的区别
当今web开发往往离不开Jquery的使用，Jquery以其简洁的使用方式、良好的浏览器兼容性赢得了软件研发同行的青睐，作为其中的一员，自然也不例外，尽管刚开始时很排斥Jquery，今天我谈一下对Jquery中$与$.fn的认识和理解，不对地方深望指正：
1、什么是$?
答：jquery的另一种表现形式；
2、看下面的例子：
例子01：
1 <html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
4 <title>$与$.fn的区别——demo 01</title>
5 <script type="text/javascript" src="./jquery-1.6.2.js"></script>
6 <script type="text/javascript">
7 $.test = function(a,b) {
8 return a+b;
9 };
10 alert($.test(4,4));
11 </script>
12 </head>
13 <body>
14 </body>
15 </html>
2.
1 例子02：
2
3 <html>
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
6 <title>$与$.fn的区别——demo 02</title>
7 <script type="text/javascript" src="./jquery-1.6.2.js"></script>
8 <script type="text/javascript">
9 $.extend({
10 test:function(a,b) {
11 return a+b;
12 }
13 });
14 alert($.test(4,4));
15 </script>
16 </head>
17 <body>
18 </body>
19 </html>
上面两个例子中的黄色背景出的代码有什么不同和相同？
答：除了功能相同以外最大的相同点在于调用函数（或方法）的方式相同；上面两个例子最大的不同点在于声明创建test方法的方式不同。
3、看下面的例子：
例子03：
1 <html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
4 <title>$与$.fn的区别——demo 03</title>
5 <script type="text/javascript" src="./jquery-1.6.2.js"></script>
6 <script type="text/javascript">
7 $.fn.test = function() {
8 return $(this).val();
9 };
10 $(function(){
11 alert($("#name").test());
12 });
13 </script>
14 </head>
15 <body>
16 <input type="hidden" id="name" name="name" value="高焕杰"/>
17 </body>
18 </html>
例子04：
1 <html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
4 <title>$与$.fn的区别——demo 04</title>
5 <script type="text/javascript" src="./jquery-1.6.2.js"></script>
6 <script type="text/javascript">
7 $.fn.extend({
8 test:function() {
9 return $(this).val();
10 }
11 });
12 $(function(){
13 alert($("#name").test());
14 });
15 </script>
16 </head>
17 <body>
18 <input type="hidden" id="name" name="name" value="高焕杰"/>
19 </body>
20 </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：
1 <html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
4 <title>$与$.fn的区别——demo 05</title>
5 <script type="text/javascript" src="./jquery-1.6.2.js"></script>
6 <script type="text/javascript">
7 $.prototype.test = function() {
8 return $(this).val();
9 };
10 $(function(){
11 alert($("#name").test());
12 });
13 </script>
14 </head>
15 <body>
16 <input type="hidden" id="name" name="name" value="高焕杰"/>
17 </body>
18 </html>
例子06：
1 <html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
4 <title>$与$.fn的区别——demo 06</title>
5 <script type="text/javascript" src="./jquery-1.6.2.js"></script>
6 <script type="text/javascript">
7 $.prototype.extend({
8 test:function() {
9 return $(this).val();
10 }
11 });
12 $(function(){
13 alert($("#name").test());
14 });
15 </script>
16 </head>
17 <body>
18 <input type="hidden" id="name" name="name" value="高焕杰"/>
19 </body>
20 </html> http://www.cnblogs.com/sharpest/p/6271039.html
Jquery中$与$.fn的区别的更多相关文章
- jquery的$.与$.fn的区别
这个是jquery插件的形式,举个例子: <div id="myDiv"></div> (function($){ $.fn.extend({ test:f ...
- jQuery extend()和jQuery.fn.extend()区别和详解
1.认识jQuery extend()和jQuery.fn.extend() jQuery的API手册中,extend方法挂载在jQuery和jQuery.fn两个不同对象上方法,但在jQuery内部 ...
- $.extend() 或 jQuery.extend() 与 $.fn.Xxx 或 jQuery.fn.extend(object) 之jQuery插件开发
jQuery为开发插件提拱了两个方法 语法现象1:$.extend() 或 jQuery.extend() 或 jQuery.extend(object)//可以理解为为jQuery类添加类方法或静态 ...
- jQuery介绍 DOM对象和jQuery对象的转换与区别
jQuery介绍 DOM对象和jQuery对象的转换与区别 jQuery介绍 jQuery: http://jquery.com/ write less, do more. j ...
- Jquery中$与$.fn的差别
当今web开发往往离不开Jquery的使用,Jquery以其简洁的使用方式.良好的浏览器兼容性赢得了软件研发同行的青睐,作为当中的一员,自然也不例外,虽然刚開始时非常排斥Jquery,今天我谈一下对J ...
- jquery中onclick="fn"中$(this)所代表的对象
jquery中onclick="fn"中$(this)所代表的对象 js方法 function qiehuan(){ var src = $(this).attr("da ...
- jquery生产和开发的区别
今天说一下jquery生产和开发的区别,在我们下载jquery的时候,会有两个下载链接,一个是jquery.min.js .迷你版 (生产),另一个是 jquery.js .开发版 .不知道的人可能就 ...
- JQuery this和$(this)的区别及获取$(this)子元素对象的方法
1.JQuery this和$(this)的区别 相信很多刚接触JQuery的人,很多都会对$(this)和this的区别模糊不清,那么这两者有什么区别呢? 首先来看看JQuery中的 $() 这 ...
- jquery中的$.fn的用法
JQuery里的原型prototype分析 http://www.nowamagic.net/librarys/veda/detail/653 jquery中的$.fn的用法 ...
随机推荐
- 安卓 往SD卡里写文件不能及时更新的问题
我们做Android开发时奖保存图片到SD卡,但是Gallery中不能及时显示 下面我找到了问题所在然后解决了这个问题. 当保存图片后打开gallery时,有的会自动给你刷新,有的不行,这样就导致图片 ...
- IdHTTPServer使用注意问题
如果在同一电脑上运行多个IdHTTPServer实例,IdHTTPServer使用时候,一定要注意“DefaultPort”属性,其实真正绑定端口是这个属性决定的,所以希望IdHTTPServer绑定 ...
- [bzoj3995] [SDOI2015]道路修建 线段树
Description 某国有2N个城市,这2N个城市构成了一个2行N列的方格网.现在该国政府有一个旅游发展计划,这个计划需要选定L.R两列(L<=R),修建若干条专用道路,使得这两列之间(包括 ...
- [Swift实际操作]七、常见概念-(13)使用UIScreen查询设备屏幕信息
本文将为你演示,如何获得设备的屏幕信息,了解设备的屏幕尺寸等信息,才能做出适配性更好的应用程序. 首先导入需要使用到的界面工具框架 import UIKit 然后通过UIScreen类,就可以获得设备 ...
- max，min无法使用的问题
遇到了包含algorithm头文件以后 min或max函数不能用的问题 改成__min和__max以后就可以了
- vue2.0-router的绑定
1.首先在‘components’文件夹里面创建想要切换的路由. 2.在index.js文件里面引入地址并进行路由的注入. 3.使用<router-link to="path地址&qu ...
- Java中常用到的文件操作那些事（一）——替换doc文档模板，生成真实合同案例
工作中,我们时常会遇到一些操作文件的操作,比如在线生成合同模板,上传/下载/解析Excel,doc文档转为pdf等操作.本文就已工作中遇到的在线生成合同为例,简要地介绍一种文档替换写法. 本文目的:给 ...
- 【Quartz】工作原理
本文参考至http://www.cnblogs.com/davidwang456/p/4205237.html和https://blog.csdn.net/guolong1983811/article ...
- dotnet publish
发布Release版本:dotnet publish --configuration Release 发布Debug版本:dotnet publish --configuration Debug
- Spring事务杂谈
1. 什么是事务 事务就是以一种可控的方式,对资源进行的一组操作,保证了资源在事务前后,始终应处于被期待的正确的状态.比如不会受到宕机等原因的影响.事务本身,具有如下4种属性-ACID.(所以说事务是 ...