簡單來説，鏈式調用就是讓你能在一條語句中連續執行多個jQuery操作，而不用重複寫選擇器。就像把一串珠子串起來，一個接一個地往下走！

🔍 為什麼鏈式調用這麼棒？

核心原理：每個jQuery方法都會返回jQuery對象本身，這樣你就可以繼續調用其他方法。

就像這樣：

// 這個方法返回jQuery對象，所以可以繼續調用
$('#myDiv').css('color', 'red'); // 返回jQuery對象

// 然後可以繼續調用其他方法
$('#myDiv').css('color', 'red').addClass('active');

優勢：

  • ✅ 代碼更簡潔，行數更少
  • ✅ 瀏覽器只需查找一次元素，性能更好
  • ✅ 代碼可讀性更高，邏輯更清晰
  • ✅ 更容易維護和修改

🛠️ 實用示例

基礎鏈式調用

// 選擇元素，設置樣式，添加類，然後動畫
$('#myButton')
  .css('background', '#ff0000')
  .addClass('highlight')
  .slideUp(500)
  .slideDown(500);

帶回調函數的鏈式調用

$('#myElement')
  .fadeOut(1000, function() {
    console.log('元素已淡出');
  })
  .fadeIn(1000)
  .text('操作完成！');

事件處理鏈式調用

$('#myButton').on('click', function() {
  $(this)
    .text('已點擊')
    .addClass('clicked')
    .animate({ width: '200px' }, 500);
});

💡 鏈式調用的實用小技巧

  1. 格式化你的代碼：鏈式調用可以換行寫，讓代碼更易讀
$('#myDiv')
  .css('color', 'red')
  .slideUp(2000)
  .slideDown(2000);
  1. 鏈式調用與回調函數結合：在動畫完成後執行其他操作
$('#myDiv')
  .slideUp(500, function() {
    console.log('已滑動');
  })
  .slideDown(500);
  1. 鏈式調用與事件委託：讓事件處理更高效
$(document).on('click', 'button', function() {
  $(this)
    .text('已點擊')
    .addClass('active');
});

⚠️ 鏈式調用的注意事項

  1. 不要過度鏈式：鏈太長會降低可讀性，一般不超過5-6個方法
// 這個鏈太長了，可讀性差
$('#myDiv').css(...).addClass(...).text(...).slideUp(...).slideDown(...).animate(...);
  1. 注意方法的返回值：不是所有方法都返回jQuery對象
  • 例如val()返回的是值，不是jQuery對象，所以不能繼續鏈式調用
  1. 不要在鏈中使用變量：如果需要中間值，可以先存到變量
// 不推薦
$('#myDiv').css('color', 'red').val('new value').text('Hello');

// 推薦
let $div = $('#myDiv');
$div.css('color', 'red');
let value = $div.val();
$div.text('Hello');