????：前面的話 在javascript中，描述元素內(nèi)容有5個(gè)屬性，分別是innerHTML、outerHTML、innerText、outerText和textContent。這5個(gè)屬性各自有各自的功能，且兼容性不同。jQuery針對(duì)這樣的處理提供了3個(gè)便捷的方法，分別是：html()、text()和val()。本文將詳細(xì)介紹jQuery描述文本內(nèi)容的這3個(gè)方法html() html()方法類似于j
前面的話
在javascript中，描述元素內(nèi)容有5個(gè)屬性，分別是innerHTML、outerHTML、innerText、outerText和textContent。這5個(gè)屬性各自有各自的功能，且兼容性不同。jQuery針對(duì)這樣的處理提供了3個(gè)便捷的方法，分別是：html()、text()和val()。本文將詳細(xì)介紹jQuery描述文本內(nèi)容的這3個(gè)方法
html()
html()方法類似于javascript中的inenrHTML屬性，用來(lái)獲取集合中第一個(gè)匹配元素的HTML內(nèi)容或設(shè)置每一個(gè)匹配元素的html內(nèi)容，具體有3種用法：
【1】html()
html()不傳入值可以用來(lái)獲取集合中第一個(gè)匹配元素的HTML內(nèi)容
[注意]與innerHTML屬性的問(wèn)題相同，IE8-瀏覽器會(huì)將所有標(biāo)簽轉(zhuǎn)換成大寫形式，且不包含空白文本節(jié)點(diǎn)；而其他瀏覽器則原樣返回
<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)方法設(shè)置每一個(gè)匹配元素的html內(nèi)容，這些元素中的任何內(nèi)容會(huì)完全被新的內(nèi)容取代。此外，用新的內(nèi)容替換這些元素前，jQuery從子元素刪除其他結(jié)構(gòu)，如數(shù)據(jù)和事件處理程序，這樣可以防止內(nèi)存溢出
<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))用來(lái)返回設(shè)置HTML內(nèi)容的一個(gè)函數(shù)。接收元素的索引位置和元素原先的HTML作為參數(shù)。jQuery的調(diào)用這個(gè)函數(shù)之前會(huì)清空元素，使用oldhtml參數(shù)引用先前的內(nèi)容。在這個(gè)函數(shù)中，this指向元素集合中的當(dāng)前元素
<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()方法只能應(yīng)用于雙標(biāo)簽，單標(biāo)簽無(wú)效
<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屬性，得到匹配元素集合中每個(gè)元素的文本內(nèi)容結(jié)合，包括他們的后代，或設(shè)置匹配元素集合中每個(gè)元素的文本內(nèi)容為指定的文本內(nèi)容，具體有3種用法：
【1】text()
text()方法得到匹配元素集合中每個(gè)元素的合并文本，包括他們的后代
<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)用來(lái)設(shè)置匹配元素集合中每個(gè)元素的文本內(nèi)容為指定的文本內(nèi)容
<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))方法通過(guò)使用一個(gè)函數(shù)來(lái)設(shè)置文本內(nèi)容，該函數(shù)接收元素的索引位置和文本值作為參數(shù)，返回設(shè)置的文本內(nèi)容
<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>該方法常用于數(shù)據(jù)初始化，使用html()方法也可以實(shí)現(xiàn)同樣效果
<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 '內(nèi)容' + (index+1);
});
//'內(nèi)容1內(nèi)容2內(nèi)容3'
console.log($('li').text());
//'內(nèi)容1'
console.log($('li').html());
</script>使用范圍
與innerText屬性相同，text()方法不能使用在input元素。在IE8-瀏覽器下，text()方法不能使用在script元素上
input元素可以使用val()方法獲取或設(shè)置文本值；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屬性，主要是用于處理表單元素的值，用于獲取匹配的元素集合中第一個(gè)元素的當(dāng)前值或設(shè)置匹配的元素集合中每個(gè)元素的值
val()
當(dāng)val()方法沒(méi)有參數(shù)時(shí)，表示獲取元素的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>[注意]通過(guò)val()方法從textarea元素中取得的值是不含有回車(\r)字符的。但是如果該值是通過(guò)XHR傳遞給服務(wù)器的，回車(\r)字符會(huì)被保留(或者是被瀏覽器添加的，但是在原始數(shù)據(jù)中并不包含回車(\r))?？梢允褂孟旅娴膙alHook方法解決這個(gè)問(wèn)題
$.valHooks.textarea = {
get: function(elem){
return elem.value.replace(/\r?\n/g,"\r\n");
}
};val()方法主要用于獲取表單元素的值，比如input，select和textarea。對(duì) <select multiple="multiple">元素，val()方法返回一個(gè)包含每個(gè)選擇項(xiàng)的數(shù)組，如果沒(méi)有選擇性被選中，它返回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)用來(lái)設(shè)置表單元素的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('測(cè)試'+ value)
}
</script>
val(function(index, value))
val()方法可以接受一個(gè)函數(shù)作為參數(shù)，函數(shù)中的this指向當(dāng)前元素。接收的集合中的元素，舊的值作為參數(shù)的索引位置，返回設(shè)置的值
<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 '測(cè)試'+index + value;
})
}
</script>
總結(jié)
html()、text()、val()三種方法都是用來(lái)讀取選定元素的內(nèi)容；html()是用來(lái)讀取元素的html內(nèi)容，text()用來(lái)讀取元素的純文本內(nèi)容，val()是用來(lái)讀取表單元素的value值。其中html()和text()方法不能使用在表單元素上，而val()只能使用在表單元素上
html()和val()方法使用在多個(gè)元素上時(shí)，只讀取第一個(gè)元素；而text()方法應(yīng)用在多個(gè)元素上時(shí)，將會(huì)讀取所有選中元素的文本內(nèi)容
html(htmlString)、text(textString)和val(value)三種方法都是用來(lái)替換選中元素的內(nèi)容，如果三個(gè)方法同時(shí)運(yùn)用在多個(gè)元素上時(shí)，那么將會(huì)替換所有選中元素的內(nèi)容
html()、text()、val()都可以使用回調(diào)函數(shù)的返回值來(lái)動(dòng)態(tài)改變多個(gè)元素的內(nèi)容