jQuery--自定义插件

最新推荐文章于 2020-06-28 16:59:37 发布

中下游国外我

最新推荐文章于 2020-06-28 16:59:37 发布

阅读量515

点赞数

分类专栏： JQuery 文章标签： jquery

JQuery 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

http://edu.51cto.com/lesson/id-16925.html

引入插件步骤：

1、先引入jquery.js文件；

2、然后在后面引入插件；

3、最后在后面引入插件的周边；

插件的形式：

1、封装对象方法的插件，也就是基于某个DOM元素的jQuery对象，是局部性的；

2、封装全局函数的插件，这是全局的；

3、选择器插件，类似于.find()；

自定义插件需要注意的问题：

1、插件名推荐使用jquery.[插件名].js；

2、局部对象附加jquery.fn对象上，全局函数附加在jquery上；

3、插件内部，this指向的是当前的局部jquery对象；

4、可以通过this.each来遍历所有元素；

5、所有的方法或插件，都必须用分号结尾，避免出现问题；

6、插件应该返还的是jquery对象，以支持链式连缀；

7、避免插件内部使用$，如果需要请将$作为参数传递进去；如function($){$.ajax....}

注：下面的代码在jquery1.11中验证通过

html文件：

jquery.my.js--插件文件

;(function($){
$.fn.extend(
{
'my':function(color){

this.children('.my').css({
listStyle : 'none',
margin : 0,
padding : 0,
display : 'none',
color : color
});
this.children('.my').parent().hover(function(){
$(this).find('.my').slideDown('normal');
}, function(){
$(this).find('.my').stop().slideUp('normal');
});
return this;
},
}

);


}
)(jQuery);