Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Lightweight alternative to jQuery for class / id selecting

Let's say I want to build a non-dependent javascript framework/script. Is there a way to utilize jQuery's amazing class and element selecting functionality

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

Without being dependent on jQuery or using jQuery if it is available but if not, it works without it? I have searched this high and low. Maybe I am searching incorrectly as the closest I have gotten is this:

Selecting elements without jQuery

However, that is not as in-depth as I want or as similar as I want to jQuery. I have thought about digging through jQuery source and gutting that piece out and using it, but I hope someone has already done this and I am just looking in the wrong place and someone else knows about it.

Update

This has been answered in a few ways, and thank you to the quick replies. I was searching in the wrong method. I finally came on: https://github.com/ded/qwery

However this answer here does the job perfectly: Lightweight alternative to jQuery for class / id selecting

like image 815
Nijikokun Avatar asked Oct 13 '11 03:10

Nijikokun


People also ask

Which is the fastest selector in jQuery?

ID Selector: The jQuery #id selector selects the element on the basis of the ID attribute of the HTML tag. This selector is basically used when we have to work on a single element because an ID should be unique within a web page.

Why ID selector is faster than class?

As you said, the ID is the faster lookup, but which one you chose has more to do with what you want to do. Think of a class like a category, or classification for different items that have a common or shared aspect to them, while an ID in contrast, has some unique property it is one of a kind.

What is that one best feature about jQuery when compared with other frameworks?

jQuery has become extremely important in the web because of various advantages like it is extremely lightweight compared to javascript, easy to learn and implement. jQuery pages load very quickly. HTML, CSS, Javascript are the technologies that are understood by Web.


1 Answers

In everything but IE6 and IE7, you can use document.querySelectorAll or someElement.querySelectorAll to perform similar selection functionality.

Update more details:

It looks like ZeptoJS does the following. This uses quick functions for $$(document, '#myid'), $$(document, '.myclass'), $$(document, 'div') and slow searches for $$(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)
    );
}
like image 134
Brian Nickel Avatar answered Oct 22 '22 09:10

Brian Nickel