手写插件jQuery插件摘要
面试后,这件事触动了很多。是一个知道十个还是一个好的开发者因此,花了几天时间研究jQuery源代码,了解jQuery的事件机制、选择器以及浏览器的兼容性如何,此后,您一直试图编写jQuery插件来实现自己的一个小特性。
如上所示,插件的功能是当鼠标位于链接上时移动链接,鼠标离开后链接就归位。
HTML的核心部分是
复制代码代码如下所示:
星期一
星期二
星期三
星期四
如果简单地使用jQuery来实现它,那么第一次开始时的函数就实现了。
复制代码代码如下所示:
$(文档)Ready(函数(){)
$(# catary )。Hover(function(){)
$(这)。动画({ paddingleft:20px},{队列:假,持续时间:500 });
}函数(){()
$(这)。动画({ paddingleft:0 },{队列:真的,持续时间:500 });
});
});
现在,我们封装的功能,plugin.js写插件,然后链在HTML文件:
复制代码代码如下所示:
(函数($){)
fn.extend({美元。
/ /插件的名字paddinglist
PaddingList:功能(选项){
参数和默认值
var默认值= {
AnimatePadding:10,
hovercolor:黑
};
var选项=扩展(默认值,选项);
返回this.each(函数(){()
选项;
在这种情况下,分配给变量的元素集是UL
var obj = $(this);
在UL中获取一个对象
var项目= $()
(悬停)将事件添加到
items.hover(函数(){()
美元(这个)。Css(颜色)
队列false表示未添加到动画队列中。
$(这)。动画({ paddingleft:o.animatepadding },{队列:假,持续时间:300 });
}函数(){()
美元(这个)。Css(颜色)
$(这)。动画({ paddingleft:0 },{队列:真的,持续时间:300 });
});
});
}
});
}(jQuery);
当然,在外部链插件之前需要使用SRC的原始jQuery库文件:
复制代码代码如下所示:
$(文档)Ready(函数(){)
$(# catary)。PaddingList({ animatepadding:30,hovercolor:红色});
});