JQuery First Project

From CoderLearner
Jump to: navigation, search

jQuery First Project

This project demonstrates how to use jQuery to interact with HTML page.

Syntax

<script language="javascript">
	$(document).ready(function(){
		// your code
	});
</script>

Example 1

In this example, we assign the Hello World! to the <p> element.

<!DOCTYPE html>
<html>
   <head>
      <title>First Project</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <script 
         type="text/javascript" 
         src="/lib/jquery-1.7.2.min.js">				 
      </script>
      <script language="javascript">
         $(document).ready(function(){
            $("div").html("Hello World!");
         });
      </script>
   </head>
   <body>
      <div>TODO write content</div>
   </body>
</html>

Example 2

<!DOCTYPE html>
<html>
   <head>
      <title>First Project</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <script 
         type="text/javascript" 
         src="/lib/jquery-1.7.2.min.js">				 
      </script>
      <script language="javascript">
         $(document).ready(function(){
            $('#submit_it').click(function(){
               var say = $('input[name="say"]').val();
               $('#content').html(say);
               return false;
            });
         });
      </script>
   </head>
   <body>
      <div id="content"></div>
      <form>
         <input type="text" name="say" size="30" maxlength="40"/>
         <input type="submit" id="submit_it" value="Say it"/>
      </form>
   </body>
</html>

Try It

Note

You need to make sure that you have correctly included the jQuery library on the page header before you can test this example.

<seo metagenerator="jquery tutorial" title="Jquery/Ajax" metakeywords="jquery greater,jquery gt, jquery lt, less then, odd jquery,jquery find element, even jquery,jquery event, jquery mouse click, jquery double click, jquery hover, jquery string, jquery array, jquery button, jquery attriubtes" metadescription="jquery button, jquery attriubte, jquery example, jquery tutorial, jquery sample"/>