jQuery 插件写法2
Posted 星空下的眼泪
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery 插件写法2相关的知识，希望对你有一定的参考价值。
转载：http://www.xuanfengge.com/jquery-plug-in-written-summary-and-summary-of-writing-object-oriented-manner.html
一、jQuery插件的类型
1. jQuery方法
很大一部分的jQuery插件都是这种类型，由于此类插件是将对象方法封装起来，在jQuery选择器获取jQuery对象过程中进行操作，从而发挥jQuery强大的选择器优势。
2. 全局函数法
可以把自定义的功能函数独立附加到jQuery命名空间下，从而作为jQuery作用域下的一个公共函数使用。
但全局函数没有被绑定到jQuery对象上，故不能在选择器获取的jQuery对象上调用。需要通过jQuery.fn()或$.fn()方式进行引用。
3. 选择器法
如果觉得jQuery提供的选择器不够用或不方便的话，可以考虑自定义选择器。
二、jQuery插件的机制
1. jQuery.extend()方法
这种方法能够创建全局函数或选择器。
所谓全局函数，就是jQuery对象的方法，实际上就是位于jQuery命名空间内部的函数，有人把这类函数称为实用工具函数，这些函数都有一个共同特征，就是不直接操作DOM元素，而是操作javascript的非元素对象，或者执行其他非对象的特定操作，如jQuery的each()函数和noConflict()函数。
例如，在jQuery命名空间上创建两个公共函数：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
jQuery.extend({
min : function(a,b){
return a<b?a:b;
},
max : function(a,b){
return a<b?b:a;
}
})
$(function(){
$("input").click(function(){
var a = prompt("请输入一个数：");
var b = prompt("再输入一个数：");
var c = jQuery.min(a,b);
var d = jQuery.max(a,b);
alert("最大值是：" + d + "\n最小值是：" + c);
});
})
<input type="button" value="jQuery扩展测试" />
|
jQuery.extend()方法除了可以创建插件外，还可以用来扩展jQuery对象。
例如，调用jQuery.extend()方法把对象a和对象b合并为一个新的对象，并返回合并对象将其赋值给变量c：
|
1
2
3
4
5
6
7
8
|
var a = {name : "aaa",pass : 777};
var b = {name : "bbb",pass : 888,age : 9};
var c = jQuery.extend(a,b);
$(function(){
for(var name in c){
$("div").html($("div").html() + "<br />"+ name + ":" + c[name]);
}
})
|
如果要向jQuery命名空间上添加一个函数，只需要将这个新函数制定为jQuery对象的一个属性即可。其中jQuery对象名也可以简写为$，jQuery.smalluv==$.smalluv。
例如，创建jQuery全局函数：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
jQuery.smalluv = {
min : function(a,b){
return a<b?a:b;
},
max : function(a,b){
return a<b?b:a;
}
}
$(function(){
$("input").click(function(){
var a = prompt("请输入一个数:");
var b = prompt("再输入一个数:");
var c = jQuery.smalluv.min(a,b);
var d = jQuery.smalluv.max(a,b);
alert("最大值是：" + d + "\n最小值是：" + c);
});
})
|
2. jQuery.fn.extend()方法
这种方法能够创建jQuery对象方法。
举一个最简单的jQuery对象方法例子：
|
1
2
3
4
5
6
7
8
|
jQuery.fn.test = function(){
alert("jQuery对象方法");
}
$(function(){
$("div").click(function(){
$(this).test();
});
})
|
三、总结
- 在jQuery匿名函数中,采用jQuery.extend();方法创建jQuery插件
- 在jQuery匿名函数中,采用对象.属性=函数的方式创建jQuery插件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>最简单的jquery插件</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../res/jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
(function($) {
jQuery.extend({//写法1
a: function(h){
$("#ad").html(h);
},
b:function(h){
alert(h);
}
})
})(jQuery);
(function($) {//写法2
jQuery.a=function(h){
$("#ad").html(h);
}
jQuery.b=function(h){
alert(h);
}
})(jQuery);
$(document).ready(function(){
$.a("abc");
$.b("xyz");
});
</script>
</head>
<body>
<h3>最简单的jQuery插件</h3>
<div id="ad"></div>
</body>
</html>
|
以上是关于jQuery 插件写法2的主要内容，如果未能解决你的问题，请参考以下文章
第七章（插件的使用和写法）（7.2 jQuery 表单插件 ----- Form）
jQuery学习jQuery插件的使用与写法（表单验证插件-validation）