JQuery教程:简化JQuery

2016-02-20 01:08 7 1 收藏

图老师小编精心整理的JQuery教程:简化JQuery希望大家喜欢,觉得好的亲们记得收藏起来哦!您的支持就是小编更新的动力~

【 tulaoshi.com - Web开发 】

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)这是以前整理的一些代码,与JQer分享,希望对大家能有些帮助。

话说功能愈发强大的JQuery体积也不再小巧,55k(Minified)的大小虽然不能说很大,但如果用在一些小型项目或网站上,也不算小,那么我们何不根据自己项目特点,简化或改写JQuery呢,Follow me!

首先是JQuery的核心代码:代码://不完全一致,但实现手段大致如此
(function(){
  window._$ = window.$;
  var $ = window.$ = function(s) {
    return new $.fn.init(s);
  };
  $.fn = $.prototype = {
    init: function(s) {
      if(!s) return this;
      if (s.nodeType) {
        this.e = [];
        this.e.push(s);  //存储获取到的Elements      
        return this;
      }
      if (typeof s == string) {
        return $().find(s);
      }
      return this;
    },
    find: function(s) {
      //根据传入的String,查找DOM
    }
  };
  // extend扩展方法
  $.fn.extend = function(p) {
    for(var key in p) {
      if(!$.fn[key]) {
        $.fn[key] = p[key];
      }
    }
  };
  $.fn.init.prototype = $.fn;
})();
$().extend({
  a: function(s){},
  b: function(s){}
});
再附上我简化的版本代码:// by CNwander
(function(){
window._$ = window.$;
var eleExpr =  /([#.a-zA-Z])([^s]+)/g;
var $ = window.$ = function(s) {
     return new $.fn.init(s);
};
$.fn = $.prototype = {
  init: function(s) {
   this.e = null;
   if(!s) return this;
   if (s.nodeType) {
    this.e = [];
    this.e.push(s);
    return this;
   }
   if (typeof s == string) {
    return $().find(s);
   }
   else
    return this;
  },
  find: function(s) {
   var wrap = this.e || [document];
   var result = [];
   for(var key in wrap) {
    var target = wrap[key];
    while(eleExpr.test(s)) {
     var first = RegExp.$1,
      content = RegExp.$2;
     target = $().clean(target,content,first);
    }
    if(target == null)
     result = null;
    else
     for(var i = 0; i target.length; i++)
      result.push(target[i]);
   }
   this.e = result;
   return this;   
  },
  clean: function(wrap,content,type){
   if(!wrap) return null;
   wrap = wrap instanceof Array ? wrap : [wrap];
   var result = new Array();
   for(var key in wrap) {
    var temp;
    switch(type) {
    case #:
     temp = wrap[key].getElementById(content);
     break;
    case .:
     temp = $().getElemsByClassName(content,wrap[key]);
     break;
    default:
     temp = wrap[key].getElementsByTagName(type+content);
    }
    if(temp) {
     temp = temp.length ? temp : [temp];
     for (var i = 0; i temp.length; i++)
      if(temp[i].nodeType) result.push(temp[i]);
    }
   }
   result = result.length = 0 ? null : result;
   return result;
  },
  getElemsByClassName: function(classname,elem,tag) {
   tag = tag || *;
   elem = elem || document;
   elem = elem instanceof Array ? elem : [elem];
   var result = new Array();
   for(var key in elem) {
    var allElems = elem[key].getElementsByTagName(tag) || elem[key].all;
    var oElem;
    for(var i=0; iallElems.length; i++){
     oElem = allElems[i];
     var list = oElem.className.split( );
     for(var j=0; jlist.length; j++){
      if(list[j] == classname) result.push(oElem);
     }      
    }
   }
   return result.length = 0 ? null : result;
  }
};
$.fn.extend = function(p) {
  for(var key in p) {
   if(!$.fn[key]) {
    $.fn[key] = p[key];
   }
  }
};
$.fn.init.prototype = $.fn;
})();
$.ajax = function(url,postStr,lastfunc,errfunc) {
var ajax = false;
if(window.XMLHttpRequest) {
  ajax = new XMLHttpRequest();
  if (ajax.overrideMimeType) {
   ajax.overrideMimeType(text/xml);
  }
}
else if (window.ActiveXObject) {
  try {
   ajax = new ActiveXObject(Msxml2.XMLHTTP);
  }
  catch (e) {
   try {
      ajax = new ActiveXObject(Microsoft.XMLHTTP);
    }
   catch (e) {
   }
  }
}
if (!ajax) {
  if(errfunc) errfunc();
  return false;
}
ajax.open(POST, url, true);
ajax.setRequestHeader(Content-Type,application/x-www-form-urlencoded);
ajax.send(postStr);
ajax.onreadystatechange = function() {
  if (ajax.readyState == 4 && ajax.status == 200) {
   if(lastfunc) lastfunc(ajax.responseText);
  }
}  
}
$().extend({
html: function(val){
  return val == undefined ?
  (this.e[0] ?
   this.e[0].innerHTML :
   null) :
  this.e[0].innerHTML = val;
},
empty: function() {
  for(var i in this.e) {
   var o = this.e[i];
   o.innerHTML = ;
  }
  return this;
},
css: function() {
  if(!this.e || arguments.length = 0) return this;
  if(arguments.length == 1 && typeof arguments[0] == string) {
   arguments[0] = arguments[0].toLowerCase();
   return this.e[0].currentStyle ?
   this.e[0].currentStyle[arguments[0]] :
   window.getComputedStyle (this.e[0], ).getPropertyValue(arguments[0].replace(/([A-Z])/g, -$1″));
  }
  else if(arguments.length = 2) {
   for (var i in this.e)
   this.e[i].style[arguments[0]] = arguments[1];
  }
},
hasClass: function(name) {
  if(!this.e) return this;
  var allClass =  this.e[0].className.split( );
  for (var key in allClass)
  if(allClass[key] == name) return true;
  return false;
},
addClass: function(name){
  if(this.e)
   for (var i in this.e)
    if(this.e[i].nodeType == 1)
     this.e[i].className += +name;
  return this;
},
removeClass: function(name){
  if(this.e)
   for (var i in this.e) {
    var temp = [],
     allClass =  this.e[i].className.split( );
    for(var j = 0, k = 0; j allClass.length; j++) {
     if(allClass[j] != name) {
      temp[k++] = allClass[j]
     }
    }
    allClass = temp.join( );
    this.e[i].className = allClass;
   }
  return this;
},
mousedown: function(callback){
  if(!this.e) return this;
  for(var key in this.e) {
   this.e[key].onmousedown = callback;
   return this;
  }
},
mouseover: function(callback){if(!this.e) return this;for(var key in this.e) {this.e[key].onmouseover = callback} return this},
mouseout: function(callback){if(!this.e) return this;for(var key in this.e) {this.e[key].onmouseout = callback}return this}
});
才疏学浅,错误之处,敬请指正。

来源:http://www.tulaoshi.com/n/20160220/1633355.html

延伸阅读
标签: Web开发
jQuery 之所以如此流行并被从大公司到个人博客的几乎每个人都广泛使用,是因为它上手和使用相当简单,而且为我们提供了一些人都不知道的相当棒的特性。我认为jQuery的大多数用户更趋向于使用jQuery插件来解决面临的难题,这通常是明智的选择。但是当插件相对于你的需求有一定缺陷的时候,你也许更应该想办法自己来解决,下面来看看这些实用...
标签: Web开发
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" head     title全选,不全选,反选/title     script src="js/jquery.js" type="text/javascript"/script     script lang...
标签: Web开发
jquery 1.4其实已经发布了两个alpha版本和一个RC版本,相信关注jquery的同学已经有所了解。 jquery团队为了发布1.4,专门启动了一个 的网站,计划在14天内逐步揭开jquery1.4的神秘面纱。该网站的内容包括文章和在线视频。 本文就先不简述jquery 1.4带来的新的改进了,在稍后,我们将推出几篇比较好的介绍jquery 1.4的比较详细的文章,敬...
标签: Web开发
在 JQuery的网站 上发现,这个东东提供两种版本下载。一种是原版,接近120K,另一种是把水分压缩掉的,近60K。太久没做应用技术了,没想到居然出来了这么多新鲜玩意儿,JavaScript还可以压缩水分,所以顺便又去了解了一下 JavaScript的Packer (这是在线链接),如果有兴趣, 这里 可以下载它的.NET、Perl、Wsh和PHP等几个版本。 不扯远了,...
标签: Web开发
jQuery事件模型的功能有: 提供建立事件处理程序的统一方法; 允许在每个元素上为每个时间类型建立多个处理程序; 采用标准的事件类型名称,例如click或mouseover; 使用Event实例可用作处理程序的参数; 对Event实例的最常用的属性进行规范化; 为取消事件和阻塞默认操作提供统一方法。 jQuery绑定事件处理程序: bind()命令 $('img')...

经验教程

277

收藏

58
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部