jQuery源码-dom操作之jQuery.fn.text

写在前面

jQuery.fn.text在jQuery是个使用频率比较高的接口,它的作用无非是设置/获取dom节点的内容文本,下文会通过几个简单的例子来说明.text()接口的使用,以及最后会对源码进行分析。这几个接口本身不复杂,理解了textContent属性基本就迎刃而解,妨碍理解的我觉得反而是jQuery.access这样的神级方法。遇到jQuery.access,理解它的作用是设置/读取属性即可。

简单例子

jQuery官方文档是我们永远的好伙伴,可猛戳 http://api.jquery.com/text/,从官方说明来看,有以下几种用法。直接上例子

读取的例子

首先假设页面有这么段html

<div id="node_1">hello</div>
<div id="node_2">a<span>b</span>c</div>

代码如下:

console.log($('#node_1').text());  // 输出 hello
console.log($('#node_2').text());  // abc

从上面可以看出,$(selector).text()返回的是:$(selector)选中的所有节点的所有后代节点的文本内容拼接起来后,要点如下:

1. $(selector)选中的所有节点的集合,假设为A

2. A的所有后代节点,假设为B

3. B的文本内容合起来,就是返回结果

ps:实际返回的结果比上面所说的稍微复杂一点,下面再展开

设置的例子

设置的例子也比较简单,同样假设页面有如下HTML

<div id="node_1">hello</div>
<div id="node_2">a<span>b</span>c</div>

设置例子1

代码如下:

$('node_1').text('hello');
$('node_2').text('world');

原来的HTML变成下面这样子,也就是说,$(node).text( str )操作分有两个表现:

1. node原有子节点被全部删除

2. node的文本内容被设置为str

<div id="node_1">hello</div>
<div id="node_2">world</div>

设置例子二:

紧接例子一,再看下面这段代码,注意点:

1. index为当前处理的元素e在选中集合中的位置,0开始

2. text为e的文本节点

$('div').text(function(index, text){
    return text + index;
});

结果如下:

<div id="node_1">hello0</div>
<div id="node_2">world1</div>

源码分析

textContent这个属性,对 jQuery.fn.text() 接口的理解很关键,如果不熟悉的童鞋可以参考下笔者前几天在MDN翻译的相关页面 Node.textContent

首先是jQuery.fn.text的源码,可见内容是通过jQuery.text、jQuery.access(神一样的方法)实现的:

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

设置text的源码比较简单,从左往右念就是:

1、清空节点原本的内容

2、通过createTextNode方法创建一个text节点(参数为传入的value)

3、将text节点插入node里去

this.empty().append( ( this[0] && this[0].ownerDocument || document ).createTextNode( value ) );

源码分析:获取text

接下来是jQuery.text(),其实是Sizzle.getText

jQuery.text = Sizzle.getText;

再看Sizzle.getText,代码不算复杂,归纳起来就几点:

1、如果elem为文本节点(TEXT_NODE),那么取elem.nodeValue

2、如果elem为元素节点(ELEMENT_NODE)、文档节点(DOCUMENT_NODE)、文档碎片节点(DOCUMENT_NODE),那么

  2.1 元素节点:取elem.textContent

  2.2 文档节点、文档碎片节点:逐层遍历子节点,获取 textContent 后进行拼接

3、PROCESSING_INSTRUCTION_NODE、COMMENT_NODE被排除在外

getText = Sizzle.getText = function( elem ) {
    var node,
        ret = "",
        i = 0,
        nodeType = elem.nodeType;

    if ( !nodeType ) {
        // If no nodeType, this is expected to be an array
        for ( ; (node = elem[i]); i++ ) {
            // Do not traverse comment nodes
            ret += getText( node );
        }
    } else if ( nodeType === 1 || nodeType === 9 || nodeType === 11 ) {
     // 备注:nodeType === 1 为元素节点,9 为document节点,11为document fragment节点
// Use textContent for elements // innerText usage removed for consistency of new lines (see #11153) if ( typeof elem.textContent === "string" ) { return elem.textContent; } else { // Traverse its children for ( elem = elem.firstChild; elem; elem = elem.nextSibling ) { ret += getText( elem ); } } } else if ( nodeType === 3 || nodeType === 4 ) {
     // nodeType === 3为TEXT_NODE,4为CDATA_SECTION_NODE
return elem.nodeValue; } // Do not include comment or processing instruction nodes return ret; };

写在后面

jQuery.fn.text 、jQuery.text 其实并不复杂,理解了textContent属性基本就迎刃而解,妨碍理解的我觉得反而是jQuery.access这样的神级方法。遇到jQuery.access,理解它的作用是设置/读取属性即可。

 

posted @ 2013-07-04 15:05 程序猿小卡 阅读(...) 评论(...) 编辑 收藏