Understanding concept of plugin - $ / jQuery is not defined

Question

I wrote one plugin with following syntax:

(function($){
 $.fn.samplePlugin = function() {
    return this.each(function() {
    //My logic here
    });
 };
})(jQuery);

Then i called on load as

 $(document).ready(function(){
    $('#sample').samplePlugin();
});

Now i have these two errors in my console:

ReferenceError: jQuery is not defined
ReferenceError: $ is not defined

Can you please tell me what i'm missing and what should be the flow of usage of $ annotation when u create or include plugins?

Thanks,

Answer 1

在插件之前包含jQuery。

Answer 2

(1) Check if you have correctly included the jquery lib. in your code before calling your plugin. (2) If you are on chrome to verify if jquery file is downloaded, open developer tools[shortcut F12 in windows] and switch to resources tab. See if jquery file is downloaded under scripts in your page resources.

Answer 3

write make sure jquery file is being loaded properly

If you are using jQuery UI library then please ensure that order is correct. You first need to include reference of jQuery library and after that jQuery UI library.

Answer 4

Have you included jQuery above your function?

If yes then use

$= jQuery.noConflict();

above calling your function.

Answer 5

var jq = document.createElement('script');
jq.src = "//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);

jq.onload = procede;//make sure you don't type parenthesis

//i.e. 'procede()' runs function instantly
//     'procede' gives it a function to run when it's ready

...

function procede()
{
//jQuery commands are loaded (do your magic)


}