Zulaikha

DevOps, Data Science & Full Stack Development Expert

jQuery Tutorial For Beginners | A Complete Guide For Beginners

Published Apr 24, 2019

All good things come in small packages and so does jQuery. jQuery is a tiny JavaScript library that transforms the web into an entertaining experience. It is one of the most popular JavaScript libraries. In this jQuery Tutorial blog, you’ll learn the importance and basic fundamentals of jQuery.

What is JavaScript?

JavaScript is the language of the web, it is used to make the web look alive by adding motion to it. To be more precise, it’s a scripting language that let’s you implement complex and beautiful things/design on web pages. When you notice a web page doing more than just sit there and gawk at you, you can bet that the web page is using JavaScript.

Features of JavaScript:

It makes web pages more interactive by adding motions and graphics
It is an Interpreted language which means that you don’t require a compiler to run JavaScript
JavaScript is mainly a client-side scripting language

Why use jQuery?

We’re all aware that there are 100s of JavaScript frameworks and libraries out there, but why you should use jQuery?

Here’s a list of features that make jQuery so effective:

For starters, jQuery makes it extremely easy to manipulate the DOM. In order to make a web app more interactive, web developers manipulate the DOM & jQuery makes it very easy to do that
The community of its users is more diverse than any other JavaScript library. It provides detailed documentation which is all a developer needs
jQuery has 1000s of plugins available for free, which improve the user experience. One such example is the AJAX (Asynchronous JavaScript And XML) which develops a responsive and feature rich site
jQuery provides cross-browser support which lets you run your code on different browsers without worrying about dependency issues

What is jQuery?

jQuery is an efficient & fast JavaScript Library created by John Resig in 2006. The motto of jQuery is write less, do more, which is very apt because it’s functionality revolves around simplifying each and every line of code. Below is a list of jQuery key features:

Simplifies JavaScript : It simplifies DOM manipulation and event handling for rapid web development
Event handling : jQuery offers an effective manner to capture a wide variety of events, such as a user clicking on a link, without the need to clutter the HTML code
Lightweight : jQuery is a compact, lightweight library of about 19KB in size
Animations : It comes with plenty of built-in animation effects which you can use in your web app to make it more interactive

Install jQuery

There’s no installation per se, it’s more like downloading jQuery. There are two ways to install jQuery:

Local Installation: You can directly download jQuery library from their official website and include it in your HTML code
Link to a CDN: You can add jQuery library in your HTML code from Content Delivery Network

In this blog, I’ll be using the second method. Here’s a link to a CDN, just copy and paste it within <script> tags in your HTML file:

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">

Before we go any further, I’d like to mention that I’m using Visual Studio Code] editor for writing my code and I’ll be running all my code on Google Chrome browser. Google Chrome has an embedded JavaScript engine that runs all the basic commands. All you have to do is open up a browser, right-click anywhere on the blank space and select Inspect.

This opens up a JavaScript console for you to run your commands.

The Document Object Model (DOM)

DOM is a tree structure of the various HTML elements.

In the above illustration:

<html> is the ancestor of all the other DOM elements
The <head> and <body> elements are descendants of <html>
<title> is child of <head>
The <h1> & <p> elements are children of <body> and <html>

It is important to understand the concept behind DOM in order to manipulate DOM elements.

jQuery Selectors

jQuery Selectors are used to select and manipulate HTML elements by using the “()” function. In regular JavaScript we have functions like document.getElementById, querySelectorAll, getElementByClass and so many other elaborate functions to do this. But in jQuery the “()” function replaces all of these functions. Refer the below syntax:

$(selector).action( )

Let’s look at an example:

<!DOCTYPE html>
<html>
    <head>
        <title> jQuery Tutorial</title>
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
                integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
                crossorigin="anonymous"></script>
        <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
    </head>
    
<body>
    <h1>jQuery Basics</h1>
    <p>By Edureka</p>   
</body>
</html>

Once you run the above code, open up the JavaScript console and start off by typing the “$” (selector function) to check if you’ve successfully installed jQuery. This should return a function as shown below:

Now that you’ve installed jQuery, lets run the following command on the browser’s console:

$("h1").css("color", "red")

This command selects the <h1> tag and adds a css() method to it, which is used for styling the <h1> tag, in this case the <h1> color is set to red.

This is the end result:

jQuery Fundamentals

Now that you have a basic understanding of jQuery, let’s dive deep into jQuery programming. I’ll be covering the following fundamentals:

jQuery Methods
jQuery Events
jQuery Effects
jQuery UI

jQuery Methods

There are several jQuery methods, I’ll be covering the most commonly used methods.

jQuery Methods – before()

The jQuery before() method is used to insert the specified content before the selected elements. Refer the below syntax:

$(selector).before(content);

Let’s look at an example :

<!DOCTYPE html>
<html>
    <head>
        <title> jQuery Tutorial</title>
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
                integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
                crossorigin="anonymous"></script>
        <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
    </head>
    
<body>
    <h1>jQuery Basics</h1>
    <p>By Edureka</p> 
    <ul>
        <li>Golden Retriever</li>
        <li>Syberian Husky</li>
        <li>Boxer</li>
    </ul>  
</body>
</html>

Once you run the above code, open up the JavaScript console and type the following command:

$("ul").before("<h2>My favourite dogs!!</h2>")

This command selects the <ul> (unordered list) and adds a <h2> tag which says “My favourite dogs!!” right before the <ul> tag.

This is the end result:

jQuery-Methods-before-output-jQyery-Tutorial-590x123.png

jQuery Methods – after()

The jQuery after() method is used to insert specified content after the selected element. Refer the below syntax:

$(selector).after(content);

Refer the same code used for the before() method and open up the JavaScript console and type the following command:

$("ul").after("<h2>All dogs are adorable!!</h2>")

This command selects the <ul> (unordered list) and adds a <h2> tag which says “All dogs are adorable!!” right after the <ul> tag.

This is the end result:

jQuery Methods – text()

The jQuery text() method is used to set or return the text content of the selected elements. Refer the below syntax:

$(selector).text( )

$(selector).text(content)

Refer the same code used for the before() method and open up the JavaScript console and type the following commands:

$("li").text()
$("p").text("Welcome to this fun jQuery Tutorial")

The first command selects the <li> (list) and uses the text() method to return the content of the <li>. The second command selects the only <p> tag and sets or replaces the content of the <p> tag with “Welcome to this fun jQuery Tutorial”.

This is the end result:

jQuery Methods – html()

jQuery html() method is used to set or return the entire content of the selected elements. Refer the below syntax:

$(selector).html( )

$(selector).html(content)

Refer the same code used for the before() method and open up the JavaScript console and type the following commands:

$("li:first").html()
$("li:last").html("<li> German shepherd</li>")

The first command selects the first element of the <li> (list) and uses the html() method to return the entire content of the <li>. The second command selects the last element of the <li> tag and sets or replaces the content of it with “German Shepherd”.

This is the end result:

I know you all are wondering, what’s the difference between text() and html() method? Well, run the below commands and see for yourself:

$("ul").text()
$("ul").html()

jQuery Methods – css()

The jQuery css() method is used to get or set style properties for selected elements. Refer the below syntax:

$(selector).css(propertyname);

$(selector).css(propertyname, value);

Refer the same code used for the before() method and open up the JavaScript console and type the following command:

$("h1").css("background-color", "blue")
$("ul li").css("color", "green")

The first command selects the <h1> and applies a background color to it. The second command selects all the elements of the <ul> tag and sets their color to green.

This is the end result:

jQuery Methods – attr()

The jQuery attr() method is used to set or return attributes and values of the selected elements. Refer the below syntax:

$(selector).attr(attribute)

$(selector).attr(attribute, value)

Let’s look at an example, but before you run the below code, a point to note here is that I’m loading three images of puppies which I have stored in a folder named “puppie” within the jQuery folder (contains the index.html file and css file).

<!DOCTYPE html>
<html>
<head>
<title> jQuery Tutorial</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
                integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
                crossorigin="anonymous"></script>
        <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
    </head>
    
<body>
    <h1>jQuery Basics</h1>
    <p>By Edureka</p> 
    <div class="puppers">
        
        <img src="puppie/goldie.jpg" alt="Goldie">
    
        <img src="puppie/husky.jpg" alt="Husky">
    
        <img src="puppie/boxer.jpg" alt="Boxer">
    
    </div>
</body>
</html>

Once you run the above code, open up the JavaScript console and type the following command:

$("img").attr("border","5px solid black")

This command selects all the images (img) and adds an attribute called border to each image and sets it to solid black by using the attr() method.

A point to note here is that within the code I’ve linked a index.css file which aligns all the images side by side and also sets the width and height of the images. Here’s the index.css file:

.puppers {
float:left;
}

img {
width: 300px;
height: 250px;
}

This is the end result:

jQuery Methods – val()

The jQuery val() method is used to set or return current values of the selected elements. Refer the below syntax:

$(selector).val( )

$(selector).val(value)

Let’s look at an example :

<!DOCTYPE html>
<html>
    <head>
        <title> jQuery Tutorial</title>
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
                integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
                crossorigin="anonymous"></script>
        <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
    </head>
    
<body>
    <h1>jQuery Basics</h1>
    <p>By Edureka</p> 
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                alert("Value: " + $("#sometext").val());
            });
        });
        </script>
    <input type="text" id="sometext" value=" "></p>
    <button>Submit</button>    
</body>
</html>

Once you run the above code, open up the JavaScript console and type some value into the input box, this value is returned as an alert by using the val() method.

This is the end result:

jQuery Methods – addClass()

The addClass() method is used to add one or more class to the selected element. Refer the below syntax:

$(selector).addClass(classname)

Let’s look at an example :

<!DOCTYPE html>
<html>
    <head>
        <title> jQuery Tutorial</title>
        <link rel="stylesheet" type="text/css" href="index.css">
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
                integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
                crossorigin="anonymous"></script>
        <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
    </head>
    
<body>
    <h1>jQuery Basics</h1>
    <p>By Edureka</p> 
    <div class="puppers">
        
        <img src="puppie/goldie.jpg" alt="Goldie">
    
        <img src="puppie/husky.jpg" alt="Husky">
    
        <img src="puppie/boxer.jpg" alt="Boxer">
    
    </div>
    <script>  
            $(document).ready(function(){  
                $("button").click(function(){  
                    $("img").addClass("styleclass");  
                });  
            });  
    </script>  
    <style>  
            .styleclass {  
                border: 5px solid green
            }  
    </style> 
    <button>Try addClass() function</button>
</body>
</html>

Once you run the above code, open up the JavaScript console and click on the “Try addClass” button, this will add a style class to all the images.

This is the end result:

jQuery-Methods-addClass-output-jQuery-Tutorial-590x175.png

jQuery Methods – removeClass()

The jQuery removeclass( ) method removes one or more class to the selected element. Refer the below syntax:

$(selector).removeClass(classname)

This method is similar to addClass, only it will remove the class that was added. Run the same code you executed for addClass and open up the console and try the below command and see what you get!

$("img").removeClass("styleclass")

jQuery Methods – toggleClass()

This method toggles between adding and removing one or more class to the selected element. Refer the below syntax:

$(selector).toggleClass(classname)

The toggleClass() is a combination of addClass() and removeClass(). Run the same code you executed for addClass and open up the console and try the below command and see what you get!

$("img").toggleClass("styleclass")

jQuery Events

There are several jQuery events, I’ll be covering the most commonly used events. Here’s a list of events you’ll be learning:

jQuery Events – click()
jQuery Events- on()
jQuery Events- keypress()

jQuery Events – click()

When you click on an element, the click event occurs by executing a function or a set of statements. Refer the below syntax:

$(selector).click(function)

Let’s look at an example :

<!DOCTYPE html>
<html>
    <head>
        <title> jQuery Tutorial</title>
        <link rel="stylesheet" type="text/css" href="index.css">
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
                integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
                crossorigin="anonymous"></script>
        <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
    </head>
    
<body>
    <h1>jQuery Basics</h1>
    <p>By Edureka</p> 
    <script>
        $(document).ready(function(){
            $("img").click(function(){
                $(this).hide();
            });
        });
    </script>   
    <div class="puppers">
        
        <img src="puppie/goldie.jpg" alt="Goldie">
    
        <img src="puppie/husky.jpg" alt="Husky">
    
        <img src="puppie/boxer.jpg" alt="Boxer">
    </div>
</body>
</html>

Once you run the above code, open up the JavaScript console and enter any character into the input box. On the keypress of a character the <p> tag that says “Start typing…” gets hidden. So in this example we’re using the on() event to add another event listener, i.e. keypress().

This is the end result:

jQuery-Events-keypress-output-jQuery-Tutorial-590x83.png

jQuery Events – keypress()

The jQuery keypress ( ) event is executed when a character is entered. Refer the below syntax:

$(selector).keypress(function)

Refer the click() method to understand the keypress() method.

jQuery Effects

There are several jQuery effects, I’ll be covering the most commonly used effects. Here’s a list of effects you’ll be learning:

jQuery Effects – hide()

The jQuery hide() method is used to hide the selected elements. Refer the below syntax:

$(selector).hide(speed, callback);

Let’s look at an example :

<!DOCTYPE html>
<html>
    <head>
        <title> jQuery Tutorial</title>
        <link rel="stylesheet" type="text/css" href="index.css">
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
                integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
                crossorigin="anonymous"></script>
        <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
    </head>
    
<body>
    <h1>jQuery Basics</h1>
    <p>By Edureka</p> 
<button class="buttons" id="hide">Hide</button>
<button class="buttons" id="show">Show</button> 
    <div class="puppers">
            <img src="puppie/goldie.jpg" alt="Goldie"> 
    </div>
<script>
    $(document).ready(function(){
    $("#hide").click(function(){
        $("img").hide();
    });
    $("#show").click(function(){
        $("img").show();
    });
});
</script>
</body>
</html>

Once you run the above code, open up the JavaScript console and click on the hide button. This will hide the image because we’re making use of the hide() method on the image.

jQuery Effects – show()

The jQuery show() method is used to display the selected elements. Refer the below syntax:

$(selector).show(speed, callback);

Refer the same code used for hide() method, I’ve mentioned a show() method in that.

Once you run the code, open up the JavaScript console and click on the show button. This will display the hidden image because we’re making use of the show() method on the image.

jQuery Effects – toggle()

The jQuery toggle() method is used to toggle between the hide() and show() method. It displays the hidden elements and hides the visible element. Refer the below syntax:

$(selector).toggle(speed, callback);

The toggle() effect is a combination of hide() and show(). Run the same code you executed for hide() effect and open up the console and try the below command and see what you get!

$("img").toggle()

jQuery Effects – fadeOut()

The jQuery fadeOut() method is used to fade out the selected element. Refer the below syntax:

$(selector).fadeOut(speed, callback);

Let’s look at an example :

<!DOCTYPE html>
<html>
    <head>
        <title> jQuery Tutorial</title>
        <link rel="stylesheet" type="text/css" href="index.css">
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
                integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
                crossorigin="anonymous"></script>
        <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
    </head>
    
<body>
    <h1>jQuery Basics</h1>
    <p>By Edureka</p> 
    <button>BYEEEEE</button><br><br>   
    <div class="puppers">
        <img id="one"src="puppie/goldie.jpg" alt="Goldie">
        <img id="two" src="puppie/husky.jpg" alt="Husky">
        <img id="three" src="puppie/boxer.jpg" alt="Boxer">
     </div>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("#one").fadeOut('slow');
            $("#two").fadeOut("fast");
            $("#three").fadeOut('slow');
        });
    });
</script>
</body>
</html>

Once you run the above code, open up the JavaScript console and click on the “BYEEE” button. This will fadeOut() each image one by one.

This is the end result:

jQuery-Effects-fadeOut-output-jQuery-Tutorial-562x180.png

jQuery Effects – fadeIn()

The jQuery fadeIn() method is used to fade in the selected element. Refer the below syntax:

$(selector).fadeIn(speed, callback);

Let’s look at an example :

<!DOCTYPE html>
<html>
    <head>
        <title> jQuery Tutorial</title>
        <link rel="stylesheet" type="text/css" href="index.css">
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
                integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
                crossorigin="anonymous"></script>
        <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
    </head>
    
<body>
    <h1>jQuery Basics</h1>
    <p>By Edureka</p> 
<script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#one").fadeIn();
                $("#two").fadeIn("slow");
                $("#three").fadeIn(3000);
            });
        });
</script>
<button>Namaste</button><br><br>
<div class="fade">
    
<div id="one" style="width:2200px;height:60px;display:none;background-color:orange;"></div><br>
<div id="two" style="width:2200px;height:60px;display:none;background-color:white;"></div><br>
<div id="three" style="width:2200px;height:60px;display:none;background-color:green;"></div>

</div>

</body>
</html>

Once you run the above code, open up the JavaScript console and click on the “Namaste” button. This will fadeInOut() three rectangles which sort off look like the Indian flag.

This is the end result:

jQuery-Effects-fadeIn-output-jQuery-Tutorial-590x160.png

jQuery Effects – fadeToggle()

jQuery fadeToggle() method is used to toggle between the fadeIn() and fadeOut() methods. Refer the below syntax:

$(selector).fadeToggle(speed, callback);

The fadeToggle() effect is a combination of fadeOut() and fadeIn(). Run the same code you executed for fadeIn() effect and open up the console and try the below command and see what you get!

$("#one").fadeToggle()
$("#two").fadeToggle()
$("#three").fadeToggle()

jQuery Effects – slideDown()

The jQuery slideDown() method is used to slide down the selected element. Refer the below syntax:

$(selector).slideDown(speed, callback);

Let’s look at an example :

<!DOCTYPE html>
<html>
    <head>
        <title> jQuery Tutorial</title>
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
                integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
                crossorigin="anonymous"></script>
        <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
    </head>
    
<body>
    <h1>jQuery Basics</h1>
    <p>By Edureka</p> 
<button id="one">Slide</button>
<div id="div1" style="width:90px;height:60px;display:none;background-color:orange;"></div><br>
    <script> 
            $("#one").on("click",function(){
                $("#div1").slideDown("slow")
            });
    </script>
</body>
</html>

Once you run the above code, open up the JavaScript console and click on the “Slide” button. This will slideDown() a small box.

This is the end result:

jQuery-Effects-slideDown-output-jQuery-Tutorial-590x76.png

jQuery Effects – slideUp()

The jQuery slideUp() method is used to slide up the selected element. Refer the below syntax:

$(selector).slideUp(speed, callback);

Let’s look at an example :

<!DOCTYPE html>
<html>
    <head>
        <title> jQuery Tutorial</title>
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
                integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
                crossorigin="anonymous"></script>
        <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
    </head>
    
<body>
    <h1>jQuery Basics</h1>
    <p>By Edureka</p> 
<button id="one">Slide</button>
<div id="div1" style="width:90px;height:60px;background-color:orange;"></div><br>
    <script> 
            $("#one").on("click",function(){
                $("#div1").slideUp("slow")
            });
    </script>
</body>
</html>

Once you run the above code, open up the JavaScript console and click on the “Slide” button. This will slideUp() the box.

This is the end result:

jQuery-Effects-slideUp-output-jQuery-Tutorial-590x92.png

jQuery Effects – slideToggle()

jQuery slideToggle() method is used to toggle between the slideDown() and slideUp() methods. Refer the below syntax:

$(selector).slideToggle(speed, callback);

The slideToggle() effect is a combination of slideDown() and slideUp(). Run the same code you executed for slideUp() effect and open up the console and try the below command and see what you get!

$("#div1").slideToggle("slow")

jQuery UI

There are several jQuery widgets and effects, I’ll be covering the most commonly used effects. I’ll be covering the following under jQuery UI:

jQuery UI- draggable()
jQuery UI- droppable()
jQuery UI- datepicker()

jQuery UI – draggable()

jQuery UI draggable() method is used to make any DOM element draggable. Once the element is draggable, you can drag it anywhere within the html page. Refer the below syntax:

$(selector).draggable( );

Let’s look at an example :

<!DOCTYPE html>
<html>
    <head>
        <title> jQuery Tutorial</title>
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
                integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
                crossorigin="anonymous"></script>
        <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
    </head>
    
<body>
    <h1>jQuery Basics</h1>
    <p>By Edureka</p> 
<style>  
            #drag 
            { width: 150px;
              height: 60px; 
              padding: 0.5em; 
              background: blueviolet;
            }  
</style>  
<script>  
            $(function() {  
              $("#drag").draggable();  
            });  
</script>  
        
<div id="drag">  
<p> Drag me around with you</p>  
</div>
</body>
</html>

Once you run the above code, open up the JavaScript console and try moving the rectangle by clicking and holding on it. This happens because of the draggable() UI. Try it yourself, it’s fun!

This is the end result:

jQuery UI – droppable()

jQuery UI facilitates you to use droppable() method to make any DOM element droppable at a specified target. Refer the below syntax:

$(selector).droppable( );

Let’s look at an example :

<!DOCTYPE html>
<html>
    <head>
        <title> jQuery Tutorial</title>
        <link rel="stylesheet" type="text/css" href="index.css">
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
                integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
                crossorigin="anonymous"></script>
        <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
    </head>
    
<body>
    <h1>jQuery Basics</h1>
    <p>By Edureka</p> 
<img id="img1" src="puppie/goldie.jpg" alt="Goldie">

<style> 
            #drop {   
               width: 400px; 
               height: 400px;
               float: right;   
               background-color:aquamarine;      
            }  
</style>  
<script>  
            $(function() {  
               $("#img1").draggable();  
               $("#drop").droppable();  
            });  
</script>   
<div id="drop">  
    <p>MyHome</p>  
</div>      
</body>
</html>
</html>

Once you run the above code, open up the JavaScript console and try moving the image by clicking and holding on it and then drop it on the MyHome icon. This happens because of the droppable() UI. Try it yourself, it’s fun!

This is the end result:

jQuery UI – datepicker()

jQuery UI datepicker widget enables users to enter dates easily and visually. Refer the below syntax:

$(selector).datepicker( );

Let’s look at an example :

<!DOCTYPE html>
<html>
    <head>
        <title> jQuery Tutorial</title>
        <link rel="stylesheet" type="text/css" href="index.css">
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
                integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
                crossorigin="anonymous"></script>
        <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
    </head>
    
<body>
    <h1>jQuery Basics</h1>
    <p>By Edureka</p> 
<input id="date" type="text" size="10">
<script>
        $('#date').datepicker()
</script>          
</body>
</html>

Once you run the above code, open up the JavaScript console and input a date, it will appear on the calendar as shown below.

This is the end result:

jQuery-UI-datepicker-output-jQuery-Tutorial-528x158.png

With this we come to the end of this blog. I hope you found this informative and helpful, stay tuned for more tutorials on web development. You can also read more blogs like these by clicking here.

Got a question? Mention them in the comments section of “jQuery Tutorial” and I'll will get back to you.

jQuery Jquery tutorial Web development JavaScript

Report

Enjoy this post? Give Zulaikha a like if it's helpful.

Zulaikha

DevOps, Data Science & Full Stack Development Expert

Zulaikha is a technology enthusiast with expertise in several different domains including Data Science, DevOps and Web Development. She loves working with and researching about new and trending technologies. A cat lover, by nature...

Discover and read more posts from Zulaikha

get started

Be the first to share your opinion

GitHub flavored markdown supported

submit

Show more replies