jQuery设计思想与简单实现

前言

jQuery的实现其实都是基于DOM的API,但是由于DOM的原生API比较难用，于是有了jQuery。 jQuery的基本核心设计思想是：它声明一个全局函数jQuery，使用别名$,对接受参数进行重载，获取对应的元素，之后便返回一个对象，称为jQuery构造出来的对象，再用这个对象去操作获取到的元素。

jQuery如何获取元素

jQuery使用$（selector）的方法实现获取网页元素的操作，我们这里用DOM的API的querySelector去实现它。

window.jQuery = $.jQuery = function(selector){
    let elements = document.querySlector(selector)
    return {//返回一个操作elements的对象}
}

上面的函数只能用于查找网页元素，如果我们需要继续查找元素的内容则需要封装一个find函数：

find(selector) {
    let array = [];
    for (let i = 0; i < this.elements.length; i++) {
      const elements2 = Array.from(this.elements[i].querySelectorAll(selector));
      array = array.concat(this.elements2);
    }
    array.oldApi = this; // this 就是 旧 api
    return jQuery(array);
  },

jQuery的链式操作

由于jQuery每次返回的是一个对象，在对同一个对象进行不同的操作可以连在一起，其原因是每次操作都会返回this，这个this就是当前被操作的对象，也称为链式操作。

jQuery 如何创建元素

$(function(){
    let $h1=$("<h1></h1>")
})

jQuery 如何移动元素

jQuery设计思想之五，就是提供两组方法，来操作元素在网页中的位置移动。一组方法是直接移动该元素，另一组方法是移动其他元素，使得目标元素达到我们想要的位置。

假定我们选中了一个div元素，需要把它移动到p元素后面。 第一种方法是使用.insertAfter()，把div元素移动p元素后面：

 $('div').insertAfter($('p'));

第二种方法是使用.after()，把p元素加到div元素前面：

$('p').after($('div'));

表面上看，这两种方法的效果是一样的，唯一的不同似乎只是操作视角的不同。但是实际上，它们有一个重大差别，那就是返回的元素不一样。第一种方法返回div元素，第二种方法返回p元素。你可以根据需要，选择到底使用哪一种方法。

使用这种模式的操作方法，一共有四对：

 .insertAfter()和.after()：//在现存元素的外部，从后面插入元素

  .insertBefore()和.before()：//在现存元素的外部，从前面插入元素

  .appendTo()和.append()：//在现存元素的内部，从后面插入元素

  .prependTo()和.prepend()：//在现存元素的内部，从前面插入元素

这部分摘自阮一峰《jQuery设计思想》,地址如下： http://www.ruanyifeng.com/blog/2011/07/jquery_fundamentals.html

jQuery 如何修改元素的属性

首先我们需要选中需要修改的元素，然后使用相对应的函数进行修改,例如下面的代码，先选择到class为test的div,找到所有的child，然后添加一个class属性red：

window.jQuery = function (selectorOrArray) {
  let elements;
 if(typeof selectorOrArray === 'string'){
    elements = document.querySelectorAll(selectorOrArray)
  }else if(selectorOrArray instanceof Array){
    elements = selectorOrArray
  }

return {
  addClass(className) {
    for (i = 0; i < elements.length; i++) {
      elements[i].classList.add(className);
    }
    return this;
  },
  find(selector) {
    let array = [];
    for (i = 0; i < elements.length; i++) {
      array = array.concat(Array.from(elements[i].querySelectorAll(selector)));
    }

    return jQuery(array);
  }
  }
};
window.$ = window.jQuery

$('#test').find('.child').addClass('red') 

链接地址http://js.jirengu.com/goguzopiqu/1/edit?js,output