一、基础知识

1、点击计数

第一种：

 1     var aBtn=document.getElementsByTagName('input');
 2     var i=0;
 3     
 4     for(i=0;i<aBtn.length;i++){
 5         addClick(aBtn[i]);
 6     }
 7     function addClick(obj){
 8         var count=0;
 9         obj.onclick=function (){
10             alert(count++);
11         };
12     }

第二种：

 1     var aBtn=document.getElementsByTagName('input');
 2     var i=0;
 3     
 4     for(i=0;i<aBtn.length;i++){
 5         (function (obj){
 6             var count=0;
 7             obj.onclick=function (){
 8                 alert(count++);
 9             };
10         })(aBtn[i]);
11     }

第三种：

 1     var aBtn=document.getElementsByTagName('input');
 2     var i=0;
 3     
 4     for(i=0;i<aBtn.length;i++){
 5         aBtn[i].onclick=(function(count){//参数与局部变量等价
 6             return function(){
 7                 alert(count++);
 8             }
 9         })(0);
10     }

2.链式操作

　　先在库中设置

 1 vQuery.prototype.css=function(attr,value){
 2     if(arguments.length==2){//设置样式
 3         var i=0;
 4     
 5         for(i=0;i<this.elements.length;i++){
 6             this.elements[i].style[attr]=value;
 7         }
 8     }else{//获取样式
 9             
10         if(typeof attr=='string'){
11             return getStyle(this.elements[0],attr);
12         }else{
13             for(i=0;i<this.elements.length;i++){
14                 var k='';
15                 
16                 for(k in attr){//循环得到json的值
17                     this.elements[i].style[k]=attr[k];
18                 }
19             }
20         }
21     }
22     return this;//函数的链式操作
23 };

　　其他方法类似

　　然后调用

 1 $(function(){
 2     $('#btn2').css({'background':'gray','width':'100px'}).toggle(function(str){alert(1);
 3         alert($('#txt1').attr('value'));
 4     },function(){alert(0);
 5         $('#txt1').attr('value',35235345);
 6     }).hover(function(){
 7         $('#div1').hide();
 8         alert($(this).css('width'));
 9     });
10 });

3.阻止冒泡

先封装

 1 function myAddEvent(obj,sEv,fn){
 2     if(obj.attachEvent){//IE下
 3         obj.attachEvent('on'+sEv,function(){
 4             if(false==fn.call(obj)){//此处obj为发生事件的那个元素，用 call()解决 this 在 IE 下使用绑定事件的指向问题
 5                 event.cancelBubble=true;
 6                 return false;
 7             }
 8         });
 9     }else{//ff.chrome下
10         obj.addEventListener(sEv,function(ev){
11             if(false==fn.call(obj)){
12                 ev.cancelBubble=true;
13                 ev.preventDefault();
14             }
15         },false);
16     }
17 }

再调用

1 $(document).bind('contextmenu',function(){//阻止右键菜单
2         alert(0);return false;//console.log($(this));=vQuery
3     });

4.插件扩展

1 $().extend('size',function(){
2         return this.elements.length;
3     });

1 $(function(){
2     alert($('div').size());//得到所选元素的个数
3 });

二、进行封装

  1 function myAddEvent(obj,sEv,fn){
  2     if(obj.attachEvent){//IE下
  3         obj.attachEvent('on'+sEv,function(){
  4             if(false==fn.call(obj)){//此处obj为发生事件的那个元素，用 call()解决 this 在 IE 下使用绑定事件的指向问题
  5                 event.cancelBubble=true;
  6                 return false;
  7             }
  8         });
  9     }else{//ff.chrome下
 10         obj.addEventListener(sEv,function(ev){
 11             if(false==fn.call(obj)){
 12                 ev.cancelBubble=true;
 13                 ev.preventDefault();
 14             }
 15         },false);
 16     }
 17 }
 18 
 19 function getByClass(oParent,sClass){
 20     var aEle=oParent.getElementsByTagName('*');
 21     var aResult=[];console.log(aEle[0]);
 22     var i=0;
 23     
 24     for(i=0;i<aEle.length;i++){
 25         if(aEle[i].className==sClass){
 26             aResult.push(aEle[i]);
 27         }
 28     }
 29     
 30     return aResult;
 31 }
 32 
 33 function getStyle(obj,attr){
 34     if(obj.currentStyle){
 35         return obj.currentStyle[attr];
 36     }else{
 37         return getComputedStyle(obj,false)[attr];
 38     }
 39 }
 40 
 41 function vQuery(vArg){
 42     this.elements=[];//用来保存选中的元素
 43     
 44     switch(typeof vArg){
 45         case 'function'://console.log(vArg);
 46         myAddEvent(window,'load',vArg);
 47         break;
 48         case 'string':
 49         switch(vArg.charAt(0)){
 50             case '#':
 51             var obj=document.getElementById(vArg.substring(1));
 52             
 53             this.elements.push(obj);
 54             break;
 55             
 56             case '.':
 57             this.elements=getByClass(document,vArg.substring(1));console.log(this.elements);
 58             break;
 59             
 60             default:
 61             this.elements=document.getElementsByTagName(vArg);
 62         }
 63         break;
 64         case 'object':
 65         this.elements.push(vArg);
 66     }
 67 }
 68 
 69 vQuery.prototype.click=function(fn){
 70     var i=0;
 71     for(i=0;i<this.elements.length;i++){
 72         myAddEvent(this.elements[i],'click',fn);
 73     }
 74     
 75     return this;//函数的链式操作
 76 };
 77 
 78 vQuery.prototype.show=function(){
 79     var i=0;
 80     
 81     for(i=0;i<this.elements.length;i++){
 82         this.elements[i].style.display='block';
 83     }
 84     
 85     return this;//函数的链式操作
 86 };
 87 
 88 vQuery.prototype.hide=function(){
 89     var i=0;
 90     
 91     for(i=0;i<this.elements.length;i++){
 92         this.elements[i].style.display='none';
 93     }
 94     
 95     return this;//函数的链式操作
 96 };
 97 
 98 vQuery.prototype.hover=function(fnOver,fnOut){
 99     var i=0;
100     
101     for(i=0;i<this.elements.length;i++){
102         myAddEvent(this.elements[i],'mouseover',fnOver);
103         myAddEvent(this.elements[i],'mouseout',fnOut);
104     }
105     
106     return this;
107 };
108 
109 vQuery.prototype.css=function(attr,value){
110     if(arguments.length==2){//设置样式
111         var i=0;
112     
113         for(i=0;i<this.elements.length;i++){
114             this.elements[i].style[attr]=value;
115         }
116     }else{//获取样式
117             
118         if(typeof attr=='string'){
119             return getStyle(this.elements[0],attr);
120         }else{
121             for(i=0;i<this.elements.length;i++){
122                 var k='';
123                 
124                 for(k in attr){
125                     this.elements[i].style[k]=attr[k];
126                 }
127             }
128         }
129     }
130     return this;//函数的链式操作
131 };
132 
133 vQuery.prototype.attr=function(attr,value){
134     if(arguments.length==2){//设置属性
135         var i=0;
136         
137         for(i=0;i<this.elements.length;i++){
138             this.elements[i][attr]=value;
139         }
140     }else{//获取属性
141         
142         
143         
144             return this.elements[0][attr];
145         
146     }
147     
148     return this;//函数的链式操作
149 };
150 
151 vQuery.prototype.toggle=function(){
152     var i=0;
153     var _arguments=arguments;//同this一样，arguments也要设置一个变量
154     
155     for(i=0;i<this.elements.length;i++){
156         addToggle(this.elements[i]);
157     }
158     function addToggle(obj){
159         var count=0;
160         myAddEvent(obj,'click',function(){//console.log(arguments);
161             _arguments[count++%_arguments.length].call(obj);//alert(count++);
162         });
163     }
164     
165     return this;//函数的链式操作
166 };
167 
168 vQuery.prototype.eq=function(n){
169     return $(this.elements[n]);
170 };
171 
172 function appendArr(arr1,arr2){
173     var i=0;
174     for(i=0;i<arr2.length;i++){
175         arr1.push(arr2[i]);
176     }
177 }
178 
179 vQuery.prototype.find=function(str){
180     var i=0;
181     var aResult=[];//存放临时数据
182     
183     for(i=0;i<this.elements.length;i++){
184         switch(str.charAt(0)){
185             case '.':
186                 var aEle=getByClass(this.elements[i],str.substring(1));
187                 
188                 aResult=aResult.concat(aEle);console.log(aResult);
189                 break;
190             default:
191                 var aEle=this.elements[i].getElementsByTagName(str);
192                 
193                 //aResult=aResult.concat(aEle);
194                 appendArr(aResult,aEle);
195         }
196     }
197     
198     var newVquery=$();
199     newVquery.elements=aResult;
200     return newVquery;
201 };
202 
203 function getIndex(obj){
204     var aBrother=obj.parentNode.children;
205     var i=0;
206     
207     for(i=0;i<aBrother.length;i++){
208         if(aBrother[i]==obj){
209             return i;
210         }
211     }
212 }
213 
214 vQuery.prototype.index=function(){
215     return getIndex(this.elements[0]);
216 };
217 
218 vQuery.prototype.bind=function(sEv,fn){
219     var i=0;
220     
221     for(i=0;i<this.elements.length;i++){
222         myAddEvent(this.elements[i],sEv,fn);
223     }
224 };
225 
226 vQuery.prototype.extend=function(name,fn){
227     vQuery.prototype[name]=fn;//扩展插件
228 }
229 
230 function $(vArg){
231     return new vQuery(vArg);
232 }

三、应用

1.简单的选项卡

 1 $(function(){
 2     
 3     var aBtn=$('#tab').find('ul').find('li');
 4     var aDiv=$('#tab').find('.box').find('.content');
 5     
 6     aBtn.click(function(){
 7         aBtn.attr('className','link');
 8         $(this).attr('className','hover');
 9         aDiv.hide();
10         aDiv.eq($(this).index()).css('display','block');
11     });
12 });

2.淘宝幻灯片上下滑动效果

 1 $().extend('size',function(){//添加插件
 2     return this.elements.length;
 3 });
 4 $(function(){
 5     var aBtn=$('#play').find('ol').find('li');
 6     var oUl=$('#play').find('ul');
 7     var aLi=oUl.find('li');
 8     var iNow=0;
 9     var timer=null;
10     
11     aBtn.click(function(){
12         iNow=$(this).index();
13         tab();
14     });
15     function tab(){
16         aBtn.attr('className','');
17         aBtn.eq(iNow).attr('className','active');//console.log($(this));
18         
19         oUl.animate({top:-150*iNow});
20     }
21     function timerInter(){
22         iNow++;
23         
24         if(iNow==aBtn.size()){
25             iNow=0;
26         }
27         
28         tab();
29     }
30     timer=setInterval(timerInter,2000);
31     
32     $('#play').hover(function(){
33         clearInterval(timer);
34     },function(){
35         timer=setInterval(timerInter,2000);
36     });
37 });

posted on 2014-01-07 17:17 狂流阅读(682) 评论(0) 编辑收藏举报

刷新页面返回顶部

公告