jQuery Examples

Published by Admin on

Table of Contents hide
1. Example : jQuery code to display message.
2. Example : jQuery code to hide the contents of html elements (Element Selector jQuery).
3. Example : jQuery code to show/hide the contents of html elements.
4. Example : jQuery code to show/hide the contents of html elements using single button.
5. Example : jQuery code to display CSS effect on FOCUS and BLUR event with html elements .
6. Example : jQuery code to perform page/form submission process using submit() method.
7. Example : jQuery code to perform Change operation using change() method.
8. Example : jQuery code to perform Keypress operation using keypress() method.
9. Example : jQuery code to perform Keydown/Keyup operation.
Example : jQuery code to display message.
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
    <h5>Hello India</h5>
</body>

</html>
------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        
        <script>
            $(function(){			
                alert("Hello Welcome in India!");
            });
        </script>

    </head>
    <body></body>
</html>
---------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   
    <script>
        $(document).ready(function(){
            //alert("Hello Users");
            $("div").text("Hello Users");
        });
    </script>

</head>
<body>
    <div>The Result is loaded</div>
</body>
</html>
----------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                //alert("Hello Users");
                $("div").text("Hello Users");
            });            
        });
    </script>

</head>
<body>
    <div>The Result will be displayed here</div>
    </br>
    <button type="button">Result Display</button>
</body>
</html>
Example : jQuery code to hide the contents of html elements (Element Selector jQuery).
<!DOCTYPE html>
<html>
   <head>
	
        <script
          src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/
jquery.min.js">   
        </script>
		
	<script>		
		$(document).ready(function(){
		  
		  $("p").click(function(){
			$(this).hide();
		  });
		  
		  $("div").click(function(){
			$(this).hide();
		  });
		  
		  $("h3").click(function(){
			$(this).hide();
		  });
		  
		});
	</script>
		
   </head>
	
   <body>
	<h2>Please click on any message to hide it</h2>
	
	</br></br>
	
	<h3>jquery simple and basic examples first</h3>

	<p>jquery simple and basic examples second</p>
		
	<div>jquery simple and basic examples third</div>
	
	</br>
	
	<div>jquery simple and basic examples fourth</div>		
   </body>
</html>

NB: 'this' keyword is for hiding individual elements such as div, p, heading etc.
--------------------------------------------------------------
<!DOCTYPE html>
<html>
   <head>	
	<script                                                             
           src="https://ajax.googleapis.com/ajax/libs/jquery/
3.5.1/jquery.min.js">   
        </script>
		
	<script>		
		$(document).ready(function(){
		  $("button").click(function(){
                  //$("button").dblclick(function(){
			$("div").hide();
			$("p").hide();
			$("h3").hide();
                        $("p").css("background", "yellow");
                       // $("*").hide();
		  });
		});		
	</script>		
   </head>
	
   <body>
        <h2>Please click on button to hide message</h2>

	<h3>jquery simple and basic examples first</h3>

	<p>jquery simple and basic examples second</p>
		
	<div>jquery simple and basic examples third</div>
        </br>

	<button>Hide the Contents</button>

   </body>
</html>
---------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   
    <script>
        $(document).ready(function(){
            $('input[type="text"]').css("background", "green");   
        });
    </script>

</head>
<body>
    <form>
        <label>Name: <input type="text"></label></br>
        <label>Password: <input type="password"></label></br>
        <input type="submit" value="Submit">
        <input type="reset" value="Clear">

    </form>
</body>
</html>

NB: Save & Run jQuery program simply as java script.
'*' is used to hide all the html elements.
Example : jQuery code to show/hide the contents of html elements.
<!DOCTYPE html>
<html>
   <head>
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">   </script>
		
	<script>		
	   $(document).ready(function(){
	   $("#btn1").click(function(){
		alert("First button is clicked");
		});
	   });


	   $(document).ready(function(){
	   $(".btn2").click(function(){
		alert("Second button is clicked");
		});
	   });			
	</script>
		
   </head>
	
   <body>

	<h3>Message display on Button Click</h3>		
	</br>

	<button id="btn1">First Button</button>
	<button class="btn2">Second Button</button>
   </body>
</html>
--------------------------------------------------------------
<!DOCTYPE html>
<html>
   <head>
	
	<script src="https://ajax.googleapis.com/ajax/libs/
jquery/3.5.1/jquery.min.js"></script>
		
	<script>		
		$(document).ready(function(){
		$("#div1").hover(function(){			
		alert("First job is completed");
		},
		function(){
		alert("Now second job is started");
		}); 
	    });	
	</script>
		
   </head>
	
   <body>	
	</br>

	<div id="div1"><b>Hover on it to display message</B></div>
   </body>
</html>
--------------------------------------------------------------
<!DOCTYPE html>
<html>
   <head>
	
	<script                                                             
           src="https://ajax.googleapis.com/ajax/libs/jquery/
3.5.1/jquery.min.js">   
        </script>
		
	<script>		
		$(document).ready(function(){
		  $("#btn1").click(function(){
			$("div").hide();
                        //$("div").hide(3000);  
			$("p").hide();
			$("h3").hide();
		  });
		});

                $(document).ready(function(){
		  $(".btn2").click(function(){
			$("div").show();
                        //$("div").show(3000);
			$("p").show();
			$("h3").show();
		  });
		});		
	</script>
		
   </head>
	
   <body>

	<h3>jquery simple and basic examples first</h3>

	<p>jquery simple and basic examples second</p>
		
	<div>jquery simple and basic examples third</div>
        </br>

	<button id="btn1">Hide the Contents</button>
	<button class="btn2">Show the Contents</button>
   </body>
</html>
----------------------------------------------------------------
<!DOCTYPE html>
<html>
   <head>
	
	<script
           src="https://ajax.googleapis.com/ajax/libs/jquery/
3.5.1/jquery.min.js">   
        </script>
		
	<script>		
		$(document).ready(function(){
		  $("#btn1").hover(function(){
			$("div").hide();
			$("p").hide();
			$("h3").hide();
		  });
		});

                $(document).ready(function(){
		  $(".btn2").hover(function(){
			$("div").show();
			$("p").show();
			$("h3").show();
		  });
		});
	</script>
		
   </head>
	
   <body>

	<h3>jquery simple and basic examples first</h3>

	<p>jquery simple and basic examples second</p>
		
	<div>jquery simple and basic examples third</div>
        </br>

	<button id="btn1">Hide the Contents</button>
	<button class="btn2">Show the Contents</button>
   </body>
</html>
----------------------------------------------------------------
<!DOCTYPE html>
<html>
   <head>
	
	<script
           src="https://ajax.googleapis.com/ajax/libs/jquery/
3.5.1/jquery.min.js">   
        </script>
		
	<script>		
		$(document).ready(function(){
		  $("#btn1").click(function(){
		     $("div").hide("slow",function(){
			alert("The div data is now hidden");
			});
		  }); 

		  /*$("#btn1").click("slow",function(){
		     $("div").hide(function(){
		     alert("The div data is now hidden");
		     });
		  }); */
		  
		});
	</script>
		
   </head>
	
   <body>
	<div>jquery simple and basic examples third</div>
        </br>

	<button id="btn1">Hide the Contents</button>
	
   </body>
</html>
Example : jQuery code to show/hide the contents of html elements using single button.
<!DOCTYPE html>
<html>
   <head>	
      <script      
           src="https://ajax.googleapis.com/ajax/libs/jquery/
3.5.1/jquery.min.js">   
      </script>
		
      <script>		
		$(document).ready(function(){
		  $("#btn1").click(function(){
			$("div").toggle();
			$("p").toggle();
			$("h3").toggle();
                        //$("div,p,h3").toggle();
		  });
		});       
       </script>		
   </head>
	
   <body>

	<h3>jquery simple and basic examples first</h3>

	<p>jquery simple and basic examples second</p>
		
	<div>jquery simple and basic examples third</div>
        </br>

	<button id="btn1">Hide/Show the Contents</button>	
   </body>
</html>
--------------------------------------------------------------
<!DOCTYPE html>
<html>
   <head>	
	<script                                                             
          src="https://ajax.googleapis.com/ajax/libs/jquery/
3.5.1/jquery.min.js">   
        </script>
		
	<script>		
		$(document).ready(function(){
		  $("#btn1").click(function(){
			$("#div3").toggle();			
			$("p").toggle();
			$("#head3").toggle();
                        //$("#div3,p,#head3").toggle();
		  });
		});
	</script>
		
   </head>
	
   <body>
	<h3 id="head3">jquery simple and basic examples first</h3>

	<p>jquery simple and basic examples second</p>
		
	<div id="div3">jquery simple and basic examples third     
        </div>
	
	<div id="div4">jquery simple and basic examples fourth 
        </div>
	
        </br>
	<button id="btn1">Hide/Show the Contents</button>	
   </body>
</html>
---------------------------------------------------------------
<!DOCTYPE html>
<html>
   <head>	
	<script                                                             
          src="https://ajax.googleapis.com/ajax/libs/jquery/
3.5.1/jquery.min.js">   
        </script>
		
	<script>		
		$(document).ready(function(){
		  $("#btn1").click(function(){
			$("#div3").toggle();			
			$("#p1").toggle();
			$("#head3").toggle();
                        //$("#div3,#p1,#head3").toggle();
		  });
		});
	</script>
		
   </head>
	
   <body>
	<h3 id="head3">jquery simple and basic examples first</h3>

	<p id="p1">jquery simple and basic examples second</p>
		
	<div id="div3">jquery simple and basic examples third     
        </div>
	
	<div id="div4">jquery simple and basic examples fourth 
        </div>
	
        </br>
	<button id="btn1">Hide/Show the Contents</button>	
   </body>
</html>

NB : $(".div3,.p1,.head3").toggle(); is also possible for class selector jQuery like id selector.
------------------------------------------------------------
<!DOCTYPE html>
<html>
   <head>	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/
3.5.1/jquery.min.js"></script>
		
	<script>		
		$(document).ready(function(){
		  $("#btn1").click(function(){
		  $("#div3,p,#head3,.div4").toggle();		
		  });
		});
	</script>
		
   </head>
	
   <body>
	<h3 id="head3">jquery simple and basic examples first</h3>

	<p>jquery simple and basic examples second</p>
		
	<div id="div3">jquery simple and basic examples third     
        </div>
	
	<div class="div4">jquery simple and basic examples fourth 
        </div>
	
        </br>
	<button id="btn1">Hide/Show the Contents</button>	
   </body>
</html>
Example : jQuery code to display CSS effect on FOCUS and BLUR event with html elements .
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   
    <script>
        $(document).ready(function(){
            $("h4").css("color", "red");
            // $("h4").css("color", "#147acd");
        });
    </script>

</head>
<body>
    <h4>Codershelpline</h4>
</body>
</html>
--------------------------------------------------------------
<!DOCTYPE html>
   <html>
      <head>
         <script src="https://ajax.googleapis.com/ajax/libs/
jquery/3.5.1/jquery.min.js">
         </script>
         <script>
            $(document).ready(function(){
            $("input").focus(function(){
               $(this).css("background-color", "red");
               $(this).css("color", "white");
            });
            $("input").blur(function(){
               $(this).css("background-color", "yellow");
            });
          });
        </script>
    </head>
    <body>

       Name : <input type="text"> <br>
       Address : <input type="text">
    </body>
</html>
Example : jQuery code to perform page/form submission process using submit() method.
<!DOCTYPE html>
<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/
3.5.1/jquery.min.js">  
      </script>
      
      <script>
         $(document).ready(function(){
         $("form").submit(function(){
            alert("Page is submitted");
         });
      });
     </script>
   </head>

   <body>

      <h2>Page/Form Submission through jQuery</h2>
      <form>
         Name: <input type="text"><br>
         Address: <input type="text">
         <br><br>
         <input type="submit" value="Submit">
      </form>
    </body>
</html>
Example : jQuery code to perform Change operation using change() method.
<!DOCTYPE html>
<html>
	<head>
	   <script src="https://ajax.googleapis.com/ajax/libs/
jquery/3.5.1/jquery.min.js">      
           </script>
		
	   <script>
		$(document).ready(function(){
	        $("input").change(function(){
		   alert("Input value is Changed in the text box");
	        });
	     });
	   </script>
	</head>
	
	<body>
	   <h2>Display of Change Event through jQuery</h2>
	
		<form>
		   Name: <input type="text"><br><br>		
		   <input type="submit" value="Submit">	
		</form>
	</body>
</html>
NB : change() is applicable mainly for text box, text area, combo box etc.
Example : jQuery code to perform Keypress operation using keypress() method.
<!DOCTYPE html>
<html>
	<head>
	    <script src="https://ajax.googleapis.com/ajax/libs
/jquery/3.5.1/jquery.min.js"></script>
		
	    <script>
		var count=0;
		$(document).ready(function(){
		$("input").keypress(function(){
		$("span").text(count = count+1);
		   });
		});
	    </script>
	</head>
	
	<body>
	   <h2>Display of Keypress Event through jQuery</h2>
	
	   <form>
		Name: <input type="text"><br><br>		
		<div>The entered characters in the textbox is =    <span>0</span></div>			
	   </form>
	</body>
</html>
Example : jQuery code to perform Keydown/Keyup operation.
<!DOCTYPE html>
<html>
	<head>
	    <script src="https://ajax.googleapis.com/ajax/libs
/jquery/3.5.1/jquery.min.js"></script>
		
	    <script>
		
		$(document).ready(function(){
		$("input").keydown(function(){
		   $("input").css("background-color", "yellow");
		   });
		   
		$("input").keyup(function(){
		   $("input").css("background-color", "white");
		   });
		});
	     </script>
	</head>
	
	<body>
	   <h2>Display of Keypress Event through jQuery</h2>
	
	   <form>
		Name: <input type="text"><br><br>		
		<div>The entered characters in the textbox is =    <span>0</span></div>			
	   </form>
	</body>
</html>

Loading

Categories: Scripting Languages

0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Posts

AJS

Routing in AJS

Introduction of Routing in AJS The concept of Routing in AJS is done using ngRoute module helps us to navigate to different pages in our application, but remaining with SPA (Single Page Application), with no Read more…

AJS

Animations in AJS

Introduction of Animations in AJS Animations in AJS can breathe life into our web application by adding fluidity and visual appeal to various components. AngularJS animations are defined using CSS classes and JavaScript code. We Read more…

CSS

Login Page using CSS

Example: A standard Login page using CSS and HTML.