jQuery 是一种广泛使用的 JavaScript 库，它极大地简化了 HTML 文档的遍历、事件处理、动画和 Ajax 交互。在 jQuery 中，选择器是非常核心的一部分，尤其是处理多个目标时。本文将深入探讨 jQuery 中处理多个目标的选择技巧和最佳实践。

基础选择器

首先，让我们从基础的选择器开始。基础选择器允许你选择页面上的元素。以下是一些常用的选择器：

  • 元素选择器：$('div') 选择页面上的所有 <div> 元素。
  • 类选择器：$('.class-name') 选择具有特定类的所有元素。
  • ID 选择器：$('#id-name') 选择具有特定 ID 的元素。

示例

// 选择所有 div 元素
$('div').click(function() {
    console.log('Div clicked!');
});

// 选择具有特定类的所有元素
$('.class-name').hover(function() {
    $(this).css('background-color', 'yellow');
}, function() {
    $(this).css('background-color', '');
});

// 选择具有特定 ID 的元素
$('#id-name').change(function() {
    console.log('Value changed!');
});

复杂选择器

除了基础选择器，jQuery 还提供了更复杂的选择器，可以让你更精确地选择元素。

  • 层级选择器：$('li > a') 选择所有直接子 <a> 元素。
  • 筛选选择器：$('li').filter('.class-name') 选择所有具有特定类的 <li> 元素。
  • 伪类选择器：$('input:focus') 选择所有当前具有焦点的 <input> 元素。

示例

// 选择所有直接子 <a> 元素
$('li > a').click(function() {
    console.log('Direct child <a> clicked!');
});

// 选择所有具有特定类的 <li> 元素
$('li').filter('.class-name').hover(function() {
    $(this).css('color', 'red');
}, function() {
    $(this).css('color', '');
});

// 选择所有当前具有焦点的 <input> 元素
$('input:focus').css('border', '2px solid blue');

选择多个目标

在 jQuery 中，选择多个目标非常简单。你可以使用逗号分隔多个选择器，或者将它们包含在同一个选择器中。

示例

// 使用逗号分隔选择器
$('div, p').click(function() {
    console.log('Div or p clicked!');
});

// 将多个选择器包含在同一个选择器中
$('div, p').click(function() {
    console.log('Div or p clicked!');
});

高级技巧

以下是一些处理多个目标的高级技巧：

  • 使用 .each() 方法遍历所有选中的元素。
  • 使用 .map() 方法对选中的元素进行操作，并返回一个新数组。
  • 使用 .filter() 方法筛选出满足特定条件的元素。

示例

// 使用 .each() 方法遍历所有选中的元素
$('li').each(function(index, element) {
    console.log(index, element);
});

// 使用 .map() 方法对选中的元素进行操作
$('li').map(function() {
    return $(this).text();
}).get().forEach(function(text) {
    console.log(text);
});

// 使用 .filter() 方法筛选出满足特定条件的元素
$('li').filter('.class-name').click(function() {
    console.log('Class name clicked!');
});

总结

jQuery 提供了强大的选择器功能，使得处理多个目标变得非常简单和高效。通过掌握这些技巧，你可以更灵活地操作 DOM，创建更动态和交互式的网页。