JQuery教程:简化JQuery

这是以前整理的一些代码,与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; i<allElems.length; i++){
     oElem = allElems[i];
     var list = oElem.className.split(” “);
     for(var j=0; j<list.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}
});

才疏学浅,错误之处,敬请指正。

时间: 2024-10-24 19:53:10

JQuery教程:简化JQuery的相关文章

【jQuery教程】jquery简单体验

Jquery是继prototype之后又一个优秀的Javascript框架.对prototype我使用不多,简单了解过.但使用上jquery之后,马上被她的优雅吸引住了.有人使用这样的一比喻来比较prototype和jquery:prototype就像Java,而jquery就像ruby.实际上我比较喜欢java(少接触Ruby罢了)但是jquery的简单的实用的确有相当大的吸引力啊!在项目里我把jquery作为自已唯一的框架类包.使用其间也有一点点心得,其实这些心得,在jquery的文档上面也

【jQuery教程】jquery基础教程二(鼠标点击事件)

下面我们来看看jquery如何给 DOM 各个元素批量绑定事件 <SCRIPT LANGUAGE="JavaScript"> <!-- $(document).ready(function() {     $("div").click(function(){//$("div")就是页面中所有的 div标签       alert("Hello World!");     }) }) //--> <

jQuery教程:jQuery的核心

大家先不要看我的源代码,看看使用js是否能够做得出 [例子]要求:1)页面上一个按钮:2)点击后弹出窗口,我被点击了: 如下图: JavaScript代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http:

jQuery教程:jQuery核心方法的使用

今天我们再深入的学习一下jQuery的核心. jQuery对象访问: each(callback)//根据我的理解,each是jQuery中的一种循环机制.一般与this关键字配合使用.学过程序的朋友都知道程序中的循环方式有以下几种do...while().while().for(expression1,expression2,expression3)以及C#和javaEE中JSTL标签中独有的forEach循环.jQuery中的each循环与forEach循环类似.具体使用方法在本节案例中讲述

【jQuery教程】jquery新手入门实例教程三ajax应用

我们在上一章 jquery新手入门实例教学二 用户注册(简单的表单验证) (/html/JQueryjiaocheng/200807/17-519.html) 里面有一行语句 $.get("php/user_register.php",{act:$(this).attr("ID"),v:$(this).val()},function(txt){                    msg.html(txt); }) 这个就是jquery ajax应用的简单实例 什

JQuery知识:20个jQuery教程+11个jQuery插件

在网络发展领域,由于 jQuery 简单易学,易于使用和易于扩展的特点,因此正慢慢变得无处不在.以下是从一些 jQuery 相关文章中整理出来的 30+ 新鲜与惊奇的 jQuery 插件与教程.如果你正在寻找最新的 jQuery 信息,这些内容值得一读. 教程 1. How to add preloader with loading image in a gallery using jQuery在图像画廊载入过程中使用 jQuery 预加载技术.演示 教程 2. Simple Lava Lamp

jQuery教程:整理的几个常见的初学者问题

    大家可能看到了,我已经将过去写的两篇jQuery的教程删掉了,因为附件不存在了等等问题,所以删除了,从今天开始我就写jQuery教程第二版了!希望大家能够支持我!本节并没有涉及到jQuery如何编写,只为大家解决几个常见问题,因为这也是面试中常常遇到的几个问题.如果你掌握了jQuery可以成为提升工资的一个资本. 初学jQuery的朋友,基本上都会问同一个问题"什么是jQuery?"等类似的问题,理解这个问题对于后面的学习会起到促进作用.以下是我整理出的大家常问的几个问题: 1

JQuery教程示例及演示实例2

教程|示例|jquery DOM操作属性我们以<img id="a" scr="5.jpg"/>为例,在原始的javascript里面可以用var o=document.getElementById('a')取的id为a的节点对象,在用o.src来取得或修改该节点的scr属性,在jQuery里$("#a")将得到jQuery对象[ <img id="a" scr="5.jpg"/>

jQuery教程:jQuery.noConflict控制冲突

文章简介:谈谈 jQuery 中的防冲突(noConflict)机制. 许多的 JS 框架类库都选择使用 $ 符号作为函数或变量名,jQuery 是其中最为典型的一个.在 jQuery 中,$ 符号只是 window.jQuery 对象的一个引用,因此即使 $ 被删除,window.jQuery 依然是保证整个类库完整性的坚强后盾.jQuery 的 API 设计充分考虑了多框架之间的引用冲突,我们可以使用 jQuery.noConflict 方法来轻松实现控制权的移交. jQuery.noCon