Resolution of a conflict with the JQuery object $ ()

If JQuery is not used, many people will write the following method to solve this problem to avoid frequent use of the document. getElementById () method:

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

However, if you suddenly want to use JQuery, this write will conflict with JQuery, and JQuery cannot get the object. Therefore, it is safer to write:

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

Or:

Var $ id = function (id) {// avoid conflict with jQuery's $ function return typeof id = "string "? Document. getElementById (id): id ;};

The following is a sample code for this conflict.

First, the js of the animation switching effect:

$(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);}}})

Then there is the calendar control:

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 object triggered successfully");} function ajaxResponse () {if (xmlHttp. readyState = 4) {if (xmlHttp. status = 200) {ajaxCallback (); // alert ("Ajax Return success ") ;}} 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); // Container (table structure) this. days = []; // Date Object List 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 () ;}, // set the default property SetOptions: function (options) {this. options = {// default value: Year: 0, // display Month: 0, // display Month SelectDay: null, // select date onSelectDay: function (){}, // trigger onToday: function () {}on the selected date, // trigger onWeek: function () {}on the current date, // trigger onFinish: function () on the current date () {} // triggered after the calendar is painted}; Extend (this. options, options | |{}) ;}, // NowMonth of the current month: function () {this. preDraw (new Date () ;}, // PreMonth: function () {this. preDraw (new Date (this. year, this. month-2, 1) ;}, // next Month NextMonth: function () {this. preDraw (new Date (this. year, this. month, 1) ;}, // previous year PreYear: function () {this. preDraw (new Date (this. year-1, this. month-1, 1) ;}, // next year NextYear: function () {this. preDraw (new Date (this. year + 1, this. month-1, 1) ;}, // draw the calendar PreDraw: function (date) {// set the attribute this. year = date. getFullYear (); this. month = date. getMonth () + 1; // re-draw the calendar this. draw () ;}, // Draw a calendar Draw: function () {// used to save the date list var arr = []; // use the Date value of the first day of the month in the week as the number of days from the first day of the month for (var I = 1, firstDay = new Date (this. year, this. month-1, 1 ). getDay (); I <= firstDay; I ++) {arr. push (0);} // use the Date value of the last day of the month in the month as the number of days of the month for (var I = 1, monthDay = new Date (this. year, this. month, 0 ). getDate (); I <= monthDay; I ++) {arr. push (I);} // clear the original date object list this. days = []; // insert date var frag = document. createDocumentFragment (); while (arr. length) {// insert a trvar row = document every week. createElement ("tr"); // each week has 7 days 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); // determines whether today this. isSame (on, new Date () & this. onToday (cell); // determines whether to select the date 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);} // clear the content before inserting it (the table of ie cannot use innerHTML) while (this. container. hasChildNodes () {this. container. removeChild (this. container. firstChild);} this. container. appendChild (frag); // append this. onFinish () ;}, // determine whether 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 () {// get the XML node name 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 ("form triggered successfully"); ajaxRequest ("data. xml ");}