Using jquery in joomla

Joomla uses mootools by default.
If you want to use another javascript library like jquery in your site....

1. You can use a plugin like SC Jquery and then either add code in the admin panel like:

$("#contactus_reset").click(function() {
$("[rel=error_label]").css("display","none");
});

or write the code inside your template index.php file, under head tag, like:

<script type="text/javascript">
$(function() {
    $(".anyClass").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev"
    });
});
</script>

And better add these lines inside your template index.php file, under head tag to avoid jquery conflicts.
<?php
$document = &JFactory::getDocument();
$document->addScriptDeclaration ( 'jQuery.noConflict();' );
?>

2. There is another way to enable jquery support in your site. Here are the steps i did to enable jquery support in my site:

1. Downloaded and placed jquery in: media/system/js
2. Used jQuery with jQuery.noConflict() method in my template index file under head tag:

$document = &JFactory::getDocument();
$document->addScript($root_url.'media/system/js/jquery.js' );
$document->addScriptDeclaration ( 'jQuery.noConflict();' );

Placed other jquery related files below it:
<script src="plugins/js/jquery.validate.js" type="text/javascript"></script>

3. Under libraries->joomla->html->html, Open a file named behavior.php, find a method named mootools($debug = null). Create another function named jQuery(debug=null) and paste the code as below in the body of the function:

function jQuery($debug = null)
    {
        static $loaded;

        global $mainframe;
        // Only load once
        if ($loaded) {
            return;
        }

        // If no debugging value is set, use the configuration setting
        if ($debug === null) {
            $config = &JFactory::getConfig();
            $debug = $config->getValue('config.debug');
        }

        $konkcheck = strpos (strtolower($_SERVER['HTTP_USER_AGENT']), "konqueror");

        if ($debug || $konkcheck) {
            JHTML::script('jquery.js', 'media/system/js/', false);
        } else {
            if($mainframe->isSite()) {

                JHTML::script('jquery.min.js', 'media/system/js/', false);
            }
            else
            {
                JHTML::script('mootools.js', 'media/system/js/', false);
            }
        }
        $loaded = true;
        return;
    }

4. The jquery.min.js is the minified version of jQuery library whereas the jquery.js is uncompressed version. Remember to put these both files under media->system->js folder.

5. Now to use jQuery in your codes just call JHTML::_(‘behavior.jQuery’) to import jquery into your page.
For example, if you want to enable jquery in all articles, add that line in the file: components\com_content\views\article\tmpl\default.php.
If you want to use jquery validations in the Chrono forms component, add that line in the file: components\com_chronocontact\chronocontact.html.php, just after this code: JHTML::_('behavior.mootools');
And if you dont want to see any jquery errors in the error console window of your firefox in:

a) The search results of the search module, add the below 5 lines in the file: components\com_search\views\search\tmpl\default.php, after:
<?php defined('_JEXEC') or die('Restricted access'); ?>

b) The videos page or upload video page of your site, powered by the hwdvideoshare component, add the below 5 lines in the file: components\com_hwdvideoshare\hwdvideoshare.html.php, after: defined( '_JEXEC' ) ....


<?php
$document = &JFactory::getDocument();
$document->addScript($root_url.'media/system/js/jquery.js' );
$document->addScriptDeclaration ( 'jQuery.noConflict();' );
JHTML::_('behavior.mootools');
JHTML::_('behavior.jQuery');
?>

This is the Reference

Note: I observed that the above 5 lines of code must be modified slightly to get it work in different components of the site, without any conflicts. For example, for the custom component that i developed, i had to omit (comment) the last line (JHTML::_('behavior.jQuery');) in order to get the moomenu (mootools menu) to work properly.
Also i observed that i had to write all the above 5 lines in the controller file of the lyftenbloggie component, instead of the view file, to get the moomenu function properly.
And for the article pages to include jquery, i had to comment the second line and include other lines in: components\com_content\views\article\tmpl\default.php (Anyhow, a jquery file already comes in the source code of the site, with SCJquery plugin)

Note: For using a lightbox in an article to show some gallery images, i observed that the corresponding jquery code can be placed either in the article html code (admin panel) itself, or in the template index page (applies to all pages in the site). See the use of jQuery(), instead of document ready, to avoid jquery conflicts.

<script type="text/javascript">
Ex: jQuery(function($) {
$("#gallery a").lightBox();
});
</script>

Done :)