天天看點
傳回

mootools學習摘要

Class（類）

一個JavaScript類（相對于CSS的類），是一個功能可以重複使用的對象。若要更多地了解MooTools類，你可以看看Valerio的這篇簡單介紹的文章（MooTools類——怎樣使用它們 ）。我也同時推薦David Walsh的MooTools類模闆 。

Utilities（實用工具）

實用工具（Utilities）提供了更多精良的選擇邏輯，包括domready事件、可以管理AJAX調用的工具、可以輕松管理cookie的工具，甚至還有”swiff“功能，可以提供JavaScript接口給ActionScript。

FX（效果）

這可能是MooTools最有趣的部分了。通過Fx（效果），你可以建立”Tween“（補間動畫）和”morph“（形變動畫）效果，進而讓你的DOM對象動起來。

  • 在兩個樣式屬性值之間建立一個動畫變形（比如讓一個div平緩地變大） – var myFx = new Fx.Tween(element);
  • 在多個不同的屬性值之間建立一個動畫變形（比如在讓一個div平緩變大的過程中，讓它的邊框越來越初，同時變換它的背景顔色） – var myFx = new Fx.Morph(element);

Request（請求）

包含一些可以輕松處理JavaScript XMLHttpRequest（AJAX）功能的工具。為了減輕整個請求/響應（request/response）帶來的痛苦，Request對象還有一些專門用來處理HTML和JSON對象（JavaScript對象表示法） 的擴充。

.getElements();

.getElements();和.getElement();非常類似，不過它傳回所有符合要求的元素，并組成一個數組。你可以想使用.getElement();方法那樣使用.getElements();。

     
  1.  // 選擇ID為”body_wrap“的元素下面的所有連結       
    2.       
  2.  $     (     'body_wrap'     ).     getElements     (     'a'     );       
    3.           
  3.  // 選擇ID為”body_wrap“的元素下面的所有CSS類名為”special_anchor_class“的子元素       
    4.       
  4.  $     (     'body_wrap'     ).     getElements     (     '.special_anchor_class'     );       
    5.      
         
     
  1.  <div     id     =     "body_wrap"     >       
    2.       
  2.  <a     href     =     "#"     >     anchor     </a>       
    3.       
  3.  <a     href     =     "#"     >     another anchor     </a>       
    4.       
  4.  <a     class     =     "special_anchor_class"     href     =     "#"     >     special anchor     </a>       
    5.       
  5.  <a     class     =     "special_anchor_class"     href     =     "#"     >     another special anchor     </a>       
    6.       
  6.  </div>       
    7.

用運算符包含和排除結果

運算符

MooTools 1.2支援幾種運算符，可以讓你進一步精簡你的選擇操作。你可以在.getElements();中使用這些運算符來包含或者排除特定的結果。MooTools支援4種運算符，每一種都可以用來通過名字（name）選擇一個input元素。

  • = : 等于 
     
  1.  //選擇name為”phone_number“的input元素       
    2.       
  2.  $     (     'body_wrap'     ).     getElements     (     'input[name=phone_number]'     );       
    3.      
         
     
  1.  // 選擇name以”phone“開頭的input元素       
    2.       
  2.  $     (     'body_wrap'     ).     getElements     (     'input[name^=phone]'     );       
    3.
  • $= : 以……結束 
     
  1.  // 選擇name以數字（number）結束的input元素       
    2.       
  2.  $     (     'body_wrap'     ).     getElements     (     'input[name$=number]'     );       
    3.
  • != : 不等于 
     
  1.  // 選擇名字不等于”address“的input元素       
    2.       
  2.  $     (     'body_wrap'     ).     getElements     (     'input[name!=address]'     );       
    3.      
         
     
  1.  <div     id     =     "body_wrap"     >       
    2.       
  2.  <input     name     =     "address"     type     =     "text"     />       
    3.       
  3.  <input     name     =     "phone_number"     type     =     "text"     />     <!-- 上面的所有示例代碼都将選中這個元素 -->       
    4.       
  4.  </div>       
    5.

（Fdream注：input在這裡隻是作為一個例子，你同樣可以使用這種方式選擇其他元素，比如div、a等等 。）

要使用運算符，你必須首先指定元素的類型（比如這裡的input），然後指定你要過濾的屬性（比如這裡的name），再加上你的 運算符，最後選擇你的過濾字元串。

基于元素順序的選擇器

even（偶數選擇）

通過這個簡單的選擇器，你可以選擇序号為偶數的元素。注意： 這個選擇器從0開始計數，是以第一個元素是偶數序的。

     
  1.  // 選擇序号為偶數的div       
    2.       
  2.  $$ ( 'div:even' );       
    3.      
         
     
  1.  <div>     Even     </div>     <!-- 上面的代碼将選中這個元素 -->       
    2.       
  2.  <div>     Odd     </div>       
    3.       
  3.  <div>     Even     </div>     <!-- 上面的代碼将選中這個元素 -->       
    4.       
  4.  <div>     Odd     </div>       
    5.

odd（奇數選擇）

和even一樣，隻不過它選擇序号為奇數的元素。

     
  1.  // 選擇所有序号為奇數的div       
    2.       
  2.  $$ ( 'div:odd' );       
    3.      
         
     
  1.  <div>     Even     </div>       
    2.       
  2.  <div>     Odd     </div>     <!-- 上面的代碼将選中這個元素 -->       
    3.       
  3.  <div>     Even     </div>       
    4.       
  4.  <div>     Odd     </div>     <!-- 上面的代碼将選中這個元素 -->       
    5.

複制一個數組

$A

MooTools提供了一個簡單的方式——通過$A函數來複制一個數組。讓我們像剛才那樣使用變量建立一個數組：

     
  1.  // 建立你的數組變量       
    2.       
  2.  var     myArray      =     $     (     'body_wrap'     ).     getElements     (     'div'     );       
    3.

複制一個數組（建立該數組的副本）：

     
  1.  // 建立一個新的變量名，命名為”myCopy“，然後把”myArray“的副本指派給它       
    2.       
  2.  var     myCopy      =     $A     (     myArray      );       
    3.

基本方法

.get();

這個工具可以讓你擷取元素的屬性（property）。元素的屬性是組成一個HTML元素的各種不同部分，例如src、value、name等等。使用.get();方法非常簡單：

     
  1.  // 下面這行将傳回id為“id_name”的元素的html标記名（div、a、span……）       
    2.       
  2.  $     (     'id_name'     ).     get     (     'tag'     );       
    3.      
         
     
  1.  <div     id     =     "body_wrap"     >       
    2.       
  2.  <span     id     =     "id_name"     >     Element     </span>     <!-- 上面的代碼将傳回“span” -->       
    3.       
  3.  </div>       
    4.

你可以使用.get();方法獲得更多屬性，而不隻是html标記名：

  • id
  • name
  • value
  • href
  • src
  • class（如果有多個CSS類名，則将傳回全部CSS類名）
  • text （一個元素的文本内容）
  • 等等…
Mootools input javascript xmlhttprequest actionscript div
上一篇: Laravel學習筆記之Session源碼解析(下)
下一篇: #2023松山湖論壇#中科融合感覺智能研究院聯合創始人、CTO劉欣：三維掃描成像技術被廣泛用來作為XR/元宇宙，數智孿生

繼續閱讀