jQuery源码
来源:互联网 发布:弯曲法测杨氏模量数据 编辑:程序博客网 时间:2024/06/05 05:55
写在前面
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()); // 输出 helloconsole.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 ); }
接下来是jQuery.text(),其实是Sizzle.getText
jQuery.text = Sizzle.getText;
再看Sizzle.getText,(具体分析下班后补充= =b)
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 ) { // 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 ) { return elem.nodeValue; } // Do not include comment or processing instruction nodes return ret;};
写在后面
jQuery.fn.text 、jQuery.text 其实并不复杂,理解了textContent属性基本就迎刃而解,妨碍理解的我觉得反而是jQuery.access这样的神级方法。遇到jQuery.access,理解它的作用是设置/读取属性即可。
<script type="text/javascript"><!--google_ad_client = "ca-pub-1944176156128447";/* cnblogs 首页横幅 */google_ad_slot = "5419468456";google_ad_width = 728;google_ad_height = 90;//--></script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
- jquery源码
- JQuery源码
- jQuery源码
- jquery源码
- jQuery源码
- jQuery源码
- jquery源码
- jQuery源码
- jQuery源码
- jquery源码-jquery.extend()
- [ jQuery ] jQuery 源码分析!
- jQuery源码-jQuery.extend
- jquery源码阅读jQuery.inArray()
- jquery源码----初步认识源码
- jQuery源码资料收集
- Jquery源码分析(一)
- jQuery 源码分析
- JQuery 源码分析 -1
- hadoop 命令
- Qt5下OpenGL程序的新写法
- UVaOJ10006 - Carmichael Numbers
- Android中设定EditText的输入长度
- 古堡算式
- jQuery源码
- 简单建一个android ndk工程(android环境+android-ndk-r8)
- 从温JavaSE基础知识的笔记
- c/c++ GB2312编码和UTF-8互转
- 相关文章插件
- ubuntu下解压命令大全:
- C++ New与Delete
- dede如何用sql语句统计栏目的文章数,条数等···
- map中的方法(一)