zoukankan html css js c++ java

一个类似于jq的小型库

本人写了一个类似于jq的小型库，不过只是写了部分方法而已。并没有jq那么全面，下面就介绍下有哪些方法可以使用

第一个是选择器，

选择器比较简单只支持ID选择器 $(‘#id_name’)

Class选择器$(‘.class_name’)

标签选择器$(‘tag _name’)

并没有像jq那样拥有高级的选择器。

方法有

Js延迟加载

Ready     $(document).ready(function(){

// 在这里写你的代码...

});

$(functoin(){

})

事件有

Click $(‘div’).click(functoin(){

Alert(1)

})

Dblclick , mousedown mouseup , mouseover , mousemove mouseout mousemove keypress keydown keyup change reset submit hover

效果有

Show hide toggle

Css 有

Css offset width height position

属性有

Attr val html addClass removeAttr

筛选有

Eq find index get first lastss

动画有

Animate stop

文档处理有

Append remove empty

工具方法有

Trim ajax setPage（分页） extend inArray parseJSON isFunction isEmpty

isNumeric type

cq核心源码

  1 /*
  2   作者：姚观寿
  3   cq：类似于jq的一个小型库
  4   时间：2016.6.19
  5   
  6 */
  7 (function(window,undefined,document){
  8    var isIe678   =   (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion .split(";")[1].replace(/[ ]/g,"")=="MSIE6.0")||
  9                            (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion .split(";")[1].replace(/[ ]/g,"")=="MSIE7.0")||
 10                            (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion .split(";")[1].replace(/[ ]/g,"")=="MSIE8.0");
 11  
 12  function checkType(data_type){
 13        return  Object.prototype.toString.call(data_type);
 14      }    
 15 
 16  function myAddEvent(obj , sEv , fn){
 17    try{  // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
 18          obj.addEventListener(sEv,fn,false);
 19      }catch(e){
 20         try{  // IE8.0及其以下版本
 21                  obj.attachEvent('on' + sEv ,function(){
 22                           fn.call(obj);  
 23                     });
 24         }catch(e){  
 25                               // 早期浏览器
 26                            obj['on' + sEv] = fn;
 27          } 
 28     }
 29  } 
 30  
 31   function getTopOrLeft(obj,attr){
 32              var obj_attr = 0;
 33              while(obj){
 34                    obj_attr+=obj[attr];
 35                   obj=obj.offsetParent;
 36              }
 37              return   obj_attr;
 38           }  
 39  
 40  function getStyle(obj , attr){
 41         var new_attr;
 42       if(attr=='opacity'){
 43                  new_attr =  parseFloat((window.getComputedStyle?getComputedStyle(obj,null)[attr]:obj.currentStyle[attr]));  
 44            }else{
 45                 new_attr =   parseInt(window.getComputedStyle?getComputedStyle(obj,null)[attr]:obj.currentStyle[attr]);  
 46                } 
 47               if(isNaN(new_attr)){
 48                      new_attr = 0;
 49                   }
 50       return   new_attr;
 51  /* return  attr=='opacity'?parseFloat((window.getComputedStyle?getComputedStyle(obj,null)[attr]:obj.currentStyle[attr])):parseInt(window.getComputedStyle?getComputedStyle(obj,null)[attr]:obj.currentStyle[attr]);     */
 52 }
 53 
 54 function forEach(obj , fn ){
 55     var i=0, len = obj.length;
 56     for(;i<len;i++){
 57            fn(i);
 58     }
 59 }
 60  function getByClassName(oParent,className){
 61          var  aEle = oParent.getElementsByTagName('*'),
 62                 aResult = [];
 63              forEach(aEle,function(i){
 64                  if(aEle[i].className == className ){
 65                           aResult.push(aEle[i]); 
 66                     }
 67             }); 
 68             return  aResult;     
 69     }
 70 
 71 function CopyArr(arr){
 72           var newArr = [];
 73              forEach(arr , function( i ){
 74                         newArr.push(arr[i]);               
 75                     }); 
 76          return       newArr;
 77     }
 78 
 79 function getIndex( obj ){
 80  var sibing = obj.parentNode.children,
 81         index = null ;
 82         forEach(sibing , function(i){
 83                if(sibing[i] == obj ){
 84                   return  index = i-1;
 85                 }  
 86          });
 87          return index;
 88 }
 89  
 90 function Tween(value, prop, animation_attr) {
 91     //初始化
 92      this.elem    = animation_attr.elem;
 93     this.prop    = prop;
 94     this.easing  = "swing"; //动画缓动算法
 95     this.options = animation_attr.options;
 96      this.start   = this.now = this.get();
 97      this.end     = value;
 98      this.unit    = "px"
 99 }
100 
101 Tween.prototype = {
102      get: function() {
103         var computed = getStyle(this.elem, this.prop);
104          return parseFloat(computed);
105     },
106      run:function(percent){
107          var eased;
108          this.pos = eased = swing(percent);
109           this.now = (this.end - this.start) * eased + this.start;
110         
111           this.elem.style[this.prop] = this.now +this.unit;
112         return this;
113     }
114 }
115  
116  //动画算法
117 function swing(p) {
118      var tmpe = 0.5 - Math.cos(p * Math.PI) / 2; 
119      return tmpe
120 }
121 
122  Tween.prototype = {
123      get: function() {
124         var computed = getStyle(this.elem, this.prop);
125          return parseFloat(computed);
126     },
127      run:function(percent){
128          var eased;
129          this.pos = eased = swing(percent);
130           this.now = (this.end - this.start) * eased + this.start;
131      
132         if(this.prop=="opacity"){
133                          if(isIe678){
134                                  this.elem.style.filter='alpha(opacity:'+(this.now*100)+')'
135                             }else{
136                                 this.elem.style[this.prop] = this.now;
137                             }
138              }else{
139                   this.elem.style[this.prop] = this.now +this.unit;
140         }
141         return this;
142     }
143 }
144 
145  function AnimationFn(elem, properties, options,  fn){
146  /*    elem.timerId = null;
147      if (elem.timerId !=undefined && elem.timerId) {
148             return false;
149          }*/
150  
151      var animation_attr = {
152          elem            : elem,
153         props           : properties,
154         originalOptions : options,
155         options         : options,
156         startTime       : null,//动画开始时间
157         tweens          : []//存放每个属性的缓动对象，用于动画
158      }
159   
160     for (var k in properties) {
161           animation_attr.tweens.push( new Tween(properties[k], k, animation_attr));
162     }
163      animation_attr.startTime=AnimationFn.fxNow || createFxNow();
164      var tick = function() {
165          var currentTime = AnimationFn.fxNow || createFxNow();
166              remaining = Math.max(0, animation_attr.startTime + animation_attr.options.duration - currentTime),
167              temp = remaining / animation_attr.options.duration || 0,
168              percent = 1 - temp;
169          var index = 0,
170             length = animation_attr.tweens.length;
171           for (; index < length; index++) {
172               animation_attr.tweens[index].run(percent);
173         }
174 
175          if (percent <= 1 && length) {
176              return remaining;
177          } else {
178               return false;
179         }
180 
181     }
182      tick.elem = elem;
183     //tick.anim = animation_attr;
184       tick.fn  = fn;
185        AnimationFn.fx.timer(tick);
186 }    
187 
188  function createFxNow() {
189     setTimeout(function() {
190          AnimationFn.fxNow = undefined;
191     },0);
192      return (AnimationFn.fxNow = Date.now());
193 }
194    
195 AnimationFn.fx = {
196      timer: function(timer) {
197           AnimationFn.timer=timer;
198          if (timer()) {  //timer() 只是调用一个而已,就是说有这个动画时候就执行函数 返回一个false 或者是 remaining;
199             //开始执行动画 走这里
200             AnimationFn.fx.start();
201         }  
202     },
203      start: function() {
204         if (!AnimationFn.timer.elem.timerId) {
205              AnimationFn.timer.elem.timerId = setInterval(AnimationFn.fx.tick, 13);
206         }
207     },
208      stop:function(){
209       clearInterval(AnimationFn.timer.elem.timerId);
210           AnimationFn.timer.elem.timerId = null;
211            AnimationFn.timer.fn&&AnimationFn.timer.fn.call(AnimationFn.timer.elem );
212      },
213      tick: function() {
214         //不停的调用，直到定时器关闭
215           var timer,
216             i = 0;
217           AnimationFn.fxNow = Date.now();
218          if (!AnimationFn.timer()) {
219               AnimationFn.fx.stop();
220          }
221           AnimationFn.fxNow = undefined;
222     }
223 }
224  
225 function CQuery(vArg,chained_mode){
226  
227             this.elements = [];
228          switch(typeof vArg) {
229               case  'function':
230              
231                           myAddEvent(window , 'load' , vArg);
232                         break;
233               case 'string':
234                             switch(vArg.charAt(0)){
235                                    case '#':    //id
236                                         var obj = document.getElementById(vArg.substring(1));
237                                             this.elements.push(obj);
238                                           break;
239                                   case '.':    //class
240                                           var objs = getByClassName(document , vArg.substring(1));
241                                             this.elements = objs;
242                                           break; 
243                                  default:   //tagName
244                                            this.elements = document.getElementsByTagName(vArg);
245                                            break;
246                                }
247                        break;  
248                      
249                 case  'object':
250                        switch(checkType(vArg)){
251                                 case  "[object HTMLDocument]":
252                                           // this.elements =  window;
253                                           this.elements.push(window);
254                                           break;
255                                  default :       
256                                             this.elements.push(vArg);  break;
257                            }
258                   
259     }
260      return this === window&&new CQuery(vArg);
261  }
262  
263  CQuery.prototype = {
264               ev:function(event , fn){
265                    var this_elements = this.elements;
266                     forEach(this.elements,function(i){
267                             myAddEvent(this_elements[i] , event , fn);   
268                       });  
269                     new_CQuery.elements = this.elements;
270                     return new_CQuery;  
271             },
272             ready:function(fn){
273                    
274                        myAddEvent(window, 'load' , fn);
275               },
276              click:function( fn ){
277                  return this.ev('click',fn);
278             },
279            dblclick : function( fn ){
280                   return this.ev('dblclick',fn);
281                },
282            mousedown : function( fn ){
283                   return this.ev('mousedown',fn);
284                },  
285            mouseup : function( fn ){
286                    return this.ev('mouseup',fn);
287                },
288            mouseover : function( fn ){
289                  return this.ev('mouseover',fn);
290                }, 
291            mousemove : function( fn ){
292                  return this.ev('mousemove',fn);
293                },  
294            mouseout : function ( fn ){
295                   return this.ev('mouseout',fn);
296                },  
297            mousemove:function(fn){
298                return  this.ev('mousemove',fn);
299             },
300            keypress:function( fn ){
301                return  this.ev('keypress',fn);
302             },
303            keydown : function( fn ){
304                  return  this.ev('keydown',fn); 
305                },
306           keyup : function( fn ){
307                  return  this.ev('keyup',fn); 
308                },
309            change : function( fn ){
310                  return  this.ev('change',fn); 
311                },    
312            reset : function( fn ){
313                  return  this.ev('reset',fn); 
314                },    
315            submit : function( fn ){
316                  return  this.ev('submit',fn); 
317                },    
318             show:function(){
319                  var this_elements=this.elements;
320                 forEach(this.elements,function(i){
321                       this_elements[i].style.display = 'block';
322                 });  
323                    new_CQuery.elements =  this.elements;
324                     return new_CQuery; 
325            },
326            hide:function(){
327                  var this_elements = this.elements ;
328                   forEach(this.elements,function(i){
329                        this_elements[i].style.display = 'none';
330                 });  
331                  new_CQuery.elements =  this.elements;
332                   return new_CQuery;  
333            },
334            hover:function(fnOver , fnOut){
335                  var this_elements = this.elements ;
336                forEach(this.elements,function(i){
337                     myAddEvent(this_elements[i] , 'mouseover' , fnOver);
338                     myAddEvent(this_elements[i] , 'mouseout' , fnOut);    
339                });
340                  new_CQuery.elements =  this.elements;
341                   return new_CQuery; 
342            },
343            css:function(attr , value){
344               if(arguments.length==2){  //设置样式
345                  var  this_elements = this.elements
346                    forEach(this.elements , function(i){
347                                if(attr!='opacity'){
348                                       this_elements[i].style[attr] = value; 
349                                  }else{
350                                       this_elements[i].style[attr] = value;
351                                  }
352                     });  
353               }else{   //获取样式
354                        return     getStyle(this.elements[0] , attr);
355               }
356                      new_CQuery.elements =  this.elements;
357                     return new_CQuery; 
358               },
359            toggle:function(){ 
360                      var  argm = arguments,
361                           argmLen = arguments.length,
362                           this_elements = this.elements ;
363                       forEach(this.elements,function(i){
364                                            var count = 0;              
365                                           myAddEvent(this_elements[i] , 'click' , function(){
366                                            argm[count++%argmLen].call(this);
367                                                                                       })    ;
368                                     });   
369                     new_CQuery.elements =  this.elements;
370                      return new_CQuery; 
371                },
372                attr:function( attr , value){
373                          var    this_elements = this.elements ;
374                            if(arguments.length==2){
375                               forEach(this.elements , function( i ){
376                                         this_elements[i][attr] =  value;
377                              });
378                               new_CQuery.elements =  this.elements;
379                                return new_CQuery; 
380                           }else{
381                                           return this.elements[0][attr];
382                           }
383                },
384                eq:function( n ){
385                    return $(this.elements[n]); 
386                },
387                 find:function(str){
388                       var  aResult = [] ,
389                              this_elements = this.elements;
390                       forEach(this.elements , function( i ){
391                                       switch(str.charAt(0)){
392                                             case '.' :  //class
393                                                   var aEle = getByClassName(this.elements[i] , str.substring(1));
394                                                   aResult = aResult.concat(aEle);
395                                                   break;
396                                            default :
397                                                 var aEle = this_elements[i].getElementsByTagName(str);
398                                                        aResult = aResult.concat(CopyArr(aEle));
399                                           }
400                              }); 
401                      new_CQuery.elements = aResult;
402                     return new_CQuery;  
403                    },
404                    index : function(){
405                          return getIndex(this.elements[0]);
406                    },
407 
408                    offset:function(){
409          
410                                  if(arguments.length==0){
411                                    var offset={
412                                                          top:getTopOrLeft(this.elements[0],'top'),
413                                                          left:getTopOrLeft(this.elements[0],'left')
414                                                       }
415                                     return      offset;                  
416                                 }else{
417                                            var this_elements = this.elements ;
418                                            forEach(this.elements,function(i){
419                                                      this_elements[i].style.left = arguments.length[0].left;
420                                                       this_elements[i].style.top = arguments.length[0].top;
421                                            });
422                                              new_CQuery.elements =  this.elements;
423                                              return new_CQuery;  
424                                          
425                                      }
426                                     
427                        },
428                       position:function(){
429                                  if(arguments.length==0){
430                                    var offset={
431                                                          top:this.elements[0].offsetTop,
432                                                          left:this.elements[0].offsetLeft
433                                                       }
434                                     return      offset;                  
435                                 }else{
436                                            var this_elements = this.elements ;
437                                            forEach(this.elements,function(i){
438                                                      this_elements[i].style.left = arguments.length[0].left;
439                                                       this_elements[i].style.top = arguments.length[0].top;
440                                            });
441                                              new_CQuery.elements =  this.elements;
442                                              return new_CQuery;  
443                                          
444                                      }
445                                     
446                        },
447                        
448                        
449                        
450                    animate:function(prop, speed, easing, callback){
451                                var _arguments = arguments;
452                               this_elements = this.elements;
453                                if(checkType(arguments[1])=="[object Undefined]"){
454                                               _arguments[1] = 400; 
455                                              forEach(this.elements , function( i ){
456                                                  AnimationFn(this_elements[i],_arguments[0], {
457                                                         duration: _arguments[1]
458                                                         }) 
459                                          });  
460                                   }else if ((checkType(arguments[1])=="[object String]"||checkType(arguments[1])=="[object Number]")&&checkType(arguments[2])=="[object Undefined]"){
461                                         
462                                               switch(arguments[1]){
463                                                            case   'slow' :    _arguments[1] = 600 ;  break;
464                                                            case  'normal':  _arguments[1] = 400;   break;
465                                                            case  'fast' :   _arguments[1] = 200; break;
466                                                            default :   if(checkType(arguments[1])=="[object String]"){
467                                                                                      _arguments[1] = 400;   
468                                                                                } break;                 
469                                                   }
470                                          forEach(this.elements , function( i ){
471                                                  AnimationFn(this_elements[i],_arguments[0], {
472                                                             duration: _arguments[1]
473                                                         }) 
474                                           });                                            
475                                       }else if((checkType(arguments[1])=="[object String]"||checkType(arguments[1])=="[object Number]"&&checkType(arguments[2])=="[object Undefined]")&&checkType(arguments[2])=="[object Function]"){
476                                              
477                                                  var _speed = 0;
478                                                   switch(arguments[1]){
479                                                            case   'slow' :    _speed = 600 ;  break;
480                                                            case  'normal':  _speed = 400;   break;
481                                                            case  'fast' :   _speed = 200; break;
482                                                            default :  
483                                                              if(checkType(arguments[1])=="[object String]"){
484                                                                                      _speed = 400; 
485                                                                                } break;                 
486                                                   }
487                                                    forEach(this.elements , function( i ){
488                                                         AnimationFn(this_elements[i],_arguments[0], {
489                                                                     duration: _speed
490                                                                 },_arguments[2]) 
491                                                        });              
492                                           }else if(checkType(arguments[1])=="[object Function]"){
493                                              
494                                                var _speed  = 400; 
495                                              forEach(this.elements , function( i ){
496                                                  AnimationFn(this_elements[i],_arguments[0], {
497                                                         duration: _speed
498                                                         },_arguments[1]) 
499                                          });  
500                                   }
501                            new_CQuery.elements = this.elements;
502                            return new_CQuery;            
503                          },
504                        stop:function(){
505                                  var this_elements = this.elements;
506                                 forEach(this.elements , function( i ){
507                                           if(this_elements[i].timerId){
508                                                    clearInterval(this_elements[i].timerId);
509                                                    this_elements[i].timerId= null;
510                                               }
511                                         });  
512                                new_CQuery.elements = this.elements;
513                                return new_CQuery;      
514                            },
515                         append:function(html){
516                                  var this_elements = this.elements;
517                                  forEach(this.elements , function( i ){
518                                              this_elements[i].innerHTML+=html;
519                                         });  
520                                new_CQuery.elements = this.elements;
521                                return new_CQuery;       
522                             },
523                             remove:function(){
524                              var this_elements = this.elements;
525                                  forEach(this.elements , function( i ){
526                                              this_elements[i].parentNode.removeChild(this_elements[i]); 
527                                         });  
528                                new_CQuery.elements = this.elements;
529                                return new_CQuery;       
530                                  },
531                                 empty:function(){
532                                 var this_elements = this.elements;
533                                  forEach(this.elements , function( i ){
534                                               for(var j=0, length = this_elements[i].children.length; j<length;j++){
535                                                       this_elements[i].removeChild(this_elements[i].children[j]); 
536                                                  }
537                                         });  
538                                new_CQuery.elements = this.elements;
539                                return new_CQuery;       
540                                       },
541                             get:function(index){
542                                     return this.elements[index];
543                                 },
544                                 val:function(){
545                                        if(arguments.length==0){
546                                             return  this.elements[0].value;
547                                          }else{
548                                                   var this_elements = this.elements;
549                                                   var _arguments = arguments;
550                                                    forEach(this.elements , function( i ){
551                                                        this_elements[i].value = _arguments[0];
552                                                   });  
553                                            new_CQuery.elements = this.elements;
554                                            return new_CQuery;        
555                                              }
556                                     },
557                                     html:function(){
558                                             if(arguments.length==0){
559                                             return  this.elements[0].innerHTML;
560                                          }else{
561                                                   var this_elements = this.elements;
562                                                   var _arguments = arguments;
563                                                    forEach(this.elements , function( i ){
564                                                        this_elements[i].innerHTML = _arguments[0];
565                                                   });  
566                                            new_CQuery.elements = this.elements;
567                                            return new_CQuery;        
568                                              }
569                                         },
570                                         addClass:function(class_name){
571                                                 var this_elements = this.elements;
572                                                  forEach(this.elements , function( i ){
573                                                        this_elements[i].className += ' '+class_name;
574                                                   });  
575                                                    new_CQuery.elements = this.elements;
576                                                  return new_CQuery;        
577                                             },
578                                     removeAttr:function(attr){
579                                      var this_elements = this.elements;
580                                          forEach(this.elements , function( i ){
581                                                 delete this_elements[i].attr;
582                                           });  
583                                            new_CQuery.elements = this.elements;
584                                          return new_CQuery;         
585                                         },
586                                         first:function(){
587                                               return  this.elements[0];
588                                             },
589                                     last:function(){
590                                         return  this.elements[this.elements.length-1];
591                                         },
592                                     height:function(){
593                                         if(arguments.lengt==0){
594                                               return   getStyle(this.elements[0],'height');
595                                         }else{
596                                                   var this_elements = this.elements;
597                                                      forEach(this.elements , function( i ){
598                                                                this_elements[i].style.height = arguments[0]; 
599                                                       });  
600                                                        new_CQuery.elements = this.elements;
601                                                      return new_CQuery;   
602                                             }
603                                         },
604                                    function(){
605                                                    if(arguments.lengt==0){
606                                               return   getStyle(this.elements[0],'width');
607                                         }else{
608                                                   var this_elements = this.elements;
609                                                      forEach(this.elements , function( i ){
610                                                                this_elements[i].style.width = arguments[0]; 
611                                                       });  
612                                                        new_CQuery.elements = this.elements;
613                                                      return new_CQuery;   
614                                             }
615                                       }                
616                                                  
617  }
618  
619  CQuery.trim = function(str){
620           return str.replace(/(^s*)|(s*$)/g, ""); 
621      }
622 CQuery.ajax = function(ajaxObj){
623                          if(ajaxObj.url==undefined){
624                                     alert('您未设置url，请您设置提交的url') ; 
625                                     return false;
626                         };
627  
628                         //设置json数据或者文件
629                          (ajaxObj.async!==undefined)||((ajaxObj.async===false)||(ajaxObj.async = true));
630                         
631                             ajaxObj.dataType=(ajaxObj.dataType===undefined)?'json':( ajaxObj.dataType = ajaxObj.dataType.toLowerCase( ), (ajaxObj.dataType== 'file'&&'flie')||('json'));
632                     //设置post或者get方式  
633                      ajaxObj.type = (ajaxObj.type===undefined)?'post':(ajaxObj.type =ajaxObj.type.toLowerCase( ),(ajaxObj.type=='get'&&'get')||('post'));         
634                  
635        var  submit_url = '',
636              submit_table_data='';
637              str=ajaxObj.url; //这是一字符串
638              var strs= new Array(); //定义一数组
639              strs=str.split("?"); //字符分割 
640              submit_url =  strs[0]; 
641          //设置清理缓存            
642 ajaxObj.cache = (ajaxObj.cache===undefined)?true:(ajaxObj.cache&&true||false); //缓存    
643         if(!ajaxObj.cache)    {
644                time = 'time='+new Date().getTime();
645              submit_table_data = (strs.length<=1)?time:(time+'&');
646               for(var i=1, len = strs.length; i<len ;i++ ){
647                       submit_table_data += (i==len-1)?strs[i]:(strs[i]+'?');
648                   }
649            }else{
650                             for(var i=1, len = strs.length; i<len ;i++ ){
651                                  submit_table_data += (i==len-1)?strs[i]:(strs[i]+'?');
652                               }     
653                           (submit_table_data=='')||(submit_table_data+='&');
654                      }
655                       
656                       //数据连接
657                  switch(checkType(ajaxObj.data)){
658                      case "[object String]":
659                                 submit_table_data += ajaxObj.data;
660                                 break;    
661                      case "[object Object]":    
662                                 var submit_key = [],
663                                       submit_data = [];
664                                for(i in ajaxObj.data){
665                                        submit_key.push(i);
666                                        submit_data.push(ajaxObj.data[i]);
667                                    }
668                             //ajaxObj.url+=re.exec(ajaxObj.url)?"&":"?";
669                             forEach(submit_data , function(index){
670                                      submit_table_data+=((submit_data.length-1)==index)?submit_key[index]+'='+submit_data[index]:submit_key[index]+'='+submit_data[index]+'&';
671                                 } )    ;  
672                  }
673 
674            //创建 xhr对象
675             if(window.XMLHttpRequest){
676                   var xhr=new XMLHttpRequest();
677                 } else{
678                  var xhr=new ActiveXObject("Microsoft.XMLHTTP");
679                }
680                
681            //数据
682            var fileLen=fileNumber=0;
683                  if(ajaxObj.type=='get'){
684                             if(ajaxObj.dataType== 'flie'){
685                                    alert('文件上传需要设置post提交！');
686                                 }
687                               xhr.open('get',submit_url+'?'+encodeURI(submit_table_data),ajaxObj.async);
688                               xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
689                               xhr.send();
690                      }else{
691                      
692                                 if(ajaxObj.dataType!='flie'){
693                                             xhr.open('post',submit_url,true);
694                                             xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
695                                             // alert(ajaxObj.data);
696                                             xhr.send(submit_table_data);
697                                     }else{
698                                              if(ajaxObj.fileObject===undefined){
699                                                    alert('未设置文件对象，需要传递一个文件对象进来');
700                                                    return ;
701                                                 }
702                                                 
703                                                xhr.open("post",ajaxObj.url,ajaxObj.async);
704                                               //设置数据类型
705                                               xhr.setRequestHeader('X-Requested-With','XMLHttpRequest');         
706                                               //文件表单对象
707                                                var form = new FormData();  
708                                             
709                                               if(ajaxObj.fileObject.nodeName=='INPUT'){
710                                                     var file_name=  ajaxObj.fileObject.name;
711                                                      
712                                                   }else{
713                                                            var file_name =  (ajaxObj.fileName===undefined)?'file':ajaxObj.fileName;
714                                                         }
715                                           //文件对象
716                                                fileObjs=ajaxObj.fileObject.files, 
717                                               fileLen=fileObjs.length;
718                                                form.append(file_name,fileObjs[0]);
719                                               xhr.send(form);
720                                           } 
721                          }
722                  
723     //响应监控
724 xhr.onreadystatechange=function (){
725                                                                                                           //  alert('正在加载数据');
726   (xhr.readyState!=1&&xhr.readyState!=2&&xhr.readyState!=3)||(ajaxObj.loading&&ajaxObj.loading(xhr.readyState),
727                                                                                                    ajaxObj.complete&&ajaxObj.complete(xhr)
728                                                                                                            );
729                        (xhr.readyState!=4)||((xhr.status==200)?(
730                                                                 // 返回ajax数据给前端alert(xhr.responseText);
731                                                                   ajaxObj.success&&ajaxObj.success(xhr.responseText),
732                                                                  //判断是否有多个文件，如果有多个文件再次提交
733                                                                    (fileNumber>(fileLen-1))||( 
734                                                                                                       fileNumber++,
735                                                                                                       xhr.open("post",submit_url,ajaxObj.async),
736                                                                                                       //设置数据类型
737                                                                                                        xhr.setRequestHeader('X-Requested-With','XMLHttpRequest'),    
738                                                                                                        form.append(file_name,fileObjs[fileNumber]),
739                                                                                                        xhr.send(form)
740                                                                                                        )
741                                                                  ):(ajaxObj.complete&&ajaxObj.complete(xhr),
742                                                                    ajaxObj.error&&ajaxObj.error(xhr)
743                                                                    ))
744                                            
745                              
746                    }             
747                  
748    }
749 
750 
751 CQuery.setPage = function (page_arguments){
752               //获取到初始化数据
753               var id = page_arguments.id ,   //容器
754                      count = page_arguments.count ,    //总数
755                      now_index = page_arguments.index ,  //当前的索引
756                      success = page_arguments.success  ;   //成功之后的回调函数
757                       // control = (page_arguments.control !== undefined)?page_arguments.control:true;
758                      id.className = 'page';
759                var  a =new Array();
760                      //初始化数据 第一个按钮的数据
761                  if(now_index == 1){
762                         a.push("<a href='javascript:' class='unclick'>prev</a>");
763                      }else{
764                          a.push( "<a href='javascript:' >prev</a>");   
765                          }     
766                 //初始化中间的数据
767                 function setPageList(i,n_inx){
768                         if(i == n_inx){
769                                 a.push("<a href='javascript:' class='on' >"+i+"</a>");
770                             }else{
771                                  a.push("<a href='javascript:' >"+i+"</a>");
772                              }
773                     }
774              
775   function trim(str) {
776 
777     return str.replace(/(^s*)|([^0-9])|(s*$)/g,'');
778 }
779              
780             function  forEach(start, end, fn){
781                      for(var i = start;  i <= end; i++){
782                               fn&&fn( i );
783                          }
784                 }    
785                 //中间的1到count 中的页数    
786                  if(count<=9){
787                      //这里只有一种情况
788                       forEach(1, count, function(i){
789                              setPageList(i,now_index);
790                           })
791                      }else{
792                              //这里有三种情况
793                              if(now_index<=4){
794                                        forEach(1, 5, function(i){
795                                                  setPageList(i,now_index);
796                                            });
797                                          a.push("...<a href='javascript:'''>"+count+"</a>");  
798                                  }else if(now_index >= (count-3)){
799                                              a.push("<a>"+1+"</a>..."); 
800                                             forEach(count-4, count, function(i){
801                                                  setPageList(i,now_index);
802                                            });
803                                      }else{
804                                              a.push("<a href='javascript:'>1</a>..."); 
805                                              forEach(now_index-2,now_index+2,function(i){
806                                                     setPageList(i,now_index);
807                                                  });
808                                              a.push("...<a href='javascript:'>"+count+"</a>");
809                                          }
810                         }
811                 //最后添加的按钮
812              
813                 if(now_index == count){
814                        a.push("<a href='javascript:' class='unclick'>next</a>");
815                     }else{ 
816                         a.push("<a href='javascript:'>next</a>");
817                      }        
818                      
819                 //到第几页
820                 a.push("<a  class='no'>到第</a>");
821                 a.push("<a   class='no'><input/ type='text'></a>");
822                 a.push("<a  class='no'>页</a>");
823                 a.push("<a href='javascript:'>确定</a>");
824                 
825                 id.innerHTML = a.join(''); 
826                 //添加事件
827                 var o_a = id.getElementsByTagName('a');
828                 for(var i = 0, len = o_a.length; i < len;  i++){
829                                     o_a[i].onclick = (function(i){
830                                              if(i==0){
831                                                           return function(){
832                                                                /* if(page_arguments.motion){
833                                                                         if(control){return false;}
834                                                                 }*/
835                                                                   now_index--;
836                                                                 if(now_index < 1 ){
837                                                                     now_index = 1;
838                                                                     return false ;
839                                                                     }
840                                                                 page_arguments.index = now_index;
841                                                                 //page_arguments.control = control;
842                                                                 CQuery.setPage(page_arguments);
843                                                                 success({count:count, index:now_index});
844                                                                 return false;
845                                                               }
846                                                  }else if(i == (len-5)){
847                                                          return function(){
848                                                                /*   if(page_arguments.motion){
849                                                                         if(control){return false;}
850                                                                 }*/
851                                                                 now_index++;
852                                                                if(now_index > count ){
853                                                                      now_index = count; 
854                                                                      return false ;
855                                                                    }
856                                                                 page_arguments.index = now_index;
857                                                               // page_arguments.control = control;
858                                                                CQuery.setPage(page_arguments);
859                                                                success({count:count, index:now_index});
860                                                                return false;
861                                                              }
862                                                      }else if(i == (len-4)){
863                                                          return function(){
864                                                                // alert(i)
865                                                              }
866                                                           }else if(i == (len-3)||i == (len-2)){
867                                                             return function(){
868                                                              // alert(i)
869                                                              }
870                                                          }else if(i == (len-1)){
871                                                              var  o_input = id.getElementsByTagName('input')[0]; 
872                                                                        var vl ="";
873                                                                       o_input.onkeyup= function(){
874                                                                                this.value  =  trim(this.value);
875                                                                             if(this.value>=count){
876                                                                                       this.value = count;
877                                                                                 }
878                                                                                 if(this.value<=1){
879                                                                                        this.value = 1;
880                                                                                     }
881                                                                                      vl  = this.value;
882                                                                           }
883                                                             return function(){ 
884                                                                      /* if(page_arguments.motion){
885                                                                               if(control){return false;}
886                                                                        }*/
887                                                                         page_arguments.index =   parseInt(vl)||1;
888                                                                     //  page_arguments.control = control;
889                                                                       CQuery.setPage(page_arguments);
890                                                                       success({count:count, index:page_arguments.index});
891                                                              }
892                                                          }else{
893                                                            return function(){ 
894                                                                          /*if(page_arguments.motion){
895                                                                               if(control){return false;}
896                                                                        }*/
897                                                                          page_arguments.index =   parseInt(this.innerHTML);
898                                                                     //  page_arguments.control = control;
899                                                                       CQuery.setPage(page_arguments);
900                                                                       success({count:count, index:page_arguments.index});
901                                                                       return false;
902                                                                   }
903                                                          }
904                                        })(i);  
905                      }
906            }
907   CQuery.extend = function(obj){
908            for(i in obj){
909                  CQuery[i] =  obj[i];  
910               }
911       }
912       CQuery.inArray = function(arr_child,arr){
913            var in_array_index = -1;
914             forEach(arr,function(i){
915                      if(arr[i]==arr_child){
916                               in_array_index = i;
917                               return ;
918                          }
919                 });
920               (arguments.length==2)||(in_array_index=-1);
921               return   in_array_index;
922           }
923         CQuery.parseJSON = function(json_data){
924                return     JSON.parse(json_data);
925             } 
926          CQuery.isFunction =function(fn){
927                 if(checkType(data_type)==="[object Function]"){
928                       return true;
929                     }else{
930                           return false;
931                         }
932              }
933  
934 CQuery.isEmpty =  function(obj){
935              var is=false;
936              if(checkType(data_type)!=="[object Object]"){
937                    return is;
938                  }
939             for(i in obj){
940                     is=true; 
941                     if(is==1){
942                            break;
943                         }
944                 }
945      }
946     
947     CQuery.isPlainObject=function(obj){
948              if(checkType(data_type)==="[object Object]"){
949                    return true;
950                  }else{
951                        false;
952                      }
953         }
954     CQuery.isNumeric = function(num){
955               if(checkType(data_type)==="[object Nunber]"){
956                      return true;
957                  }else{
958                        false;
959                      }
960         }
961  
962  CQuery.type = function(data){
963        return typeof(data);
964      }    
965      CQuery.error= function( msg ) {
966                       throw new Error( msg );
967                    } 
968    window.fn = function(){};
969    window.$=window.jQuery = CQuery;
970    fn.prototype = CQuery.prototype;
971    fn.prototype.constructor = fn;
972    window.new_CQuery = new fn();
973  })(window,undefined,document);
974

使用例子

<!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>
<script src="cq.js"></script>
<style>
   div{
       100px;
       height:100px;
       background:red;
       position:absolute;
       left:100px;
       }
</style>
</head>
 <body>
 <script>
    $(function(){
            $('input').click(function(){
                     alert(1);
                });
            $('div').hover(function(){
                        console.log(0)
                },function(){
                            console.log(2)
                    }).click(function(){
                             $(this).animate({200,
                                                         height:200
                                                         },function(){
                                                                $(this).animate({
                                                                                           left:300
                                                                                         })
                                                             })
                        })
        });
 </script>
 <input type="button" value="按钮" />
 <div></div>
</body>
</html>

Cq 的ajax和jq的ajax差不多

最简单的json提交方式为

Var json = $.ajax({

url:'ajaxform1.php', //必填

data:'username=爱上的方式地方',

})

Alert(json)

最简单的文件上传为,这样与jq有些差别，大大减小了用户的传参

$.ajax({

url:'ajaxform1.php', //必填

success:function(data){

alert(data)

}

dataType:’file’ ,

fileObject:$(‘# fileId’).get(0)

})

参数说明

url：请求的url

fileObject：文件对象需要传文件的时候才需要设置这个

dataType：有两个参数是选择json数据传输还是file文件上传默认是json

success： ajax通信成功后回调函数

async: 同步或者异步 false为同步 true为异步默认是true

type： post提交或者是get提交默认是post

cache：提交的时候是否清理url缓存默认是不清理为true 清理为false

loading ：状态函数 ajax响应1234 状态函数 readyState

complete ： ajax通信无论成功还是失败都调用该函数

error ：ajax通信出错或者是服务器出错调用该函数

  1 <!doctype html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <title>无标题文档</title>
  6 <script  src="../cq/cq.js">
  7     
  8 </script>
  9  <style>
 10      div{
 11           260px;
 12          height:90px;
 13          line-height:30px;
 14           text-align:left;
 15           border:3px #ccc dotted;
 16           padding:30px 30px 0px 30px;
 17           
 18           color:#666
 19           }
 20          
 21          .active{
 22              color:green;
 23               border-color:green;
 24            }
 25   </style>
 26 </head>
 27  <body>
 28     <div  id="box">
 29        一次性可以拖拽上传多个文件,请把需要上传文件的拖拉到此处
 30     </div>
 31     <form>
 32          
 33     </form>
 34     <script>
 35 /*
 36 ondrag             script 当拖动元素时运行脚本 
 37 ondragend       script 当拖动操作结束时运行脚本 
 38 ondragenter     script 当元素被拖动至有效的拖放目标时运行脚本  3
 39 ondragleave     script 当元素离开有效拖放目标时运行脚本 类似于out 
 40 ondragover      script 当元素被拖动至有效拖放目标上方时运行脚本 5
 41 ondragstart      script 当拖动操作开始时运行脚本 
 42 ondrop            script 当被拖动元素正在被拖放时运行脚本 
 43 
 44 阻止浏览器拖拽默认事件只需要清除这两个事件浏览器就不会自动打开文件了
 45 document.ondragover=document.ondrop=function(e){
 46                e.preventDefault();
 47                  return;} 
 48         经过测试拖拽文件的时候发生事件循序为
 49         ondragenter 只会触发一次事件，就是当文件拖拽到指定的元素的时候，如果不离开只会发生一次事件
 50         ondragover  如果元素拖拽到指定的位置的时候会一直不停的触发事件
 51         ondrop        只会触发一次事件是当文件拖拽到指定位置的时候并且放下去的时候，相当于mouseup事件
 52         ondragenter->ondragover->ondrop 
 53          ondragleave 只会触发一次事件当元素离开有效拖放目标时运行脚本 out
 54 */
 55 
 56 var box=document.getElementById("box");
 57   
 58      document.ondragenter=function(e){
 59           e.preventDefault();
 60               console.log(3);
 61                   
 62             } 
 63             
 64           document.ondrop=document.ondragover=function(e){
 65              e.preventDefault();
 66               console.log(5);
 67              // alert(2);
 68               return ;
 69             } 
 70             box.ondragover=function(e){
 71                    e.preventDefault();
 72               console.log(5);
 73             this.className='active';
 74             }
 75           box.ondrop=function(e){
 76              this.className='';
 77                 e.preventDefault();
 78                   console.log(7);
 79                 //e.dataTransfer文件的parent对象 文件对象还要点e.dataTransfer.files[0] 第一个文件对象
 80               console.log(e.dataTransfer);
 81               /*       ajax({
 82              method:'post',    //默认是get方式可选
 83              url:'06.php',  //必填
 84                type:"file", //如果是设置文件则是上传文件，不设置默认是发送数据  //可选
 85              //name:"file",//如果是设置了文件上传那么必须要填入表单设定的name
 86              Ofile:e.dataTransfer,  //如果是文件上传则（必填）需要穿一个文件对象过来，
 87              loading:function(readyState){/*alert(readyState) }, //可选
 88              success:function(dada){/*alert(dada); }  //服务器响应函数必填
 89                   });*/
 90                        $.ajax({
 91                     url:'06.php',  //必填
 92                     fileObject:e.dataTransfer, 
 93                     dataType:'file' 
 94                 })   
 95                  
 96                 return ;
 97             } 
 98          
 99               box.ondragleave =function(e){
100                  this.className=' ';
101                e.preventDefault();
102                console.log(4);
103               return ;
104             } 
105      </script>
106 </body>
107 </html>

查看全文

相关阅读:
匈牙利算法
 Tabbed Activity = viewpager + fragment ？
gdb调试多线程多进程
 gdb 调试，当发现程序退出，需要定位程序退出位置时。
将Linux的信号量sem_t封装成事件对象
 Golang包管理工具govendor的使用&go mod
go get命令详解
 GoLand生成可执行文件（Windows、Linux）
Linux下线程pid和tid
理解Linux的进程，线程，PID，LWP，TID，TGID

原文地址：https://www.cnblogs.com/hao123456/p/5602210.html