jQuery source code analysis----simulate html(), text(), val()

1. jQuery source code implementation of html() and text()

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 );
}

 

Second, text () simulation implementation

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) {
         // If there is no node type, it means an array 
        while ((node ​​= elem[i++ ])) {
             // Do not traverse the comment node 
            ret += getText(node);
        }
    } else if (nodeType === 1 || nodeType === 9 || nodeType === 11) {
        if (typeof elem.textContent === "string") {
            return elem.textContent;
        } else {
             for (element = element.firstChild; element; element = element.nextSibling) {
                ret += getText(elem);
            }
        }
    } else  if (nodeType === 3 || nodeType === 4) { // nodeType returns the content of Text and Comment nodes 
        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, 'MOOC' )
})

$('#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, 'MOOC' )
})