How To Use NoConflict Method In JQuery With Example

admin_img Posted By Bajarangi soft , Posted On 16-10-2020

In JQuery The noConflict() method releases the hold on the $ shortcut identifier, so that other scripts can use it.So today we discuss how to use noconfilct method in jquery

How To Use NoConflict Method In JQuery With Example

You can of course still use jQuery, simply by writing the full name instead of the shortcut:

Example(1)

<script>
$.noConflict();
jQuery(document).ready(function(){
    jQuery("button").click(function(){
        jQuery("p").text("jQuery is still working!");
    });
});
</script>


You can also create your own shortcut very easily. The noConflict() method returns a reference to jQuery, that you can save in a variable, for later use. Here is an example:

Example(2)
<script>
var jq = $.noConflict();
jq(document).ready(function(){
    jq("button").click(function(){
        jq("p").text("jQuery is still working!");
    });
});
</script>



If you have a block of jQuery code which uses the $ shortcut and you do not want to change it all, you can pass the $ sign in as a parameter to the ready method. This allows you to access jQuery using $, inside this function - outside of it, you will have to use "jQuery":

Example(3)
$.noConflict();
jQuery(document).ready(function($){
    $("button").click(function(){
        $("p").text("jQuery is still working!");
    });
});



Complete Code For Using NoConflict Method In JQuery
<!DOCTYPE html>
<html>
<head>
    <title>How To Use NoConflict Method In JQuery With Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<style>
    body {
        background: black;
    }
</style>
<body>
<div class="container">
    <br><br><br><br>
    <div class="text-center">
        <h2 id="color" style="color: White;">NoConflict Method In JQuery</h2>
    </div>
    <br>

    <div class="well">
        <h2>This is a paragraph.</h2>
        <button class="btn btn-info">Test jQuery</button>
    </div>

</div>
</body>
</html>

<script>
    $.noConflict();
    jQuery(document).ready(function($){
        $("button").click(function(){
            $("h2").text("jQuery is still working!");
        });
    });
</script>

 

Related Post