How to write Javascript and JQuery code with example

In the previous article, we have discussed on what is Javascript and JQuery. We have also discussed on main differences between them. In this article we will go through code comparision between Javascript and JQuery with example.

JavaScript and jQuery code examples

Here is the bellow examples, so let's check bellow examples:

Writing Javascript and JQuery code in HTML document

Javascript is directly written between <script> tags. Javascript external file can also be included in HTML document.

<script src="path/to/external/javascript-file.js"></script>
    document.getElementById("myid").innerHTML = "Hello World";

JQuery code is dependant on JQuery library. So you have to include JQuery library file or CDN file before JQuery code in HTML document.

    <script src="jquery-3.5.0.min.js"></script>

HTML tag selection and manipulation

To select HTML tag in Javascript, use document.querySelector() method or other methods as per tag.




or select by class


or select by element


In JQuery $ sign used with selector in bracket.








Event handling

To handle event in Javascript, write addEventListener() method with event name.

document.getElementById('idname').addEventListener('click', function() {
    alert('Hello World');

In JQuery all event has defined method to handle.

$('.classname').click(function() {
   // here comes acion

or submit form

$('#idname').submit(function() {
   // here comes acion

or to use multiple event with on() method

$('#input').on ('click change', function() {
   // here comes acion

Change CSS property

To change the style of an HTML element in Javascript, use:

document.getElementById('idname').style.color = '#f2f2f2';

in JQuery, change CSS with css() method:

$('#idname').css('color', '#f2f2f2');

Changing or adding value of an Attribute

To change the value of HTML element attribute in Javascript, use:

document.getElementById('idname').href = "/new-url";

To change value in JQuery, use attr() method:

$('#idname').attr('href', '/new-url');

Create Ajax request

Creating Ajax request in Javascript with new XMLHttpRequest object and send request to server. There is open('methodType', 'URL', async) method with parameters and send() method with data creates Ajax request.

Create get method request:

var xhttp = new XMLHttpRequest();'GET', 'request-url', true);

Or create post method request:

var xhttp = new XMLHttpRequest();'POST', 'request-url', true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

To create Ajax request, there are many syntax in JQuery. Bellow are main methods which are widely used:

    type: "post",
    url: 'request-url',
    data: data,
    success: function(response) {
        // what to do after ajax complete

Or shorthand method:

$.get('request-url', function(response) {

or more simply:


Create animation

Creating animation is also difficult and requires many lines of code. JavaScript use the setInterval(), clearInterval(), setTimeout() and clearTimeout() methods and CSS transform, translate or animate properties to create animation.

Here is the simple animation in Javascript:

setInterval(myAnimation, 5);
    function myAnimation(){
    document.getElementById ("#idname").style.transform=‘translate(100px, 100px)’;
    document.getElementById ("#idname").style.transform=‘rotate(30deg)’;

In JQuery there are several direct methods which are used to create fast and easy animation:

Css animation

$('#idname').animate({height: '100px'});

Hide/Show animation


or toggle() to hide/show respectively.


Create fade effect with fadeIn() or fadeOut() method:


There are many functions in JQuery to create animations. But it is also noted that Javascript can also work in graphic animations like on <canvas> tag while JQuery only works in HTML dom elements:

Which one you liked?

Javascipt is difficult compared to JQuery, so most of us use JQuery for most of work. While Javascript is language and has widly use with other technologies while Jquery is Javascript library for HTML dom manipulation. So it mostly used in web development.

In the conclusion, both have its own usage in software development. If you have any suggetion or question, please write in the bellow comment section. Also follow us on Twitter or like our Facebook page.