深入学习jQuery描述文本内容的3个方法
前面的话
在javascript中,描述元素内容有5个属性,分别是innerHTML、outerHTML、innerText、outerText和textContent。这5个属性各自有各自的功能,且兼容性不同。jQuery针对这样的处理提供了3个便捷的方法,分别是:html()、text()和val()。本文将详细介绍jQuery描述文本内容的这3个方法
html()
html()方法类似于javascript中的innerHTML属性,用来获取集合中第一个匹配元素的HTML内容或设置每一个匹配元素的html内容,具体有3种用法:
【1】html()
html()不传入值可以用来获取集合中第一个匹配元素的HTML内容
[注意]与innerHTML属性的问题相同,IE8-浏览器会将所有标签转换成大写形式,且不包含空白文本节点;而其他浏览器则原样返回
<div class="test"><div>Demonstration Box</div> </div> <div class="test"><div>123</div> </div> <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script> //' <div>Demonstration Box</div>' console.log($('.test').html()); </script>
【2】html(htmlString)
html(htmlString)方法设置每一个匹配元素的html内容,这些元素中的任何内容会完全被新的内容取代。此外,用新的内容替换这些元素前,jQuery从子元素删除其他结构,如数据和事件处理程序,这样可以防止内存溢出
<div class="demo-container"><div class="demo-box">Demonstration Box</div> </div> <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script> //123 $('div.demo-container').html('123'); </script>
【3】html(function(index, oldhtml))
html(function(index, oldhtml))用来返回设置HTML内容的一个函数。接收元素的索引位置和元素原先的HTML作为参数。jQuery的调用这个函数之前会清空元素,使用oldhtml参数引用先前的内容。在这个函数中,this指向元素集合中的当前元素
<div class="demo-container">123</div> <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script> //1230 $('div.demo-container').html(function(index,oldhtml) {return oldhtml + index; }); </script>
使用范围
与innerHTML属性相同,html()方法只能应用于双标签,单标签无效
<input id="test" value="123"> <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script> console.log(test.innerHTML)//'' console.log($('#test').html())//'' </script>
text()
text()方法类似于javascript中的innerText属性,得到匹配元素集合中每个元素的文本内容结合,包括他们的后代,或设置匹配元素集合中每个元素的文本内容为指定的文本内容,具体有3种用法:
【1】text()
text()方法得到匹配元素集合中每个元素的合并文本,包括他们的后代
<p id="test">This is a <i>simple</i> document</p> <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script> //This is a simple document console.log($('#test').text()); </script>
<div>1</div> <div>2</div> <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script> //12 console.log($('div').text()); </script>
【2】text(textString)
text(textString)用来设置匹配元素集合中每个元素的文本内容为指定的文本内容
<p id="test">This is a <i>simple</i> document</p> <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script> $('#test').text('<i>123</i>'); //'<i>123</i>' console.log($('#test').text()); </script>
【3】text(function(index, text))
text(function(index, text))方法通过使用一个函数来设置文本内容,该函数接收元素的索引位置和文本值作为参数,返回设置的文本内容
<p id="test">This is a <i>simple</i> document</p> <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script> $('#test').text(function(index, text){return text + index; }); //'This is a simple document0' console.log($('#test').text()); </script>
该方法常用于数据初始化,使用html()方法也可以实现同样效果
<ul><li></li><li></li><li></li> </ul> <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script> $('ul li').text(function(index, text){return '内容' + (index+1); }); //'内容1内容2内容3' console.log($('li').text()); //'内容1' console.log($('li').html()); </script>
使用范围
与innerText属性相同,text()方法不能使用在input元素。在IE8-浏览器下,text()方法不能使用在script元素上
input元素可以使用val()方法获取或设置文本值;script元素可以使用html()方法
<input id="test1" value="123"> <script id="test2"> var a = 1; </script> <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script> console.log($('#test1').text());//'' //IE8-浏览器返回'',其他浏览器返回'var a = 1;' console.log($('#test2').text()); console.log($('#test1').val());//'123' console.log($('#test2').html());//'var a = 1;' </script>
val()
val()方法类似于javascript中的value属性,主要是用于处理表单元素的值,用于获取匹配的元素集合中第一个元素的当前值或设置匹配的元素集合中每个元素的值
val()
当val()方法没有参数时,表示获取元素的value值
<input id="test" value="text"> <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script> console.log($('#test').val());//'text' </script>
[注意]通过val()方法从textarea元素中取得的值是不含有回车(\r)字符的。但是如果该值是通过XHR传递给服务器的,回车(\r)字符会被保留(或者是被浏览器添加的,但是在原始数据中并不包含回车(\r))。可以使用下面的valHook方法解决这个问题
$.valHooks.textarea = {get: function(elem){return elem.value.replace(/\r?\n/g,"\r\n");} };
val()方法主要用于获取表单元素的值,比如input,select和textarea。对 <select multiple="multiple">元素,val()方法返回一个包含每个选择项的数组,如果没有选择性被选中,它返回null
<textarea id="test1">1</textarea> <input id="test2" value="2"> <select id="test3"><option>3</option> </select> <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script> console.log($('#test1').val());//1 console.log($('#test2').val());//2 console.log($('#test3').val());//3 </script>
val(value)
val(value)用来设置表单元素的value值
<input id="test" value="2"> <button id="btn">按钮</button> <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script> btn.onclick = function(){var value = $('#test').val();$('#test').val('测试'+ value) } </script>
val(function(index, value))
val()方法可以接受一个函数作为参数,函数中的this指向当前元素。接收的集合中的元素,旧的值作为参数的索引位置,返回设置的值
<input id="test" value="2"> <button id="btn">按钮</button> <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script> btn.onclick = function(){$('#test').val(function(index,value){return '测试'+index + value;}) } </script>
总结
html()、text()、val()三种方法都是用来读取选定元素的内容;html()是用来读取元素的html内容,text()用来读取元素的纯文本内容,val()是用来读取表单元素的value值。其中html()和text()方法不能使用在表单元素上,而val()只能使用在表单元素上
html()和val()方法使用在多个元素上时,只读取第一个元素;而text()方法应用在多个元素上时,将会读取所有选中元素的文本内容
html(htmlString)、text(textString)和val(value)三种方法都是用来替换选中元素的内容,如果三个方法同时运用在多个元素上时,那么将会替换所有选中元素的内容
html()、text()、val()都可以使用回调函数的返回值来动态改变多个元素的内容
转载于:https://www.cnblogs.com/xiaohuochai/p/5917262.html
深入学习jQuery描述文本内容的3个方法相关推荐
- CorelDRAW VBA - 段落文本内容的导出 ExportToFile 方法
过 Text 文本对象的 ExportToFile 方法,可以实现对文本内容的导出功能.例如可以指定导出某个段落文本的指定段落范围. 参数说明 参数 描述 FileName 指定文本导出到的文件的完整 ...
- 结合语言知识和深度学习的中文文本情感分析方法
结合语言知识和深度学习的中文文本情感分析方法 徐康庭, 宋威 北方工业大学信息学院 摘要:在目前的中文文本情感分析研究中,基于语义规则和情感词典的方法通常需要人工设置情感阈值:而基于深度学习的方法由于 ...
- js/jquery获取文本框的值与改变文本框的值
我们就用它来学习获取文本框的值及改变文本框的值. 代码如下 复制代码 <script> function get1() { document.getElementById("tx ...
- python提取p标签的文本_从p标签获取文本内容
我正在尝试获取此页面上每个块的描述文本内容 用于p标签的html看起来像 http://DataMiningBlog.com covers current challenges, interview ...
- 怎么把文本内容转换成语音?教你两招快速搞定
怎么把文本内容转换成语音呢?大家在日常的工作中,如果需要制作一些视频,对视频的原声感到不满意,想要换掉语音文件,自己又不想配音,这时候应该怎么办呢?其实我们可以直击将编辑好的文本内容生成语音,这样既简 ...
- jQuery获取表格内容
一个表格往往是从后台获取数据,因此表格的内容往往只有孤立的tr.td标签,而不包含id.class.name这些可以直接被选择器识别的标签:而且从后台获取的数据往往是不断发生变化的,给表格加上id等标 ...
- 文本深度表示模型Word2Vec 简介 Word2vec 是 Google 在 2013 年年中开源的一款将词表征为实数值向量的高效工具, 其利用深度学习的思想,可以通过训练,把对文本内容的处理简
文本深度表示模型Word2Vec 简介 Word2vec 是 Google 在 2013 年年中开源的一款将词表征为实数值向量的高效工具, 其利用深度学习的思想,可以通过训练,把对文本内容的处理简化为 ...
- 盘点:文本内容安全领域 深度学习的六个主流应用方法
本文来自:易盾实验室 在深度学习技术兴起之前相当长的一段时间内,基于机器学习技术的文本分类方法占据着文本分类领域的统治地位. 如下图所示,特征工程+机器学习分类器一直是解决文本分类问题的标准范式.针对 ...
- 47 jQuery文本内容值
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 主要针对元素的内容还有表单的值操作. 1.普通元素内容html()[相当于原生innerH ...
最新文章
- 如何凭本事搞砸公司的重大项目?
- Java中的微信支付(2):API V3 微信平台证书的获取与刷新
- Lua脚本语言应用场景
- linux内核c1bcbc40,【资料共享】给学习linux内核的大餐
- OMEGA3-补充注意事项
- 路由 交换 网桥 相关转贴
- Mac不装软件校验MD5和SHA1值
- 能利用计算机来模拟某种真实的实验现象,自然现象或社会现象的课件是,幼儿园课件制作教案...
- 渗透杂记-2013-07-13 关于SMB版本的扫描
- VsCode 配置java环境(详细教程)
- cmos功能测试软件,CMOS摄像头开发测试方法(我总结的)
- (五十一)时间序列分析二:平稳时间序列分析(ARMA)
- python银行管理系统框架_基于Python的网上银行综合管理系统的设计与实现
- 交返对于高频交易者尤为重要
- 第一篇:wine介绍
- 百度开发者中心如何创建mysql数据库_百度开发者中心BAE新建Java应用
- 网安学习(二十五)HTTP协议、HTTS、邮件协议
- LaTeX插入知网参考文献
- 冒泡排序、冒泡排序动画、冒泡排序代码、冒泡排序教程
- android 齐刘海编程,[翻译]Android适配全面屏上的齐刘海