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

时间:2011-10-13 03:27:49

标签: jquery dom css-selectors

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

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

不依赖于jQuery或使用jQuery(如果可用)但如果没有,它可以在没有它的情况下工作吗?我搜索了这个高低。也许我正在搜索错误,因为我得到的最接近的是:

Selecting elements without jQuery

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

更新

这有几个方面的答案,谢谢你的快速回复。我在用错误的方法搜索。我终于来了:https://github.com/ded/qwery

然而,这里的答案完美地完成了这项工作: Lightweight alternative to jQuery for class / id selecting

6 个答案:

答案 0 :(得分:13)

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

答案 1 :(得分:12)

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

具体来说,您正在寻找一个选择器引擎:

http://microjs.com/#css

答案 2 :(得分:5)

在除IE6和IE7之外的所有内容中,您可以使用document.querySelectorAllsomeElement.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)
    );
}

答案 3 :(得分:3)

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

答案 4 :(得分:2)

试试jBone,用于事件和DOM操作的库。 jBone比jQuery / Zepto具有更好的性能,更小的尺寸和对所有选择器,事件API的完全支持。

答案 5 :(得分:1)

MicroSelector。甚至比Zepto更小,更快,Zepto比Sizzle小,后者比JQuery小。