jQuery的封装

讲jQuery的封装之前,先讲下json以及两个方法
$.extend和$.fn.extend
json有三种格式分别为,
对象型;

var json={sid:'s01',sname:'zs'}

使用方式

  alert(json.sid);//弹出json对象的sid属性

数组型

json json=[1,21,3];

使用方式

 alert(json[1]);//弹出json数组的第一个元素

混合型

var json={id:3,hobby:['a','b','c']};

使用方式

 alert(json.id+"--"+json.hobby[1]);//弹出json对象的id和json对象爱好的第一个元素;

$.extend：方法于将一个或多个对象的内容合并到目标对象。;
一般用来传递参数;
$.fn.extend扩展一个或多个实例属性和方法(主要用于扩展方法)。
让页面上的jQuery实例可调用此方法;
两个方法可一同使用;
咱们用换颜色来说;
假如有三个页面一样的界面
咱们需要需要改变它们的颜色样式,
不封装的话咱们需要写一遍coyp两遍,增加代码量还不便于修改
封装的话咱们只需要调用即可,还可减少代码量,和便于修改;

@charset "UTF-8";
.fen {
	background: #ff66ff;
}

.yello {
	background: #ffff66;
}

.red {
	background: #ff3333;
}

.blue {
	background: #9999ff;
}

.green {
	background: #bbff99;
}
.hui {
	background: #d6d6c2;
}

上面为提前写好的样式
下面为封装jQuery

//定义一个程序入口
$(function() {
  var color={    //定义颜色的默认值
		  head:'fen',
		  out:'yello',
		  entry:'red'
  }
  $.fn.extend({  
		bgColor:function(option){//定义方法名为	bgColor
			  $.extend(color,option);//用从页面上传递的参数覆盖默认值
			return this.each(function() {
				 $("tr:eq(0)",this).addClass(color.hred);//addclass//添加样式,
				 $("tr:gt(0)",this).addClass(color.oven);
					//添加动态效果
					$("tr:gt(0)",this).hover(function(){
						$(this).removeClass().addClass(color.out);
					},function(){
						$(this).removeClass().addClass(color.entry);
					});
			} );
		}
	});
});

然后在页面上的调用 pageContext.request.contextPath 为获取项目路径

 <link  type='text/css' rel='stylesheet'  href='${pageContext.request.contextPath }/css/table/color/table_color.css'/>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/jQuery/table/table_color/table_color.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
$(function() {
	$('table').bgColor({
		 hred:"fen",
		  out:"green",
		  oven:"hui"
	  });	
});

</script>

总结:封装的好处
减少代码量,易维护,可多次使用