When to Use Vanilla JavaScript VS. Jquery

When to use Vanilla JavaScript vs. jQuery?

• this.id (as you know)
• this.value (on most input types. only issues I know are IE when a <select> doesn't have value properties set on its <option> elements, or radio inputs in Safari.)
• this.className to get or set an entire "class" property
• this.selectedIndex against a <select> to get the selected index
• this.options against a <select> to get a list of <option> elements
• this.text against an <option> to get its text content
• this.rows against a <table> to get a collection of <tr> elements
• this.cells against a <tr> to get its cells (td & th)
• this.parentNode to get a direct parent
• this.checked to get the checked state of a checkbox Thanks @Tim Down
• this.selected to get the selected state of an option Thanks @Tim Down
• this.disabled to get the disabled state of an input Thanks @Tim Down
• this.readOnly to get the readOnly state of an input Thanks @Tim Down
• this.href against an <a> element to get its href
• this.hostname against an <a> element to get the domain of its href
• this.pathname against an <a> element to get the path of its href
• this.search against an <a> element to get the querystring of its href
• this.src against an element where it is valid to have a src

...I think you get the idea.

There will be times when performance is crucial. Like if you're performing something in a loop many times over, you may want to ditch jQuery.

In general you can replace:

$(el).attr('someName');

with:

Above was poorly worded. getAttribute is not a replacement, but it does retrieve the value of an attribute sent from the server, and its corresponding setAttribute will set it. Necessary in some cases.

The sentences below sort of covered it. See this answer for a better treatment.

el.getAttribute('someName');

...in order to access an attribute directly. Note that attributes are not the same as properties (though they mirror each other sometimes). Of course there's setAttribute too.

Say you had a situation where received a page where you need to unwrap all tags of a certain type. It is short and easy with jQuery:

$('span').unwrap();  // unwrap all span elements

But if there are many, you may want to do a little native DOM API:

var spans = document.getElementsByTagName('span');

while( spans[0] ) {
    var parent = spans[0].parentNode;
    while( spans[0].firstChild ) {
        parent.insertBefore( spans[0].firstChild, spans[0]);
    }
    parent.removeChild( spans[0] );
}

This code is pretty short, it performs better than the jQuery version, and can easily be made into a reusable function in your personal library.

It may seem like I have an infinite loop with the outer while because of while(spans[0]), but because we're dealing with a "live list" it gets updated when we do the parent.removeChild(span[0]);. This is a pretty nifty feature that we miss out on when working with an Array (or Array-like object) instead.

Is plain vanilla JavaScript better than using frameworks like jQuery or MooTools?

1. Frameworks solve cross-browser bugs which normally would cost hours of your time, so you can focus on functionality instead of worrying about some edge case browser bug.. instead of wasting 4-5 hours solving a bug spend that time with your family.

2. Frameworks such as jQuery are pretty loaded with stuff like animation, selectors, html manipulation so there's usually some sort of functionality already built into the library, again saving you more time and the API makes it really easy to actually accomplish complex things.

3. Interpreters and browsers are only getting faster and faster so I don't particularly think it's a huge issue loading an entire library up. In addition thanks to Google et al we get very fast cdns and nowadays lots of sites are using the same exact URI to pull the script in, meaning there's a higher rate of the script getting cached and reused on another site.

4. Instead of every single web developer having their own library it's much more efficient having thousands of people concentrated to bettering a handful of libraries so cross-browser bugs get documented and fixed.

5. Competition is a good thing, the result of the slickspeed tests resulted in much faster selector engines such as Sizzle. Developers not having to worry about trivial DOM bugs means more complex libraries are created daily, which means entry-level developers have access to very powerful plugins.

As far as security, jQuery for example will detect if the browser is capable of parsing JSON natively and if so, rely on that. Usually any modern browser will have this, and it's much safer than eval... so jQuery strives to use the safer and more secure methods first. It will only use eval if there isnt a JSON.parse method available.

An important thing to remember in jQuery though is remembering you're still coding in Javascript. Usually people get too caught up in the sugar coated methods and wrapping everything in $, I think it's important to know you can still do this.href instead of $(this).attr('href') if you would like an absolutely normalized uri for example.

Is .after() jQuery or can I use it in vanilla javascript

.after() is a method. If it exists or not depends entirely on what object you are calling it on.

There is an after method defined in jQuery.

There is also an after method defined in DOM, although it is experimental.

They two methods behave differently.

Is it possible to use JavaScript and JQuery at the same time?

jQuery is a JavaScript library, so you can use jQuery with any other JavaScript functions.

Your particular example doesn't work for two reasons.

---

First, because .style is a property of DOM objects and not jQuery objects.

You could extract a DOM object from the jQuery object:

$('#demoDiv')[0].style.display = 'none';

Or just consistently use the jQuery API:

$('#demoDiv').css("display", "none");

---

Second, because testFunc is not a global so is out of scope for your inline event handler.

Use $('#testButton').on('click', testFunc) instead.

What is VanillaJS?

This is VanillaJS (unmodified):

// VanillaJS v1.0
// Released into the Public Domain
// Your code goes here:

As you can see, it's not really a framework or a library. It's just a running gag for framework-loving bosses or people who think you NEED to use a JS framework. It means you just use whatever your (for you own sake: non-legacy) browser gives you (using Vanilla JS when working with legacy browsers is a bad idea).

Need help changing from jquery to vanilla javascript

You can achieve this via setTimeout, querySelector and css transition

document.querySelector('.curtain').addEventListener('click', function(e) {
  let f = document.querySelector('.fadeout')
  setTimeout(function() {
    f.classList.add('fade')
  }, 500);
  setTimeout(function() {
    f.parentNode.removeChild(f)
  }, 3500);
});

.fadeout {
  opacity: 1;
  transition: all 3s;
  background-color: #f00;
  color: #fff;
  padding: 20px;
}

.fade {
  opacity: 0
}

<div class='fadeout'>Test fade</div>
<button class='curtain'>click me</button>

---

Related Topics