JQuery学習ログ2

JQueryも難しくなく、1日かけて基本入門したので、あとはドキュメントを調べるだけで開発中です.先日作った幼稚園児の情報入力画面を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:     });

 
 
 
実現する機能は、最初はすべての答えが隠されていて、マウスが問題に移動すると、マウスが小さな手状になり、クリックすると対応する答えが表示され、毎回1つの問題の答えしか表示されません.