在 javascript 中,有 5 个属性,分别是、、、和。这 5 个属性各自有各自的功能,且兼容性不同。jQuery 针对这样的处理提供了 3 个便捷的方法,分别是:html()、text() 和 val()。本文将详细介绍 jQuery 描述文本内容的这 3 个方法
html() 方法类似于 javascript 中的 inenrHTML 属性,用来获取集合中第一个匹配元素的 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() 方法类似于 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() 方法类似于 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() 都可以使用回调函数的返回值来动态改变多个元素的内容
来源: http://www.cnblogs.com/xiaohuochai/p/5917262.html