jQuery源码解析----模拟html()、text()、val（）

一、html（）、text()的jquery源码实现

html: function( value ) {
        return jQuery.access( this, function( value ) {
            var elem = this[ 0 ] || {},
                i = 0, l = this.length;
            if ( value === undefined && elem.nodeType === 1 ) {
                return elem.innerHTML;
            }
    }, null, value, arguments.length )

 

text: function( value ) {
    return jQuery.access( this, function( value ) {
        return value === undefined ?
            jQuery.text( this ) :
            this.empty().append( ( this[ 0 ] && this[ 0 ].ownerDocument || document ).createTextNode( value ) );
    }, null, value, arguments.length );
}

 

二、text（）模拟实现

function html(value) {
    var elem = this[0] || {},
        i = 0,
        l = this.length;
    if (value === undefined 
        && elem.nodeType === 1) {
        return elem.innerHTML;
    }
    for (; i < l; i++) {
        elem = this[i] || {};
        if (elem.nodeType === 1) {
            elem.innerHTML = value;
        }
    }
}


function getText(elem) {
    var node,
        ret = "",
        i = 0,
        nodeType = elem.nodeType;
    if (!nodeType) {
        //如果没有节点类型,表示是一个数组
        while ((node = elem[i++])) {
            // 不遍历注释节点
            ret += getText(node);
        }
    } else if (nodeType === 1 || nodeType === 9 || nodeType === 11) {
        if (typeof elem.textContent === "string") {
            return elem.textContent;
        } else {
            for (elem = elem.firstChild; elem; elem = elem.nextSibling) {
                ret += getText(elem);
            }
        }
    } else if (nodeType === 3 || nodeType === 4) {//nodeType返回Text和Comment节点的内容
        return elem.nodeValue;
    }
    return ret;
}


function empty() {
    var elem,
        i = 0;
    for (;
        (elem = this[i]) != null; i++) {
        if (elem.nodeType === 1) {
                       //只适合firefox
            elem.textContent = "";
        }
    }
    return this;
}

function setText(value) {
    empty.call(this)
    if (this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9) {
        this.textContent = value;
    }
}


function text(value) {
    return value === undefined ?
    //取值
    getText(this) :
    //清理
    setText.call(this, value)
}



$('#test1').click(function() {
    var inner = document.querySelectorAll('.inner')
    alert(html.call(inner))
})

$('#test2').click(function() {
    var inner = document.querySelectorAll('.inner')
    html.call(inner,'慕课网')
})

$('#test3').click(function() {
    var p = document.querySelectorAll("p")[0]
    alert(text.call(p))
})

$('#test4').click(function() {
    var p = document.querySelectorAll("p")[0]
    text.call(p,'慕课网')
})