StevenOliver Posted May 1, 2020 Share Posted May 1, 2020 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." Quote Link to comment Share on other sites More sharing options...
requinix Posted May 1, 2020 Share Posted May 1, 2020 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. Quote Link to comment Share on other sites More sharing options...
kicken Posted May 1, 2020 Share Posted May 1, 2020 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); }); Quote Link to comment Share on other sites More sharing options...
StevenOliver Posted May 1, 2020 Author Share Posted May 1, 2020 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? Quote Link to comment Share on other sites More sharing options...
requinix Posted May 1, 2020 Share Posted May 1, 2020 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? Quote Link to comment Share on other sites More sharing options...
Strider64 Posted May 3, 2020 Share Posted May 3, 2020 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.