28进阶 初识jQuery

jQuery就是一个javascript函数库
学习资料推荐：
阮一峰 jQuery
jQuery API文档 https://www.jquery123.com/

封装一个函数

1. 获取一个节点的兄弟姐妹

function getSiblins(node) {}

2. 给节点添加class

function addClass(node.calsses) {}

命名空间

命名空间就是一个可以由用户自己定义的作用域，在不同的作用域中可以定义相同名字的变量，互不干扰，系统能够区分它们。

命名空间的好处：
1.便于向别人介绍你写的库
2.防止互相冲突、覆盖
例如这样：

window.yydom={}
yydom.getSiblings=getSiblings
yydom.addClass=addClass
//使用
yydom.getSiblings(node)
yydom.addClass(node,classes)

把node放前面，像下面这样使用

node.getSiblings()
node.addClass()

1. 方法一：扩展Node接口——直接在Node.prototype上加函数
   缺点：会互相覆盖

Node.prototype.getSiblings=function() {
  var allChildren=this.parentNode.children
  var array={length:0}
  for(let i=0;i<allChildren.length;i++) {
    if(allChildren[i]!==this) {
      array[array.length]=allChildren[i]
      array.length+=1
    }
  }
  return array
}
Node.prototype.addClass=function(classes) {
  for(let key in classes) {
    var value=classes[key]
    var methodName=value?'add':'remove'
    this.classList[methodName](key)
  }
}
item3.getSiblings()
//等价于items3.getSiblings.call(item3),上面item3自动由this传入
item3.addClass({a:true,b:false,c:true})
//等价于item3.addClass.call(item3,{a:true,b:false,c:true})

注：this就是call的第一个参数，

2. 方法二：使用新的接口Node
   优点：无侵入

function Node2(node) {
  return {
    element:node,
    getSiblings:function() {
    
    },
    addClass:function() {

    }
  }
}
let node=document.getElementById('x')
let node2=Node2(node)
node2.getSiblings()
node2.addClass()

自己实现一个jQuery的API的方法

给上述的Node2改个名字为jQuery，就是一个简单的jQuery了
再给个缩写alias

window.$=jQuery

注：建议使用 jQuery 构造出来的对象都在前面加一个 $ ,以便记住它是jQuery的，避免和DOM弄混

window.jQuery = function (nodeOrSelector) {
    let nodes = {}
    if (typeof nodeOrSelector === 'string') {//判断接收的是结点还是字符串
        let temp = document.querySelectorAll(nodeOrSelector)
        for (let i = 0; i < temp.length; i++) {
            nodes[i] = temp[i]
        }
        nodes.length = temp.length
    } else if (nodeOrSelector instanceof Node) {
        nodes = {
            0: nodeOrSelector,
            length: 1
        }
    }
    nodes.addClass = function (classes) {
        for (let i = 0; i < nodes.length; i++) {
            nodes[i].classList.add(classes)
        }
    }
    nodes.setText = function (text) {
        for (let i = 0; i < nodes.length; i++) {
            nodes[i].textContent = text
        }
    }
    return nodes
}
window.$ = jQuery
var $div = $('div')
$div.addClass('red')//给div添加一个class='red'
$div.setText('hi')//将div的文本内容设置为'hi'

真正的jQuery远比这强大

1. jQuery兼容性强大，1.7版本可以兼容IE6
2. jQuery还有动画、AJAX等模块，不止DOM操作
3. JQuery功能更丰富
4. jQuery使用了prototype

作业