jQuery基础学习之---cookie换肤

jQuery基础学习之---cookie换肤

        记得在刚刚基础js的时候写过一个原生的cookie换肤效果，但是使用起来不是很方便，所以闲时变用jQuery自己封装了一个换肤效果。其原理和原生的js一样，都是通过cookie进行效果的展示。

       本文存在的问题：操作cookie时，只能通过document么？JQuery有没有类似的方法？

       希望：得到大虾的指点，也希望能给和我一样的菜鸟一定的帮助。

      努力一点，生活更美好……

       点击预览效果：http://sandbox.runjs.cn/show/dgajytiu

      源代码如下：

      html:

<div class="container">
      <img src="images/a.jpg">
      <img src="images/b.jpg">
      <img src="images/c.jpg">
    </div>

css:

*{margin:0;padding:0}
body{position:relative;background-image:url(../images/a.jpg)}
.container{position:absolute;top:50px;right:50px;display:inline-table;height:50px}
.container>img{width:48px;height:48px;border:2px solid #2e3a1f;border-radius:50%;cursor:pointer}

js：

$(function(){
	$.fn.ChangeSkin = function(){
		var that = $(this),
		    $Img = that.find('img'),
		   $goal = $('body'),//换背景的目标
		     Src = '',
		    Name = 'XXYY',//cookie名称
		     Day = 30,//cookie时间
	      Cookie = {
			set:function(name,val,day){//新建cookie
				var path = new Date();
				path.setTime(path.getTime()+day*24*60*1000);
				document.cookie = name + '=' + escape(val) + ';expires=' + path.toGMTString();
			},
			get:function(name){//获取cookie
				var arr,
					reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");//正则表达式 
					arr =  document.cookie.match(reg);//match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
				    if(arr){ 
				        return (arr[2]);	        
				    }
				    //等价于if(arr = document.cookie.match(reg);)  
				}  
		};

		if(Cookie.get(Name)){
			$goal.css({backgroundImage:'url('+Cookie.get(Name)+')'})
		}

		$Img.click(function(){
			Src = $(this).attr('src');
			$goal.css({backgroundImage:'url('+Src+')'})
			Cookie.set(Name,Src,Day);
		});
	}	
	$(".container").ChangeSkin();
});