JQ HTML 和 innerHTML区别

今天用JQ的几个有趣的发现，先记下来

网上有人可能早已知道，不过我是没搜到。

html innerHTML 区别

JQ 相关源码

html: function(e) {
    console.log(this);
    return v.access(this,
    function(e) {
        var n = this[0] || {},
        r = 0,
        i = this.length;
        if (e === t) return n.nodeType === 1 ? n.innerHTML.replace(ht, "") : t;
        if (typeof e == "string" && !yt.test(e) && (v.support.htmlSerialize || !wt.test(e)) && (v.support.leadingWhitespace || !pt.test(e)) && !Nt[(vt.exec(e) || ["", ""])[1].toLowerCase()]) {
            e = e.replace(dt, "<$1></$2>");
            try {
                for (; r < i; r++) n = this[r] || {},
                n.nodeType === 1 && (v.cleanData(n.getElementsByTagName("*")), n.innerHTML = e);
                n = 0
            } catch(s) {}
        }
        n && this.empty().append(e)
    },
    null, e, arguments.length)
}

能看出来在innerHTML这部分 JQ做了容错处理;

#html方法允许你使用函数作为参数

    function getStr(){
        return "is innerHTML"
    }
    $("#box").html(getStr);//is innerHTML 
    document.getElementById("box").innerHTML = getStr;//function getStr(){return "is innerHTML"}

因为access中在处理参数过程中单独对函数参数做了处理

#access 代码段

access: function(e, fn, r, i, s, o, u) {
    var a, f = r == null,
    l = 0,
    c = e.length;
    if (r && typeof r == "object") {
        for (l in r) v.access(e, fn, l, r[l], 1, o, i);
        s = 1
    } else if (i !== t) {
        a = u === t && v.isFunction(i),
        f && (a ? (a = fn, fn = function(e, t, n) {
            return a.call(v(e), n)
        }) : (fn.call(e, i), n = null));
        console.log( i.call(e[l], l, fn(e[l], r)));
        if (fn) for (; l < c; l++) fn(e[l], r, a ? i.call(e[l], l, fn(e[l], r)) : i, u);
        s = 1
    }
    return s ? e: f ? n.call(e) : c ? n(e[0], r) : o
}

通过调用call方法顺便达到调用函数目的
值得注意的是，该方法 data/attr/prop/text/html/css/each
都有引用，所以你懂的