眼前的说话

  虽然jQuery一度日渐式微,但它们里面的众想想,如选择器、链式调用、方法函数化、取赋值合体等,有的早已变成了正式,有的直接影响及今。所以,jQuery是一个高大之前端框架。前端世界日新月异,由于实在是无工夫错开精读源码,于是自己包一个概括版的jQuery,来梳理jQuery的主导思路

 

中心构架

  由于火柴的英文是match,应该将以此大概框架称为mQuery。使用面向对象的写法来描写mQuery,构造函数是Mquery(),调用$()方法,将依据Mquery()构造函数,创建一个实例对象

//构造函数
function Mquery(arg){}

function $(arg){
  return new Mquery(arg);
} 

  jquery几深特征:

  1、通过$()选择的要素都是一个会师,即使单独是一个元素

  因此,创建一个elements属性为一个频组,去接受获取之要素

//构造函数
function Mquery(arg){
  //保存所选择的元素
  this.elements = [];
}

  2、链式调用

  所以,原型函数要回到this,以促成链式调用的职能

 

$函数

  $函数基于参数类型的异,用途为殊

  1、参数为函数时,则直接运行

$(function(){
    console.log(1)
})

  2、参数为目标时,则拿DOM对象转换为$对象

$(document.body)

  3、参数为字符串时,则根据字符串选择出元素,并更换为$对象

$('#box')

  下面根据以上三独分类,来编排Mquery构建函数

//事件绑定兼容写法
function _addEvent(target,type,handler){
    if(target.addEventListener){
        target.addEventListener(type,function(e){
          //如果事件函数中出现 return false;则阻止默认事件和阻止冒泡
          if(typeof handler == 'function' && handler() === false){
            e.preventDefault();
            e.cancelBubble = true;
          }
        },false);
    }else{
        target.attachEvent('on'+type,function(event){
          if(typeof handler == 'function' && handler() === false){
            event.cancelBubble = true;
            event.returnValue = false;
          }
            return handler.call(target,event);
        });
    }
}

//将类数组转换成数组
function _toArray(arrayLike){
  return Array.prototype.slice.call(arrayLike);
}

//构造函数
function Mquery(arg){
  //保存所选择的元素
  this.elements = [];
  switch(typeof arg){
    //当参数是函数时,如$(function(){})(),直接运行里面的代码
    case 'function':
      _addEvent(window,'load',arg);
      break;
    //当参数是字符串时,选择元素
    case 'string':
      this.elements = _toArray(document.querySelectorAll(arg));              
      break;
    //当参数是DOM对象时,将DOM对象转换为$对象  
    case 'object':
      if(arg.constructor == Array){
        this.elements = arg;
      }else{
        this.elements.push(arg);
      }      
      break;
  }
}

 

HTML、CSS及特点设置

  下面来介绍常用之HTML、CSS及特点设置

【HTML】

  对于文本内容吧,一般地,有三栽办法:html()、text()和val()。本文仅兑现最常用的html()方法

  当html()方法没有参数时,表示收获内容;有一个参数时,表示设置情节

//HTML获取与设置
Mquery.prototype.html = function(str){
  //设置
  if(str){
    for(var i = 0; i < this.elements.length; i++){
      this.elements[i].innerHTML = str;
    }
  //获取
  }else{
    return this.elements[0].innerHTML;
  }  
  return this;
}

【CSS】

  对于CSS来说,有个别种植参数格式:一种植是json格式,一种是字符串格式

  当第一个参数为目标时,则判断为json格式,否则也字符串格式

  对于字符串格式来说,只出一个参数时,为博样式,两单参数时,为设置样式

  获取样式时,仅得当前聚中第0个元素的体裁;设置样式时,则设置当前凑中具有因素的样式

//获取计算样式兼容写法
function _getCSS(obj,style){
    if(window.getComputedStyle){
        return getComputedStyle(obj)[style];
    }
    return obj.currentStyle[style];
}

//CSS获取与设置
Mquery.prototype.css = function(attr,value){
  //如果是对象的形式,以对象的形式设置
  if(typeof attr == 'object'){
    for(var att in attr){
      for(var j = 0; j < this.elements.length; j++){
        this.elements[j].style[att] = attr[att];
      }
    }
  //如果不是对象的形式
  }else{
    //设置
    if(arguments.length == 2){
      for(var i = 0; i < this.elements.length; i++){
        this.elements[i].style[attr] = value;
      }
    //获取
    }else if(arguments.length == 1){
      return _getCSS(this.elements[0],attr)
    }
  }
  return this;
}

【attr】

  特性设置以及收获之思路以及CSS类似,只是方式成为了setAttribute()和getAttribute()

//attr获取与设置
Mquery.prototype.attr = function(attr,value){
  //如果是对象的形式
  if(typeof attr == 'object'){
    for(var att in attr){
      for(var j = 0; j < this.elements.length; j++){
        this.elements[j].setAttribute(att,attr[att]);
      }
    }
  //如果不是对象的形式
  }else{
    //设置
    if(arguments.length == 2){
      for(var i = 0; i < this.elements.length; i++){
        this.elements[i].setAttribute(attr,value);
      }
    //获取
    }else if(arguments.length == 1){
      return this.elements[0].getAttribute(attr);
    }
  }
  return this;
}

 

事件绑定

【on】

  于jQuery中,最常用的事件绑定方法就是是on方法。在on方法吃假如特别注意的凡this的绑定,由于函数fn中的this实际上是window,所以当将fn的this绑定到目前因素

//事件绑定
Mquery.prototype.on = function(eventType,fn){
  for(var i = 0; i < this.elements.length; i++){
    _addEvent(this.elements[i],eventType,fn.bind(this.elements[i));
  }
  return this;
}

【click和hover】

  click方法是一个简写方法

Mquery.prototype.click = function(fn){
  this.on('click',fn);
  return this;
}

  hover方法是mouseover和mouseout的合成方法

Mquery.prototype.hover = function(fnOver,fnOut){
  this.on('mouseover',fnOver);
  this.on('mouseout',fnOut);
  return this;
}

【return false】

  在jQuery中,使用return false可以而且阻止默认行为以及阻拦冒泡

//事件绑定兼容写法
function _addEvent(target,type,handler){
    if(target.addEventListener){
        target.addEventListener(type,function(e){
          //如果事件函数中出现 return false;则阻止默认事件和阻止冒泡
          if(typeof handler == 'function' && handler() === false){
            e.preventDefault();
            e.cancelBubble = true;
          }
        },false);
    }else{
        target.attachEvent('on'+type,function(event){
          if(typeof handler == 'function' && handler() === false){
            event.cancelBubble = true;
            event.returnValue = false;
          }
            return handler.call(target,event);
        });
    }
}

 

任何装

  jQuery的功力异常有力。下面选择有常用功能进行落实

【显示隐藏】

//隐藏
Mquery.prototype.hide = function(){
  for(var i = 0; i < this.elements.length; i++){
    //保存当前元素的display值
    this.elements[i].displayValue = this.elements[i].style.display;
    this.elements[i].style.display = 'none';
  }
  return this;
}
//显示
Mquery.prototype.show = function(){
  for(var i = 0; i < this.elements.length; i++){
   this.elements[i].style.display = this.elements[i].displayValue;
   //删除保存的元素的display值
   delete this.elements[i].displayValue;
  }
  return this;
}

【插件设置】

$.extend = function(json){ 
  for(var attr in json){
    $[attr] = json[attr];
  }
};
$.fn = {};
$.fn.extend = function(json){
  for(var attr in json){
    Mquery.prototype[attr] = json[attr];
  } 
};

【索引设置】

//根据索引选择元素
Mquery.prototype.eq = function(number){
  return $(this.elements[number]);
}

//根据元素获取索引
Mquery.prototype.index = function(){
  var elements = this.elements[0].parentNode.children;
  for(var i = 0; i < elements.length; i++){
    if(elements[i] === this.elements[0]){
      return i;
    }
  }
}

【子级筛选】

//筛选出当前匹配的元素集合中每个元素的后代
Mquery.prototype.find = function(str){
  var arr = [];
  for(var i = 0; i < this.elements.length; i++){
    Array.prototype.push.apply(arr,this.elements[i].querySelectorAll(str));
  }
  return $(arr);
}

 

整体源码

  下面是mQuery的jQuery圆源码

//事件绑定兼容写法
function _addEvent(target,type,handler){
    if(target.addEventListener){
        target.addEventListener(type,function(e){
          //如果事件函数中出现 return false;则阻止默认事件和阻止冒泡
          if(typeof handler == 'function' && handler() === false){
            e.preventDefault();
            e.cancelBubble = true;
          }
        },false);
    }else{
        target.attachEvent('on'+type,function(event){
          if(typeof handler == 'function' && handler() === false){
            event.cancelBubble = true;
            event.returnValue = false;
          }
            return handler.call(target,event);
        });
    }
}
//获取计算样式兼容写法
function _getCSS(obj,style){
    if(window.getComputedStyle){
        return getComputedStyle(obj)[style];
    }
    return obj.currentStyle[style];
}

//将类数组转换成数组
function _toArray(arrayLike){
  return Array.prototype.slice.call(arrayLike);
}
//构造函数
function Mquery(arg){
  //保存所选择的元素
  this.elements = [];
  switch(typeof arg){
    //当参数是函数时,如$(function(){})(),直接运行里面的代码
    case 'function':
      _addEvent(window,'load',arg);
      break;
    //当参数是字符串时,选择元素
    case 'string':
      this.elements = _toArray(document.querySelectorAll(arg));              
      break;
    //当参数是DOM对象时,将DOM对象转换为$对象  
    case 'object':
      if(arg.constructor == Array){
        this.elements = arg;
      }else{
        this.elements.push(arg);
      }      
      break;
  }
}
//根据索引选择元素
Mquery.prototype.eq = function(number){
  return $(this.elements[number]);
}
//根据元素获取索引
Mquery.prototype.index = function(){
  var elements = this.elements[0].parentNode.children;
  for(var i = 0; i < elements.length; i++){
    if(elements[i] === this.elements[0]){
      return i;
    }
  }
}
//筛选出当前匹配的元素集合中每个元素的后代
Mquery.prototype.find = function(str){
  var arr = [];
  for(var i = 0; i < this.elements.length; i++){
    Array.prototype.push.apply(arr,this.elements[i].querySelectorAll(str));
  }
  return $(arr);
}
//CSS获取与设置
Mquery.prototype.css = function(attr,value){
  //如果是对象的形式,以对象的形式设置
  if(typeof attr == 'object'){
    for(var att in attr){
      for(var j = 0; j < this.elements.length; j++){
        this.elements[j].style[att] = attr[att];
      }
    }
  //如果不是对象的形式
  }else{
    //设置
    if(arguments.length == 2){
      for(var i = 0; i < this.elements.length; i++){
        this.elements[i].style[attr] = value;
      }
    //获取
    }else if(arguments.length == 1){
      return _getCSS(this.elements[0],attr)
    }
  }
  return this;
}
//attr获取与设置
Mquery.prototype.attr = function(attr,value){
  //如果是对象的形式
  if(typeof attr == 'object'){
    for(var att in attr){
      for(var j = 0; j < this.elements.length; j++){
        this.elements[j].setAttribute(att,attr[att]);
      }
    }
  //如果不是对象的形式
  }else{
    //设置
    if(arguments.length == 2){
      for(var i = 0; i < this.elements.length; i++){
        this.elements[i].setAttribute(attr,value);
      }
    //获取
    }else if(arguments.length == 1){
      return this.elements[0].getAttribute(attr);
    }
  }
  return this;
}
//HTML获取与设置
Mquery.prototype.html = function(str){
  //设置
  if(str){
    for(var i = 0; i < this.elements.length; i++){
      this.elements[i].innerHTML = str;
    }
  //获取
  }else{
    return this.elements[0].innerHTML;
  }  
  return this;
}
//隐藏
Mquery.prototype.hide = function(){
  for(var i = 0; i < this.elements.length; i++){
    //保存当前元素的display值
    this.elements[i].displayValue = this.elements[i].style.display;
    this.elements[i].style.display = 'none';
  }
  return this;
}
//显示
Mquery.prototype.show = function(){
  for(var i = 0; i < this.elements.length; i++){
   this.elements[i].style.display = this.elements[i].displayValue;
   //删除保存的元素的display值
   delete this.elements[i].displayValue;
  }
  return this;
}
//事件绑定
Mquery.prototype.on = function(eventType,fn){
  for(var i = 0; i < this.elements.length; i++){
    _addEvent(this.elements[i],eventType,fn.bind(this.elements[i]));
  }
  return this;
}
//click简写
Mquery.prototype.click = function(fn){
  this.on('click',fn);
  return this;
}
//鼠标移入移出
Mquery.prototype.hover = function(fnOver,fnOut){
  this.on('mouseover',fnOver);
  this.on('mouseout',fnOut);
  return this;
}
$.extend = function(json){ 
  for(var attr in json){
    $[attr] = json[attr];
  }
};
$.fn = {};
$.fn.extend = function(json){
  for(var attr in json){
    Mquery.prototype[attr] = json[attr];
  } 
};
function $(arg){
  return new Mquery(arg);
} 

 

实际用

  下面采用mQuery来落实一个简约的意义

<style>
div { width:60px; height:60px; margin:5px; float:left; }
</style>

<div style="background-color:blue;"></div>
<div style="background-color:rgb(15,99,30);"></div>
<div style="background-color:#123456;"></div>
<div style="background-color:#f11;"></div>
<script src="mQuery.js"></script>
<script>
$("div").click(function(){
 $("#result").html("背景颜色是 " + $(this).css("background-color"));
})
</script> 

  点击不同颜色的素块,将以右侧显示具体的颜色值

  

相关文章

网站地图xml地图