今天用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
都有引用,所以你懂的