JavaScript vs jQuery - Understandable And Simple Comparison

JavaScript vs jQuery – Understandable And Simple Comparison

by

In this article, you going to see a discussion regarding the difference between JavaScript vs jQuery in detail and step by step with an example.

If you are looking for this topic then you are at right place.

Contents hide
1 Let’s start with the topic of difference between JavaScript vs jQuery.
2 Coding Comparison for JavaScript and jQuery
3 In Animation Creation.

Let’s start with the topic of difference between JavaScript vs jQuery.

JavaScriptjQuery
JavaScript is one of the best scripting languages, which makes a website dynamic, powerful, interactive, and creative. It is well known for its powerful language in web development.In Case of jQuery, library is developed from JavaScript. Its library simplifies HTML document and help in event handling, animation.
It is a scripting language, which works with all browsers.It is a framework and JavaScript library.
Combination of the European Computer Manufacturers Association Script(ECMA) and Document Object Model(DOM).jQuery has Document Object Model(DOM).
Since 1995.Invented by John Resign and was released in January 2006 at BarCamp NYC.
Make Web Pages more Useful by Supplying Immediate Feedback.With the help of jQuery, It is easy to create a Web-Based Application and useful in customization.
Heavier than jQuery being a language.It is lightweight being a library.
JavaScript vs jQuery

Coding Comparison for JavaScript and jQuery

More line of code is used, when we write our own code.Fewer lines of code require as compare to JavaScript
for the same functionality. It is because the code is
already written in its library.
Below is an example of JavaScript.Below is the example for jQuery.
JavaScript and jQuery Comparison

JavaScript Example:

<a href="test.html" onclick="alert('It is a onclick event')">Click To Get Message</a>

jQuery Example:

<!DOCTYPE html> 
<html> 
	<head> 
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> 
	</script> 
		<script> 
			$(document).ready(function () { 
				$("#hide").click(function () { 
					$("h1").hide(); 
				}); 
				$("#show").click(function () { 
					$("h1").show(); 
				}); 
			}); 
		</script> 
	</head> 
	<body> 
		<h1>Code to Hide Text</h1> 
		<div id="hide">Click to Hide</div> 
		<div id="show">Click to Show</div> 
	</body> 
</html>

In Animation Creation.

The animation is not possible using JavaScript.It is easy to create animation effects using few lines code of jQuery.
Like jQuery, it does not have an animation function called animate() functionjQuery has an inbuilt function to achieve animation.
Using another way such as CSS transform, translate or many properties achieve animation effect.Using an animation function, animation effect can be achieved easily
Method used are setInterval(), clearInterval(), setTimeout() and the clearTimeout().The method used is animate().
Below is code Snippet.Below is code Snippet.
Animation Creation Comparison

JavaScript Animation Example.

setInterval(shapeAnimation, 4);
function shapeAnimation(){
document.getElementById ("#div1").style.transform='translate(100px,100px)';
document.getElementById ("#div1").style.transform='rotate(20deg)';
}

jQuery Animation Example.

$("#button").click(function(){
$("#div").animate({height: "300px"});
});

PHP vs JavaScript: What is the best PHP or JavaScript?

Conclusion :

Above Comparison of JavaScript vs jQuery is covered mostly all the points.

I hope you like this article and if you think that i have missing something, please comment below.

Leave a Comment