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>devo@flexomat.com</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>henry@mountdev.net</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>christian@reno.gov</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.