用于类/id 选择的 jQuery 的轻量级替代品答案

【问题标题】：Lightweight alternative to jQuery for class / id selecting用于类/id 选择的 jQuery 的轻量级替代品
【发布时间】：2011-12-06 15:24:12
【问题描述】：

假设我想构建一个不依赖的 javascript 框架/脚本。有没有办法利用 jQuery 惊人的类和元素选择功能

$('.this') or $('#this') or $('div', '.this')

不依赖 jQuery 或者如果 jQuery 可用则使用 jQuery，但如果不可用，它可以在没有它的情况下工作吗？我已经搜索过这个高低。也许我搜索不正确，因为我得到的最接近的是：

Selecting elements without jQuery

但是，这并不像我想要的那样深入，也不像我想要的 jQuery 那样相似。我曾考虑过挖掘 jQuery 源代码并将其剔除并使用它，但我希望有人已经这样做了，我只是在寻找错误的地方，而其他人知道它。

更新

已通过多种方式回答了此问题，感谢您的快速回复。我用错误的方法搜索。我终于来了：https://github.com/ded/qwery

但是，这里的答案完美地完成了这项工作： Lightweight alternative to jQuery for class / id selecting

【问题讨论】：

我不知道你为什么不能只使用 jQuery？在像这样的功能以标准方式内置到浏览器中之前（哈哈！），你会被困在使用像 jQuery 这样的实用程序库。
这是一个脚本，你不需要依赖 jQuery，但如果有的话可以使用它。不是每个人都使用 jQuery，我想利用那个源代码，在我自己编写代码之前，我希望已经有这样的东西。
如果你真的需要让应用程序变得轻量级，那么不要使用内脏的 jQuery。去网上搜索一个仅用于 dom 导航和操作的框架。那里有几十个框架，我相信总有一个可以满足您的需求。
id 选择器很简单：document.getElementById('#id)`。到目前为止还没有得到很好的支持，但是document.getElementsByClassName()，它将返回一个列表。
别那么悲观SoWeLie。大约 70% 的互联网用户可以通过 document.querySelectorAll 使用此功能。只有 IE6 和 IE7 没有它，在这种情况下你可以用 polyfill 回到类似 jQuery 的东西。

标签： jquery dom css-selectors

【解决方案1】：

你可以做 jQuery 所做的事情并使用 Sizzle：http://sizzlejs.com/

【讨论】：

【解决方案2】：

“我需要一个小型 JS 库……”的答案是这个网站：http://microjs.com/

具体来说，您正在寻找选择器引擎：

http://microjs.com/#css

【讨论】：

不错的收藏，由 microjs.com 整齐地组织。不知道为什么他们不包括 Sizzle（比 microjs 上的一些小），但肯定有一堆有价值的选择！
我找到了 Qwery，我知道它就在那里，它可以胜任，而且比 Sizzle 小。感谢您的建议，但是@GregPettit
我的荣幸。请务必“接受” DA 的回答，因为它对您最有帮助。 :)
在 Brian 发布他的最小和最快的实现之前，它可以满足我的需要。
奇怪的是，嘶嘶声不在列表中。我想说我以前在那里看到过...

【解决方案3】：

在除 IE6 和 IE7 之外的所有设备中，您都可以使用 document.querySelectorAll 或 someElement.querySelectorAll 来执行类似的选择功能。

更新更多详情：

看起来 ZeptoJS 做了以下事情。这使用了$$(document, '#myid')、$$(document, '.myclass')、$$(document, 'div') 的快速函数和$$(document, 'div > .myclass') 的慢速搜索

var classSelectorRE = /^\.([\w-]+)$/,
    idSelectorRE = /^#([\w-]+)$/,
    tagSelectorRE = /^[\w-]+$/;

$$ = function(element, selector){
  var found;
  return (element === document && idSelectorRE.test(selector)) ?
    ( (found = element.getElementById(RegExp.$1)) ? [found] : [] ) :
    Array.prototype.slice.call(
      classSelectorRE.test(selector) ? element.getElementsByClassName(RegExp.$1) :
      tagSelectorRE.test(selector) ? element.getElementsByTagName(selector) :
      element.querySelectorAll(selector)
    );
}

【讨论】：

但是有一个语法问题，在slice.call 之前你缺少[].
确实如此。这是一个剪切和粘贴。 Zepto 定义了emptyArray = [], slice = emptyArray.slice。我会更新上面的代码。
这是性能问题还是为什么不是在所有情况下都使用 querySelectorAll？

【解决方案4】：

你看过zepto.js吗？你仍然依赖于一个框架，但它的重量要轻得多：大约 5kb 而不是 31kb。

【讨论】：

【解决方案5】：

试试jBone，用于事件和 DOM 操作的库。 jBone 的性能比 jQuery/Zepto 好得多，体积更小，并且完全支持所有选择器、事件 API。

【讨论】：

【解决方案6】：

MicroSelector。甚至比 Zepto 更小更快，Zepto 比 Sizzle 更小，Sizzle 比 JQuery 更小。

【讨论】：