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:     });

 
 
 
실현된 기능은 시작할 때 모든 답안이 숨겨져 있고 마우스가 문제로 이동할 때 마우스가 작은 손 모양으로 변하며 클릭한 후에 해당하는 답안이 표시되며 매번 한 문제의 답안만 표시된다는 것이다.