<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个jquery插件</title>
<script src="js/jquery.min.js"></script>
<script src="extend/color.js"></script> <!--插件的引入-->
<style>
.wrap{display:flex;flex-flow: wrap;}
.box{width:100px;height:100px;border:1px solid #000;margin:10px;}
</style>
</head>
<body>
<div class="wrap">
<!--<div class="box"> 1</div>-->
</div>
<script>
$(function(){
var num =11;
for(var i=1;i<num;i++ ){
var oBox=$("<div class='box'>"+i+"</div>")
$(".wrap").append(oBox)
};
$(".box").click(function(){
$(this).bgcolor("red").color("blue"); //插件的使用
});
});
</script>
</body>
</html>
color.js文件内容:
/*
;(function($){
//这里编写插件代码
})(jQuery);
*/
;(function($){
$.fn.extend({
"color":function(value){
return this.css("color",value);
},
"bgcolor":function(value){
return this.css("background-color",value);
}
})
})(jQuery);
效果图预览: