一个简单的迷你jQuery实现

//仅提供与学习使用
(function () {

    var _$ = window.$;
    var _jQuery = window.jQuery;
    //暴露外部使用的一个接口
    var jQuery = window.jQuery = window.$ = function(selector){

    return new jQuery.fn.init(selector);
};

    //处理原型对象
  jQuery.fn = jQuery.prototype = {
    init:function(selector){
    var elements = document.querySelectorAll(selector);//document.querySelectorAll()//是用来循环遍历的
    //querySelectorAll是一个很强大的选择器,它返回的不是一个数组,而是一个NodeList。
    Array.prototype.push.apply(this,elements);
    return this;
},
    jQueryVesion:"1.0.0",//版本
    length:0,
    size:function(){
    return this.length;
  }

};
  jQuery.fn.init.prototype = jQuery.fn;
  //实现继承,并且只处理只有一个参数,也就是插件的扩展
  jQuery.extend = jQuery.fn.extend = function(){
  var o = arguments[0];
  for(var p in o){//循环遍历
    this[p] = o[p];
  }
};

//添加静态方法
  jQuery.extend({
    trim:function(text){
    return (text||"").replace(/^\s+|\s+$/g,"");//正则表达式作用是去掉全部的空格,
  },
  noConflict:function(){
    window.$ = _$;
    window.jQuery = _jQuery;
    return jQuery;
  }
});
//添加实例方法

  jQuery.fn.extend({
    get:function(num){
    return this[num];
  },
  each:function(fn){
    for(var i = 0 ;i< this.length; i++){
    fn(i,this[i]);
  }
  return this;
  },
  css:function(){
    var l = arguments.length;
    if(l == 1){
    return this[0].style[arguments[0]];
   } else {
    var name = arguments[0];
    var value = arguments[1];
    this.each(function(index,ele) {
    ele.style[name] = value;

  });
  }
    return this;
  }

  });

})();

 

posted @ 2017-11-27 16:03  Don't差不多  阅读(136)  评论(0编辑  收藏  举报