prototypeの中のドル関数の使い方

10910 ワード
プロトタイプ 職場 レジャー
この$はかなり役に立ちます.例から多くのコードを省くことができます.

  
  
  
  
    
   
   
   
   
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
    2. 
   
   
   
   
  2. <html> 
    3. 
   
   
   
   
  3.     <head> 
    4. 
   
   
   
   
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    5. 
   
   
   
   
  5.         <title>Untitled Document</title> 
    6. 
   
   
   
   
  6.         <script src="prototype.js"></script> 
    7. 
   
   
   
   
  7.         <script> 
    8. 
   
   
   
   
  8.             //$$   Javascript  getElementByTagName 
    9. 
   
   
   
   
  9.             function _$$Test(){ 
    10. 
   
   
   
   
  10.                 var _$$ = $$('input'); 
    11. 
   
   
   
   
  11.                 for(i=0;i<_$$.length;i++){ 
    12. 
   
   
   
   
  12.                     alert(_$$[i].value); 
    13. 
   
   
   
   
  13.                 } 
    14. 
   
   
   
   
  14.                  
    15. 
   
   
   
   
  15.                 //$$()                   
    16. 
   
   
   
   
  16.                 var f = $$('div #testForm.field input'); 
    17. 
   
   
   
   
  17.                 var s = ''; 
    18. 
   
   
   
   
  18.                 for(var i=0; i<f.length; i++){ 
    19. 
   
   
   
   
  19.                     s += f[i].value + '/'; 
    20. 
   
   
   
   
  20.                 } 
    21. 
   
   
   
   
  21.                 alert(s); 
    22. 
   
   
   
   
  22.                  
    23. 
   
   
   
   
  23.                 f = $$('div#testForm.field input', 'div#testForm.fieldName'); 
    24. 
   
   
   
   
  24.                 s = ''; 
    25. 
   
   
   
   
  25.                 for(var i=0; i<f.length; i++){ 
    26. 
   
   
   
   
  26.                     s += ( f[i].value ? f[i].value : f[i].innerHTML ) + '/'; 
    27. 
   
   
   
   
  27.                 } 
    28. 
   
   
   
   
  28.                 alert(s); 
    29. 
   
   
   
   
  29.             } 
    30. 
   
   
   
   
  30.         </script> 
    31. 
   
   
   
   
  31.     </head> 
    32. 
   
   
   
   
  32.     <body> 
    33. 
   
   
   
   
  33.         <div id="testForm"> 
    34. 
   
   
   
   
  34.             <div class='field'> 
    35. 
   
   
   
   
  35.                 <span class='fieldName'>User name:</span> 
    36. 
   
   
   
   
  36.                 <input type='text' id='txtName' value='sucre'/> 
    37. 
   
   
   
   
  37.             </div> 
    38. 
   
   
   
   
  38.             <div class='field'> 
    39. 
   
   
   
   
  39.                 <span class='fieldName'>Password:</span> 
    40. 
   
   
   
   
  40.                 <input type='password' id='txtPass' value='secret' /> 
    41. 
   
   
   
   
  41.             </div> 
    42. 
   
   
   
   
  42.             <input type='submit' value='login' /> 
    43. 
   
   
   
   
  43.         </div> 
    44. 
   
   
   
   
  44.         <input type="text" value="   "/> 
    45. 
   
   
   
   
  45.         <input type="hidden" value="   "/> 
    46. 
   
   
   
   
  46.         <input type="radio" value="   "/> 
    47. 
   
   
   
   
  47.         <input type="checkbox" value="   "/> 
    48. 
   
   
   
   
  48.         <input type="button" value="GO" onclick="_$$Test()"/> 
    49. 
   
   
   
   
  49.     </body> 
    50. 
   
   
   
   
  50. </html> 
    51.
Javascriptを再度包装します.いいです.使いやすいです.
親のホームページを殺して、新しいページを開きます.