4-5. jQuery針對「內容」的控制
jQuery 內容的取得與改變
| 方法 | 說明 | |
|---|---|---|
| text ( [textString] ) | 沒有 textString 參數時, 是取得指定物件內的內容, 包含所有後代元素的內容文字; 有 textString 參數時, 表示將參數加入到指定物件成為內容節點。 [參考英文版] [參考簡中版] [參考JQ官網版] |
取得／取代 |
| html ( [htmlString] ) | 沒有 htmlString 參數時, 是取得指定物件內的內容, 包含所有的 HTML 原始碼內容; 有 htmlString 參數時, 表示將參數加入到指定物件成為內容節點, 結果會辨視出標籤而呈現出 HTML 的結果。 [參考英文版] [參考簡中版] [參考JQ官網版] |
取得／取代 |
| val ( [value] ) | 沒有 value 參數時, 是取得指定表單欄位物件內的內容值; 有 value 參數時, 表示將 value 參數加入到指定表單欄位物件成為內容值。 [參考英文版] [參考簡中版] [參考JQ官網版] |
取得／取代 |
| attr ( 屬性名稱 [,值] ) |
沒有 "值" 參數時, 是取得指定屬性的內容; 有 "值" 參數時, 表示改變指定屬性的內容為指定的值。 [參考英文版] [參考簡中版] [參考JQ官網版] |
取得／取代 |
jQuery 內容的添加
| 方法 | 說明 | |
|---|---|---|
| append ( content ) | 將 content 參數的內容新增到指定物件之內的尾端 [參考英文版] [參考簡中版] [參考JQ官網版] |
添加 |
| prepend ( content ) | 將 content 參數的內容新增到指定物件之內的前端 [參考英文版] [參考簡中版] [參考JQ官網版] |
添加 |
| after ( content ) | 將 content 參數的內容新增到指定物件之外的後面 [參考英文版] [參考簡中版] [參考JQ官網版] |
添加 |
| before ( content ) | 將 content 參數的內容新增到指定物件之外的前面 [參考英文版] [參考簡中版] [參考JQ官網版] |
添加 |
| wrap ( content ) | 在指定的物件外圍新增加上 content 參數的內容 [參考英文版] [參考簡中版] [參考JQ官網版] |
添加 |
範例練習 結果展示參考
拷貝 HTML 部份
<h2>========== PART-1、取得內容、改變內容 ==========</h2>
<p>
<button class="ctr1">1. 以 text 方法取得 list1 原有內容,再寫入"<h1>TSuiling</h1>"</button>
<button class="ctr2">2. 以 html 方法取得 list2 原有內容,再寫入"<h1>TSuiling</h1>"</button>
</p>
<ul>
<li><strong><em>清單項目1111</em></strong></li>
<li><strong><em>清單項目2222</em></strong></li>
</ul>
<h2>========== PART-2、替換相片的顯示 ==========</h2>
<div style="text-align: center">
<img id="photo" src="./img/basic21.jpg" alt="">
</div>
<p style="text-align: center">
<button class="chimg" data-img="basic21.jpg">相片一</button>
<button class="chimg" data-img="basic22.jpg">相片二</button>
<button class="chimg" data-img="basic23.jpg">相片三</button>
<button class="chimg" data-img="basic24.jpg">相片四</button>
</p>
<h2>========== PART-3、增加內容 ==========</h2>
<p style="text-align: center">
<button class="add1">wrap:物件外圍</button>
<button class="add2">append:框內尾端</button>
<button class="add3">prepend:框內前端</button>
<button class="add4">after:框外後面</button>
<button class="add5">before框外前面</button>
</p>
<div class="container">
<img src="./img/basic13.jpg" alt="">
</div>
拷貝 CSS 部份
<style>
body>h2 { font-size: 20px; background-color: #464277; color: #fff; padding: 5px; }
button {margin:5px; padding:5px; font-size:16px; cursor: pointer; }
li { font-size:18px; padding:5px; }
ul h1 { font-size: 1.5rem; display: inline-block; margin: 0; }
.container { background-color: rgba(255, 159, 244, 0.5); text-align: center; }
.wrapper { max-width: 1000px; margin: 20px auto; border: 3px double #000; }
</style>
jQuery 程式部份
