js 插件学习demo
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js 插件学习demo相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
(function ($) {
//默认参数 (放在插件外面，避免每次调用插件都调用一次，节省内存)
var defaults = {
color: ‘红色‘
};
//扩展
$.fn.extend({
//插件名称
height: function (options) {
//覆盖默认参数
var opts = $.extend(defaults, options);
//主函数
return this.each(function () {
//激活事件
var obj = $(this);
obj.click(function () {
alert(opts.color);
});
});
}
})
})(jQuery);
$(function () {
$("#p333").height({ color: ‘black2‘ });
});
</script>
</head>
<body>
<p id="p333">
click here
</p>
</body>
</html>
以上是关于js 插件学习demo的主要内容，如果未能解决你的问题，请参考以下文章
jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路