jQuery Tutorial

jQuery functions

How to define function in jQuery?

A function in jQuery can be either named or anonymous. function keyword is used to define named or anonymous function.

Named function:

function showMessage(){
   alert("Welcome!");
}

jQuery function example:

<html>
   <head>
      <title>The jQuery Example</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>		
      <script type = "text/javascript">
	function showMessage(){
	  document.write("welcome to 'jQuery!");
	}
        $(document).ready(function(){
          showMessage();
        });
      </script>		
   </head>	
   <body></body>
</html>

Output:

Anonymous function:

Anonymous function is like a normal function but no function name.

var message = function (){
   return "Welcome!";
}

Anonymous function jQuery example:

<html>
   <head>
      <title>The jQuery Example</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>		
      <script type = "text/javascript">
	var message = function (){
		document.write("welcome to 'jQuery!");
	}
        $(document).ready(message);
      </script>		
   </head>	
   <body></body>
</html>

Output:

Anonymous functions are frequently used in JQuery event handlers.

$(document).ready(function(){
   document.write("welcome to 'jQuery'!");
});

jQuery function with arguments

jQuery function can have arguments.

function showMessage(msg){
   alert(msg);
}

jQuery function with args example

<html>
   <head>
      <title>The jQuery Example</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>		
      <script type = "text/javascript">
	function showMessage(msg){
	  document.write("type: " + typeof msg +", args count: " + arguments.length + ", msg: " + msg + "
");
	}
        function showArgs() {
          document.write("type: " + typeof arguments+", args count: " + arguments.length + ", arg[1]: " +  arguments[1] + ", callee: "+ arguments.callee+ "
");
        }
        $(document).ready(function(){
          showMessage("welcome to 'jQuery'!");
	  showMessage(1);
          showMessage(1, 20.5, "welcome to 'jQuery'!");
          showArgs(1, 20.5);
        });
      </script>		
   </head>	
   <body></body>
</html>

Output:

Local and global variables in jQuery

Local Variables

Local variables are visible in the current scope or function only. function parameters and variables inside function are visible only inside the function. local variable has more precedence than global variable.

function ( ) {
   var myVar = "local";   // local variable
   document.write(myVar); 
}

Global Variables

Global variables are visible everywhere in javascript or jquery code.

var globalVar = "global";     // global variable
function ( ) {
   var localVar = "local";   // local variable
   alert(localVar);
}

« Previous Next »

jQuery Programming Examples

Simple Filter HTML Table Rows in jquery

jQuery ui datepicker with disabled date ranges

jQuery ui datepicker change event to submit the form

Getting screen coordinates in jQuery

Getting mouse positions in jQuery

Getting pressed key code in jQuery

Getting multiple elements using tag, id and class in jQuery

Checking element tag in jQuery

Getting element by index in jQuery

Highlights the odd and even rows in different colors in jQuery

Simple Filter HTML Paragraph Tags in jquery

Enable / disable HTML input fields in jQuery

Remove leading and trailing space in text of HTML element using jQuery

jQuery Adding HTML Table Row Dynamically

jQuery Deleting HTML Table Row Dynamically

jQuery Deleting Selected Multiple HTML Table Rows

jQuery Getting Selected Checkbox Values

Update page title using jquery

print objects

jQuery Tutorial