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 ...
随机推荐
- Android之APK文件签名——keytool和jarsigner
一.生成密钥库将位置定位在jdk的bin文件中,输入以下命名行:keytool -genkey -alias ChangeBackgroundWidget.keystore -keyalg RSA - ...
- aspx与ascx,ashx的用法详细的总结介绍
这篇文章主要是对aspx与ascx,ashx的用法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 做asp.net开发的对.aspx,.ascx和.ashx都不会陌生.关于它们,网 ...
- cocos2d-x 详解之 CCTexture2D（纹理图片）和 CCTextureCache（纹理缓存）
精灵和动画都涉及到纹理图片的使用,所以在研究精灵与动画之前,我们先来了解一下纹理图片类CCTexture2D和纹理缓存CCTextureCache的原理: 当一张图片被加载到内存后,它是以纹理的形式存 ...
- HDU 3311 Dig The Wells（斯坦纳树）
[题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=3311 [题意] 给定k座庙,n个其他点,m条边,点权代表挖井费用,边权代表连边费用,问使得k座庙里 ...
- 多校6 1010 HDU5802 Windows 10 dfs
// 多校6 1010 HDU5802 Windows 10 // 题意:从p到q有三种操作,要么往上升只能1步,要么往下降,如果连续往下降就是2^n, // 中途停顿或者向上,下次再降的时候从1开始 ...
- Tkinter教程之Scale篇
本文转载自:http://blog.csdn.net/jcodeer/article/details/1811313 '''Tkinter教程之Scale篇'''#Scale为输出限定范围的数字区间, ...
- 虚拟化技术对比：Xen vs KVM
恒天云:http://www.hengtianyun.com/download-show-id-68.html 一.说明 本文主要从功能方面和性能方面对Xen和KVM对比分析,分析出其优缺点指导我们恒 ...
- 关于put 上传图片的解决方式
客户端: 因为put只支持单一类型的资源进行传输,所以不能使用像 Multipart/form-data这样的content-type进行描述,而只能使用像image/jpeg .image/png的 ...
- UVA 10054 The Necklace（欧拉回路，打印路径）
题目链接: http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem ...
- PID参数整定快速入门（调节器参数整定方法）
PID调节器参数整定方法很多,常见的工程整定方法有临界比例度法.衰减曲线法和经验法.云润仪表以图文形式分别介绍调节器参数整定方法. 临界比例度法一个调节系统,在阶跃干扰作用下,出现既不发散也不衰减的等 ...