How To 1 : Selecting, Decorating, and Enhancing

Example 1 : Selecting and Adding an Attrribute

The first phase of exploration is being able to select a HTML elements using jQuery. With jQuery it is possible to attach different kinds of attributed into a page or even take away from the page by using "add" or "remove". Below is an example of how to add a "class" to the paragraph element

jQuery Code

$(document).ready(function(){    //starting a new jQuery script onto the document with an Anonymous function
$('#testDiv p:odd').addClass('tClass');    // get all odd paragraph tags inside #TestDiv and insert class tClass
});   //close the function

CSS Style

Now that we have chosen what element to target, ccs can now add some style to it.

#testDiv {
     padding:20px;
     }
     
.tClass 
	font-size:16px;
	font-family:arial;
	color:#FFF;
	background-color:#666;
	padding:10px;
}

HMTL Code Example

<html>
<body>
<p>This is what our example looks like</p>
<p>for every odd paragraph tag , the jQuery inserts the tClass </p>
<p>This is what our example looks like</p>
<p>for every odd paragraph tag , the jQuery inserts the tClass </p>
<p>This is what our example looks like</p>
<p>for every odd paragraph tag , the jQuery inserts the tClass </p>
</html>
</body>

Working Code

This is what our example looks like

for every odd paragraph tag , the jQuery inserts the tClass

This is what our example looks like

for every odd paragraph tag , the jQuery inserts the tClass

This is what our example looks like

for every odd paragraph tag , the jQuery inserts the tClass

Example 2 : Show and Hide Content

In this second example , the paragraph will fade out and in on a click function, this click function will also change the value or name of the button. This example uses CSS, HTML , and jQuery

jQuery Code

$(document).ready(function(){    //starting a new jQuery script onto the document with an Anonymous function
$('#pgraphB').val('Hide Paragraph');//sets the opening state of the button						   
$('#pgraphB').click(function(){       // create a new hover function
	  if($('#pgraph').is(':visible')) {     //check if paragraph is visable
			 $(this).val('Show Paragraph'); 
			 $('#pgraph').fadeOut(2000);   //hides paragraph if visable
			        			  } else {        // else the paragraph fade in and change state of button 
				  $(this).val('Hide Paragraph');
				  $('#pgraph').fadeIn(2000); //show in 2 seconds
				 	  }// close else statement
				  });   // close the else statement
		  }); //close the function

HMTL Code

<html>
<body>
<input type="button" id="pgraphB" value="show paragraph">
<p class="pgraph">Here is the text that is hidden inside of the paragraph attribute with a class name of prgraph</p>
</body>
</html>

The CSS style of the button

#pgraphB {
padding:7px;
background-color:#000;
color:#FF0;
border:1px dashed #FF0;
font-size:18px;}	

Working code

Here is the working sample of what was created

Here is the text that is hidden inside of the paragraph attribute with a class name of pgraph. Here is the text that is hidden inside of the paragraph attribute with a class name of pgraph. Here is the text that is hidden inside of the paragraph attribute with a class name of pgraph . Here is the text that is hidden inside of the paragraph attribute with a class name of pgraph. Here is the text that is hidden inside of the paragraph attribute with a class name of pgraph. Here is the text that is hidden inside of the paragraph attribute with a class name of pgraph.

Example 3 : jQuery not on ?

Now that we have some scripts built, it would be a shame that a user doesn't have java enabled. Here is a simple way to let the user know that java should be enabled.

jQuery code

$(document).ready(function(){ //starting a new jQuery script onto the document with an Anonymous function
		  $('#hideMess').remove();// targets the #hideMess div and removes it if jquery is running
              }); // close the function

Html

<html>
<body>
<div id="hideMess">
Java is disabled on your browser ! Please enable to get full functionality !
</div>
</html>
</body>

CSS

#hideMess {
	font-size:18px;
	font-family:arial;
	color:#000;
	background-color:#FF0;
	padding:10px;
	border:1 px dashed #FF0;
}

Code working (need to disable and enable java in your browser)

Below the user will see the message if java is disabled on the browser. If java isn't disabled the script will be removed.

Java is disabled on your browser ! Please enable java to get full functionality !