index.html文件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- ÉÏÊö3¸ömeta±êÇ©*±ØÐë*·ÅÔÚ×îÇ°Ã棬ÈκÎÆäËûÄÚÈݶ¼*±ØÐë*¸úËæÆäºó£¡ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>hello word</h1>
<!-- <div id="thediv">测试</div> -->
<a href="">dddd</a>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="jquery-3.2.1.min.js"></script>
<script src="jqueryTest.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!-- <script src="js/bootstrap.min.js"></script>-->
</body>
<script type="text/javascript">
/*$("#thediv").color("yellow"); */
$('a').myPlugin({
'color': '#2C9929',
'fontSize': '20px'
});
</script>
</html>
jqueryTest.js文件
;(function($){
/* $.fn.extend({
color: function(value){
return this.css("color",value);
}
//如果用了 this.each(function() {
//要用 $(this)
});*/
$.fn.myPlugin = function(options) {
var defaults = {
'color': 'red',
'fontSize': '12px'
};
var settings = $.extend({},defaults, options);//将一个空对象做为第一个参数
return this.css({
'color': settings.color,
'fontSize': settings.fontSize
});
}
})(jQuery);
Reference:
jQuery官网学习中心关于插件开发的文章： http://learn.jquery.com/plugins/
jQuery官网插件中心：http://plugins.jquery.com/
jQuery官网插件发布指南：http://plugins.jquery.com/docs/publish/
JavaScript Hoist ：http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html
Google Web Developer Tool : https://developers.google.com/closure/
网友评论