JQuery作为应用最广的JS库,其最强大的功能之一就是几乎涵盖所有方法的且代码十分简短的选择器功能,我们也可用自己的代码实现此功能,代码逻辑、使用方法与JQuery一致
function ZQuery(arg){ this.elements = []; //存东西 this.domString = ''; //保存字符串标签 if(typeof arg=='function'){ //DOMReady DOMReady(arg); }else if(typeof arg=='string'||arg instanceof String){ if(arg.indexOf('<')!=-1){ this.domString = arg; }else{ //获取元素 this.elements = getEle(arg); this.length = this.elements.length; } }else{ //原生对象-》ZQuery对象 this.elements.push(arg); this.length = this.elements.length; } } ZQuery.prototype.css = function(name,value){ if(arguments.length==2){ //设置一个样式 for(var i=0;i<this.elements.length;i++){ this.elements[i].style[name] = value; } }else{ if(typeof name=='string'){ //获取样式 return getStyle(this.elements[0],name); }else{ //批量设置样式 var json = name; for(var name in json){ for(var i=0;i<this.elements.length;i++){ this.elements[i].style[name] = json[name]; } } } } }; ZQuery.prototype.attr = function(name,value){ if(arguments.length==2){ //设置一个属性 for(var i=0;i<this.elements.length;i++){ this.elements[i].setAttribute(name,value); } }else{ if(typeof name=='string'){ //获取属性 return this.elements[0].getAttribute(name); }else{ //批量设置属性 var json = name; for(var name in json){ for(var i=0;i<this.elements.length;i++){ this.elements[i].setAttribute(name,json[name]); } } } } }; ZQuery.prototype.addClass = function(sClass){ var re = new RegExp('\\b'+sClass+'\\b','g'); for(var i=0;i<this.elements.length;i++){ if(this.elements[i].className){ if(this.elements[i].className.search(re)==-1){ this.elements[i].className += ' '+sClass; } }else{ this.elements[i].className = sClass; } this.elements[i].className = this.elements[i].className.replace(/^\s+|\s+$/g,'').replace(/\s+/g,' '); } return this; }; ZQuery.prototype.removeClass = function(sClass){ var re = new RegExp('\\b'+sClass+'\\b','g'); for(var i=0;i<this.elements.length;i++){ if(this.elements[i].className){ this.elements[i].className = this.elements[i].className.replace(re,''); this.elements[i].className = this.elements[i].className.replace(/^\s+|\s+$/g,'').replace(/\s+/g,' '); if(this.elements[i].className==''){ this.elements[i].removeAttribute('class'); } } } return this; }; ZQuery.prototype.html = function(value){ if(value||value==''){ //设置 for(var i=0;i<this.elements.length;i++){ this.elements[i].innerHTML = value; } }else{ return this.elements[0].innerHTML; } }; ZQuery.prototype.val = function(value){ if(value||value==''){ //设置 for(var i=0;i<this.elements.length;i++){ this.elements[i].value = value; } }else{ return this.elements[0].value; } }; ZQuery.prototype.show = function(){ for(var i=0;i<this.elements.length;i++){ this.elements[i].style.display = 'block'; } return this; }; ZQuery.prototype.hide = function(){ for(var i=0;i<this.elements.length;i++){ this.elements[i].style.display = 'none'; } return this; }; ;'click mouseover mouseout mousedown mouseup mousemove mouseenter mouseleave change keydown keyup contextmenu'.replace(/\w+/g,function(str){ ZQuery.prototype[str] = function(fn){ for(var i=0;i<this.elements.length;i++){ addEvent(this.elements[i],str,fn); } }; }); ZQuery.prototype.get = function(n){ for(var i=0;i<this.elements.length;i++){ if(i==n){ return this.elements[i]; } } }; ZQuery.prototype.eq = function(n){ for(var i=0;i<this.elements.length;i++){ if(i==n){ return $(this.elements[i]); } } }; ZQuery.prototype.index = function(){ var aSiblings = this.elements[0].parentNode.children; for(var i=0;i<aSiblings.length;i++){ if(aSiblings[i]==this.elements[0]){ return i; } } }; ZQuery.prototype.hover = function(fn1,fn2){ for(var i=0;i<this.elements.length;i++){ $(this.elements[i]).mouseenter(fn1); $(this.elements[i]).mouseleave(fn2); } }; ZQuery.prototype.toggle = function(){ var args = arguments; var _this = this; for(var i=0;i<this.elements.length;i++){ ;(function(count){ $(_this.elements[i]).click(function(ev){ args[count%args.length].call(this,ev); count++; }); })(0); } }; ZQuery.prototype.animate = function(json,options){ for(var i=0;i<this.elements.length;i++){ move(this.elements[i],json,options); } }; ZQuery.prototype.appendTo = function(arg){ var aParent = $(arg); for(var i=0;i<aParent.length;i++){ aParent.get(i).insertAdjacentHTML('beforeEnd',this.domString); } return this; }; ZQuery.prototype.prependTo = function(arg){ var aParent = $(arg); for(var i=0;i<aParent.length;i++){ aParent.get(i).insertAdjacentHTML('afterBegin',this.domString); } return this; }; ZQuery.prototype.insertAfter = function(arg){ var aParent = $(arg); for(var i=0;i<aParent.length;i++){ aParent.get(i).insertAdjacentHTML('afterEnd',this.domString); } return this; }; ZQuery.prototype.insertBefore = function(arg){ var aParent = $(arg); for(var i=0;i<aParent.length;i++){ aParent.get(i).insertAdjacentHTML('beforeBegin',this.domString); } return this; }; ZQuery.prototype.remove = function(){ var oParent = this.elements[0].parentNode; for(var i=0;i<this.elements.length;i++){ oParent.removeChild(this.elements[i]); } return this; }; function $(arg){ return new ZQuery(arg); }; $.ajax = function(json){ ajax(json); }; $.jsonp = function(json){ jsonp(json); }; $.fn = ZQuery.prototype; $.fn.extend = function(json){ for(var name in json){ ZQuery.prototype[name] = json[name]; } }; function json2url(json){ var arr = []; for(var name in json){ arr.push(name+'='+encodeURIComponent(json[name])); } return arr.join('&'); } function ajax(json){ json = json||{}; if(!json.url)return; json.type = json.type||'get'; json.timeout = json.timeout||15000; json.data = json.data||{}; json.data.t = Math.random(); if(window.XMLHttpRequest){ var oAjax = new XMLHttpRequest(); }else{ var oAjax = new ActiveXObject('Microsoft.XMLHTTP'); } switch(json.type.toLowerCase()){ case 'get': oAjax.open('GET',json.url+'?'+json2url(json.data),true); oAjax.send(); break; case 'post': oAjax.open('POST',json.url,true); oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); oAjax.send(json2url(json.data)); break; default: oAjax.open('GET',json.url+'?'+json2url(json.data),true); oAjax.send(); break; } json.loading&&json.loading(); json.timer = setTimeout(function(){ oAjax.onreadystatechange = null; json.error&&json.error('网络超时。'); },json.timeout); oAjax.onreadystatechange = function(){ if(oAjax.readyState==4){ clearTimeout(json.timer); if(oAjax.status>=200&&oAjax.status<300||oAjax.status==304){ json.success&&json.success(oAjax.responseText); }else{ json.error&&json.error(oAjax.status); } } }; } function jsonp(json){ json = json||{}; if(!json.url)return; json.timeout = json.timeout||15000; json.cbName = json.cbName||'cb'; json.data = json.data||{}; json.data[json.cbName] = 'show'+Math.random(); json.data[json.cbName] = json.data[json.cbName].replace('.',''); json.timer = setTimeout(function(){ window[json.data[json.cbName]] = function(res){ oHead.removeChild(oS); json.error&&json.error('网络超时!'); } },json.timeout); window[json.data[json.cbName]] = function(res){ clearTimeout(json.timer); oHead.removeChild(oS); json.success&&json.success(res); } var oHead = document.getElementsByTagName('head')[0]; var oS = document.createElement('script'); oS.src = json.url+'?'+json2url(json.data); oHead.appendChild(oS); } function getStyle(obj,sName){ return (obj.currentStyle||getComputedStyle(obj,false))[sName]; } function addEvent(obj,sEv,fn){ if(obj.addEventListener){ obj.addEventListener(sEv,function(ev){ var oEvent = ev||event; if(fn.call(obj,oEvent)==false){ oEvent.cancelBubble = true; oEvent.preventDefault&&oEvent.preventDefault(); } },false); }else{ obj.attachEvent('on'+sEv,function(){ var oEvent = ev||event; if(fn.call(obj,oEvent)==false){ oEvent.cancelBubble = true; return false; } }); } } function DOMReady(fn){ if(document.addEventListener){ addEvent(document,'DOMContentLoaded',function(){ fn&&fn(); }); }else{ addEvent(document,'onreadystatechange',function(){ if(document.readyState=='complete'){ fn&&fn(); } }); } } function getByClass(oParent,sClass){ if(oParent.getElementsByClassName){ return oParent.getElementsByClassName(sClass); }else{ var aResult = []; var aEle = oParent.getElementsByTagName('*'); var re = new RegExp('\\b'+sClass+'\\b','g'); for(var i=0;i<aEle.length;i++){ if(aEle[i].className.search(re)!=-1){ aResult.push(aEle[i]); } } return aResult; } } function getByStr(aParent,str){ var aChild = []; //遍历父级 for(var i=0;i<aParent.length;i++){ switch(str.charAt(0)){ case '#': //#id aChild.push(document.getElementById(str.substring(1))); break; case '.': //.class var aEle = getByClass(aParent[i],str.substring(1)); for(var j=0;j<aEle.length;j++){ aChild.push(aEle[j]); } break; default: if(/^\w+\.\w+$/.test(str)){ //筛选 //li.on var arr = str.split('.'); var re = new RegExp('\\b'+arr[1]+'\\b','g'); var aEle = aParent[i].getElementsByTagName(arr[0]); for(var j=0;j<aEle.length;j++){ if(aEle[j].className.search(re)!=-1){ aChild.push(aEle[j]); } } }else if(/^\w+\[\w+\=\w+\]$/.test(str)){ //属性 var arr = str.split(/\[|\=|\]/); var aEle = aParent[i].getElementsByTagName(arr[0]); for(var j=0;j<aEle.length;j++){ if(aEle[j].getAttribute(arr[1]) == arr[2]){ aChild.push(aEle[j]); } } }else if(/^\w+\:\w+(\(\d+\))?$/.test(str)){ var arr = str.split(/\:|\(|\)/); var aEle = aParent[i].getElementsByTagName(arr[0]); switch(arr[1]){ case 'first': aChild.push(aEle[0]); break; case 'last': aChild.push(aEle[aEle.length-1]); break; case 'even': for(var j=0;j<aEle.length;j+=2){ aChild.push(aEle[j]); } break; case 'odd': for(var j=1;j<aEle.length;j+=2){ aChild.push(aEle[j]); } break; case 'eq': aChild.push(aEle[arr[2]]); break; case 'lt': for(var j=0;j<arr[2];j++){ aChild.push(aEle[j]); } break; case 'gt': for(var j=parseInt(arr[2])+1;j<aEle.length;j++){ aChild.push(aEle[j]); } break; } }else{ //标签 var aEle = aParent[i].getElementsByTagName(str); for(var j=0;j<aEle.length;j++){ aChild.push(aEle[j]); } } break; } } return aChild; } function getEle(str){ var arr = str.replace(/^\s+|\s+$/g,'').split(/\s+/); var aParent = [document]; var aChild = []; for(var i=0;i<arr.length;i++){ aChild = getByStr(aParent,arr[i]); //这一次获取到的子级,是下一次获取的父级 aParent = aChild; } return aChild; } function move(obj,json,options){ clearInterval(obj.timer); options=options || {}; options.easing=options.easing|| 'ease-out'; options.duration=options.duration || 800; var count=Math.floor(options.duration/30); var start={}; var dis={}; for(var name in json){ start[name]=parseFloat(getStyle(obj,name)); dis[name]=json[name]-start[name]; } var n=0; obj.timer=setInterval(function(){ n++; for(var name in json){ switch(options.easing){ case 'linear': var a=n/count; var cur=start[name]+dis[name]*a; break; case 'ease-in': var a=n/count; var cur=start[name]+dis[name]*a*a*a; break; case 'ease-out': var a=1-n/count; var cur=start[name]+dis[name]*(1-a*a*a); break; } if(name=='opacity'){ obj.style.opacity=cur; obj.style.filter='alpha(opacity:'+cur*100+')'; }else{ obj.style[name]=cur+'px'; } } if(n==count){ clearInterval(obj.timer); options.complete && options.complete(); } },30); }
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
暂无评论...
更新日志
2024年11月27日
2024年11月27日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]