Jump to content
StevenOliver

simple javascript vs jquery

Recommended Posts

General "best practices" question: If my page already loads jquery, is it best to use a jquery function versus using a simple plain javascript?

For example, to change a table row's appearance, this simple javascript works:

function changeQuantity() {
document.getElementById('id_of_element').style.background = "#FFF";
document.form1.inputname.value=1;
}

Does it matter?

I'll take a guess at the answer... For simple javascript, it doesn't matter in the slightest. In fact, it's better to use plain javascript because it saves me the days of work reading the internet finding the corresponding jquery function. But for more complex javascript, jquery is better because there is probably lots of "cross browser support."

Share this post


Link to post
Share on other sites
26 minutes ago, StevenOliver said:

I'll take a guess at the answer... For simple javascript, it doesn't matter in the slightest. In fact, it's better to use plain javascript because it saves me the days of work reading the internet finding the corresponding jquery function. But for more complex javascript, jquery is better because there is probably lots of "cross browser support."

That's how many people feel about it too.

Personally, I use whatever is most accessible. If this is an element then I'd rather write this.value over $(this).val(). But for stuff like selectors or events? Even with document.querySelectorAll and global support for addEventListener, jQuery is still easier.

Share this post


Link to post
Share on other sites

I tend to just stick to using jQuery form for consistency.   If I'm already loading jQuery on the page then I'm not going to do something like document.getElementById('blah'), I'll just do $('#blah')[0].  There's a little extra overhead using the jQuery syntax, but the code consistency is more important IMO and it's also shorter to type.

That said, for simple things like accessing the value/name of an element in a callback or target of an event I will sometimes just access the property directly rather than using jQuery.  For example if making a simple popup handler, I'd likely just do:

$('a.popup').click(function(e){
  e.preventDefault();
  window.open(e.target.href);
});

If I want to use jQuery for any reason though in said callback though, then I'll just use it consistently.  For example if I wanted to add a data-options attribute for window options, I would use jQuery for that and as a result also for the href.

$('a.popup').click(function(e){
  e.preventDefault();

  var $target = $(e.target);
  var options = $target.data('options') || '';
  window.open($target.prop('href'), 'popup', options);
});

 

Share this post


Link to post
Share on other sites

Both answers make sense. May I ask another question in this same thread (probably not important enough for a new thread): When I open "Browser Console" in Firefox, it appers my "jquery.js" file loads twice:

12:47:10.544 GET example.com/ [HTTP/1.0 200 OK 0ms]
12:47:10.568 GET example.com/jquery-3.3.1.min.js [HTTP/1.0 200 OK 0ms]
12:47:10.605 GET example.com/jquery-3.3.1.min.js [HTTP/1.0 200 OK 0ms]
12:47:10.621 GET example.com/favicon.ico [HTTP/1.0 200 OK 0ms]

It even loads twice when I strip my html to the bare minimum:
<html><head><script src="jquery-3.3.1.min.js"></head><body></body></html>

I've restarted my browser, cleared cache, etc., and it still always shows up twice in the console. Why?

Share this post


Link to post
Share on other sites

HTTP/1.0? Really? That's... very surprising.

Are you sure you're seeing what's really happening? The browser isn't translating anything to be "nice"? What do your server access logs show?

Share this post


Link to post
Share on other sites

I personally switched back to vanilla javascript as it really isn't all that much harder to write and it doesn't use a library. Nothing wrong in with jQuery, but I was always wondering about the javascript equivalent when it came to certain coding. Now I don't have to wonder. I do say people who are just learning javascript should learn vanilla javascript before tackling jQuery as it will make life much simpler if you ever need just to use vanilla javascript. That was my problem as I really didn't learn vanilla js before I tackled jQuery.  

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.