In touch with Jquery

In order to test the function of Jquery, you need to down the src of Jquery and some plugins(plugins are very useful when you want to finish some specail funciton).

Now I created a test.html,test.js, that is enough for testing,just add this in your head of Html.

<script src="js/jquery.js" type="text/javascript"></script>
<script src="test.js" type="text/javascript"></script>

 you can call jquery is a framework of Js, also you can call it the lib of Js,because it is composed by many funcitons

 

then:I wrote codes like this :

$(function() {
	// do something here
                $("a").click(
	          function(){
			alert("Welcome to Jquery World!");
		  }
	);
});

 

here $("a") stands for any "<a></a>" of DOM,so if when we click on a href link, there will be a alert "Welcome to Jquery World!";

 

if there are some compose have the specific ID,in Js, we call it by getElementById(),here with jquery we should use $("#id"),like:

<dl id="faq">
		<dt>My bird is healthy. I don't need to go to a vet, do I?</dt>
		<dd>Schedule a "well-bird" checkup. Prevention is the best medicine. Even though the bird might appear outwardly healthy, it may have a low-grade infection or something not so readily apparent. Your bird's health and your peace of mind will be worth it.</dd>
		
		<dt>My bird's leg is being rubbed raw by the leg band. Can I take it off?</dt>
		<dd>No. Don't attempt this, especially if the leg is broken or swollen. The vet will be able
		to remove the band, and deal with whatever injury maybe lurking under the banded area.</dd>
	</dl>

 then we want to create a new

$(function(){
     $("#faq").find("dd").hide().end().find("dt").click(
       		function(){
       		   var answer = $(this).next();	
       		   if(answer.is(':visible')){
       		      answer.slideUp();
       		   }else{
       		      answer.slideDown();
       		   }
       		}
       )
});

 $("#faq") is called the <dl></dl> which id is "faq";

 

there are some plugins are very helpful too.if we want to sort a table ,we add this on the head of html

<script src="js/jquery.tablesorter.js" type="text/javascript"></script>

 

then create a table on html:

<table id="large" cellspacing="0">
<thead>

	<tr>
		<th>Email</th>
		<th>Id</th>
		<th>Phone</th>
		<th>Total</th>
		<th>Ip</th>
		<th>Url</th>
		<th>Time</th>
		<th>ISO Date</th>
		<th>UK Date</th>
	</tr>
</thead>	
<tbody>
	<tr>

		<td>[email protected]</td>
		<td>66672</td>
		<td>941-964-8535</td>
		<td>$2482.79</td>
		<td>172.78.200.124</td>
		<td>http://gmail.com</td>
		<td>15:10</td>
		<td>1988/12/14</td>
		<td>14/12/1988</td>
	</tr>
   
	<tr>
		<td>[email protected]</td>
		<td>35889</td>
		<td>941-964-9543</td>
		<td>$2776.09</td>
		<td>119.232.182.142</td>
		<td>http://www.gmail.com</td>
		<td>3:54</td>
		<td>1974/1/19</td>
		<td>19/1/1974</td>
	</tr>
   
	<tr>
		<td>[email protected]</td>
		<td>60021</td>
		<td>941-964-5617</td>
		<td>$2743.41</td>
		<td>167.209.64.181</td>
		<td>http://www.dotnet.ca</td>
		<td>10:58</td>
		<td>2000/3/25</td>
		<td>25/3/2000</td>

	</tr>
  
   </tbody>
</table>

 then we call it by this code:

$(function(){
   $("#large").tableSorter();
});

 

then we can change the order of this table by clicking on the <thead> of this table;

 

After all ,we can create our plungins too, and you also can use AJAX by Jquery,it is very consicely

,oh, you should download a plugin called "FIREBUG" for debuging your js code, excellent kit of firefox.