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

jQuery 內容的取得與改變

 

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

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