When you're just starting in learning web development, you notice that more and more doors for new and interactive options start to unlock. As the learning curve starts to become more even, various interactive elements, optimizations and everything in between seems to be a natural occurrence. Whatever your choice of studying web development was - whether with a teacher, online or self-taught - you've probably heard that your too lof choice in these scenarios should always be JavaScript. After all, it is the language of the internet! But what if I tell you that there is another option? In this tutorial, we shall explore the continuous confrontation of jQuery vs JavaScript, and everything that this confrontation provides.
I'll tell you all about both of the languages - what they're used for, their pros and cons, and so on. Later on in the tutorial, when we've got both of them figured out, we'll compare and contrast them from different perspectives - code accessibility, career opportunities and so on. So, without further ado, let's jump straight into it!
Table of Contents
- 1. The jQuery vs JavaScript Dilemma
- 2. jQuery is JavaScript
- 2.1. JavaScript
- 2.2. What is jQuery?
- 3. jQuery vs JavaScript in Code
- 3.1. Premature Conclusion
- 3.2. Back to the Bar Again
- 3.3. Second Premature Conclusion
- 3.4. Career Objectives
- 4. Specific Functionality
- 4.1. Cross-Browser Compatibility
- 4.2. DOM Manipulation
- 4.3. Effects and Animations
- 4.4. APIs
- 5. Conclusion
The jQuery vs JavaScript Dilemma
When you seek out some answers to JavaScript problems online, though, you found answers that simply said, 'do it with jQuery'.
Latest Deal Active Right Now:
GET 50% OFF
DataCamp Black Friday Sale
During this DataCamp Black Friday, you can access the top-rated courses with a 50% discount. Enrol now for way less!
Your reaction may have been 'what is jQuery?' You thought you had to know JavaScript, but now there is an alternative? You weren't prepared for this jQuery vs JavaScript dilemma...
Or perhaps you approached the dilemma from the opposite point of view. jQuery was the method recommended to you for your website, but you have now read online that JavaScript can do everything jQuery can and more while coding in vanilla JavaScript also makes you a better developer.
Now you're left asking yourself, 'what is JavaScript? Why can't things be simple? Can't I just use jQuery?
But wait, hold those thoughts for a moment — would it add to your confusion if you were to learn that Javascript & jQuery aren't two different options at all?
jQuery is JavaScript
We might have presented the jQuery vs JavaScript dilemma as though it were a battle between two competing technologies, but actually, the difference between JavaScript and jQuery is that jQuery is just a different way of using JavaScript.
jQuery is commonly referred to as a framework or a library. Before we address what those terms mean, though, let's quickly ensure no-one is left wondering, 'what is JavaScript?'
JavaScript
JavaScript is the programming language of the browser, or at least, that was all it was until fairly recently – its reach has now spread beyond the confines of the browser window into other uses such as server-side code.
In its primary purpose as a client-side programming language written into every internet browser, it is responsible for interactive and dynamic elements on a web page, such as listening and reacting to user input.
Now, what about jQuery?
What is jQuery?
As we have established, jQuery is a JavaScript library. That means that it is a collection of JavaScript code packaged together that can be accessed by a much simpler line of code, thus making it easier for developers to implement JavaScript without having to write complicated JavaScript code, thanks to the pre-written code packaged up in jQuery.
If you are already familiar with Bootstrap, a good analogy might be the relationship between CSS and Bootstrap. Bootstrap is simply a collection of CSS commands that make it easier and quicker to style web pages. jQuery is to JavaScript what Bootstrap is to CSS.
For those not acquainted with Bootstrap, let's try a real-world analogy to the jQuery vs Javascript question.
Suppose you are in a bar with your friend Dave. Dave has had a few too many beers and he's talking way too loudly. You want Dave to stop embarrassing you and stop talking so loudly.
Your course of action is to explain to Dave that you've noticed the women at the back of the bar make annoyed faces in his direction.
You explain that the gentleman who was sitting at the table next to you has moved away to get some peace. You tell Dave that his wife wouldn't appreciate some of the details of their relationship being shared with the whole bar.
Dave stops talking. This is the JavaScript means of getting Dave to stop talking.
The jQuery approach would be to simply say:
'Stop talking, Dave'.
Dave stops talking. You've achieved the same thing in much fewer words and it was far easier.
The Most Liked Findings
Looking for more in-depth information on related topics? We have gathered similar articles for you to spare your time. Take a look!
jQuery vs JavaScript in Code
Lesson One in BitDegree's 'Interactive jQuery Tutorial: Learn How to Use jQuery Effects & Events' makes the difference between JavaScript and jQuery very clear in code.
The example is an HTML button that opens and closes a log-in form.
Here is the JavaScript code:
const login = document.getElementById("login");
const loginMenu = document.getElementById("loginMenu");
login.addEventListener("click", () => {
if(loginMenu.style.display === "none"){
loginMenu.style.display = "inline";
} else {
loginMenu.style.display = "none";
}
});
While here is the jQuery code:
$("#login").click(() => {
$("#loginMenu").toggle()
});
What took nine lines of code in JavaScript took only three lines of code to achieve in jQuery.
Premature Conclusion
So that seems like a no-brainer doesn't it? Use jQuery.
It may well have been that simple a decade ago, but in 2018 jQuery's relevance in web development is declining, and examples like the code above are becoming rare.
There are still good reasons to learn and use jQuery, but if it is a question of jQuery vs JavaScript, the need to understand and be able to use JavaScript is fast accelerating, with some of its new powers making a lot of the functionality of jQuery redundant.
Back to the Bar Again
To demonstrate another argument in the jQuery vs Javascript debate, let's go back to the bar to stretch our analogy a little further. You've decided to simply tell Dave to shut up. While an effective strategy for achieving your goal, Dave is upset and in a bad mood in the taxi you share home.
Had you used the JavaScript strategy of explaining to Dave that he should keep his voice down, you might have been able to spare his feelings and keep him in a good mood. Your powers of persuasion could have been far greater with the JavaScript strategy, even if it had taken more effort.
Similarly, if you learn JavaScript, your web development powers will be far greater than what they would be if you only learned jQuery. Perhaps telling Dave to shut up won't upset him, but it could be unpredictable.
Comparably, the behavior of the jQuery command might be exactly what you need, but it's difficult to be sure without understanding the code that makes jQuery work. And of course, as jQuery is made up of JavaScript code, you will need to understand JavaScript to understand fully how each jQuery command works.
Logically, JavaScript can do everything that jQuery can, and more, because, repeating for emphasis, jQuery is just JavaScript.
Second Premature Conclusion
So that's it then? The difference between jQuery and JavaScript is that jQuery is simpler and easier but JavaScript is more powerful and doesn't upset Dave. So the answer to the JavaScript vs jQuery question is to learn JavaScript?
Well no, not quite. Unfortunately, there is no one size fits all answer to the jQuery vs JavaScript question. Whether you need jQuery or JavaScript depends on your career objectives and the functionality required in your project.
Career Objectives
If your objective is to be a Front-End Developer, the answer to the jQuery vs JavaScript question is simple: learn JavaScript. Job adverts may ask for jQuery, but the JavaScript vs jQuery question is a simple one for any hiring manager: they will almost certainly prefer the candidates who know JavaScript over those who know jQuery.
Even if a company uses jQuery extensively, it is assumed a candidate that can understand JavaScript can learn jQuery quickly and easily. Learning JavaScript is far harder, even if you are a jQuery master.
If your objective is to be a freelance web designer, however, JavaScript may not be so necessary. If you build websites for clients on a content management system such as WordPress, a lot of the need for JavaScript can be handled by jQuery or freely available plugins that add functionality to your site.
The vast majority of websites online can be built without the need for custom JavaScript code. So long as you recognize what kind of website functionality requires you to write custom JavaScript code and what doesn't, there is plenty of work out there for a web designer with HTML, CSS and jQuery skills.
At this point, I've answered the questions of what is JavaScript and what is jQuery. It should be clear what the difference between JavaScript and jQuery is, but the answer to the JavaScript vs jQuery will still be unclear to many.
If you've made up your mind and are eager to start learning, you could follow the links into either of the two courses pictured to get started straight away. If you are interested in more detailed comparison between the languages though, continue reading.
Specific Functionality
So now you have an idea of what JavaScript is and what jQuery is, and the value of each in your chosen career path, let's dig deeper into specific use cases.
JavaScript can do anything jQuery can do, so what are the specific instances it might be better to use jQuery code?
Cross-Browser Compatibility
Mention Internet Explorer to an experienced developer and you may witness their faces redden, eyes bulge, veins pop and fists clench as they contemplate a dark period in their career when a lot of people used Microsoft's infamous browser. Mention IE8 and the developer's head may well explode.
A lot of jQuery's growth can be attributed to the fact that it plugged gaps between the browsers. Most of today's browsers interpret JavaScript the same way, but ten years ago there were huge discrepancies between the browsers. You would have to write your code in various ways so that it could be understood by every browser.
Or, you could use jQuery, which did the hard work for you. One line of jQuery code would be interpreted by the jQuery library into the various lines of JavaScript code needed to please each browser. For developers, using jQuery in these circumstances was a no-brainer.
Nowadays though, those browser differences are small. And if you do find discrepancies, for instance when using some features of the latest update to the JavaScript language ES6, it is recommended to use a polyfill instead. Polyfills are simply libraries that deal with these differences between browsers and can be implemented with just a URL that references the polyfill CDN in a script tag.
Modern polyfills will detect what browser the end-user is using and serve up only the code needed to adapt your code to the user's browser. That saves loading time, as if the user is only loading the code they need, your website will load quicker on their machine than it would have done if they had to load the whole jQuery library.
Cross-browser compatibility was once perhaps the key reason to use jQuery, but now it's not even the best solution to tackle a problem that is now nowhere near as big of a concern as it once was.
DOM Manipulation
The DOM, or the Document Object Model, is the browser's interpretation of the web page you serve it. If you right-click on any web page and click inspect, under the Elements pane you will see the DOM. It may look just like your index.html code, but remember a lot of that HTML content is usually dynamically rendered from a server using server-side code such as PHP.
The DOM elements can also be rendered and manipulated with JavaScript, which is another area where jQuery once proved extremely useful.
With jQuery, you can target DOM nodes, essentially HTML elements, such as a level two heading with the code
$(“h2”)
You can then chain on a function to that code to do whatever you like, such as listening for events or modifying the DOM to change things on your website while the user is using it.
With JavaScript, you can do the same thing using the code,
document.querySelector("h2")
That's not a huge amount of difference, is it? In the past, DOM Manipulation methods with JavaScript weren't so easy or consistent across browsers. Besides, using vanilla JavaScript (vanilla JavaScript means pure, unaltered JavaScript without any libraries) is considered to be more performant – which means it does it faster and/or uses fewer memory resources.
Again this looks like another win for JavaScript in the jQuery vs JavaScript debate. However, the popularity of jQuery means you will see plenty of jQuery code used in older applications, and even newer applications because many developers simply feel more comfortable using jQuery.
New libraries such as Bling.js even allow you to use jQuery syntax without loading the whole jQuery library, demonstrating the fondness many developers have for writing jQuery.
While you probably should use JavaScript, if you know that the relative performance loss is not going to make much difference to your target end-users, then using jQuery because you know you can develop faster and easier with it than using vanilla JavaScript makes logical sense.
So while you should probably learn how to use vanilla JavaScript for DOM Manipulation, if you are going to be working with others, understanding jQuery DOM Manipulation methods will almost certainly prove useful at some point.
Effects and Animations
jQuery includes a library of effects, including the toggle method shown in the initial jQuery vs JavaScript code comparison in this article. The toggle method is a good example of functionality being simpler to achieve using jQuery than by using JavaScript.
Nowadays though, developers have access to the Web Animations API along with CSS Transitions. These two technologies are native to the browser, meaning your web browser understands them without the need to load any libraries, and they will perform faster than having to load the animations from the jQuery library.
jQuery will be a simpler method of implementing animation in some cases, but nowadays it is quite limited compared with the range of options that developers have that are native to the browser.
- Easy to use with a learn-by-doing approach
- Offers quality content
- Gamified in-browser coding experience
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable
- High-quality courses
- Nanodegree programs
- Student Career services
- Nanodegree programs
- Suitable for enterprises
- Paid certificates of completion
- A wide range of learning programs
- University-level courses
- Easy to navigate
- University-level courses
- Suitable for enterprises
- Verified certificates of completion
APIs
Another excellent use case for jQuery in the past was its ability to make API calls. To call an API is to pull in data to your website from an external source, for example, you might want to feature a customized map on your site so you use an API to get Google Map data from Google.
The jQuery method of calling APIs was widely preferred to the native XML method, but again, like with the other use cases, there is now a superior method known as Fetch, which is native to the browser, and arguably as user-friendly as jQuery.
Did you know?
Have you ever wondered which online learning platforms are the best for your career?
The Most Trending Findings
Browse our collection of the most thorough Crypto Exchange related articles, guides & tutorials. Always be in the know & make informed decisions!
Conclusion
Sometimes the most useful technology isn't the one to start learning. Development is difficult, and learning an overly difficult language at the start of your learning path might be enough to put you off entirely.
JavaScript is a powerful tool, but not one that you will be able to grasp in days or even weeks. Even experienced JavaScript developers are still often bamboozled by their behavior.
As a newcomer to programming and web development, you won't be able to do much with your budding JavaScript skills in a few weeks. But if you already know HTML and CSS, jQuery could take your projects to another level in possibly as little as a few days.
Many web developers first got into web development by learning jQuery. While learning JavaScript fundamentals is probably the most important part of becoming a good Front-End Developer, it's also important to get some quick wins in your education, and jQuery is a faster way to achieve that.
When you see your projects come to life with jQuery, you'll be motivated to learn more; with JavaScript, it might be many more weeks of learning and plenty more mistakes before you see the same results.
By learning jQuery, you will also begin to understand the power of JavaScript. You'll be able to do many of the common tasks that require a JavaScript developer, but by pushing the boundaries of what you can achieve with jQuery, you will also learn how much more you can do with JavaScript.
Scientific References
About Article's Experts & Analysts
