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

Jquery

Jquery Problem Overview


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");
                });

            });

Jquery Solutions


Solution 1 - Jquery

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");
        });

    });

Solution 2 - Jquery

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAcubiView Question on Stackoverflow
Solution 1 - JqueryNicola PeluchettiView Answer on Stackoverflow
Solution 2 - JqueryshanethehatView Answer on Stackoverflow