Beating jQuery addiction: Which jQuery methods are easily translated into pure javascript?

Question

Being spoiled by jQuery I now include it into every project even if all I need from it is to call $("#div).hide() or $("#link").click() once.

I know that jQuery often takes care of cross-browser issues for you, but sometimes it is just a convenient wrapper for a native javascript methods.

So my question is which jQuery methods can be easily replaced by native javascript?

Answer 1

The easiest way to find out is to just read the source code for the method you're curious about. It's very readable.

Answer 2

(I liked the 'beating jQuery addiction')

I once posted a question and answered myself, regarding width() and height() and animation without jQuery. As you can see it's not as simple, but doable anyway.

Answer 3

I don't know any jQuery-methods that can be replaced easily(and I don't think that there are any), if "easy" should mean that the jQuery-method is the same thing like the native method with another name.

For example see the hide()-documentation.
It does'nt simply set the display to "none", it also stores the current display-attribute(useful if you like to show it again later). Where could you store the display without jQuery? As a global variable?...better not.

Answer 4

Here are some examples I use instead of jQuery methods (if I don't use jQuery):

• $(node).css(values):

  function css(node, style) {
    if(node && node.style) {
      for(var key in style) {
          node.style[key] = style[key];
      }
    }
  }
  

• $(node).show(): jQuery is more sophisticated here as it also can set the display value to e.g. inline.

  function show(node) {
    if(node && node.style) {
      node.style.display = "block";
    }
  }
  

• $(node).hide(): In addition, the jQuery method stores the previous display value.

  function hide(node) {
    if(node && node.style) {
      node.style.display = "none";
    }
  }
  

• $(node).addClass(class)

  function addClass(node, cls) {
    if(node) {
      if(!node.className) {
          node.className = cls;
      }
      else if(node.className.indexOf(cls) == -1) {
          node.className = node.className + " " + cls;
      }
    }
  }
  

• $(node).removeClass(class)

  function removeClass(node, cls) {
    if(node && node.className && node.className.indexOf(cls) >= 0) {
      var pattern = new RegExp('\\s*' + cls + '\\s*');
      node.className = node.className.replace(pattern, ' ');
    }
  }
  

These methods should be cross-browser compatible. The jQuery methods often provide more options, like removing multiple classes, or are more sophisticated.
It depends on your needs, whether you need the "advanced" functionality or not. Simpler methods might be sufficient. For example if I know that I will always have to hide div elements, this hide and show method is pretty ok.

Update:

Depending for which browser your are developing (e.g. making a Firefox extension) you can even get something close to jQuery's selector engine: document.querySelectorAll(selector)

Answer 5

One of the biggest jQuery abuses out there has got to be creating a jQuery object solely for the purpose of getting a property of the element using .attr().

Perhaps the most common is getting the ID property using:

$(this).attr("id");

instead of

this.id;

There are plenty of properties that can be accessed in a cross-browser manner without using jQuery.

Or if I need access to the parent of an element in a handler, instead of:

$(this).parent()...

I'm more likely to wrap the parent directly with:

$(this.parentNode)...

If you can plan your HTML such that you don't have white space between your elements, you can easily use other DOM traversal methods in a cross-browser manner, like:

this.nextSibling
this.previousSibling
this.firstChild
this.lastChild

Answer 6

For me, the $.each utility can generally be replaced with the for..in statement:

$.each (object, function () {
    // do something with this
}

vs

var current;
for (key in object) {
    current = object[key];
    // do something with current
}

The only additional feature $.each has is that it creates a new scope, allowing you to have more localised variables:

var someVar = 'original string';
$.each (object, function () {
    // do something with this
    var someVar = 'new string';
}
console.log(someVar); // 'original string'

You can, however, replicate this using for..in using self-executing functions:

var someVar = 'original string';
for (key in object) {
    (function() {
        var current = object[key],
            someVar = 'new string';
    })();
}
console.log(someVar); // 'original string'

Answer 7

.toggle() can be recreated relatively easily, especially the one with only 2 states (3+ states takes a little more work:

$(function() {    
    $(selector).each(function() {
        var counter = 1;
        $(this).click(function() {
            counter++ % 2 ? 
                (function() { $("div").html("one"); }());  // <== First function
                (function() { $("div").html("two"); }());  // <== Second function
        });
    });
});

Try it out with this jsFiddle

The above is equivalent to

$(selector).toggle(function() { ... }, function () { ... });

Answer 8

Here is a small Miniframework for you: JavaScript Miniframework

;)