jQuery中实现text()的方法


Posted in jQuery onApril 04, 2019

一、有这样一段 html

<div class="divOne">
 <p>嘿嘿嘿</p>
</div>
<div class="divOne">
 <p>哈哈哈</p>
</div>

二、jQuery 的 text() 方法

(1)当直接调用 $().text()时,.text()的作用是(循环)读取(多个)目标元素的textContent/nodeValue

简单实现:

function readText(elem) {
 let node,
  ret = "",
  i = 0,
  nodeType = elem.nodeType
 console.log(nodeType,'nodeType22')
 //如果selector是类的话,会有多个目标元素,此时需要分别单个循环
 //比如document.querySelectorAll('.divOne').nodeType ->undefined
 if (!nodeType) {
  while ((node = elem[i++])) {
  //单个获取
  ret += readText(node)
  }
 }
 //元素节点,文档节点,文档碎片
 else if (nodeType === 1 || nodeType === 9 || nodeType === 11) {
  //如果目标元素的内容是文本,则直接返回
  if (typeof elem.textContent === "string") {
  /*jQuery没有用innerText获取文本的值,http://bugs.jquery.com/ticket/11153,
  大概就是在IE8中新节点插入会保留所有回车。
  所以jQuery采用了textContent获取文本值,
  textContent本身是dom3规范的,可以兼容火狐下的innerText问题。*/
  return elem.textContent
  }
  //如果节点内容不是文本,则循环子节点,并依次获取它们的文本节点
  else {
  for (elem = elem.firstChild; elem; elem = elem.nextSibling) {
   ret += readText(elem)
  }
  }
 }
 //文本节点、一个文档的CDATA部分(没遇到过这个)
 else if (nodeType === 3 || nodeType === 4) {
  //返回节点值
  return elem.nodeValue;
 }
 //nodeType:注释节点 8,处理指令 7
 //text()方法不处理这两个类型节点
 return ret
 }

(2)当调用$().text(value)时,.text(value)的作用是为每一个符合条件的目标元素的textContent设置为 value

简单实现:

writeText():

function writeText(value) {
 let elem,
  i = 0;
 //先清空目标元素的内容
 customEmpty.call(this)
 //循环
 for (; (elem = this[i]) != null; i++) {
  //元素节点,文档碎片,文档节点
  if (elem.nodeType === 1 || elem.nodeType === 11 || elem.nodeType === 9) {
  // text()方法不会解析标签
  elem.textContent = value;
  }
 }
 //return this 方便链式调用
 return this
 }

customEmpty():

function customEmpty() {
 let elem,
  i = 0;
 //注意for循环的写法
 for (; (elem = this[i]) != null; i++) {
  //如果是元素节点的话,清空该节点的所有内容
  if (elem.nodeType === 1) {
  elem.textContent = "";
  }
 }
 return this;
 }

(3)源码实现

源码:

jQuery.text()总体:

//源码6152行
 text: function( value ) {
  return access( this, function( value ) {
  return value === undefined ?
   //读
   //如果直接调用text()的话,就调用Sizzle.getText
   jQuery.text( this ) :
   //写
   //循环
   this.empty().each( function() {
   //先清空目标元素的内容,然后再赋值
   if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
    console.log(value,'value6159')
    //如果包含标签的话,需要用html()方法,text()方法不会解析标签
    /*jQuery没有用innerText获取文本的值,http://bugs.jquery.com/ticket/11153,
    大概就是在IE8中新节点插入会保留所有回车。
    所以jQuery采用了textContent获取文本值,
    textContent本身是dom3规范的,可以兼容火狐下的innerText问题。*/
    this.textContent = value;
   }
   } )
  }, null, value, arguments.length );
 },

源码解析:

① 调用text(),实际上是调用access()

也就是说:调用jQuery.access()相当于调用了fn.call( elems, value ),即自定义的方法jQuery.access(this, function(value) {xxx})

② .text()的情况调用这部分源码:

jQuery.text()调用的其实是Sizzle.getText()

//源码2833行
 jQuery.text = Sizzle.getText;
Sizzle.getText():
//源码1642行
getText = Sizzle.getText = function( elem ) {
  var node,
   ret = "",
   i = 0,
   nodeType = elem.nodeType;

  if ( !nodeType ) {
   while ( (node = elem[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 (jQuery #11153)
   //如果目标元素的子节点是文本节点,则直接返回它的textContent
   if ( typeof elem.textContent === "string" ) {
   /*jQuery没有用innerText获取文本的值,http://bugs.jquery.com/ticket/11153,
   大概就是在IE8中新节点插入会保留所有回车。
   所以jQuery采用了textContent获取文本值,
   textContent本身是dom3规范的,可以兼容火狐下的innerText问题。*/
   return elem.textContent;
   }
   //如果子节点不是文本节点,则循环子节点,并依次获取它们的文本节点
   else {
   // Traverse its children
   for ( elem = elem.firstChild; elem; elem = elem.nextSibling ) {
    ret += getText( elem );
   }
   }
  }
  //文本节点、一个文档的CDATA部分(没遇到过这个)
  else if ( nodeType === 3 || nodeType === 4 ) {
   return elem.nodeValue;
  }
  // Do not include comment or processing instruction nodes
  return ret;
  };

③ .text(value)的情况调用这部分源码:

jQuery.text(value):

//写
   //循环
   this.empty().each( function() {
   //先清空目标元素的内容,然后再赋值
   if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
    console.log(value,'value6159')
    //如果包含标签的话,需要用html()方法,text()方法不会解析标签
    /*jQuery没有用innerText获取文本的值,http://bugs.jquery.com/ticket/11153,
    大概就是在IE8中新节点插入会保留所有回车。
    所以jQuery采用了textContent获取文本值,
    textContent本身是dom3规范的,可以兼容火狐下的innerText问题。*/
    this.textContent = value;
   }
   } )

empty():

//源码6231行
 empty: function() {
  var elem,
  i = 0;
  for ( ; ( elem = this[ i ] ) != null; i++ ) {
  //如果是元素节点的话
  if ( elem.nodeType === 1 ) {
   // Prevent memory leaks
   //清空内容和事件,防止内存泄漏
   jQuery.cleanData( getAll( elem, false ) );
   // Remove any remaining nodes
   //清空节点所有内容
   elem.textContent = "";
  }
  }
  return this;
 },

④ 总结

$(".divOne").text()的本质:

(1)节点内容是文本,返回$(".divOne")[i].textContent

(2)节点内容不是文本,循环返回$(".divOne")[i].element[j].textContent

(3)节点内容是文本节点或一个文档的CDATA部分,则返回$(".divOne")[i]. nodeValue

$(".divOne").text("Hello <b>world</b>!")的本质:

(1)jQuery.cleanData()

(2)$(".divOne")[i].textContent = ""

(3)$(".divOne")[i].textContent="Hello world!"

注意:text() 不会去解析 html 标签!

参考:http://api.jquery.com/text/

完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>jQuery之text()</title>
</head>
<body>
<script src="jQuery.js"></script>
<div class="divOne">
 <!--<p id="divTwo">嘿嘿嘿</p>-->
 <p>嘿嘿嘿</p>
</div>
<div class="divOne">
 <p>哈哈哈</p>
</div>
<input type="text" id="inputOne">
<script>
 function readText(elem) {
 let node,
  ret = "",
  i = 0,
  nodeType = elem.nodeType
 console.log(nodeType,'nodeType22')
 //如果selector是类的话,会有多个目标元素,此时需要分别单个循环
 //比如document.querySelectorAll('.divOne').nodeType ->undefined
 if (!nodeType) {
  while ((node = elem[i++])) {
  //单个获取
  ret += readText(node)
  }
 }
 //元素节点,文档节点,文档碎片
 else if (nodeType === 1 || nodeType === 9 || nodeType === 11) {
  //如果目标元素的内容是文本,则直接返回
  if (typeof elem.textContent === "string") {
  /*jQuery没有用innerText获取文本的值,http://bugs.jquery.com/ticket/11153,
  大概就是在IE8中新节点插入会保留所有回车。
  所以jQuery采用了textContent获取文本值,
  textContent本身是dom3规范的,可以兼容火狐下的innerText问题。*/
  return elem.textContent
  }
  //如果节点的内容不是文本,则循环子节点,并依次获取它们的文本节点
  else {
  for (elem = elem.firstChild; elem; elem = elem.nextSibling) {
   ret += readText(elem)
  }
  }
 }
 //文本节点、一个文档的CDATA部分(没遇到过这个)
 else if (nodeType === 3 || nodeType === 4) {
  //返回节点值
  return elem.nodeValue;
 }
 //nodeType:注释节点 8,处理指令 7
 //text()方法不处理这两个类型节点
 return ret
 }
 function customEmpty() {
 let elem,
  i = 0;
 //注意for循环的写法
 for (; (elem = this[i]) != null; i++) {
  //如果是元素节点的话,清空该节点的所有内容
  if (elem.nodeType === 1) {
  elem.textContent = "";
  }
 }
 return this;
 }
 function writeText(value) {
 let elem,
  i = 0;
 //先清空目标元素的内容
 customEmpty.call(this)
 //循环
 for (; (elem = this[i]) != null; i++) {
  //元素节点,文档碎片,文档节点
  if (elem.nodeType === 1 || elem.nodeType === 11 || elem.nodeType === 9) {
  // text()方法不会解析标签
  elem.textContent = value;
  }
 }
 //return this 方便链式调用
 return this
 }
 function customText(value) {
 return value === undefined ?
  //读
  readText(this) :
  //写
  writeText.call(this, value)
 }
 customText.call(document.querySelectorAll('.divOne'))
 customText.call(document.querySelectorAll('.divOne'),"Hello <b>world</b>!")
 // let p=document.createElement('p')
 // p.innerText='哈哈哈'
 console.log($(".divOne").text())
 // customText.call(document.querySelectorAll('.divOne'))
 // console.log(document.querySelectorAll('.divOne').nodeType,'childnode81')
 // console.log(document.querySelectorAll('.divOne')[0].textContent,'childnode81')
 // $("#divOne").text('<p>aaaa</p>')
 // console.log(document.querySelector("#divTwo"))
</script>
</body>
</html>

总结

以上所述是小编给大家介绍的jQuery中实现text()的方法,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧

jQuery 相关文章推荐
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
详解jquery选择器的原理
Aug 01 jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
jQuery实现网页拼图游戏
Apr 22 jQuery
jQuery插件实现图片轮播效果
Oct 19 jQuery
jQuery实现简单评论区功能
Oct 26 jQuery
jQuery-App输入框实现实时搜索
Nov 19 jQuery
jQuery+ajax实现文件上传功能
Dec 22 jQuery
基于 jQuery 实现键盘事件监听控件
Apr 04 #jQuery
jQuery分组选择器简单用法示例
Apr 04 #jQuery
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 #jQuery
jquery简单实现纵向的无缝滚动代码实例
Apr 01 #jQuery
jQuery事件blur()方法的使用实例讲解
Mar 30 #jQuery
jQuery实现动态添加和删除input框代码实例
Mar 29 #jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 #jQuery
You might like
PHP读取文件并可支持远程文件的代码分享
2012/10/03 PHP
PHP中使用glob函数实现一句话删除某个目录下的所有文件
2014/07/22 PHP
PHP实现从远程下载文件的方法
2015/03/12 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
zeroclipboard复制到剪切板的flash
2010/08/04 Javascript
在父页面调用子页面的JS方法
2013/09/29 Javascript
jquery实现漂亮的二级下拉菜单代码
2015/08/26 Javascript
js简单倒计时实现代码
2016/04/30 Javascript
js 获取经纬度的实现方法
2016/06/20 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
2016/06/25 Javascript
bootstrap table复杂操作代码
2016/11/01 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
浅谈JS中的常用选择器及属性、方法的调用
2017/07/28 Javascript
NodeJS有难度的面试题(能答对几个)
2019/10/09 NodeJs
在Vue中使用mockjs代码实例
2020/11/25 Vue.js
Python获取脚本所在目录的正确方法
2014/04/15 Python
全面解读Python Web开发框架Django
2014/06/30 Python
python数组过滤实现方法
2015/07/27 Python
简介Python的collections模块中defaultdict类型的用法
2016/07/07 Python
Python单元测试简单示例
2018/07/03 Python
设置python3为默认python的方法
2018/10/31 Python
Python 串口读写的实现方法
2019/06/12 Python
解决PyCharm无法使用lxml库的问题(图解)
2020/12/22 Python
Omio俄罗斯:一次搜索公共汽车、火车和飞机的机票
2018/11/17 全球购物
PyQt QMainWindow的使用示例
2021/03/24 Python
机电专业体育教师求职信
2013/09/21 职场文书
2014年公司庆元旦活动方案
2014/03/05 职场文书
2015年银行个人工作总结
2015/05/14 职场文书
赢在中国观后感
2015/06/02 职场文书
微观世界观后感
2015/06/10 职场文书
2015年卫生局工作总结
2015/07/24 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书
Windows下使用Nginx+Tomcat做负载均衡的完整步骤
2021/03/31 Servers
SpringBoot快速入门详解
2021/07/21 Java/Android
python中的sys模块和os模块
2022/03/20 Python
PC版《死亡搁浅导剪版》现已发售 展开全新的探险
2022/04/03 其他游戏