一次与JQuery对象获取$()冲突问题的解决

重新命名该对象获取函数即可
服务器君一共花费了745.405 ms进行了5次数据库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议

如果不用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");
}

本文地址:http://www.nowamagic.net/librarys/veda/detail/782,欢迎访问原出处。

不打个分吗?

转载随意,但请带上本文地址:

http://www.nowamagic.net/librarys/veda/detail/782

如果你认为这篇文章值得更多人阅读,欢迎使用下面的分享功能。
小提示:您可以按快捷键 Ctrl + D,或点此 加入收藏

大家都在看

阅读一百本计算机著作吧,少年

很多人觉得自己技术进步很慢,学习效率低,我觉得一个重要原因是看的书少了。多少是多呢?起码得看3、4、5、6米吧。给个具体的数量,那就100本书吧。很多人知识结构不好而且不系统,因为在特定领域有一个足够量的知识量+足够良好的知识结构,系统化以后就足以应对大量未曾遇到过的问题。

奉劝自学者:构建特定领域的知识结构体系的路径中再也没有比学习该专业的专业课程更好的了。如果我的知识结构体系足以囊括面试官的大部分甚至吞并他的知识结构体系的话,读到他言语中的一个词我们就已经知道他要表达什么,我们可以让他坐“上位”毕竟他是面试官,但是在知识结构体系以及心理上我们就居高临下。

所以,阅读一百本计算机著作吧,少年!

《UNIX编程艺术》 姜宏 (作者)

《UNIX编程艺术》主要介绍了Unix系统领域中的设计和开发哲学、思想文化体系、原则与经验,由公认的Unix编程大师、开源运动领袖人物之一Eric S. Raymond倾力多年写作而成。包括Unix设计者在内的多位领域专家也为本书贡献了宝贵的内容。《UNIX编程艺术》内容涉及社群文化、软件开发设计与实现,覆盖面广、内容深邃,完全展现了作者极其深厚的经验积累和领域智慧。

更多计算机宝库...