jQuery|操控網頁元素2

第 11 屆 iThome 鐵人賽

DAY 20

自我挑戰組

網頁排版個人學習筆記系列第 20 篇

11th鐵人賽

echocarrie

2019-09-21 12:27:26

1408 瀏覽

分享至

文章提要

html()、text()動態載入內容、click()與on() 差異

html()、text()動態載入內容

html():動態載入標籤

<body>
</body>

$(document).ready(function() {
    $('body').html('<h1>以jQuery產生文字</h1>')
});

text(): 動態載入文字

<body>
    <h2></h2>
</body

$(document).ready(function() {
    $('body h2').text('以jQuery產生文字')
});

click()、on()

click()、on() 差異
- click()→需要小心程式碼順序，不然會產生無效。
- on()→監聽:無論動態載入或其它載入方式，都可以即時性的一併綁定這個效果，不需在意程式碼順序。
  - 下方的範例程式碼中，click 可自訂點擊或滑入等動作。

click()與on()的範例程式碼

$(document).ready(function() {
// click()範例
    $(".box").click(function(event) {
        event.preventDefault();
        //填入要執行的程式碼
    });

// on()範例
    $('body').on('click', '.selector', function(event) {
        event.preventDefault();
        //填入要執行的程式碼
        });
    });

click()用法 範例
- 需分前後順序

<div class="wrap">
    <div class="box1"></div>
    <div class="box2">
      <h1>寫在HTML裡面</h1>
    </div>
  </div>

//有效:.box1先以動態寫入h1，點擊h1做alert指令就有綁定效果，所以.box1和2就都會跑出alert指令
$(document).ready(function() {
  $('.box1').html('<h1>用jQuery動態產生的</h1>')
  $('h1').click(function(event){
      alert('有效');     
  });
});

//無效:先下h1 click，前方的程式碼會先跑找出所有的h1做alert有效動作。當中並沒有包含動態產生的h1，所以按下.box1中的h1不會跑出有效
$(document).ready(function() {  
  $('h1').click(function(event){
      alert('有效');     
  });
  $('.box1').html('<h1>用jQuery動態產生的</h1>')
});

click()有效示意圖
click()無效示意圖

on()用法 範例
- 不需分前後順序or是否用html、動態產生
- 以點擊h1產生alert有效字樣為例。不論是用html產生的h1或是jQuery動態產生的h1都不會因為順序而使其效果(alert有效)失效。
- 切記-on()前方的選擇器(.wrap)需要包住所有h1才有效

<div class="wrap">
    <div class="box1"></div>
    <div class="box2">
      <h1>寫在HTML裡面</h1>
    </div>
  </div>
  </div>

//on()可不須分前後順序
$(document).ready(function() {
    $('.wrap').on('click', 'h1', function(event) {
        event.preventDefault();
    alert('有效');
    });
  $('.box1').html('<h1>用jQuery動態產生的</h1>');
});