How to Include and Use JQuery JavaScript Library on Your Joomla-Based Site
This article will tell about a new kind of JavaScript Library – jQuery and describe how you can use it on your Joomla site.
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.
Get started
To get started, we need a copy of the jQuery library, which we can get from the main download page. The jQuery Starterkit provides some markup and CSS to work with. After downloading and extracting its content we put jquery.js into ..\media\system\js\ folder in the root of your site (all default Joomla labruaries are there). Then open a file you wish to insert code using jQuery JavaScript library.
Calling jQuery
You can call jQuery in one line of the code:
JHTML::_ ( ‘script’, ‘jquery.min.js’ );
If there is another script which is used for a specified component, you can use jQuery in the following way:
$src = JURI::root () . ‘modules/mod_gallery_random/js/';
echo ‘<script type="text/javascript" src="’ . $src . ‘slide.js"></script>';
No-conflict mode
JQuery can work in a special mode (no-conflict). This means that there will no be conflict situations caused by using of this library.
For example, the default Joomla library (MooTools Fx) often acts as a trouble when you use some additional libraries. But this is not bout jQuery!
To create no-conflict mode for jQuery, you should insert the following line into your code:
jQuery.noConflict();
$(‘#id’).val() => jQuery(‘#id’).val()
Working with jQuery
Usually jQuery is included to a web page as one exterior JavaScript-file:
<head>
<script type="text/javascript" src="path/to/jQuery.js"></script>
</head>
You should work with jQuery using $ function. If site contains other JavaScript libraries which use $ as a special symbol, you can use jQuery function (it is the same). This method is preferable.
If you do not wish to create a lengthy code, you can use the following one:
jQuery(function($) {
// Code of the script where jQuery will be included to $
})
Working with jQuery can be divided into two types:
- Getting of jQuery-object with the help of $() function. For example, passing CSS-selector to $() function, you can get jQuery-object of all HTML elements that are under the criteria and then work with them using different methods of jQuery-object.
- Calling of global methods of $ object, for example, easy-to-use iterators for array.
An example of handling several DOM nodes is to call $ function with CSS selector string. This returns jQuery object containing some number of elements of HTML-page. The elements are then processed with jQuery methods. For example:
$("div.test").add("p.quote").addClass("blue").slideDown("slow");
It finds all <div> elements of test class and also all <p> elements of quote class and then adds them all blue class and visually slides them down.
Methods beginning from $ are easy-to-used for processing of global objects. For example:
$.each([1,2,3], function() {
document.write(this + 1);
});
will add 234 to the page.
$.ajax and appropriate functions allow using of AJAX methods. For exaxmple:
$.ajax({
type: "POST",
url: "some.php",
data: {name: 'John', location: 'Boston'},
success: function(msg){
alert( "Data Saved: " + msg );
}
});
In this example, there is a call to some.php script the following parameters: name=John&location=Boston. The received result is issued in a message via alert().
Example of adding click event processor to an element with the help of jQuery:
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});
In this case clicking the <A> element causes calling of alert("Hello world!").
