一个与JQuery对象获取函数冲突问题的解决

如果不用JQuery，为了不频繁使用 document.getElementById() 这个方法，很多人会写下面的一个方法来解决这个问题：

var $ = function (id) {
    return "string" == typeof id ? document.getElementById(id) : id;
};

但是你如果突然想使用JQuery，那么这么写会与JQuery冲突的，导致JQuery获取不了对象。所以比较安全的写法是：

var $id = function (id) {
    return "string" == typeof id ? document.getElementById(id) : id;
};

或者：

var $id = function (id) {
	//避免与jQuery的$函数冲突  
    return typeof id == "string" ? document.getElementById(id) : id;  
};  

下面是这次冲突的代码示例。

首先是动画切换效果的js：

		$(function(){			
			var aid = 0;
			var speed = 3000;
			var spTotal = $(".picture-switch").find(".navs").find("li").length;
			var spTime = setInterval(spAuto,speed);
			
			$(".picture-switch").find(".navs").find("li").click(function(){
				var sid = $(this).index();
				aid = sid;
				clearInterval(spTime);
				spTime = setInterval(spAuto,speed);
				switchPic(sid);
			})
			function switchPic(sid){
				$(".picture-switch").find(".pic-box").find("img").hide();
				$($(".picture-switch").find(".pic-box").find("img").get(sid)).fadeIn(500);
				$(".picture-switch").find(".navs").find("li").removeAttr("class");
				$($(".picture-switch").find(".navs").find("li").get(sid)).addClass("current");
			}
			function spAuto(){
				if(aid < (spTotal - 1)){
					aid++;
					switchPic(aid);
				}else{
					aid = 0;
					switchPic(aid);
				}
			}
		})

然后是日历的控件：

var xmlHttp;
var dateStr;
function ajaxRequest(url){
	if(window.XMLHttpRequest) 
		xmlHttp = new XMLHttpRequest();
	else if(window.ActiveXObject) 
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	xmlHttp.onreadystatechange = ajaxResponse;
	xmlHttp.open("GET",url,true);
	xmlHttp.send(null);
	//alert("Ajax对象触发成功");
}
function ajaxResponse(){
	if(xmlHttp.readyState==4){
		if(xmlHttp.status==200){
			ajaxCallback();
			//alert("Ajax返回成功");
		}
	}
}

var $id = function (id) {
    return "string" == typeof id ? document.getElementById(id) : id;
};

var Class = {
  create: function() {
    return function() {
      this.initialize.apply(this, arguments);
    }
  }
}

var Extend = function(destination, source) {
    for (var property in source) {
        destination[property] = source[property];
    }
    return destination;
}


var Calendar = Class.create();
Calendar.prototype = {
  initialize: function(container, options) {
	this.Container = $id(container);//容器(table结构)
	this.Days = [];//日期对象列表
	
	this.SetOptions(options);
	
	this.Year = this.options.Year || new Date().getFullYear();
	this.Month = this.options.Month || new Date().getMonth() + 1;
	this.SelectDay = this.options.SelectDay ? new Date(this.options.SelectDay) : null;
	this.onSelectDay = this.options.onSelectDay;
	this.onToday = this.options.onToday;
	this.onWeek = this.options.onWeek;
	this.onFinish = this.options.onFinish;	
	
	this.Draw();
  },
  //设置默认属性
  SetOptions: function(options) {
	this.options = {//默认值
		Year:			0,//显示年
		Month:			0,//显示月
		SelectDay:		null,//选择日期
		onSelectDay:	function(){},//在选择日期触发
		onToday:		function(){},//在当天日期触发
		onWeek:		function(){},//在当天日期触发
		onFinish:		function(){}//日历画完后触发
	};
	Extend(this.options, options || {});
  },
  //当前月
  NowMonth: function() {
	this.PreDraw(new Date());
  },
  //上一月
  PreMonth: function() {
	this.PreDraw(new Date(this.Year, this.Month - 2, 1));
  },
  //下一月
  NextMonth: function() {
	this.PreDraw(new Date(this.Year, this.Month, 1));
  },
  //上一年
  PreYear: function() {
	this.PreDraw(new Date(this.Year - 1, this.Month - 1, 1));
  },
  //下一年
  NextYear: function() {
	this.PreDraw(new Date(this.Year + 1, this.Month - 1, 1));
  },
  //根据日期画日历
  PreDraw: function(date) {
	//再设置属性
	this.Year = date.getFullYear(); this.Month = date.getMonth() + 1;
	//重新画日历
	this.Draw();
  },
  //画日历
  Draw: function() {
	//用来保存日期列表
	var arr = [];
	//用当月第一天在一周中的日期值作为当月离第一天的天数
	for(var i = 1, firstDay = new Date(this.Year, this.Month - 1, 1).getDay(); i <= firstDay; i++){ arr.push(0); }
	//用当月最后一天在一个月中的日期值作为当月的天数
	for(var i = 1, monthDay = new Date(this.Year, this.Month, 0).getDate(); i <= monthDay; i++){ arr.push(i); }
	//清空原来的日期对象列表
	this.Days = [];
	//插入日期
	var frag = document.createDocumentFragment();
	while(arr.length){
		//每个星期插入一个tr
		var row = document.createElement("tr");
		//每个星期有7天
		for(var i = 1; i <= 7; i++){
			var cell = document.createElement("td"); cell.innerHTML = " ";
			if(arr.length){
				var d = arr.shift();
				if(d){
					cell.innerHTML = d;
					this.Days[d] = cell;
					//alert(this.Days[d]);
					var on = new Date(this.Year, this.Month - 1, d);
					//判断是否今日
					this.IsSame(on, new Date()) && this.onToday(cell);
					//判断是否选择日期
					this.SelectDay && this.IsSame(on, this.SelectDay) && this.onSelectDay(cell);
					if(i == 1 || i == 7)
					{
						//alert(this.Days[d]);
						this.Days[d].className = "onWeek";
					}
				}
			}
			row.appendChild(cell);
		}
		frag.appendChild(row);
	}
	//先清空内容再插入(ie的table不能用innerHTML)
	while(this.Container.hasChildNodes()){ this.Container.removeChild(this.Container.firstChild); }
	this.Container.appendChild(frag);
	//附加程序
	this.onFinish();
  },
  //判断是否同一日
  IsSame: function(d1, d2) {
	return (d1.getFullYear() == d2.getFullYear() && d1.getMonth() == d2.getMonth() && d1.getDate() == d2.getDate());
  } 
}

var showDate = document.getElementById("showDate");
var cale = new Calendar("idCalendar", {
	SelectDay: new Date().setDate(10),
	onSelectDay: function(o){ o.className = "onSelect"; },
	onToday: function(o){ o.className = "onToday"; },
	onWeek: function(o){ o.className = "onWeek"; },
	onFinish: function(){
		$id("idCalendarYear").innerHTML = this.Year; $id("idCalendarMonth").innerHTML = this.Month;
		var flag = [1,2,3,6,8];
		for(var i = 0, len = flag.length; i < len; i++){
			this.Days[flag[i]].innerHTML = "" + flag[i] + "";
			this.Days[flag[i]].className = "isData";
			//alert(dateStr);
		}
	}
});

$id("idCalendarPre").onclick = function(){ cale.PreMonth(); }
$id("idCalendarNext").onclick = function(){ cale.NextMonth(); }
//$("idCalendarPreYear").onclick = function(){ cale.PreYear(); }
//$("idCalendarNextYear").onclick = function(){ cale.NextYear(); }
//$("idCalendarNow").onclick = function(){ cale.NowMonth(); }

function ajaxCallback(){
	// 获取XML节点名
	var titles = xmlHttp.responseXML.getElementsByTagName("title");
	var digests = xmlHttp.responseXML.getElementsByTagName("digest");
	var data_url = xmlHttp.responseXML.getElementsByTagName("url");
	var dates = xmlHttp.responseXML.getElementsByTagName("date");
		document.getElementById("title_txt_0").innerHTML = '';
		document.getElementById("digest_txt_0").innerHTML = '';
		document.getElementById("title_txt_1").innerHTML = '';
		document.getElementById("digest_txt_1").innerHTML = '';

	for(var j = 0, i = 0; j < titles.length; j++)
	{
		date = dates[j].firstChild.nodeValue;
		if (date == dateStr)
		{	
				titleDiv = document.createElement("h4");
				titleDiv.id = "title_txt_" + i;
						
				digestDiv = document.createElement("p");
				digestDiv.id = "digest_txt_" + i;
				//alert(digestDiv.id);
						
				title = titles[j].firstChild.nodeValue;
				url = data_url[j].firstChild.nodeValue;
				titletxt = document.createTextNode(title);
				var title_txt_val = "title_txt_" + i;
				document.getElementById(title_txt_val).innerHTML = ''+title+'';
						
				digest = digests[j].firstChild.nodeValue;
				digesttxt = document.createTextNode(digest);
				var digest_txt_val = "digest_txt_" + i;
				document.getElementById(digest_txt_val).innerHTML = digest;
				i++;
		}
	}
}

function Ajaxstart(){
	//alert("表单触发成功");
	ajaxRequest("data.xml");
}