vquery 一些应用
Posted 朝颜陌
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vquery 一些应用相关的知识,希望对你有一定的参考价值。
// javascript Document function myAddEvent(obj,sEv,fn){ if(obj.attachEvent){ obj.attachEvent(‘on‘+sEv,function(){ fn.call(obj); }); }else{ obj.addEventListener(sEv,fn,false); } } /*getClassName 完整版*/ function getClassName(oParent,sClass){ var aEle = oParent.getElementsByTagName(‘*‘); var iResult = []; /*一般如果需要传递参数就用new RegExp,不用//,//会把里面的所有内容都当场字符串*/ var re = new RegExp(‘\\b‘+sClass+‘\\b‘); for(var i=0;i<aEle.length;i++){ if(re.test(aEle[i].className)){ iResult.push(aEle[i]); } } return iResult; } function getStyle(obj,attr){ return obj.currentStyle ? obj.currentStyle[attr]:getComputedStyle(obj)[attr]; } function Vquery(vArg){ this.elements = []; switch(typeof vArg){ case ‘function‘: myAddEvent(window,‘load‘,vArg); break; case ‘string‘: switch(vArg.charAt(0)){ case ‘#‘://id var obj = document.getElementById(vArg.substring(1)); this.elements.push(obj); break; case ‘.‘://class this.elements = getClassName(document,vArg.substring(1)); break; default ://tagname this.elements = document.getElementsByTagName(vArg); break; } break; default: /*对象*/ break; } } function $(vArg){ return new Vquery(vArg); } Vquery.prototype.click = function(fn){ for(var i=0;i<this.elements.length;i++){ myAddEvent(this.elements[i],‘click‘,fn); } }; Vquery.prototype.css = function(attr,value){ if(arguments.length == 2){ //设置样式 for(var i=0;i<this.elements.length;i++){ this.elements[i].style[attr] = value; } }else{ return getStyle(this.elements[0],attr); } }; Vquery.prototype.attr=function (attr, value) { if(arguments.length==2) { var i=0; for(i=0;i<this.elements.length;i++) { this.elements[i][attr]=value; } } else { return this.elements[0][attr]; } }; Vquery.prototype.show = function(){ for(var i=0;i<this.elements.length;i++){ this.elements[i].style.display = ‘block‘; } }; Vquery.prototype.hide = function(){ for(var i=0;i<this.elements.length;i++){ this.elements[i].style.display = ‘none‘; } }; Vquery.prototype.hover = function(fnover,fnout){ for(var i=0;i<this.elements.length;i++){ myAddEvent(this.elements[i],‘mouseover‘,fnover); myAddEvent(this.elements[i],‘mouseout‘,fnout); } }; Vquery.prototype.toggle = function(){ var _arguments = arguments; for(var i=0;i<this.elements.length;i++){ addToggle(this.elements[i]); } function addToggle(obj){ var count = 0; //几个不同的函数就会有几个不同的变量 myAddEvent(obj,‘click‘,function(){ _arguments[count%_arguments.length].call(obj); count++; }); } }; Vquery.prototype.eq=function (n) { return $(this.elements[n]); //注意这个传递的参数和返回$ }; function appendArr(arr1, arr2) { var i=0; for(i=0;i<arr2.length;i++) { arr1.push(arr2[i]); } } Vquery.prototype.find=function (str) { var i=0; var aResult=[]; for(i=0;i<this.elements.length;i++) { switch(str.charAt(0)) { case ‘.‘: //class var aEle=getByClass(this.elements[i], str.substring(1)); aResult=aResult.concat(aEle); break; default: //标签 var aEle=this.elements[i].getElementsByTagName(str); //aResult=aResult.concat(aEle); //注意这里是集合,集合没有push方法,数组有 appendArr(aResult, aEle); } } var newVquery=$(); newVquery.elements=aResult; return newVquery; //对元素的操作实际上就是元素的内容 };
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> div{width:100px;height:100px;background:red;} </style> <script src=‘vQuery.js‘></script> <script> /* test function new Vquery(function(){ alert(‘a‘); }); new Vquery(function(){ alert(‘b‘); }); $(function(){ alert(‘a‘); }); */ /* test click $(function(){ $(‘#box1‘).click(function(){ alert(‘a‘); }); }); */ /* test css $(function(){ $(‘#box1‘).css(‘width‘); }); */ /* test show hide $(function(){ $(‘#btn1‘).click(function(){ $(‘#box1‘).show(); }); $(‘#btn2‘).click(function(){ $(‘#box1‘).hide(); }); }); */ /* test hover $(function(){ $(‘#box1‘).hover(function(){ document.title = ‘into‘; },function(){ document.title = ‘out‘; }); }); */ $(function(){ $(‘#btn3‘).toggle(function(){ $(‘#box2‘).hide(); },function(){ $(‘#box2‘).show(); }); }); </script> </head> <body> <input id="btn1" type="button" value="显示"/> <input id="btn2" type="button" value="隐藏"/> <div id="box1"></div> <input id="btn3" type="button" value="显示隐藏"/> <div id="box2"></div> </body> </html>
以上是关于vquery 一些应用的主要内容,如果未能解决你的问题,请参考以下文章