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

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

jQuery 內容的取得與改變

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

 

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

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

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

  <h2>========== PART-3、替換相片的顯示 ==========</h2>

  <div style="text-align: center">
    <img id="photo" src="../img/images/basic21.jpg" alt="">
  </div>

  <p style="text-align: center">
    <button class="chimg" title="basic21.jpg">相片一</button>
    <button class="chimg" title="basic22.jpg">相片二</button>
    <button class="chimg" title="basic23.jpg">相片三</button>
    <button class="chimg" title="basic24.jpg">相片四</button>
  </p>
  <style>
    body>h2 { font-size: 20px; background-color: #464277; color: #fff; padding: 5px; }
    button {margin:5px; padding:5px; font-size:16px; }
    /* PART-1 =================================================================== */
    li { font-size:18px; padding:5px; }
    ul h1 { font-size: 1.5rem; display: inline-block; margin: 0; }
    /* PART-2 =================================================================== */
    .container { background-color: rgba(255, 159, 244, 0.5); text-align: center; }
    .wrapper { max-width: 1000px; margin: 20px auto; border: 3px double #000; }
  </style>
  <script>
  //PART-1 ===================================================
  $('.ctr1').click(function(){
    var result = $('li:eq(0)').text();        //以text()取得指定選取器的內容
    alert(result);
    $('li:eq(0)').text('<h1>TSuiling</h1>');    //以text()將內容取代指定選取器
  });

  $('.ctr2').click(function(){
    var result = $('li:eq(1)').html();        //以html()取得指定選取器的內容
    alert(result);
    $('li:eq(1)').html('<h1>TSuiling</h1>');    //以html()將內容取代指定選取器
  });

  //PART-2 ===================================================
  $('.add1').click(function(){
    $('.container').wrap('<div class="wrapper"></div>');
  });     //在指定選取器的外圍加上 wrap()內的內容

  $('.add2').click(function(){
    $('.container').append('append');
  });     //在指定選取器內部的尾端加上 append()內的內容

  $('.add3').click(function(){
    $('.container').prepend('prepend');
  });     //在指定選取器內部的前端加上 prepend()內的內容

  $('.add4').click(function(){
    $('.container').after('after');
  });     //在指定選取器的外圍的後方加上 after()內的內容

  $('.add5').click(function(){
    $('.container').before('before');
  });     //在指定選取器的外圍的後方加上 before()內的內容

  //PART-3 ===================================================
  $('.chimg').hover(function(){
    var result = $(this).attr('title');    
    //$(this)指的是滑鼠滑入的選取器,attr('title')指的是取出屬性title的內容
    $('#photo').attr('src','../img/images/'+result);
    //$('#photo')是指定的選取器,以attr()改變屬性src的內容
  });
  </script>

 

 

go TOP