DOM 库

jQuery中文文档

jQuery版本

• 1.x (兼容到IE6)
• 2.x (不兼容IE8以上,包括IE8)
• 3.x (兼容IE10)

IE写法

button.attachEvent('click',fn)

API 设计

let items = $('li')

items.on('click', function(){
  console.log('click')
})

items.addClass('hi').removeClass('error')

items.text('你好')

items.get(0)

1. item 没有 siblings 方法
2. 需求要有 xxx.siblings 方法
3. $item = $(item)   $item.siblings() 返回 item 的兄弟

1. $item.siblings() 没有 addClass 方法
2. 需求要有  $item.siblings().addClass
3. $item.siblings() 的结果是 $('li') 类似的东西

$item.siblings().removeClass('active').end()
  .addClass('active')

1.let items = $('li')

window.$ = function(selector){
   return document.querySelectorAll(selector)
}

参数是CSS选择器 , 得到参数返回CSS选择器的全部

items.on('click', function(){})

window.$ = function (selector) {
    let array = []
    let items = document.querySelectorAll(selector)
    for (var i = 0; i < items.length; i++) {
        array.push(items[i])
    }
    array.on = function (eventType, fn) {
        for (var i = 0; i < array.length; i++) {
            array[i].addEventListener(eventType, fn)
        }
    }
    return array
} 

TIM截图20170417145349.png

上图获取了所有的li像是一个数组 , 但实际上并不是 , 这不是一个数组

items.addClass('hi').removeClass('error')

实现items.addClass('hi').removeClass('error') , 把addClass换成items

window.$ = function (selector) {
    let array = []
    let items = document.querySelectorAll(selector)
    for (var i = 0; i < items.length; i++) {
        array.push(items[i])
    }
    array.on = function (eventType, fn) {
        for (var i = 0; i < array.length; i++) {
            array[i].addEventListener(eventType, fn)
        }
    }
    array.addClass = function(className) {   //设置赋值函数 , 参数是className
      for(var i = 0;i

items.text('你好')

window.$ = function (selector) {
    let array = []
    let items = document.querySelectorAll(selector)
    for (var i = 0; i < items.length; i++) {
        array.push(items[i])
    }
    array.on = function (eventType, fn) {
        for (var i = 0; i < array.length; i++) {
            array[i].addEventListener(eventType, fn)
        }
    }
    array.addClass = function (className) {
        for (var i = 0; i < array.length; i++) {
            array[i].classList.add(className)
        }
        return array
    }
    array.removeClass = function (className) {
        for (var i = 0; i < array.length; i++) {
            array[i].classList.remove(className)
        }
    }
    array.text = function (value) {    //传参数 , 类型value
        if (value !== undefined) {      //如果你的值不是undefined
            for (var i = 0; i < array.length; i++) {    //遍历 
                array[i].textContent = value            //每一个 , textContent = value
            }
            return array             //返回 array
        } else {                         //否则
            let result = []             //声明 result = [] 
            for (var i = 0; i < array.length; i++) {                 //遍历
                result.push(array[i].textContent)                  //push到result
            }
            return result  //返回return
        }
    }
    return array
} 

这时候 , 如果是jQuery 它只取第一个值 , 比如多个 你好 的话 , 只取第一个你好

items.get(0)

window.$ = function (selector) {
    let array = []
    let items = document.querySelectorAll(selector)
    for (var i = 0; i < items.length; i++) {
        array.push(items[i])
    }

    array.get = function(index){   //设置get方法 , 传入参数索引
        return array[index]            //返回array索引
    }
    return array
} 

$item.siblings().removeClass('active')

// $　接受一个字符串｜｜元素｜｜元素列表
// 返回一个新的数组
// 这个数组有 on  addClass 等等的API
window.$ = function (selectorOrNode) {
    let array = []
    if (typeof selectorOrNode === 'string') {                    //如果selectorOrNode === 'string'
        let items = document.querySelectorAll(selectorOrNode) //获取全部selectorOrNode
        for (var i = 0; i < items.length; i++) {   //遍历
            array.push(items[i])    push 到 数组中
        }
    } else if (selectorOrNode instanceof Element) {      //如果 selectorOrNode的类型是 Element
        array.push(selectorOrNode)           //就selectorOrNode push 到 数组中
    } else if(selectorOrNode instanceof Array){   //如果selectorOrNode类型Array 
        for(var i = 0;i

$item.siblings().removeClass('active').end()

window.$ = function (selectorOrNode) {
    let array = []
    if (typeof selectorOrNode === 'string') {
        let items = document.querySelectorAll(selectorOrNode)
        for (var i = 0; i < items.length; i++) {
            array.push(items[i])
        }
    } else if (selectorOrNode instanceof Element) {
        array.push(selectorOrNode)
    } else if (selectorOrNode instanceof Array) {
        for(var i=0;i

jQuery 错误写法

$('div').id = 1   //jQuery没有封装id这个东西
$('div').innerHTML = ''   // 这也是错误的

全局变量&关键字

window.undefined  //这个undefined可以被覆盖
var undefined = 1  //比如这样 

//如果是关键字 就不行了 
var this = 1  <---这是错误的