Jquery in html

June 16th, 2011 | Posted by admin | No Comments

Hi everyone, This post is mainly for very basic jquery beginners. The first problem they find is about integrating jquery in html. jQuery is a lightweight “write less, do more” JavaScript library. So we are going to write less and do a lot with integrating jquery in html.

jquery_scratch

Lets have a look at a very basic html code for a web page.

<html>
	<head>
        </head>
	<body>
		<p>This is another paragraph.</p>
	</body>
</html>

Here we have a simple html page, which contains only a paragraph. Now we will integrate jquery inside the head tag of this html page.

<html>
	<head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        </head>
	<body>
		<p>This is another paragraph.</p>
	</body>
</html>

I have integrated jquery package using the script tag. and src attribute contains the path of jquery package. You can also download the package and use it. Now you can write jquery to provide some animation effects to your web page. Lets say for example,

<html>
	<head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		$("p").click(function(){
		  $("p").hide();
		});
	});
	</script>
        </head>
	<body>
		<p>Click me. I will go away from this website</p>
	</body>
</html>

When we click on the content of p tag(Click me. I will go away from this website), It will be removed. Like this you can do a lot with jquery. Spend some time with it. You will feel the power of jquery. Thank you.

Posted in : Tutorials


Leave a Reply

You must be logged in to post a comment.