jQuery初探

造两个简单版的jQuery函数

window.jQuery = function (selector) {
    let nodes = {}
    let temp = document.querySelectorAll(selector);
    for (let i = 0; i < temp.length; i++) {
        nodes[i] = temp[i]
    } //生成中间变量temp是为了得到一个纯净的伪数组，querySelectorAll()生成的是一个不是我们所希望的，有多余原型的伪数组；
    nodes.length = temp.length
    nodes.addClass = function (className) {
        for (let i = 0; i < this.length; i++) {
            this[i].classList.add(className)
        }
        return this
    }
    nodes.setText = function (text) {
        for (let i = 0; i < this.length; i++) {
            this[i].textContent = text
        }
        return this
    }
    return nodes;
}
window.$ = jQuery

var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi

面试题

1.div 返回了一个HTML DOM 对象,$div 返回了一个jquery 对象.
2.$div是包装了dom对象后产生的,无法使用dom对象的任何方法,比如innerHTML
3.如果是jquery 对象,前面加$, 如果是html dom对象,就是普通的命名.
4.div变成$div, 只需要用jquery构造函数将dom对象包装起来就可以了.
5.$div变成div
- jquery对象是一个hash,分别包含了一个key对应所包装的dom 对象, length,还有__proto__原型 object(0), 里面包含了jquery的一个方法和属性.比如addClass,after,ajax等, 所以使用div[0]即可获取到div
- 使用jquery自身所提供的方法, 通过get(index), 也能得到相应的dom对象
6.div的属性方法:getElementById appendChild innerHTML 等
7.$div的属性方法: addClass after append等