WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞

2-11. 【內容】的取得與改變

jQuery 內容的取得與改變

方法 說明  
text ( [textString] ) 沒有 textString 參數時, 是取得指定物件內的內容, 包含所有後代元素的內容文字;
有 textString 參數時, 表示將參數加入到指定物件成為內容節點。
[參考英文版] [參考簡中版] [參考JQ官網版]		 取得／取代
html ( [htmlString] ) 沒有 htmlString 參數時, 是取得指定物件內的內容, 包含所有的 HTML 原始碼內容;
有 htmlString 參數時, 表示將參數加入到指定物件成為內容節點,
結果會辨視出標籤而呈現出 HTML 的結果。
[參考英文版] [參考簡中版] [參考JQ官網版]		 取得／取代
val ( [value] ) 沒有 value 參數時, 是取得指定表單欄位物件內的內容值;
有 value 參數時, 表示將 value 參數加入到指定表單欄位物件成為內容值。
[參考英文版] [參考簡中版] [參考JQ官網版]		 取得／取代
attr ( 屬性名稱 [,值] ) 沒有 "值" 參數時, 是取得指定屬性的內容;
有 "值" 參數時, 表示改變指定屬性的內容為指定的值。
[參考英文版] [參考簡中版] [參考JQ官網版]		 取得／取代
方法 說明  
append ( content ) 將 content 參數的內容新增到指定物件之內的尾端
[參考英文版] [參考簡中版] [參考JQ官網版]		 添加
prepend ( content ) 將 content 參數的內容新增到指定物件之內的前端
[參考英文版] [參考簡中版] [參考JQ官網版]		 添加
after ( content ) 將 content 參數的內容新增到指定物件之外的後面
[參考英文版] [參考簡中版] [參考JQ官網版]		 添加
before ( content ) 將 content 參數的內容新增到指定物件之外的前面
[參考英文版] [參考簡中版] [參考JQ官網版]		 添加
wrap ( content ) 在指定的物件外圍新增加上 content 參數的內容
[參考英文版] [參考簡中版] [參考JQ官網版]		 添加

 

範例小練習 【結果展示參考】

  <h2>========== PART-1、取得內容、改變內容 ==========</h2>
  <p>
    <button class="ctr1">1. 以 text 方法取得 list1 原有內容,再寫入"&lt;h1&gt;TSuiling&lt;/h1&gt;"</button>
    <button class="ctr2">2. 以 html 方法取得 list2 原有內容,再寫入"&lt;h1&gt;TSuiling&lt;/h1&gt;"</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/images/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/images/basic13.jpg" alt="">
  </div>


  <style>
    body>h2 { font-size: 20px; background-color: #464277; color: #fff; padding: 5px; }
    button {margin:5px; padding:5px; font-size:16px; cursor: pointer; }
    /* PART-1 =================================================================== */
    li { font-size:18px; padding:5px; }
    ul h1 { font-size: 1.5rem; display: inline-block; margin: 0; }
    /* PART-3 =================================================================== */
    .container { background-color: rgba(255, 159, 244, 0.5); text-align: center; }
    .wrapper { max-width: 1000px; margin: 20px auto; border: 3px double #000; }
  </style>

 

 

go TOP