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 ...
随机推荐
- JAVA数据库处理(连接,数据查询,结果集返回)
package john import java.io.IOException; import java.util.*; public class QueryDataRow { public Hash ...
- Ubuntu 出现 apt-get问题的解决方法
ubuntu 10.10 sudo apt-get update 404 Not Found or W: Failed to fetch http://cn.old-releases.ubuntu. ...
- sql语句中获取datetime任何部分
sql语句中获取datetime的日期部分 sql语句中 经常操作操作datetime类型数据.今天在写一个存储过程的时候需要将 一个datetime的值的 日期部分提取出来.网上有许多这方面的介绍. ...
- bzoj 1014 [JSOI2008]火星人prefix（splay+hash）
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1014 [题意] 给定一个字符串,要求提供修改一个字符,插入一个字符,查询两个后缀LCP ...
- SQL Server 中的三种分页方式
USE tempdb GO SET NOCOUNT ON --创建表结构 IF OBJECT_ID(N'ClassB', N'U') IS NOT NULL DROP TABLE ClassB GO ...
- CentOS上firefox安装flash
CentOS下firefox安装flash说明 CentOS下自带了firefox,但没有flash插件的,按它自己的提示安装不成功,需要手动安装,如下: 1.打开flash官网,http://lab ...
- Java Thread.interrupt 害人！ 中断JAVA线程（zz）
http://www.blogjava.net/jinfeng_wang/archive/2012/04/22/196477.html#376322 ————————————————————————— ...
- JAVA中“==”与equals()方法区别
equals 方法是 java.lang.Object 类的方法 有两种用法说明: ()对于字符串变量来说,使用"=="和"equals()"方法比较字符串时, ...
- Spring AOP + AspectJ in XML configuration example
For those don't like annotation or using JDK 1.4, you can use AspectJ in XML based instead. Review l ...
- STM32的GPIO使用的函数剖析
转载http://blog.csdn.net/wuwuhuizheyisheng/article/details/8239599 STM32的GPIO总结 作者:JCY 该文是自己学习了一段STM32 ...