Is this how you define a function in jQuery?

Question

Is this how you define a function in jQuery?

$(document).ready( function () { var MyBlah = function($blah) { alert($blah); }; }); 

Now to call the function:

 MyBlah('hello'); 

Answer 1

First of all, your code works and what a valid way to create a function in JavaScript (aside from jQuery), but because you declare a function inside another function (anonymous in this case), "MyBlah" will not be accessible from the global scope.

Here is an example:

 $(document).ready( function () { var MyBlah = function($blah) { alert($blah); }; MyBlah("Hello this works") // Inside the anonymous function we are cool. }); MyBlah("Oops") //This throws a JavaScript error (MyBlah is not a function) 

This is (sometimes) desirable behavior, since we do not pollute the global namespace , so if your function does not need to be called from another part of your code, this is the way to go.

Declaring it outside an anonymous function places it in the global namespace and is accessible to it everywhere.

Finally, $ is not required at the beginning of the variable name, and is sometimes used as a jQuery convention when the variable is an instance of the jQuery object itself (not necessary in this case).

Perhaps you need to create a jQuery plugin, it is very easy and useful, as it will allow you to do something like this:

 $('div#message').myBlah("hello") 

Answer 2

No, you can simply write a function as:

 $(document).ready(function() { MyBlah("hello"); }); function MyBlah(blah) { alert(blah); } 

This calls the MyBlah function in the finished content.

Answer 3

No.

You define functions in exactly the same way as in regular javascript.

 //document ready $(function(){ myBlah(); }) var myBlah = function(blah){ alert(blah); } 

Also: no need for $

Answer 4

You can extend the jQuery prototype and use your function as a jQuery method.

 (function($) { $.fn.MyBlah = function(blah) { $(this).addClass(blah); console.log('blah class added'); }; })(jQuery); jQuery(document).ready(function($) { $('#blahElementId').MyBlah('newClass'); }); 

Additional information on the jQuery prototype extension: http://api.jquery.com/jquery.fn.extend/

Answer 5

 jQuery.fn.extend({ zigzag: function () { var text = $(this).text(); var zigzagText = ''; var toggle = true; //lower/uppper toggle $.each(text, function(i, nome) { zigzagText += (toggle) ? nome.toUpperCase() : nome.toLowerCase(); toggle = (toggle) ? false : true; }); return zigzagText; } }); 

Answer 6

This way you define an anonymous function that is called when the document is ready.