前面的话

  在javascript中,描述元素内容有5个属性,分别是innerHTMLouterHTMLinnerTextouterTexttextContent。这5个属性各自有各自的功能,且兼容性不同。jQuery针对这样的处理提供了3个便捷的方法,分别是:html()、text()和val()。本文将详细介绍jQuery描述文本内容的这3个方法

html()

  html()方法类似于javascript中的innerHTML属性,用来获取集合中第一个匹配元素的HTML内容或设置每一个匹配元素的html内容,具体有3种用法:

【1】html()

  html()不传入值可以用来获取集合中第一个匹配元素的HTML内容

  [注意]与innerHTML属性的问题相同,IE8-浏览器会将所有标签转换成大写形式,且不包含空白文本节点;而其他浏览器则原样返回

  1. <div class="test">
  2. <div>Demonstration Box</div>
  3. </div>
  4. <div class="test">
  5. <div>123</div>
  6. </div>
  7. <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  8. <script>
  9. //' <div>Demonstration Box</div>'
  10. console.log($('.test').html());
  11. </script>

【2】html(htmlString)

  html(htmlString)方法设置每一个匹配元素的html内容,这些元素中的任何内容会完全被新的内容取代。此外,用新的内容替换这些元素前,jQuery从子元素删除其他结构,如数据和事件处理程序,这样可以防止内存溢出

  1. <div class="demo-container">
  2. <div class="demo-box">Demonstration Box</div>
  3. </div>
  4. <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  5. <script>
  6. //123
  7. $('div.demo-container').html('123');
  8. </script>

【3】html(function(index, oldhtml))

  html(function(index, oldhtml))用来返回设置HTML内容的一个函数。接收元素的索引位置和元素原先的HTML作为参数。jQuery的调用这个函数之前会清空元素,使用oldhtml参数引用先前的内容。在这个函数中,this指向元素集合中的当前元素

  1. <div class="demo-container">123</div>
  2. <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  3. <script>
  4. //1230
  5. $('div.demo-container').html(function(index,oldhtml) {
  6. return oldhtml + index;
  7. });
  8. </script>

使用范围

  与innerHTML属性相同,html()方法只能应用于双标签,单标签无效

  1. <input id="test" value="123">
  2. <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  3. <script>
  4. console.log(test.innerHTML)//''
  5. console.log($('#test').html())//''
  6. </script>

text()

  text()方法类似于javascript中的innerText属性,得到匹配元素集合中每个元素的文本内容结合,包括他们的后代,或设置匹配元素集合中每个元素的文本内容为指定的文本内容,具体有3种用法:

【1】text()

  text()方法得到匹配元素集合中每个元素的合并文本,包括他们的后代

  1. <p id="test">This is a <i>simple</i> document</p>
  2. <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  3. <script>
  4. //This is a simple document
  5. console.log($('#test').text());
  6. </script>
  1. <div>1</div>
  2. <div>2</div>
  3. <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  4. <script>
  5. //12
  6. console.log($('div').text());
  7. </script>

【2】text(textString)

  text(textString)用来设置匹配元素集合中每个元素的文本内容为指定的文本内容

  1. <p id="test">This is a <i>simple</i> document</p>
  2. <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  3. <script>
  4. $('#test').text('<i>123</i>');
  5. //'<i>123</i>'
  6. console.log($('#test').text());
  7. </script>

【3】text(function(index, text))

  text(function(index, text))方法通过使用一个函数来设置文本内容,该函数接收元素的索引位置和文本值作为参数,返回设置的文本内容

  1. <p id="test">This is a <i>simple</i> document</p>
  2. <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  3. <script>
  4. $('#test').text(function(index, text){
  5. return text + index;
  6. });
  7. //'This is a simple document0'
  8. console.log($('#test').text());
  9. </script>

  该方法常用于数据初始化,使用html()方法也可以实现同样效果

  1. <ul>
  2. <li></li>
  3. <li></li>
  4. <li></li>
  5. </ul>
  6. <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  7. <script>
  8. $('ul li').text(function(index, text){
  9. return '内容' + (index+1);
  10. });
  11. //'内容1内容2内容3'
  12. console.log($('li').text());
  13. //'内容1'
  14. console.log($('li').html());
  15. </script>

使用范围

  与innerText属性相同,text()方法不能使用在input元素。在IE8-浏览器下,text()方法不能使用在script元素上

  input元素可以使用val()方法获取或设置文本值;script元素可以使用html()方法

  1. <input id="test1" value="123">
  2. <script id="test2">
  3. var a = 1;
  4. </script>
  5. <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  6. <script>
  7. console.log($('#test1').text());//''
  8. //IE8-浏览器返回'',其他浏览器返回'var a = 1;'
  9. console.log($('#test2').text());
  10. console.log($('#test1').val());//'123'
  11. console.log($('#test2').html());//'var a = 1;'
  12. </script>

val()

  val()方法类似于javascript中的value属性,主要是用于处理表单元素的值,用于获取匹配的元素集合中第一个元素的当前值或设置匹配的元素集合中每个元素的值

val()

  当val()方法没有参数时,表示获取元素的value值

  1. <input id="test" value="text">
  2. <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  3. <script>
  4. console.log($('#test').val());//'text'
  5. </script>

  [注意]通过val()方法从textarea元素中取得的值是不含有回车(\r)字符的。但是如果该值是通过XHR传递给服务器的,回车(\r)字符会被保留(或者是被浏览器添加的,但是在原始数据中并不包含回车(\r))。可以使用下面的valHook方法解决这个问题

  1. $.valHooks.textarea = {
  2. get: function(elem){
  3. return elem.value.replace(/\r?\n/g,"\r\n");
  4. }
  5. };

  val()方法主要用于获取表单元素的值,比如input,select和textarea。对 <select multiple="multiple">元素,val()方法返回一个包含每个选择项的数组,如果没有选择性被选中,它返回null

  1. <textarea id="test1">1</textarea>
  2. <input id="test2" value="2">
  3. <select id="test3">
  4. <option>3</option>
  5. </select>
  6. <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  7. <script>
  8. console.log($('#test1').val());//1
  9. console.log($('#test2').val());//2
  10. console.log($('#test3').val());//3
  11. </script>

val(value)

  val(value)用来设置表单元素的value值

  1. <input id="test" value="2">
  2. <button id="btn">按钮</button>
  3. <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  4. <script>
  5. btn.onclick = function(){
  6. var value = $('#test').val();
  7. $('#test').val('测试'+ value)
  8. }
  9. </script>

val(function(index, value))

  val()方法可以接受一个函数作为参数,函数中的this指向当前元素。接收的集合中的元素,旧的值作为参数的索引位置,返回设置的值

  1. <input id="test" value="2">
  2. <button id="btn">按钮</button>
  3. <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  4. <script>
  5. btn.onclick = function(){
  6. $('#test').val(function(index,value){
  7. return '测试'+index + value;
  8. })
  9. }
  10. </script>

总结

  html()、text()、val()三种方法都是用来读取选定元素的内容;html()是用来读取元素的html内容,text()用来读取元素的纯文本内容,val()是用来读取表单元素的value值。其中html()和text()方法不能使用在表单元素上,而val()只能使用在表单元素上

  html()和val()方法使用在多个元素上时,只读取第一个元素;而text()方法应用在多个元素上时,将会读取所有选中元素的文本内容

  html(htmlString)、text(textString)和val(value)三种方法都是用来替换选中元素的内容,如果三个方法同时运用在多个元素上时,那么将会替换所有选中元素的内容

  html()、text()、val()都可以使用回调函数的返回值来动态改变多个元素的内容

深入学习jQuery描述文本内容的3个方法的更多相关文章

  1. Jquery操作文本内容(三个方法:html()、text()、var())

    Jquery操作文本内容(三个方法:html().text().var()) 一.html()获取和设置文本内容和标签 1.获取标签里的结构和内容 $("ul").html() / ...

  2. 如何遍历div里面的文本内容,用each方法,

    如何遍历div里面的文本内容,然后进行匹配传来的数据,进行选中div,并进行CSS样式处理, for(i = 0; i< $(".itemMenuRowBox").child ...

  3. jquery 替换文本内容

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  4. iOS学习之根据文本内容动态计算文本框高度的步骤

    在视图加载的过程中,是先计算出frame,再根据frame加载视图的,所以在设计计算高度的方法的时候,设计成加号方法; //首先给外界提供计算cell高度的方法 + (CGFloat)heightFo ...

  5. Android应用开发EditText文本内容变化监听方法

    import android.app.Activity; import android.os.Bundle; import android.text.Editable; import android. ...

  6. Android EditText文本内容变化监听方法

    package com.google; import android.app.Activity; import android.os.Bundle; import android.text.Edita ...

  7. js/jquery获取文本框的值与改变文本框的值

    我们就用它来学习获取文本框的值及改变文本框的值. 代码如下 复制代码 <script>function get1(){ document.getElementById("txtb ...

  8. Jquery实现textarea根据文本内容自适应高度

    本文给大家分享的是Jquery实现textarea根据文本内容自适应高度,这些在平时的项目中挺实用的,所以抽空封装了一个文本框根据输入内容自适应高度的插件,这里推荐给小伙伴们. autoTextare ...

  9. jquery获取文本框的内容

    使用jquery获取文本框的内容有以下几种: 1.根据ID取值(id属性): // javascript <script type="text/javascript"> ...

随机推荐

  1. [APUE]标准IO库(上)

    一.流和FILE对象 系统IO都是针对文件描述符,当打开一个文件时,即返回一个文件描述符,然后用该文件描述符来进行下面的操作,而对于标准IO库,它们的操作则是围绕流(stream)进行的. 当打开一个 ...

  2. Linux学习之探索文件系统

    Linux,一起学习进步-    ls With it, we can see directory contents and determine a variety of important file ...

  3. Nginx如何处理一个请求

    看了下nginx的官方文档,其中nginx如何处理一个请求讲解的很好,现在贴出来分享下.Nginx首先选定由哪一个虚拟主机来处理请求.让我们从一个简单的配置(其中全部3个虚拟主机都在端口*:80上监听 ...

  4. 玩转spring boot——MVC应用

    如何快速搭建一个MCV程序? 参照spring官方例子:https://spring.io/guides/gs/serving-web-content/ 一.spring mvc结合thymeleaf ...

  5. 基于SignalR的消息推送与二维码描登录实现

    1 概要说明 使用微信扫描登录相信大家都不会陌生吧,二维码与手机结合产生了不同应用场景,基于二维码的应用更是比较广泛.为了满足ios.android客户端与web短信平台的结合,特开发了基于Singl ...

  6. 6.在MVC中使用泛型仓储模式和依赖注入实现增删查改

    原文链接:http://www.c-sharpcorner.com/UploadFile/3d39b4/crud-operations-using-the-generic-repository-pat ...

  7. C# salt+hash 加密

    一.先明确几个基本概念 1.伪随机数:pseudo-random number generators ,简称为:PRNGs,是计算机利用一定的算法来产生的.伪随机数并不是假随机 数,这里的" ...

  8. 自定义鼠标光标cursor

    通过css属性 Cursor:url()自定义鼠标光标. {cursor:url('图标路径'),default;} url是自定义鼠标图标路径 default指的是定义默认的光标(通常是一个箭头), ...

  9. “此网页上的某个 Web 部件或 Web 表单控件无法显示或导入。找不到该类型,或该类型未注册为安全类型。”

    自从vs装了Resharper,看见提示总是手贱的想去改掉它.于是乎手一抖,把一个 可视web部件的命名空间给改了. 喏,从LibrarySharePoint.WebPart.LibraryAddEd ...

  10. SQL字符串函数

    LEN() :计算字符串长度(字符的个数.)datalength();//计算字符串所占用的字节数,不属于字符串函数.测试varchar变量与nvarchar变量存储字符串a的区别.见备注1.LOWE ...