首先jquery的文件是要导入的
color.js
//改变背景色的插件
//$.fn.
(function($) {
/*1.方式一 * * $.fn.changeColor=function(){ if $(this).css("background-color","yellow").css("color","red"); return $(this) }*/
//方式二
$.fn.extend({
//参数里面是一个对象,键值对,传入向下文环境
changeDom: function(option) {
var defaulta = {
ptext: "1111",
bgColor: "yellow",
fColor: "green"
}
if(typeof(option.ptext) == "undefined" || option.ptext.length == 0) {
$(this).html(defaulta.ptext);
} else {
$(this).html(option.ptext);
}
if(typeof(option.bgColor) == "undefined" || option.bgColor.length == 0) {
$(this).css("background-color", defaulta.bgColor);
} else {
$(this).css("background-color", option.bgColor);
}
if(typeof(option.fColor) == "undefined" || option.fColor.length == 0) {
$(this).css("color", defaulta.fColor);
} else {
$(this).css("color", option.fColor);
}
}
})
})(jQuery)
插件的意义是当用户调用这个插件时没有插入值就用有默认值,插入值就用用户定义的颜色
首先要引入插件
<script src="color.js"></script>
var option={
ptext:"",
bgColor:"red",
fColor:""
}
$(document).ready(
function(){
$("#div1").changeDom(option);
//$("#div2").changeDom2();
})