jQuery（插件）

1、jQuery插件机制简介：

      往jquery类库里面去扩展方法，这类方法就是jquery插件。

2、json的三种格式：

2.1.1、对象

 {sid:'s01',sname:'zs'}

2.2.2、列表/数组

[1,3,4,5]

2.3.3、混合模式

{id:3,hobby:['a','b','c']}

<script type="text/javascript">
	//json的三种格式
	$(function() {
		//1.json对象的字符串体现形式
		var json1 = {
				sid:'s001',
				sname:'张三'
		};
		
		var json3 = {
				sid:'s002',
				sname:'李四',
				hobby:["a","b","c"]
		}
		
		//json通过console.log在浏览器控制台输出
		console.log(json1);
		
		//2. json列表/数组的字符串体现形式
		var jsonArr1 = ["a","b","c"];
		console.log(jsonArr1);
		
		//json混合模式的字符串体现形式
		var jsons = {
				sid:'s001',
				sname:'张三',
				hobby:["a","b","c"]
		}
		console.log(jsons);
		
		
	})
</script>

2.2、$.extend和$.fn.extend

 2.2 .1、$.extend：对象的扩展(或继承)
      $.extend(obj1,obj2,obj3[,...])
      $.extend(obj1,obj2)
      $.extend(obj1)/$.method=function(options){...};
      

  2.2 .2、$.fn.extend
      $.fn.extend(obj1)//$.fn.method=function(options){...};

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>

<script type="text/javascript">
	//json的三种格式
	$(function() {
		//1.json对象的字符串体现形式
		var json1 = {
				sid:'s001',
				sname:'张三'
		};
		
		var json3 = {
				sid:'s002',
				sname:'李四',
				hobby:["a","b","c"]
		}
		
		//json通过console.log在浏览器控制台输出
		console.log(json1);
		
		//2. json列表/数组的字符串体现形式
		var jsonArr1 = ["a","b","c"];
		console.log(jsonArr1);
		
		//json混合模式的字符串体现形式
		var jsons = {
				sid:'s001',
				sname:'张三',
				hobby:["a","b","c"]
		}
		console.log(jsons);
		
		//$.extend是用来扩充jQuery类属性或者方法所用
		var json2 = {};
		//用后面的对象给前面的的对象扩充
		//$.extend(json2,json1);
		//扩充值覆盖的问题：
		//之前已经扩充的的属性值会被后面扩充的对象值覆盖，如果后面有新的属性，会继续扩充。
		$.extend(json2,json1,json3);
		console.log(json2);
		
		$.extend({
			hello:function(){
				alert("hello jQuery");
			}
		});
		$.hello();
		
		// $.fn.extend是用来扩充jQuery实例的属性或者方法所用
		$.fn.extend({
			hello2:function(){
				alert("hello2 jQuery");
			}
		});
		
		$("#hh").hello2();
		alert("哈哈");
		
	})
</script>

3.、jQuery插件的添加：

其实就是给jQuery添加新的实例方法或类方法，然后将功能封闭在其中。

4、jQuery插件开发实例：

4.1 命名
      jquery.xxx.js

  4.2 扩展实例方法

  4.3 如何面向集合

  4.4 如何多行集于一行

<link href="${pageContext.request.contextPath }/jQuery/table/css/jQuery.table.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/jQuery/table/js/jQuery.table.js"></script>

<script type="text/javascript">
	$(function() {
		$("table").bgColor({
			head:'yellow',
			out:'red',
			over:'blue'
		});
	})
</script>

$(function(){
	var defaults = {
			head:'fen',
			out:'yellow',
			over:'red'
	};
	$.fn.extend({
		// 使用return的原因是让该实例方法支持链编程，好比stringBuffer；
		bgColor:function(option){
			$.extend(defaults,option);
			//这里的this指的是插件本身，可以看成一个jQuery实例。
			return this.each(function() {
				// 给默认值
				//this指当前元素
				$("tr:eq(0)",this).addClass(defaults.head);
				$("tr:gt(0)",this).addClass(defaults.out);
				
				// 添加动态效果
				$("tr:gt(0)",this).hover(function(){
					$(this).removeClass().addClass(defaults.over);
				},function(){
					$(this).removeClass().addClass(defaults.out);
				});
			});
		}
	});
	})