链式风格

特殊函数jQuery

window.jQuery()是我们提供的全局函数
jQuery（选择器）用于获取对应的元素
但它却不返回这些元素，相反，它返回一个对象，称为jQuery构造出来的对象
这个对象可以操作对应的元素
jQuery是一个不需要加new的构造函数

window.jQuery = function(选择器){
  const nodes = document.querySelector(选择器)
  // nodes 是伪数组，要转成数组
  const array = Array.from(nodes)
  // api 可以操作 array
  const api = {
    log(){
      console.log(array)
    }
  }
  return api // 不 return array 而是 return api
}

链式调用

嫌jQuery太长：window.$ = window.jQuery 取个别名就好

$('div')
  .find('h3')
  .addClass('red')
  .text('hi 我是新加的内容');
// 找到所有的div元素，在所有的div元素里找到h3标签，给h3标签增加'red'类，并且替换文本内容

这一点能实现就是因为jQuery(selector)返回的是一个可以操作被选中元素的api

jQuery还提供end方法，使得结果集可以后退一步：

$('div')
　　　.find('h3')
　　　.eq(2)
　　　.html('Hello')
　　　.end() //退回到选中所有的h3元素的那一步
　　　.eq(0) //选中第一个h3元素
　　　.html('World'); //将它的内容改为World

常用的API

增

$('div').**append**(选择器/ jQuery对象) 在div的子元素里，在最后一个位置添加元素，通俗来说就是加一个小儿子
$('<h2>哈哈哈</h2>').appendTo(选择器/ jQuery对象) 在选择器选中的元素的子元素里，从尾部添加“哈哈哈”
$('div').**prepend**('h2') 在div的所有子元素里，从头插入h2，通俗来说就是加一个大儿子
- 类似的还有$('h2').prependTo($('div'))
$('#test').after($div) 加一个弟弟
$('#test').before($div) 加一个哥哥

删

$div.remove()

$div.empty()

改和查

$div.text(?) 读写文本内容

$div.html(?) 读写HTML内容

$div.css({'color': 'red'}) 读写css

$div.on('click', fn)

$div.off('click', fn)

getter, setter设计模式

jQuery的设计思想之一就是使用同一个函数，来完成取值（getter）和赋值（setter）。到底是取值还是赋值，由函数的参数决定，这也是函数的重载。

$('h1').html(); //html()没有参数，表示取出h1的值

$('h1').html('Hello'); //html()有参数Hello，表示对h1进行赋值

运用函数重载，一个函数可以同时处理多种不同的参数

举例，$()的参数不仅可以是选择器，还可以是html标签

$('.red')
$('<div><span>哈哈哈哈<span></div>')
$(元素数组)

这是怎么实现的？答案是通过函数重载，写不同的if else判断情况

window.jQuery = function(selectorOrArrayOrTemplate){
  let elements
  if(typeof selectorOrArrayOrTemplate === 'string'){
    if(selectorOrArrayOrTemplate.trim().indexOf('<') === 0){
      // 传进来的字符串是HTML标签，例如$('<div><span>哈哈哈哈<span></div>')，
      // 所以我们需要创建对应的HTML标签，然后返回
      elements=[createElement(selectorOrArrayOrTemplate)]
    }else{
      // 查找 div 例如 $('.red')
      elements = document.querySelectorAll(selectorOrArrayOrTemplate)
    }
  }else if(selectorOrArrayOrTemplate instanceof Array){
    // 传进来的是节点数组，那么就赋值给elements, 开始下面的处理
    elements = selectorOrArrayOrTemplate
  }

  function createElement(string){
    const container = document.createElement("template");
    container.innerHTML = string.trim();
    return container.content.firstChild;
  }
  
  // api可以操作elements, this就是api, api就是this
  let api = {
    addClass(className){},
    find(selector){},
    each(){}  
  }
  return api

实现一个简单的jQuery

github.com/yijncn/DOM-…

jQuery的功能