jQuery 链式调用

简化示例：理解返回值

// 每个方法执行后都返回jQuery对象
var result1 = $('#element').css('color', 'red');
// result1 是 jQuery 对象

var result2 = result1.addClass('active');
// result2 是同一个 jQuery 对象

console.log(result1 === result2); // true
console.log($('#element') === $('#element').css('color', 'red')); // false
// 注意：两个不同的jQuery对象实例，但都指向同一个DOM元素

常见链式模式

// 模式1：初始化设置
$('.widget')
    .css({
        'border': '1px solid #ddd',
        'padding': '10px',
        'margin': '5px'
    })
    .addClass('ui-widget')
    .attr('data-widget-id', Date.now())
    .on('click', function() {
        $(this).toggleClass('active');
    });

// 模式2：表单处理
$('#contact-form')
    .find('input, textarea')
    .addClass('form-control')
    .css('margin-bottom', '10px')
    .on('focus', function() {
        $(this).css('border-color', '#3498db');
    })
    .on('blur', function() {
        $(this).css('border-color', '#ddd');
    });

// 模式3：动画序列
$('#notification')
    .hide()
    .html('操作成功！')
    .css({
        'background': '#4CAF50',
        'color': 'white',
        'padding': '15px',
        'border-radius': '5px'
    })
    .fadeIn(500)
    .delay(2000)
    .fadeOut(500, function() {
        $(this).remove();
    });

// 模式4：条件链式
var $button = $('#submit-btn');
$button
    .prop('disabled', true)
    .text('提交中...')
    .addClass('disabled');

// 根据条件添加不同类
if (isValid) {
    $button.addClass('btn-success');
} else {
    $button.addClass('btn-error');
}

// 继续链式
$button.removeClass('disabled');

处理异步链式调用

// 问题：动画是异步的，链式调用会立即执行
$('#element')
    .slideUp(1000)      // 动画1秒
    .addClass('hidden') // 立即执行，不等动画完成
    .slideDown(1000);   // 立即执行，不等.addClass完成

// 解决方案1：使用回调函数
$('#element').slideUp(1000, function() {
    $(this)
        .addClass('hidden')
        .slideDown(1000);
});

// 解决方案2：使用.promise()和.done()
$('#element')
    .slideUp(1000)
    .promise()
    .done(function() {
        $(this)
            .addClass('hidden')
            .slideDown(1000);
    });

// 解决方案3：队列控制
$('#element')
    .queue(function(next) {
        $(this).slideUp(1000);
        next();
    })
    .queue(function(next) {
        $(this).addClass('hidden');
        next();
    })
    .queue(function(next) {
        $(this).slideDown(1000);
        next();
    });

// 解决方案4：使用jQuery.fx.off关闭动画（开发测试用）
$.fx.off = true; // 关闭所有动画
$('#element')
    .slideUp(1000)      // 立即完成
    .addClass('hidden') // 立即执行
    .slideDown(1000);   // 立即完成

// 性能优化示例
// 不好：重复创建jQuery对象
$('#element').css('color', 'red');
$('#element').addClass('active');
$('#element').show();
$('#element').html('test');

// 好：链式调用，只创建一次jQuery对象
$('#element')
    .css('color', 'red')
    .addClass('active')
    .show()
    .html('test');

// 更好：缓存jQuery对象
var $element = $('#element');
$element
    .css('color', 'red')
    .addClass('active')
    .show()
    .html('test');

// 注意：链式调用本身不提供性能优势
// 优势在于减少重复的DOM查询和jQuery对象创建

// 特殊情况：大量元素操作
var $items = $('.items'); // 缓存选择结果

// 链式操作每个元素
$items
    .css('color', 'red')
    .addClass('item')
    .on('click', function() {
        $(this).toggleClass('active');
    });

// 对于大量元素，考虑性能
var items = document.querySelectorAll('.items');
Array.prototype.forEach.call(items, function(item) {
    // 直接操作DOM可能更快
    item.style.color = 'red';
    item.classList.add('item');
    item.addEventListener('click', function() {
        this.classList.toggle('active');
    });
});