当前位置：首页 > JavaScript

js 实现jquery find

2026-03-16 06:17:11JavaScript

使用原生 JavaScript 实现类似 jQuery 的 `find` 方法

jQuery 的 find 方法用于在当前元素的子元素中查找匹配选择器的元素。以下是几种原生 JavaScript 的实现方式：

使用 `querySelectorAll` 实现

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

这个实现简单直接，但需要注意它返回的是 NodeList 而非数组。

js 实现jquery find

递归实现查找子元素

function find(selector, parent) {
  parent = parent || document;
  let elements = [];

  const children = parent.children;
  for (let i = 0; i < children.length; i++) {
    const child = children[i];
    if (child.matches(selector)) {
      elements.push(child);
    }
    elements = elements.concat(find(selector, child));
  }

  return elements;
}

这个实现更接近 jQuery 的实际行为，递归查找所有子元素。

js 实现jquery find

使用 `Element.prototype` 扩展方法

Element.prototype.find = function(selector) {
  return this.querySelectorAll(selector);
};

// 使用示例
document.find('#container').find('.item');

这种方法为所有 DOM 元素添加了 find 方法，类似于 jQuery 的链式调用。

兼容性更好的实现

function find(selector, context) {
  context = context || document;
  try {
    return context.querySelectorAll(selector);
  } catch(e) {
    const elements = [];
    const children = context.getElementsByTagName('*');

    for (let i = 0; i < children.length; i++) {
      if (children[i].id === selector.replace('#', '') || 
          children[i].className.split(' ').indexOf(selector.replace('.', '')) !== -1) {
        elements.push(children[i]);
      }
    }

    return elements;
  }
}

这个实现提供了基本的回退方案，在不支持 querySelectorAll 的旧浏览器中也能工作。