In order to avoid these conflicts, you need to put jQuery in no-conflict mode immediately after it is loaded onto the page and before you attempt to use jQuery in your page.
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
// Do something with jQuery
j("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';
</script>
You'll still be able to use the full function name jQuery as well as the new alias j in the rest of your application. The new alias can be named anything you'd like: jq, $J, awesomeQuery, etc.
If you don't want to define another alternative to the full jQuery function name, then there's still another approach you might try:
Simply add the $ as an argument passed to your jQuery( document ).ready() function. This is most frequently used in the case where you still want the benefits of really concise jQuery code, but don't want to cause conflicts with other libraries.
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>
If you include jQuery before other libraries, you may use jQuery when you do some work with jQuery, but the $ will have the meaning defined in the other library. There is no need to relinquish the $ alias by calling jQuery.noConflict().
<script src="jquery.js"></script>
<script src="prototype.js"></script<
<script>
// Use full jQuery function name to reference jQuery.
jQuery( document ).ready(function() {
jQuery( "div" ).hide();
});
// Use the $ variable as defined in prototype.js
window.onload = function() {
var mainDiv = $( "main" );
};
</script>