js 实现jquery find

实现类似 jQuery 的 find 方法

在原生 JavaScript 中，可以通过 querySelector 和 querySelectorAll 方法实现类似 jQuery find 的功能。以下是一个简单的实现方式：

function find(selector, context) {
  context = context || document;
  return context.querySelectorAll(selector);
}

更完整的实现

如果需要更接近 jQuery 的实现方式，可以创建一个简单的类或函数来模拟 jQuery 的选择器功能：

function $(selector, context) {
  return new DomQuery(selector, context);
}

class DomQuery {
  constructor(selector, context) {
    this.elements = (context || document).querySelectorAll(selector);
  }

  find(selector) {
    const found = [];
    this.elements.forEach(el => {
      found.push(...el.querySelectorAll(selector));
    });
    return new DomQuery(selector).setElements(found);
  }

  setElements(elements) {
    this.elements = elements;
    return this;
  }
}

使用方法示例

// 查找所有 div 元素内的 span 元素
$('div').find('span');

// 等价于 jQuery 的
// $('div').find('span');

性能优化版本

对于需要频繁查找的场景，可以考虑优化性能：

function optimizedFind(selector, context) {
  const docFrag = document.createDocumentFragment();
  const results = (context || document).querySelectorAll(selector);

  // 将结果转换为数组
  return Array.from(results);
}

注意事项

• 原生 JavaScript 的 querySelectorAll 返回的是 NodeList 而非数组，需要转换
• 如果需要链式调用，需要返回包含 DOM 元素的集合对象
• 现代浏览器已经原生支持大部分 jQuery 选择器功能

这些实现提供了 jQuery find 方法的基本功能，可以根据具体需求进行扩展和优化。