2019-05-05

html部分

  
  


div1
div2
div3
div4
div5

js部分

window.jQuery = function(nodeOrselector) {
    let nodes = {}
    if(typeof nodeOrselector==='string'){
        let temp= document.querySelectorAll(nodeOrselector)
        for(let i=0;i {
        for(let i=0; i

1. html 就是加了几个div，没什么好说的。
2. js代码分为两部分，第一部分是封装jQuery的API过程。第二部分是使用jQuery的API
3. 简单说，封装jQuery的API就是个把一堆代码封装成函数的过程，这个跟普通封装函数没有什么区别。这部分分为3步：

1 获取并重构nodes对象，也是个伪数组，有length。注意先要初始化nodes，即 let nodes = {};,然后我们在获取nodes对象的成员时，使用了DOM的API - querySelectorAll。
2.1给对象nodes添加方法addClass（函数属性）,说白了就是nodes本来就是个对象，给对象加个（key）属性addClass，属性值(value)是个函数，这样我们在使用属性就能调用这个函数。在编写addClass这个函数我们用到了数组属性forEach，一定要记得传数组参数。还用到了箭头函数以及DOM的API - ndoe.classList.add。
2.2 同理，给对象nodes添加方法setText（函数属性），这个函数也用了DOM的API - node.textContent。
3 return nodes,一定要记得返回值，函数一定要有返回值，不然就给你 return undefined。

4. 第二部分，jQuery的API使用。

• window.[图片上传失败...(image-c5563c-1557067129259)]

  就是jQuery这个函数，可以少写单词。

• var [图片上传失败...(image-679515-1557067129259)]

  ('div'),此时[图片上传失败...(image-9d3cae-1557067129259)]

  ，这样就能清楚地知道这是jQuery的对象，要使用jQuery的API,而不是使用DOM的API。

• [图片上传失败...(image-184b3f-1557067129259)]

  div这个对象调用了它的属性函数addClass，同时传了一个数组参数['red']，注意必须是数组，因为我们用了forEach。这里还要注意一点是[图片上传失败...(image-c27c23-1557067129259)]

  div.addClass(['red'])实际上是[图片上传失败...(image-a8d18-1557067129259)]

  div,['red'])的简写，后者是js函数调用的规范版。.前面的东西也是作为参数传入到函数里面的。

• [图片上传失败...(image-50d2ad-1557067129258)]

  div调用了它的属性函数setText，实际传入了两个参数$div和'hi'。