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

Answer 1

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