Javascript vs jquery

Hello fellows from FreeCodeCamp. I’m very new at coding and I’am starting with javascript right now. So as you can imagine I have plenty of doubt.

Here is a big one:

I know jquery is a javascript 's library but I would like to understand the limitations of it. Like where it is suitable, where it is not. Where should I use the pure javascript or its library instead.

Could anyone indicate an article or something like that so that I can read and understand it better ?

1 Like

Jquery’s strength is it makes it easy to manipulate the HTML dom. As such, it’s great for animation effects for menus, presentations and making changes to a page appearance programmatically.

Jqurys approach is DOM first, while Angular/React/VueJS approach is Data/Model first. You manipulate the data, and it causes the DOM to get updated.

That’s the 30,000 feet big overview picture.

9 Likes

Thaks @owel it began to get clear.

i always use jquery simple reason is eg … document.getElementById(‘nav-bar’) … using jquery i can do this … $(’#nav-bar’) … so its saves a lot of typing plus there is a lot of documentation on jquery making it easy to pick up and use … at the moment im looking a Vue … and i like it so it might start replacing my usage of jquery … but not for a while as im so used to using jquery and i have a lot to learn about vue

1 Like

I don’t think jQuery is essential as it once was. I’ve decided to try to stay away from it, and working with pure JavaScript, and I have found it to not be much harder. jQuery is also a very big library keep that in mind. For me personally, I have come to the point where I normally just use the regular DOM, and only use jQuery when it is required by another library (Bootstrap, etc.). With the new built in Fetch capabilities in browsers, it is not necessary to use jQuery for AJAX anymore. Most of the things jQuery does, can be done without it in just a few more lines of code. I would absolutely learn it, because there really isn’t much to learn. With the DOM however, it takes a little bit longer to learn, but imho is not much harder once you get used to it.

5 Likes

My opinion on the matter would be to learn JavaScript.

jQuery/React/Angular/Backbone/{insert library/framework here} are all just JavaScript.

Thus, a deep understanding of JavaScript will save you much time later on, and lead to much greater confidence when actually interviewing for a developer role.

Once you understand JavaScript, you will be able to understand the limitations or advantages of any particular library or framework, and pick your weapon of choice depending on project requirements and your personal preferences.

7 Likes

Thak you all guys… I can see that this isn’t an easy and straightforward topic. You gave me a pretty good idea about what to do. I will try to get deeper into this, so I can develop my own opinion about it.

Seeing how you are a beginner, I think you would be better off focusing on building websites with jQuery than diving into the argument. jQuery simplifies things for beginners, and I think your main priority as a new learner should be to build websites, not dive into controversies. So for now, my advice is use it. Build websites with it. As you progress, you will learn more, and then you can dive in and make your own conclusions. For now, I think your focus should be on what can I make - not what is the absolute best way to make something with what disadvantages compared to the advantages of X framework… No. Just build, have fun, and learn - that’s what is important, not what tools you are using.

2 Likes

I’m a bit sceptical about the benefits of learning “native” js ways to manipulate the DOM. Sure, you definitely need to learn JavaScript as a language, learn how to write algorithms in it, and learn its features and quirks as compared to other languages. And maybe in your future job you’ll never write a single line of jQuery… but you’ll be doing very little native DOM manipulation either, because it will mostly be handled by the framework or library your project uses.

jQuery is a good starting point because it’s simple and cross-browser compatible, so you can use it to quickly build simple websites while you’re learning. And there’s a good chance you’ll get to use it professionally too - it’s still a very widely used library.

3 Likes

I don’t get the “hate” jQuery has been receiving recently. As if it’s the current hipster thing to do, hate on jQuery for nothing but it’s large library size.

Then same people will be using Bootstrap and it’s advance features,… which is dependent on jquery lib being loaded.

So now we’re back again to native DOM manipulation and writing conditionals for different browsers?

1 Like

what “hate” are you talking about @owel

1 Like

Hi! To write a pure JavaScript is very important for learning the language and understanding what exactly happens with your code. There is no rules where to use JavaScript or where to use jQuery, because they are absolutely interchangeable and it all depends on your desire. Look this great site: http://youmightnotneedjquery.com.

But jQuery has several remarkable features on my mind:

  1. The purpose of jQuery is to make it much easier to use JavaScript on your website, so jQuery simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.

  2. The jQuery team knows all about cross-browser issues, and they have written this knowledge into the jQuery library. jQuery will run exactly the same in all major browsers, including Internet Explorer 6!

3 Likes

I’ve run into all sorts of articles, blog posts, forum answers on this.
Try googling jquery sucks, jquery is bad, don’t use jquery, etc

1 Like

@owel Ah. So, most of those arguments have to do with relying on the jQuery library instead of using native JavaScript. Which I can understand to a certain degree, but that argument is no different than the argument for/against using any other JS library (e.g., lodash). In that regard it may as well be pointed out that people using reset.css would be better served by not using reset.css and instead hardcoding what it does into their css library … which isn’t an invalid argument, but illustrates how arbitrary these distinctions can be.

2 Likes

For example, Twitter Bootstrap use jQuery. If jQuery is bad, don’t use Bootstrap either. Yes, it is possible, but do you realize how much code you should wright to do simple things?

Exactly my point. See my post further above.

1 Like

Oh, agreed; I was merely trying to accentuate it, not disagree with you

1 Like

Thanks @IsaacAbrahamson for the advice.

Thanks @KeJSaR for this link

First thing first Javascript is a programming language and Jquery is a Javascript library.
That means Jquery is a set of functions written in Javascript to easy up things. So wen you use Jquery you
instantly use javascript . Let me clear things up with some examples:

/* Select something from the DOM: */
    // jQuery
    $('selector');
    
    // Native Javascript
    document.querySelectorAll('selector');

/*Wrap an HTML structure around each element:  */

// jQuery
$('.inner').wrap('<div class="wrapper"></div>');

// Native
Array.prototype.forEach.call(document.querySelectorAll('.inner'), (el) => {
  const wrapper = document.createElement('div');
  wrapper.className = 'wrapper';
  el.parentNode.insertBefore(wrapper, el);
  el.parentNode.removeChild(el);
  wrapper.appendChild(el);
});

So, as you can see Jquery needs less writing wen doing complex things but Jquery is a pretty large file and needs to be parsed.
I recommend to use Jquery only wen doing very complex things, if you only need to add some click events on some elements it’s pretty easy to use pure JavaScript.

1 Like