jQuery Change 詳細闡述

jQuery是一款廣泛應用於Web前端編程中的JavaScript庫，它簡化了諸如HTML文檔遍歷和操作、事件處理、以及動畫效果等等操作。其中之一的jQuery change事件是用於檢測表單元素內容是否有改變的。本文將圍繞jQuery change事件展開，從無效、事件回調函數、事件、查找關鍵字等多個方面對其做詳細的闡述。

一、jQuery Change 無效

首先我們需要了解為什麼會出現 jQuery Change 無效的情況。其主要原因是因為其中的一些限制或者常規想法。

1、jQuery Change事件只針對有value，checked，selected屬性的元素

//示例代碼：
$(document).ready(function() {
  $("#test").change(function() {
    alert("Changed");
  });
});
<input type="text" id="test" value="Hello">
//結果：無法響應

上面的示例代碼通過監聽id為test的input元素的change事件，然而由於input元素為文本框，且沒有value、checked或selected屬性，所以此事件不會被觸發。要解決這個問題，可以使用input事件來替代change事件。

2、jQuery Change事件不會跟蹤文件上傳的進度

//示例代碼：
$(document).ready(function() {
  $("#test").change(function() {
    alert("Changed");
  });
});
<input type="file" id="test">
//結果：無法響應

同樣的，由於文件上傳不是通過value、checked或selected屬性進行的，所以jQuery Change事件不會對其進行追蹤。如需檢測文件的上傳進度，建議使用新式框架。

二、jQuery Change 事件回調函數

jQuery Change事件回調函數是在元素內容發生改變時執行的代碼塊。

1、只有元素失去焦點或回車，Change事件才被觸發

//示例代碼：
$(document).ready(function() {
  $("#test").change(function() {
    alert("Changed");
  });
});
<input type="text" id="test">
//結果：僅在文本框失去焦點或回車時響應

默認情況下，jQuery Change事件只在元素失去焦點或按下回車時觸發。如果需要實時監控文本框內容的變化，可以使用input事件以及keyup事件。

2、元素不能直接通過JS來觸發Change事件

//示例代碼：
$(document).ready(function() {
  $("#test").change(function() {
    alert("Changed");
  });
  $("#test").val("changed");
});
<input type="text" id="test">
//結果：無法響應

jQuery Change事件不能直接通過JavaScript來觸發。如果確實需要這樣做，可以使用trigger()函數：

//示例代碼：
$(document).ready(function() {
  $("#test").change(function() {
    alert("Changed");
  });
  $("#test").val("changed").trigger("change");
});
<input type="text" id="test">
//結果：可以響應

三、jQuery Change事件

jQuery Change事件的具體使用場景非常廣泛，下面就總結出了一些常見的使用場景。

1、檢測複選框和單選框的狀態變化

//示例代碼：
$(document).ready(function() {
  $("input[type='checkbox'], input[type='radio']").change(function() {
    if($(this).is(":checked")) {
      alert("Checked");
    } else {
      alert("Unchecked");
    }
  });
});
<input type="checkbox" id="test">
//結果：當複選框被選中或取消選中時，響應相應操作

2、配合Select，檢測下拉菜單改變

//示例代碼：
$(document).ready(function() {
  $("#test").change(function() {
    var selectedValue = $(this).val();
    alert("Selected Value: " + selectedValue);
  });
});
<select id="test">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
//結果：當選定一個選項，響應相應操作

3、能夠根據某些條件，動態地改變提交按鈕的狀態

//示例代碼：
$(document).ready(function() {
  $("#test").change(function() {
    if($(this).val() !== '') {
      $("#submit").removeAttr("disabled");
    } else {
      $("#submit").attr("disabled", "disabled");
    }
  });
});
<input type="text" id="test">
<input type="submit" id="submit" value="Submit" disabled>
//結果：文本框不為空時，提交按鈕變為可以使用狀態

四、查找關鍵字

想要在JQ中查找關鍵字，可以使用JQ Change()一步實現。用戶可以動態查詢輸入框中的內容，並高亮搜索到的內容。以下為示例代碼：

//示例代碼：
$(document).ready(function() {
  $("#search-btn").click(function() {
    var searchText = $("#search-text").val().toLowerCase();
    $(".list-item").each(function() {
      var itemText = $(this).text().toLowerCase();
      if(itemText.indexOf(searchText) === -1) {
        $(this).hide();
      } else {
        $(this).show();
        itemText = itemText.replace(searchText, '' + searchText + '');
        $(this).html(itemText);
      }
    });
  });
  $("#clear-btn").click(function() {
    $(".list-item").show().html(function() {
      return $(this).text();
    });
  });
});
<input type="text" id="search-text">
<button id="search-btn">Search</button>
<button id="clear-btn">Clear</button>
<ul>
  <li class="list-item">Apple</li>
  <li class="list-item">Banana</li>
  <li class="list-item">Orange</li>
  <li class="list-item">Pear</li>
</ul>
//結果：動態搜索輸入內容，並高亮搜索到的內容

總結

本文從jQuery Change事件無效、事件回調函數、事件、查找關鍵字等多個方面對其做了詳細的闡述。JQ Code需要注意的是，除了一些常規使用方式，還需要充分了解其中的限制和局限性，以更好地開發和應用。