写在前面

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,理解它的作用是设置/读取属性即可。

jQuery源码-dom操作之jQuery.fn.text的更多相关文章

  1. jQuery源码-dom操作之jQuery.fn.html

    写在前面 前面陆陆续续写了jQuery源码的一些分析,尽可能地想要cover里面的源码细节,结果导致进度有些缓慢.jQuery的源码本来就比较晦涩,里面还有很多为了解决兼容问题很引入的神代码,如果不g ...

  2. jQuery 源码解析二:jQuery.fn.extend=jQuery.extend 方法探究

    终于动笔开始 jQuery 源码解析第二篇,写文章还真是有难度,要把自已懂的表述清楚,要让别人听懂真的不是一见易事. 在 jQuery 源码解析一:jQuery 类库整体架构设计解析 一文,大致描述了 ...

  3. jQuery源码中的“new jQuery.fn.init()”什么意思?

    所有文章搬运自我的个人主页:sheilasun.me 引子 最近打算试试看看jQuery的源码,刚开个头就卡住了.无论如何都理解不了jQuery源码入口部分中的 return new jQuery.f ...

  4. jquery源码 DOM加载

    jQuery版本:2.0.3 DOM加载有关的扩展 isReady:DOM是否加载完(内部使用) readyWait:等待多少文件的计数器(内部使用) holdReady():推迟DOM触发 read ...

  5. jQuery源码笔记(一):jQuery的整体结构

    jQuery 是一个非常优秀的 JS 库,与 Prototype,YUI,Mootools 等众多的 Js 类库相比,它剑走偏锋,从 web 开发的实用角度出发,抛除了其它 Lib 中一些中看但不实用 ...

  6. jQuery源码逐行分析学习01(jQuery的框架结构简化)

    最近在学习jQuery源码,在此,特别做一个分享,把所涉及的内容都记录下来,其中有不妥之处还望大家指出,我会及时改正.望各位大神不吝赐教!同时,这也是我的第一篇前端技术博客,对博客编写还不是很熟悉,美 ...

  7. jQuery 源码解析一:jQuery 类库整体架构设计解析

    如果是做 web 的话,相信都要对 Dom 进行增删查改,那大家都或多或少接触到过 jQuery 类库,其最大特色就是强大的选择器,让开发者脱离原生 JS 一大堆 getElementById.get ...

  8. [转] jQuery源码分析-如何做jQuery源码分析

    jQuery源码分析系列(持续更新) jQuery的源码有些晦涩难懂,本文分享一些我看源码的方法,每一个模块我基本按照这样的顺序去学习. 当我读到难度的书或者源码时,会和<如何阅读一本书> ...

  9. jQuery源码dom ready分析

    一.前言 在平时开发web项目时,我们使用jquery框架时,可能经常这样来使用$(document).ready(fn),$(function(){}),这样使用的原因是在浏览器把DOM树渲染好之前 ...

随机推荐

  1. 【随笔】mvc使用forms身份验证实现登陆

  2. UOJ261 【NOIP2016】天天爱跑步

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...

  3. VS2010 asp.net development server 无法展示svg图片

    无解!只能使用IIS Express或者部署到服务器上的IIS能解决! 以下为解释: http://stackoverflow.com/questions/5981309/asp-net-develo ...

  4. CSS中的a标签几个访问状态记录

    a:link {color: #FF0000}     /* 未访问的链接 */a:visited {color: #00FF00}  /* 已访问的链接 */a:hover {color: #FF0 ...

  5. SPOJ GSS3 Can you answer these queries III

    Time Limit: 330MS   Memory Limit: 1572864KB   64bit IO Format: %lld & %llu Description You are g ...

  6. 帝国备份王(Empirebak) \class\functions.php、\class\combakfun.php GETSHELL vul

    catalog . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 EmpireBak是一款完全免费.专门为Mysql大数据的备份与导入而设 ...

  7. 用python虚拟串口

    在linux下调试串口程序,无奈下面的硬件还没到位,所以,想着自己模拟一个串口用用.试了下下面这段代码: #!/usr/bin/env python #coding=utf-8 import pty ...

  8. 服务器添加ipa MIME 类型,防止ipa下载后变zip后缀

    客户反映apk文件下载 后缀会变为zip   打开mime.types文件   application/iphone pxl ipa application/vnd.android.package-a ...

  9. UVa 11998 Broken Keyboard (数组模拟链表问题)

    题目链接: 传送门 Broken Keyboard #include<bits/stdc++.h> using namespace std; char str[100010]; int m ...

  10. python获取知乎日报另存为txt文件

    前言 拿来练手的,比较简单(且有bug),欢迎交流~ 功能介绍 抓取当日的知乎日报的内容,并将每篇博文另存为一个txt文件,集中放在一个文件夹下,文件夹名字为当日时间. 使用的库 re,Beautif ...