Open In App

jQuery mouseup() Method

Last Updated : 18 Nov, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

The jQuery mouseup() method is an inbuilt method which works when mouse left button is released over a selected element. 

Syntax:

$(selector).mouseup(parameter)

Parameters: This method accepts single parameter function which is optional. This parameter is used to specify the function to run when the mouseup event is called. 

Below examples illustrate the mouseup() method in jQuery: 
Example 1: This example contains parameter. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>The mouseup Method</title>
    <script src=
    </script>
  
    <!-- jQuery code to show the working of this method -->
    <script>
        $(document).ready(function () {
            $("button").mouseup(function () {
                $("button").after(
                    "<p style='color:green;'>Mouse button released.</p>");
            });
        });
    </script>
    <style>
        body {
            width: 200px;
            padding: 20px;
            min-height: 100px;
            border: 2px solid green;
        }
    </style>
</head>
  
<body>
    <!-- click on this button and release -->
    <button>Click Here!</button>
</body>
  
</html>


Output: 

 

Program 2: This example does not contain parameter. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>The mouseup Method</title>
    <script src=
    </script>
  
    <!-- jQuery code to show the working of this method -->
    <script>
        $(document).ready(function () {
            $("div").mouseover(function () {
                $("p").mouseup().slideToggle();
            });
        });
    </script>
    <style>
        body {
            width: 340px;
            padding: 20px;
            height: 100px;
            border: 2px solid green;
            font-weight: bold;
            font-size: 20px;
        }
    </style>
</head>
  
<body>
    <p>Welcome to GeeksforGeeks!</p>
    <!-- move over this text to see the change -->
    <div>Mouse over this text to see the change.</div>
</body>
  
</html>


Output: 

 

Related Articles:



Previous Article
Next Article

Similar Reads

AngularJS ng-mouseup Directive
The ng-mouseup Directive in AngularJS is used to apply custom behavior when a mouseup event occurs on a specific HTML element. It can be used to show a popup alert when the mouse button is pressed. The order of a mouse click is Mousedown, Mouseup, Click. It is supported by all HTML elements. Syntax: &lt;element ng-mouseup="expression"&gt; Contents.
2 min read
jQuery Cheat Sheet – A Basic Guide to jQuery
What is jQuery?jQuery is an open-source, feature-rich JavaScript library, designed to simplify the HTML document traversal and manipulation, event handling, animation, and Ajax with an easy-to-use API that supports the multiple browsers. It makes the easy interaction between the HTML &amp; CSS document, Document Object Model (DOM), and JavaScript.
34 min read
jQuery jQuery.fx.interval Property with example
The jQuery.fx.interval property in jQuery is used to modify the number of frames per second at which animations will run and to change the animation firing rate in milliseconds. Its default value is 13ms. Syntax: jQuery.fx.interval = milliseconds;Parameters: This method accepts single parameter milliseconds which is mandatory. It is used to specify
2 min read
jQuery jQuery.fx.off Property
The jQuery.fx.off property in jQuery is used to globally disable/enable all animations. Its default value is false which is used to allow animation to run normally. Syntax: jQuery.fx.off = true|false;Parameter: This event accepts two parameters as mentioned above and described below: true: It is used to specify that the animations should be disable
2 min read
jQuery jQuery.support Property
The jQuery.support property in jQuery contains a collection of properties that are used to represent the different browser features or bugs. Syntax: jQuery.support.propvalueParameters: This property contains a single parameter propvalue: which is required. It is used to specify the function to test for. The tests included are: ajaxboxModelchangeBub
1 min read
jQuery jquery Property
The jquery property is used to return the jQuery version number. Syntax $().jqueryExample: Return the version number. C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; h1 { color: green; } &lt;/style&gt; &lt;script src= &quot;https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt; &lt;/script&gt; &lt;script
1 min read
How to append a jQuery object to all paragraphs using jQuery ?
In this article, we will see how to append a jQuery object to all paragraphs using jQuery. Append means we add something to an existing element. The object is used to define a container for an external resource like a page, a picture, a media player, or a plug-in application. Used Methods: ready() Method: This method is used to specify a function t
2 min read
How to insert a jQuery object after all paragraphs using jQuery ?
The task is to insert a jQuery object after all the paragraphs using jQuery. Approach: Create DOM element or jQuery object using &lt;span&gt; tag.Create a paragraph using &lt;p&gt; tag.Create a button using button tag after clicking on which the object will be inserted after paragraph.Write a script that will call a function jQuery.after() which is
1 min read
Difference between jquery.size() and jquery.length
JQuery.size() method gives us the number of elements present. For Example, if we are calling the size() method for "p" tag, then it will return the number of "p" tags present on our page. Syntax: $(selector).size() Return value: It returns the number of “selector” present. Example: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt;
2 min read
How to remove close button from jQuery UI dialog using jQuery ?
In this article, we will learn how to remove the close button on the jQuery UI dialog using JavaScript, This can be achieved using the hide() method. jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. A dialog box is a temporary window. An application creates a dial
2 min read