深入學習jQuery描述文本內容的3個方法 - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　在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>