您的位置：首页 > Web前端 > JQuery

jQuery自定义插件简单介绍

2016-01-28 11:34 459 查看
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/
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  jquery 自定义插件
相关文章推荐
新的分享
章节导航