class_01: 기본 선택기 |zend 실험실 jquery 시리즈 강좌

12345 단어 JavaScriptjquery직장레저
class_01: 기본 선택기 |zend 실험실 jquery 시리즈 강좌 jquery는 강력한 자바스크립트 프레임워크입니다. zend 실험실는 부정기적으로 여러분에게 jquery에 관한 시리즈 강좌를 쓰기로 결정했습니다. 입문부터 정통까지 모든 것은 조작에서 출발하여 모든 원본을 휴대하여 여러분의 학습을 편리하게 합니다.zend실험실당신과 함께 진보하기를 기대합니다.

  
  
  
  
    
   
   
   
   
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
    2. 
   
   
   
   
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    3. 
   
   
   
   
  3. <html xmlns="http://www.w3.org/1999/xhtml"> 
    4. 
   
   
   
   
  4. <head> 
    5. 
   
   
   
   
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    6. 
   
   
   
   
  6. <title>class_01:     |zend   jquery    </title> 
    7. 
   
   
   
   
  7. <script type="text/javascript" src="lib/jquery-1.4.min.js"></script> 
    8. 
   
   
   
   
  8. <script type='text/javascript'> 
    9. 
   
   
   
   
  9. /** 
    10. 
   
   
   
   
  10.  *     jquery       ，     .         dom  ， 
    11. 
   
   
   
   
  11.  *       .remove()  ，         ，         ; 
    12. 
   
   
   
   
  12.  */ 
    13. 
   
   
   
   
  13. /** 
    14. 
   
   
   
   
  14.  *    jquery  ,    ，    css    ，        。 
    15. 
   
   
   
   
  15.  *          dom,             。         
    16. 
   
   
   
   
  16.  *  red  css   dom,     red      ，  item     
    17. 
   
   
   
   
  17.  *      。 
    18. 
   
   
   
   
  18.  */ 
    19. 
   
   
   
   
  19.  function delRed(){ 
    20. 
   
   
   
   
  20.    $('.red').remove(); 
    21. 
   
   
   
   
  21.  } 
    22. 
   
   
   
   
  22. /** 
    23. 
   
   
   
   
  23.  *    jquery  ，id   ，      id    id ，     
    24. 
   
   
   
   
  24.  *     id="01"   dom，       ，            
    25. 
   
   
   
   
  25.  *      。 
    26. 
   
   
   
   
  26.  */ 
    27. 
   
   
   
   
  27. function delbyId(){ 
    28. 
   
   
   
   
  28.   $('#02').remove(); 
    29. 
   
   
   
   
  29. } 
    30. 
   
   
   
   
  30. /** 
    31. 
   
   
   
   
  31.  *    jquery  ，     ，           ，      
    32. 
   
   
   
   
  32.  * html  ，  html   , ul,li,div,body          。 
    33. 
   
   
   
   
  33.  *        body,div    。 
    34. 
   
   
   
   
  34.  */ 
    35. 
   
   
   
   
  35. function delSpan(){ 
    36. 
   
   
   
   
  36.   $('span').remove(); 
    37. 
   
   
   
   
  37. } 
    38. 
   
   
   
   
  38.  
    39. 
   
   
   
   
  39. </script> 
    40. 
   
   
   
   
  40. <style type="text/css"> 
    41. 
   
   
   
   
  41.   body,html{margin:0;padding:10px;height:100%;font-size:12px;line-height:25px;} 
    42. 
   
   
   
   
  42.   .item{background:#ffc;width:500px;height:20px;border:1px dashed #800080;margin-top:15px;padding:3px 15px;display:block;} 
    43. 
   
   
   
   
  43.   .red{color:red;} 
    44. 
   
   
   
   
  44.   .green{color:green;} 
    45. 
   
   
   
   
  45.   .blue{color:blue;} 
    46. 
   
   
   
   
  46.   .assert{background:#ffc;width:80%;border:1px solid #800080;padding:10px;} 
    47. 
   
   
   
   
  47. </style> 
    48. 
   
   
   
   
  48. </head> 
    49. 
   
   
   
   
  49. <body> 
    50. 
   
   
   
   
  50. <div class="assert"><strong>    </strong>：          ，           ，       ，</br> 
    51. 
   
   
   
   
  51.       ，           html   ，      <strong>lib</strong>   </br> 
    52. 
   
   
   
   
  52.    ：jquery-1.4.min.js      。               ——<a href="http://zendlab.com" target="_blank"> 
    53. 
   
   
   
   
  53. zend   ，  </a>。 
    54. 
   
   
   
   
  54. </div> 
    55. 
   
   
   
   
  55. <div id="01" class="item red" onclick="delRed();">  div     item red      ： $('.red').remove();</div> 
    56. 
   
   
   
   
  56. <div id="02" class="item green" onclick="delbyId();">  div     item green      ：$('#02').remove();</div> 
    57. 
   
   
   
   
  57. <div class="item blue">  div     item green</div> 
    58. 
   
   
   
   
  58. <div class="item">  div     item</div> 
    59. 
   
   
   
   
  59. <div class="item">  div     item</div> 
    60. 
   
   
   
   
  60. <div class="item">  div     item</div> 
    61. 
   
   
   
   
  61. <div class="item">  div     item</div> 
    62. 
   
   
   
   
  62. <span class="item" onclick="delSpan();">  span     item      ：$('span').remove();</span> 
    63. 
   
   
   
   
  63. </body> 
    64. 
   
   
   
   
  64. </html> 
    65.

출처:http://zendlab.com
jquery ui 원본 분석
jquery에서 each,on의 실현

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage