Jquery—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—Jquery中$与$.fn的区别相关推荐
- jQuery 请指出'$'和'$.fn'的区别?或者说出'$.fn'的用途。
http://hi.baidu.com/chy0806css/item/acc52425099c30ff50fd87eb Jquery为开发插件提供了两个方法,分别是: $.extend(obj);$ ...
- [jQuery] jquery.extend与jquery.fn.extend的区别?
[jQuery] jquery.extend与jquery.fn.extend的区别? 1.认识jQuery extend()和jQuery.fn.extend()jQuery的API手册中,exte ...
- Jquery中bind和live的区别
Jquery中bind和live的区别 Jquery中绑定事件有三种方法:以click事件为例 (1)target.click(function(){}); (2)target.bind(" ...
- Jquery中attr与prop的区别
prop()函数的结果: 1.如果有相应的属性,返回指定属性值. 2.如果没有相应的属性,返回值是空字符串. attr()函数的结果: 1.如果有相应的属性,返回指定属性值. 2.如果没有相应的属性, ...
- jQuery中eq和get的区别
jQuery中eq和get的区别 相信大部份人都会把这2个的用法搞错.仔细查看下API文档就可以知道.eq返回的是一个jquery对象,get返回的是一个html 对象数组.举个例子: <p s ...
- JQuery对象与DOM对象的区别与转换
1.jQuery对象和DOM对象的区别 DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQuery类库的选择器获得的对象; eg: var domObj = ...
- 了解jQuery并掌握jQuery对象和DOM对象的区别
jQuery的优势: 开源--开放源代码 轻量级 强大的选择器 出色的DOM操作(对DOM元素的一个增删改查) 完善的Ajax,出色的浏览器兼容性,丰富的插件支持,完善的文档(说明书) 链式操作方式, ...
- [jQuery] jQuery和Zepto的区别?各自的使用场景?
[jQuery] jQuery和Zepto的区别?各自的使用场景? 创建$的方式不同.前者略微要大,后者略微小点.场景....emmmm 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, ...
- [jQuery] jQuery与jQuery UI有啥区别?
[jQuery] jQuery与jQuery UI有啥区别? 1)jQuery是一个js库,主要提供的功能是选择器.属性修改和事件绑定等 2)jQuery UI则是在jQuery的基础上,利用jQue ...
- [jQuery] jQuery.fn的init方法返回的this指的是什么对象?为什么要返回this
[jQuery] jQuery.fn的init方法返回的this指的是什么对象?为什么要返回this init()方法中返回的this指向init的实例对象,而init.prototype等于jQue ...
最新文章
- Python中线程Timeout的使用
- 程序员如何避免陷入内卷?
- Linux dmesg 命令学习
- android 每隔2秒执行_Android中实现延迟执行操作的三种方法
- MVC6 (ASP.NET5) 自定义TagHelper
- LeetCode 876. 链表的中间结点
- 改进初学者的PID-初始化
- offline 与 online 事件监听浏览器是否在线
- 范华专栏 | 投资中的统计陷阱
- springSecurity分离资源服务器分析
- ubuntu20.04设置开机启动
- 普通文本与富文本,超文本之间的区别
- 天下足球十大感动台词
- 短视频直播系统的功能
- Win8 许可证过期怎么重新激活?
- OSChina 周二乱弹 ——同桌男孩子动手动脚,我该怎么办
- 求求你们,这次不要放过东北
- 电脑开机蓝屏怎么解决
- 基于人工智能算法的多元负荷预测
- python+pysimplegui+socket开发登录聊天室
热门文章
- 获取ItemsControl中当前item的binding数据
- [JavaEE] Hibernate连接池配置测试
- 常用化学消毒剂使用方法
- ssh client 报 algorithm negotiation failed的解决方法
- 微软云计算介绍与实践(实践之二十七)
- 在数据库中存储层次型数据
- 七种场景下的软件作业量估计
- 1.大数据架构详解:从数据获取到深度学习 --- 大数据的本质
- 4.Linux性能诊断 --- Linux工作流程内存管理
- 18.Linux/Unix 系统编程手册(上) -- 目录与链接