Tag Archives: jquery

jQuery Tutorials Part 1

by Jyotheeswara Naidu Malapati

What is JQuery?

   Its a free open source java script library.JQuery is the most popular JavaScript library in use today. JQuery is a free java sript library and it offer a lot of benefits and some of them are given below

What are the benefits offered by JQuery?

  • Provides a Cross browser support.
  • Extract information from webpages is easy (and manipulating page contents )
  • Works on page elements (DOM) and uses CSS techniques.
  • Provides Advanced user interface Elements
  • Provides a more response and modern looking web pages.
  • Provides webpage to look very professional and finally
  • Building Transitions effects on web pages are easier.
  • Reduce a lot of code you write ( simplifies code ) and let you do more stuff on designing.
  • It is extensible too meaning you could use the plug-ins developed by third parties easily.

Downloading and Installing JQuery :

It comes in two version

  • Production version ( compressed version and minifed )

  • Development version

    You use the development version which is big a file, could use it for debugging purpose and the production version is very minifed one, smaller in size and ideal for production use.

Current version of jQuery minified version: Click here to download minified version

Development version of jQuery ( uncompressed):Click here to download development version

    just download and save it your workspace and start using it !!!

Our first JQuery webpage example:

Problem: We want to show an alert message on page load

    Let’s take a look into first plain java script version of code ( without using jQuery ) and then we’ll see how to achieve the same using a jQuery.

    Using plain java script:

function showOnLoadAlert() {
         
            alert("Welcome to CodeDairy JQuery article !");
         }
         window.onload = showOnLoadAlert;
    

    This fill fire once all the components of the page is loaded like images,other content.. but JQuery will fire as an when DOM modle is ready and will not wait for any other content including images to load.

Using JQuery:

we use jQuery document.ready event to achieve the above functionality.
       
       $ ( "document" ). ready ( function () {
       
        alert ( "Welcome to CodeDairy JQuery article ! The page is ready " );
        
       } );
      

   when you have got a multiple functions to be invoked on load, you could just do the above jqeury multiple times whereas in plain java script, you must put all onload methods in a single method which is refered in window.onload event.

   JQuery will call all the on load methods in succession when multiple document.ready events are written.

Here is the complete program of the above example. Run it and have fun !!!

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Welcome to CodeDairy jQuery Tutorial !!!</title>
<!--  Add jquery ( I've used development version ) -->
<script type="text/javascript" src="jquery-1.7.1.js"></script>  
<!-- Let's code to alert a message using jQuery -->
<script type="text/javascript">
          $("document").ready(function() {
        	 alert("Welcome to CodeDairy JQuery article ! The page is ready ");
          });
</script>

</head>
<body>
<!--  body content -->
</body>
</html>
 

>>>
jQuery Tutorials Part2

Thanks for reading my post. please do not hesitate to post your comments or ask any questions below ( or even you find any mistakes too :-) )


jQuery Tutorials part 8

Applying CSS using jQuery


<<<< jQuery Tutorial part 7

   jQuery offers nice functions to work with css to read and set the css properties for page elements easily.

.css( propertyName )

    Gets the value of a css style property for the first matched element.

Sample program to get the css property called ‘background-color’ for a div tag

	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
	<html>
	<head>
	  <style>
	   div { width:50px; height:50px; margin:10px; float:left; }
	  </style>
	  <script src="jquery-1.7.1.js"></script>
	</head>
	<body>


	<div style="background-color:blue;"></div>

	<script>
	$("div").click(function () {
		 alert($(this).css("background-color"));  
	});

	</script>

	</body>
	</html>

css ( propertyName, value )

   This method is used to set one or more CSS properties for the set of matched elements.

A sample program to set the css property called ‘background-color’ to red on click of div tag

	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
	<html>
	<head>
	  <style>
	   div { width:50px; height:50px; margin:10px; float:left; }
	  </style>
	  <script src="jquery-1.7.1.js"></script>
	</head>
	<body>


	<div style="background-color:blue;"></div>

	<script>
	$("div").click(function () {
		 alert($(this).css("background-color"));  
		 $(this).css("background-color","red");
	});

	</script>

	</body>
	</html>


>>>>JQuery Tutorials Part9

Thanks for reading my post. please do not hesitate to post your comments or ask any questions below ( or even you find any mistakes too :-) )