Jquery中$与$.fn的差别-白红宇

Jquery中$与$.fn的差别

阅读量：6262 次

发布时间：2019-06-22

本文共 3252 字，大约阅读时间需要 10 分钟。

当今web开发往往离不开Jquery的使用，Jquery以其简洁的使用方式、良好的浏览器兼容性赢得了软件研发同行的青睐，作为当中的一员，自然也不例外，虽然刚開始时非常排斥Jquery，今天我谈一下对Jquery中$与$.fn的认识和理解，不正确地方深望指正：

1、什么是$?

答：jquery的还有一种表现形式；

2、看以下的样例：

样例01：

<html>

<head>

<title>$与$.fn的差别——demo 01</title>

$.test = function(a,b) {

return a+b;

};

alert($.test(4,4));

</script>

</head>

<body>

</body>

</html>

样例02：

<html>

<head>

<title>$与$.fn的差别——demo 02</title>

$.extend({

test:function(a,b) {

return a+b;

}

});

alert($.test(4,4));

</script>

</head>

<body>

</body>

</html>

上面两个样例中的黄色背景出的代码有什么不同和同样？

答：除了功能同样以外最大的同样点在于调用函数（或方法）的方式同样；上面两个样例最大的不同点在于声明创建test方法的方式不同。

3、看以下的样例：

样例03：

<html>

<head>

<title>$与$.fn的差别——demo 03</title>

$.fn.test = function() {

return $(this).val();

};

$(function(){

alert($("#name").test());

});

</script>

</head>

<body>

</body>

</html>

样例04：

<html>

<head>

<title>$与$.fn的差别——demo 04</title>

$.fn.extend({

test:function() {

return $(this).val();

}

});

$(function(){

alert($("#name").test());

});

</script>

</head>

<body>

</body>

</html>

上面两个样例中的绿色背景出的代码有什么不同和同样？

答：除了功能同样以外最大的同样点在于调用函数（或方法）的方式同样；上面两个样例最大的不同点在于声明创建test方法的方式不同。

4、Jquery中$与$.fn的差别是什么？

答：在回答这个问题曾经，须要明白一个事实：Jquery的方法是能够拓展的，上面这4个样例都是对Jquery方法的拓展，从调用声明创建方法的方式来看，能够归结为两类：一类直接由$符调用；还有一类由$("")来调用，讲到这里你是不是想到了Java语言中的静态方法和实例方法，是的，假设从java类的角度认识调用创建的Jquery方法可能更好理解些，虽然Javascript没有明白的类的概念。好了如今能够回答问题了：$拓展的方法是静态方法，能够使用$直接调用，其拓展的方式有两种，一般使用$.extend({

});；而$.fn拓展的方法是实例方法，必须由“对象”$("")来调用，其拓展的方式相同有两种，一般使用$.fn.extend({ })。

5、知识延展，到底什么是fn?

答：相同在回答这样一个问题曾经请打开一个Jquery文件（）搜索这样一个字符“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() {