Did JQuery die or the spotlight moved mostly on ReactJS(and other counterparts) ? According to Wikipedia, Jquery is still used on a large percentage of websites(above 77% – in 2021), but it is loosing ground gradually(Bootstrap 5 already ditched Jquery as a depency, now it relies on vanilla JS).
Why did we use it in the first place?
Because you can manipulate the DOM with less code, then with Javascript(that changed in the meantime). It has a lot of browser support optimizations(though not necessary anymore).
So where is the problem?
The problem is, that you load an 80+ kb file to write shorter code. The question is, “Does it worth it?”
Let’s just use a lightweight alternative called Cash
Cash is a jQuery alternative with a size of only 6KB(minified and gzipped). It does not support all the methods from jQuery but it has the best of it(mostly used methods).
Ok guys, let’s get into it !
$('div').hasClass('box').find('p').addClass('paragraph');Let’s check out what is included:
- addClass(), removeClass(), toggleClass(), hasClass()
- attr(), prop(), removeAttr()
- each(), slice(), map(), filter()
- eq(), first(), index(), last(), add(), get()
- css(), data()
- height(). width(), innerHeight(), innerWidth(), outerHeight(), outerWidth()
- hide(), show(), toggle()
- parent(), parents(), children(), closest(), siblings(), prev(), next(), prevAll(), nextAll(), prevUntil(), nextUntil(), contents(), has(), is(), not()
- offset(), position(), offsetParent()
- after(), before(), insertAfter(), insertBefore(),
- append(), prepend(), appendTo(), prependTo()
- text(), html(), remove(), empty(), clone(), wrap(), wrapAll(), wrapInner(), unwrap(), replaceAll(), replaceWith(), detach()
- val(), serialize()
- off(), on(), one(), trigger(), ready()
Can you live with this limited version of jQuery look-alike?
Well, you don’t have the fadeIn(), fadeOut(), slideToggle() animations but you can traverse the DOM easily between siblings and parents, get the dimensions or position of the element, attach events and so on. If you think this would be too much work to replace jQuery missing features in Cash, then you could just use another library called replace-jquery.
The browser support for this library is : IE11+
What it does it just simply replaces jquery code with vanilla javascript code automatically when running certain commands like:
replace-jquery src/main.js refactored.js