JQuery学习日志2

 JQuery也不是很难，花了一天的时候，基本入门了，以后开发中用到只需要查下文档就可以了。把前几天做的幼儿园学生信息录入界面改成了JQuery的，还加入了一些特效。

在学习的过程中写过很多小实验，不愿意一个一个贴出来了，而且我也没有记录。下面有一个比较实用的——FAQ：

html代码：

   1: <h3>Bird FAQ - click the questions to show the answers</h3>

 

   2: <dl id="faq">

 

   3:     <dt>What shouldn't I do to the bird?</dt>

 

   4:     <dd>Never use oils or lotions which contain oils on your bird. They gunk up the feathers,

 

   5:     and ruin their insulating properties. This means a chilled bird. Never wait out a cat bite--those

 

   6:     require immediate veterinary attention--a bird can die within two days because a cat's mouth is so

 

   7:     filthy and full of bacteria. Don't bother with over-the-counter medication. It really doesn't work,

 

   8:     and in some cases, may upset the delicate bacterial balance in the bird's body, or even worsen the

 

   9:     situation. Never try to treat a fracture at home.</dd>

 

  10:  

 

  11:     <dt>My bird is healthy. I don't need to go to a vet, do I?</dt>

 

  12:     <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>

 

  13:     

 

  14:     <dt>My bird's leg is being rubbed raw by the leg band. Can I take it off?</dt>

 

  15:     <dd>No. Don't attempt this, especially if the leg is broken or swollen. The vet will be able

 

  16:     to remove the band, and deal with whatever injury maybe lurking under the banded area.</dd>

 

  17:  

 

  18:     <dt>How do I pull a broken blood feather?</dt>

 

  19:     <dd>This is probably the most common mishap. The remedy is simple--yank! It's most easily done

 

  20:     with two people. One to restrain the bird and the other to pull the feather. Use pliers, or a

 

  21:     hemostat. Tweezers won't work on primaries. Make certain that the wing bones are firmly supported

 

  22:     or you can break the wing. Clamp onto the feather and give a sharp tug in the direction of the

 

  23:     feather. The feather will come out. Next, apply gentle, direct pressure to the follicle where the

 

  24:     feather was to stop the bleeding. Dab some styptic powder on it, as it will help stop the bleeding

 

  25:     as well. Let the bird rest. Ask your vet or breeder to demonstrate exactly how to pull a blood

 

  26:     feather if you're apprehensive about doing it.</dd>

 

  27: </dl>

 

下面是JQuery代码：

   1: //FAQ

 

   2:     $("#faq>dd").css("display","none");

 

   3:     $("#faq>dt").css("cursor","pointer");

 

   4:     $("#faq>dt").click( function() {

 

   5:         $(this).siblings("dd").each( function() {

 

   6:             $(this).hide();

 

   7:         });

 

   8:         $(this).next("dd:first").toggle();

 

   9:     });

 

 

 

实现的功能就是：开始时所有的答案都是隐藏的，当鼠标移动到问题上时，鼠标变成小手状，点击之后相应的答案显示，而且每次只显示一个问题的答案。