Replace "$"(dollar Sign) with "JQuery"

Question

The 1st snippet wasn't working. However, it start working when replacing all $(dollar sign) with jQuery(See 2nd snippet). But i don't really understant why? Can anyone explain this to me? Many thanks!

1st Snippet

jQuery.noConflict();
               $(document).ready(function(){    
                    $("#insideTable > tbody > tr:odd").addClass("odd");
                    $("#insideTable > tbody > tr:not(.odd)").hide();
                    $("#insideTable > tbody > tr:odd").show();
                    $("#insideTable > tbody > tr.odd").click(function(){
                        $(this).next().toggle();
                        $(this).find(".arrow").toggleClass("up");
                    });

                });

2nd Snippet

        jQuery.noConflict();
        jQuery(document).ready(function(){

                jQuery("#insideTable > tbody > tr:odd").addClass("odd");
                jQuery("#insideTable > tbody > tr:not(.odd)").hide();
                jQuery("#insideTable > tbody > tr:odd").show();
                jQuery("#insideTable > tbody > tr.odd").click(function(){
                    jQuery(this).next().toggle();
                    jQuery(this).find(".arrow").toggleClass("up");
                });

            });

Kick Buttowski · Accepted Answer · 2017-09-13 14:47:05Z

This is because jQuery.noConflict() "frees" the "$" from being associated with jQuery. Normally in your code you can use $ as a replacement for "jQuery". If you use noConflict() you can't do that anymore and so you have to replace each "$" with "jQuery"; .

Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $. If we need to use another JavaScript library alongside jQuery, we can return control of $ back to the other library with a call to $.noConflict():

you can also create a totally new alias to use

var myJqueryAlias = jQuery.noConflict();
myJqueryAlias(document).ready(function(){

        myJqueryAlias("#insideTable > tbody > tr:odd").addClass("odd");
        myJqueryAlias("#insideTable > tbody > tr:not(.odd)").hide();
        myJqueryAlias("#insideTable > tbody > tr:odd").show();
        myJqueryAlias("#insideTable > tbody > tr.odd").click(function(){
            myJqueryAlias(this).next().toggle();
            myJqueryAlias(this).find(".arrow").toggleClass("up");
        });

    });

This works, just want to point out that the first argument passed to a ready callback is the jQuery object, so you can do .ready(function($){ and then use $ inside the function, as long as you don't need to use the outer $ for stuff.

shanethehat · Accepted Answer · 2011-07-19 11:26:41Z

14

Calling noConflict() removes the association between the $ and the jQuery function. This is so that you can use another JavaScript library that also shortens to $ without conflicts.

answered Jul 19, 2011 at 11:26

shanethehat

15.6k11 gold badges59 silver badges87 bronze badges

Collectives™ on Stack Overflow

Replace "$"(dollar Sign) with "JQuery"

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related