jQuery自定义插件简单介绍

时间:2022-05-22 16:04:29

jQuery自定义插件简单介绍:
虽然jQuery中提供了丰富便利的函数,但是有时候可能还是不能够满足需要,在实际应用中,可能需要自己定义一些更为遍历的函数,也就是我们所说的自定义插件,下面就介绍简单介绍一下如何实现自定义插件。
一.插件制作基本原则:
1.命名原则:
如果要将插件单独生成一个文件,推荐命名方式如下:

jquery.插件名.js

这样命名可以明确告知其他程序员这是自定义插件,例如:

jquery.color.js

2.实例方法还是静态方法:
如果是实例方法要附加到jQuery.fn对象。
如果是静态方法要附加到jQuery对象。
jQuery.fn可以参阅jQuery.fn的作用是什么一章节。
jQuery.extend()函数可以参阅jQuery.extend()方法一章节。
3.this的指向:
在自定义函数的内部,this是指向选择器获取的jQuery对象,于是可以通过this.each()函数来遍历jQuery对象集合中的每一个元素。
each()函数可以参阅jQuery的each()方法一章节。
自定义插件实例可以参阅点击弹出居中登陆框实例代码一章节。
4.关于分号的使用:
分号是用来分隔js语句的,为了防止在代码压缩的时候出错,那么最好要以分号,甚至在插件的开头使用分号。
5.因为链式调用是jQuery的一个比较好的特征,所以自定义插件最好要返回一个对象,以实现链式调用效果。
二.简单代码实例:
1.插件代码:

复制代码

;(function($){
$.fn.extend({
"color":function(value){
return this.css("color",value);
}
});
})(jQuery);

复制代码

在以上代码大家可以注意到在代码最开头和结尾都有分号的使用,并且声明一个匿名函数,将jQuery对象作为参数传入。
使用$.fn.extend()函数扩展实例对象方法,此方法可以参阅jquery.fn.extend()与jquery.extend()函数的作用一章节。
2.插件的使用:

复制代码

<script type="text/javascript"> 
$(document).ready(function(){
$("#thediv").color("red");
})
</script>
</head>
<body>
<div id="thediv">蚂蚁部落</div>
</body>

复制代码

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=13052

更多内容可以参阅:http://www.softwhy.com/jquery/