Why I must use jQuery definition instead of $ ?!

Question

I'm a newbie in jQuery...

I've used one jQuery plugin (Actually SimpleModal Plugin) in my page. It didn't work until I replace $ with jQuery!

$(document).ready(function() {    -->    jQuery(document).ready(function() {

It is working now, but I still have a problem! I want to close this modal window by click on my cancel button on the page. In the manual of SimpleModal have been said: "you can programmatically close the currently opened dialog by calling $.modal.close();" but it doesn't work for me. I replaced the "$" with "jQuery" but doesn't work.

I want to know why I must use jQuery definition?! and what I must do in this situation?!

P.S. This code worked properly when clicking the button:

<script type="text/javascript" language="javascript">
    jQuery(document).ready(function() {
        jQuery('#cancelID').click(function() {
            alert ("test");
        });
    });
</script>

This code doesn't proper action:

<script type="text/javascript" language="javascript">
    jQuery(document).ready(function() {
        jQuery('#cancelID').click(function() {
            $.modal.close();
        });
    });
</script>

Thanks for your time and helping others.

Answer 1

In this case you still call it as a property on the jQuery object, like this:

jQuery(document).ready(function() {
    jQuery('#cancelID').click(function() {
        jQuery.modal.close();
    });
});

Or use $ inside the ready function (it's passed as the first parameter) like this:

jQuery(function($) {
    $('#cancelID').click(function() {
        $.modal.close();
    });
});

As for why doesn't $ just work? Look in your code for jQuery.noConflict() or $.noConflict(). This function releases control of the $ so it's no longer the same as jQuery, usually this is for other libraries to have control of it, Prototype for example.

Answer 2

One potentially useful trick I found was, you can surround your $-using jQuery code with

(function($){

...

})(jQuery)

And all your $ signs will work again, without any need to change them individually to "jQuery".

Answer 3

You should know the following:

1. jQuery defines only one global (document/window level) variable: $
2. Other libraries might be using the $ global variable (example: Prototype)
3. Thus, if you're using another JS library along with jQuery, jQuery plays it nicely by offering the noConflict function. This function basically re-assigns the value of $ to the other library and use the jQuery keyword instead.
4. jQuery plugins already use the jQuery keyword, assuming that you might be using other libraries.