אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » מדריכים » MooTools » אלמנטים ב-MooTools

אלמנטים ב-MooTools

רן בר-זיק מאי 5, 2010 7:23 am אין תגובות

שימוש בפונקציות $ ו-$$ על מנת להוריש תכונות לאלמנטים ב-MooTools

אזהרה: אחוז השימוש ב-MooTools ירדו דרמטית ועדיף שלא להשתמש בו. אם אתם מחפשים ספרית JavaScript - שווה לכם לבדוק את jQuery במקום
כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
אזהרה: אחוז השימוש ב-MooTools ירדו דרמטית ועדיף שלא להשתמש בו. אם אתם מחפשים ספרית JavaScript - שווה לכם לבדוק את jQuery במקום

במאמר הקודם למדנו על 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. והנה הדוגמא המיוחלת:

Click me! I am div
Click me also! I am another div

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

 
 
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.

אזהרה: אחוז השימוש ב-MooTools ירדו דרמטית ועדיף שלא להשתמש בו. אם אתם מחפשים ספרית JavaScript - שווה לכם לבדוק את jQuery במקום
כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
»MooTools – מבוא
»סלקטורים ב-MooTools
MooTools
ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד