// 获取第一个匹配的元素
$('.className').first()

// 获取最后一个匹配的元素
$('.className').last()

// 获取特定索引位置的元素（从0开始）
$('.className').eq(2) // 获取第三个元素

// 根据属性过滤
$('.className').filter('[data-id="123"]')

// 使用自定义函数过滤
$('.className').filter(function() {
  return $(this).text().length > 10
})

// 在特定父元素下查找
$('#parentElement').find('.className')

// 使用最近的祖先元素
$('.className').closest('.parentClass').find('.targetClass')

// 获取下一个同类的元素
$('.className').next('.className')

// 获取前一个同类的元素
$('.className').prev('.className')

// 获取所有后续同类的元素
$('.className').nextAll('.className')

// 获取所有前面的同类的元素
$('.className').prevAll('.className')

// 为表格中所有class为"row"的偶数行添加样式
$('table tr.row:even').addClass('even-row')

// 为特定条件的行添加点击事件
$('table tr.row').filter(function() {
  return $(this).find('td:eq(2)').text() === 'Active'
}).click(function() {
  // 处理点击事件
})

// 验证所有必填字段是否为空
var isValid = $('.required-field').filter(function() {
  return $(this).val().trim() === ''
}).length === 0

// 错误方式
$('.className').click(function() {
  // 这会为每个元素绑定独立的事件处理器
})

// 正确方式（事件委托）
$(document).on('click', '.className', function() {
  // 使用this指向当前点击的特定元素
  console.log($(this).index()) // 获取当前元素的索引
})

// 使用事件委托
$(document).on('click', '.dynamic-class', function() {
  // 处理点击事件
})

// 或者在选择前确保DOM已更新
setTimeout(function() {
  $('.dynamic-class').doSomething()
}, 0)

// 缓存选择结果
var $elements = $('.className')

// 使用更具体的选择器
$('#container .className')

// 减少DOM操作次数
var html = ''
$('.className').each(function() {
  html += $(this).text()
})
$('#result').html(html)