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>

 3,600 total views,  11 views today


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.