אלמנטים ב-MooTools

במאמר הקודם למדנו על DOM ready וסלקטור ראשון ב-MooTools. במאמר הזה אנו נמשיך ללמוד על אלמנט ה-DOM של MooTools, על פונקצית ה-$ וה-$$.

פונקצית $ – המשך

במאמר הקודם הראיתי איך להוסיף אירוע לאלמנט DOM מסוים:

 
 
window.addEvent('domready', function() {
 
    $('myElement').addEvent('click', function(){
    alert('clicked!');
    });
 
});
 

חשוב להבין שפונקצית $ היא לא סתם פונקציה. היא פונקציה שלוקחת את האלמנט שלנו (בדוגמה שלנו אלמנט עם id של myElement) והופכת אותו ליורש לאלמנט של MooTools ובכך נותנת לו מתודות רבות ושימושיות (שנעבור עליהן במאמרים הבאים). כך למשל, האלמנט ה-DOMי הפשוט myElement הופך במחי $ לאלמנט שיש לו מתודות רבות נוספות שבהן אני אוכל להשתמש.

ה-$ לא משמש אותי רק לבחור אלמנטים לפי ה-id שלהם אלא גם משמש אותי במתן מתודות של MooTools לכל אלמנט. כך למשל:

 
 
var div = document.getElementById('myElement');
div = $(div); //The element with all the Element methods applied.
 

לכאורה כבר 'בחרנו' את myElement באמצעות פקודת ה-JavaScript המוכרת של getElementById. אך אם אני רוצה להשתמש במתודות של MooTools, אני צריך לבצע extend ל-myElement ואת זה אני עושה באמצעות ה-$. ה-$ משמש אותנו להורשה של אלמנט יחיד. מה קורה כשאני צריך להוריש לכמה אלמנטים? בשביל זה יש את $$

פונקצית $$

עם $ השתמשנו להוריש תכונות של אובייקט MooTools לאלמנט יחיד כמו אלמנט ה-div שה-id שלו הוא myElement (בהגדרה id הוא חד חד ערכי). אבל אם אנו רוצים לעשות extend למספר אלמנטים? כמו למשל כל ה-div שיש להם class בשם myClass או כל הפסקאות (p) בתוך המסמך? או אפילו מערך של אלמנטים שונים שקיבלנו ממקום כלשהו? בדיוק בשביל זה יש לנו את $$. עם $$ אני יכול לבצע הורשה לכמה אלמנטים שאני רוצה. כך אני יכול גם להשתמש בסלקטורים של CSS. בואו ונניח שני divים עם class זהה:

 
 
<div class="myClass">Click me! I am div</div>
<div class="myClass">Click me also! I am another div</div>
 

אם אני רוצה להצמיד אירוע (addEvent) לשניהם, אני לא יכול להשתמש ב-$, כיוון שמדובר בכמה אלמנטים, לפיכך אני אשתמש ב-$$:

 
 
window.addEvent('domready', function() {
    $$('.myClass').addEvent('click', function(){
    	alert('clicked!');	
    });
});
 

הסלקטור שהשתמשתי בו הוא סלקטור של CSS של class וכולל את כל האלמנטים שיש להם class בשם myClass. והנה הדוגמא המיוחלת:

באופן דומה, אני יכול להשתמש בסלקטור שכולל רק את שם האלמנט, למשל:

 
 
window.addEvent('domready', function() {
    $$('em').addEvent('click', function(){
    	alert('clicked!');	
    });
});
 

בדוגמא הזו, בחרתי את כל האלמנטים של em שנמצאים בדף (em זה קיצור של emphasized, מי שלא מכיר את התגית הזו מוזמן לבקר במאמר על תגיות סמנטיות).

אני יכול גם לבחור מספר אלמנטים לפי סלקטורים שונים:

 
 
$$(myelement1, myelement2, 'a', '#myid, #myid2, #myid3', document.getElementsByTagName('div'));

 

כאן אני מבצע הורשה למגוון אלמנטים שונים שאותם אני בוחר לפי מגוון שיטות, אחרי הפונקציה הזו, לכל אלמנט ואלמנט יהיו את המתודות של אלמנט MooTools.

סלקטורים ב-getElement, getElements

אני יכול לעדן עוד ועוד את הבחירה שלי באמצעות שתי מתודות שיש ל-element. הראשונה בוחרת אלמנט אחד (את הראשון אם יש כמה) והשניה מחזירה לי מערך של כל האלמנטים.

הכל ברור עם דוגמא: נניח ויש לי אלמנט div עם id בשם myFormDiv ובתוכו יש שני input:

 
 
<div id="myFormDiv">
  <input name="dialog" type="text" />
  <input name="costumerName" type="text" />
</div>
 

נניח שאני רוצה להגיע ל-input שתכונת ה-name שלו מתחילה ב-dia, אני יכול להשתמש ב-getElement יחד עם סלקטור על מנת לקבל את האלמנט הזה ולהצמיד לו אירוע:

 
 
window.addEvent('domready', function() {
    $$('myFormDiv').getElement('input[name=dialog]').addEvent('click', function(){
    	alert('I Was clicked!');	
    });
});
 

והנה הדוגמא (לחצו על הראשון):

אותו input[name=dialog] שיש בתוך ה-getElement אחראי לבחירת ה-input שיש לו name בשם dialog. כמובן שלא חייבים להשתמש בתכונת name אלא בכל תכונה שבא לנו – href, class, rel וכו'.

אנחנו גם לא חייבים להשתמש ב'=' אלא בווריאציות שלו:

• '*=': מכיל
• '^=' : מתחיל ב
• '$=' : נגמר ב
• '!=' : לא שווה
• '~=' : נמצא בתוך רשימה שמופרדת ברווחים
• '|=' : נמצא בתוך רשימה שמופרדת ב'-' מקף

כך למשל, אני אשתמש ב:

 
 
window.addEvent('domready', function() {
    $$('myFormDiv').getElement('input[name$=Name]').addEvent('click', function(){
    	alert('I Was clicked!');	
    });
});
 

כדי לבחור input שיש לו name שנגמר ב-Name (ונמצא כמובן בתוך myFormDiv).

ישנם עוד סלקטורים מעניינים שעליהם נדבר במאמר הבא על סלקטורים ב-MooTools.