jQuery学习

jQuery的设计模式

1. 不用 new 的构造函数
2. 重载：$(支持多种参数)
3. 用闭包隐藏细节
4. getter / setter：$div.text() 即可读也可写
5. $.fn 是$.prototype 的别名
6. 适配器：jQuery 针对不同浏览器使用不同代码

jQuery 如何获取元素

jQuery 通过基础的 DOM api document.querySelectorAll 获取元素

$('#xxx') //返回值并不是元素，而是一个 api 对象
$('#xxx').find('.red') //查找 #xxx 里的 .red 元素
$('#xxx').parent() //获取爸爸
$('#xxx').children() //获取儿子
$('#xxx').siblings() //获取兄弟
$('#xxx').index() //获取排行老几（从0开始）
$('#xxx').next() //获取弟弟
$('#xxx').prev() //获取哥哥
$('.red').each(fn) //遍历并对每个元素执行 fn

部分代码实现

  find(selector) {
    let array = [];
    for (let i = 0; i < this.elements.length; i++) {
      array = array.concat(
        Array.from(this.elements[i].querySelectorAll(selector))
      );
    }
    array.oldApi = this;
    return jQuery(array);
  },
  each(fn) {
    for (let i = 0; i < this.elements.length; i++) {
      fn.call(null, this.elements[i], i);
    }
    return this;
  },
  parent() {
    const array = [];
    this.each((node) => {
      if (array.indexOf(node.parentNode) === -1) {
        array.push(node.parentNode);
      }
    });
    return jQuery(array);
  },
  children() {
    const array = [];
    this.each((node) => {
      array.push(...node.children);
    });
    return jQuery(array);
  },
  get(index) {
    return this.elements[index];
  },

jQuery 的链式操作

$('#xxx').children().find('red').each(fn)

通过不断的返回一个api对象，使得代码能立即调用下一个api，这就是链式操作

jQuery 如何创建元素

$('<div><span>1</span></div>') //创建 div

通过判断输入的参数的第一个字符是否为<来判断是不是HTML语法，如果是，则调用了一个createElement函数，该函数通过 DOM api 创建元素

代码实现：

window.$ = window.jQuery = function (selectorOrArrayOrTemplate) {
  let elements;
  if (typeof selectorOrArrayOrTemplate === "string") {
    if (selectorOrArrayOrTemplate[0] === "<") {
      elements = [createElement(selectorOrArrayOrTemplate)];
    } else {
      elements = document.querySelectorAll(selectorOrArrayOrTemplate);
    }
  } else if (selectorOrArrayOrTemplate instanceof Array) {
    elements = selectorOrArrayOrTemplate;
  }
  function createElement(string) {
    const container = document.createElement("template");
    container.innerHTML = string.trim();
    return container.content.firstChild;
  }
}

jQuery 如何移动元素

$('#div').appendTo(document.body) //插入到 body 中

代码实现：

  appendTo(node) {
    if (node instanceof Element) {
      this.each((el) => node.appendChild(el));   //$.each为遍历
    } else if (node.jquery === true) {
      this.each((el) => node.get(0).appendChild(el));  //$.get(index)为找到第0个元素
    }
  },

jQuery 如何修改元素的属性

$div.text('xxx') //读写文本内容
$div.html('xxx') //读写 HTML 内容
$div.attr('title', 'xxx') //读写属性
$div.css({color: 'red'}) //读写 style
$div.addClass('blue')
$div.on('click', fn) 
$div.off('click', fn)

部分代码实现：

  addClass(className) {
    for (let i = 0; i < this.elements.length; i++) {
      this.elements[i].classList.add(className);
    }
    return this;
  }