How to use noConflict and $ in same page

Question

I want use noConflict and $ in same page

<p>This is a paragraph.</p>
<h1>hello</h1>
<input type="button" id="=mybtn2" value="jq" onclick="myfun2();" />
<input type="button" id="mybtn" value="$" onclick="myfun();" />

var jq = $.noConflict();

function myfun() {
    $("p").text("This is p tag with $");
}

function myfun2() {
    jq("h1").text("his is a header with jq");
}

Read here http://www.tutorialspoint.com/jquery/jquery-noconflict.htm and you will get your answer — Leo the lion, Dec 01 '15 at 11:24
take a look at http://stackoverflow.com/questions/3188262/jquery-noconflict — vijayP, Dec 01 '15 at 11:28

score 0 · Accepted Answer · answered Dec 01 '15 at 11:29

jQuery.noConflict() is only for using two different versions of jQuery or loading two different libraries using $. Good example is:

<script src="jquery-1.9.1.js"></script>
<script>
    jq = jQuery.noConflict();
</script>
<script src="jquery-1.11.3.js"></script>
<script>
    console.log(jq.fn.jquery);      // 1.9.1
    console.log($.fn.jquery);       // 1.11.3
    console.log(jQuery.fn.jquery);  // 1.11.3
</script>

The usecase I was talking is, some plugins require older versions, say, 1.9.1 and a few require the newer versions. In that case, you can use the noConflict to load the old ones and new ones in the same page.

See the better use-case here:

<script src="jquery-1.9.1.js"></script>
<script src="old-plugin.js"></script>
<script>
    $(".old-plugin-holder").oldPlugin();
    jq = jQuery.noConflict();
</script>
<script src="jquery-1.11.3.js"></script>
<script src="new-plugin.js"></script>
<script>
    console.log(jq.fn.jquery);      // 1.9.1
    console.log($.fn.jquery);       // 1.11.3
    console.log(jQuery.fn.jquery);  // 1.11.3

    // Initialization
    jq(".old-plugin-holder").oldPlugin(); // Runs using jQuery 1.9.1
    $(".new-plugin-holder").newPlugin();  // Runs using jQuery 1.11.3
</script>

How to use noConflict and $ in same page

1 Answers1