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

מתודות של אלמנט ב-MooTools: חלק שני

רן בר-זיק יוני 2, 2010 4:40 pm אין תגובות

חלקו השני של ההסבר המקיף על המתודות של אובייקט MooTools Element

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

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

מתודת grab

במאמר הקודם למדנו על מתודת inject שבאמצעותה אנו מכניסים אלמנט של MooTools ל-DOM (וזה לא משנה אם מדובר באלמנט קיים או אלמנט שלקחנו מה-DOM באמצעות selector). מתודת grab עושה בדיוק את אותו הדבר, רק שפה אנו המתודה היא של האלמנט שמקבל את האלמנט השני לתוכו.

בדוגמא אני אצור אלמנט חדש מסוג anchor ואשתמש במתודת grab של אלמנט myDiv כדי להכניס לתוך myDiv את ה-anhcor שלי.

ראשית, יצירת ה-anchor, אין כאן שום דבר שאנחנו לא מכירים:


var myAnchor = new Element('a', {
	'href': 'https://internet-israel.com',
	'class': 'myClass',
	'html': 'I am new link, click or mouse over me!',
	'styles': {
		'display': 'block',
		'border': '1px solid black'
		}
	}
});

שנית, ה-grab. שימו לב שמדובר במתודה של myDiv. ראשית אבחר אותו עם הסלקטור (כדי שיירש את אלמנט ה-MooTools) ושנית אפעיל את מתודת ה-grab. המתודה מקבלת שני ארגומנטים – הראשון הוא האלמנט שאנו רוצים להכניס, והשני הוא המיקום של האלמנטים ביחס לילדים שקיימים כבר. הוא יכול להיות top או bottom:


$('myDiv').grab(myAnchor, 'bottom');

פשוט ביותר, בואו ונראה את זה עובד:

זהו דיב חביב שה-id שלו הוא myDiv

כל לחיצה על הכפתור גורמת ל-myDiv לבצע grab לאלמנט שיצרתי. הקוד המלא, כולל האירוע שהצמדתי לכפתור, נראה כך:


var myAnchor = new Element('a', {
	'href': 'https://internet-israel.com',
	'class': 'myClass',
	'html': 'I am new link, click or mouse over me!',
	'styles': {
		'display': 'block',
		'border': '1px solid black'
		}
	}
});

function addInput() {
	$('myDiv').grab(myAnchor, 'bottom');
}

window.addEvent('domready', function() {
    $('myButton').addEvent('click', addInput);
});

מתודת adopt

מתודת adopt עובדת בדיוק כמו grab, רק שאפשר לקחת כמה אלמנטים. נניח שיש לי שני אלמנטים חביבים:


var myAnchor = new Element('a', {
	'href': 'https://internet-israel.com',
	'class': 'myClass',
	'html': 'I am new link, click or mouse over me!',
	'styles': {
		'display': 'block',
		'border': '1px solid black',
		}
	}
);

var anotherAnchor = new Element('a', {
	'href': 'http://www.google.com',
	'class': 'myClass',
	'html': 'Google Link',
	'styles': {
		'display': 'block',
		'border': '1px solid red',
		}
	}
);

אם אני רוצה להצמיד את שניהם (או יותר), אני יכול להשתמש במתודת adopt שתיקח את כל האלמנטים. איך עושים את זה? פשוט מאד, המתודה עובדת כמו grab רק שהיא מקבלת כארגומנטים אלמנטים (או מערך של אלמנטים):


$('myDiv2').adopt(myAnchor, anotherAnchor);

והנה הדוגמא החיה:

זהו דיב חביב שה-id שלו הוא myDiv2

מתודת wraps

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


var niceAnchor = new Element('a', {
	'href': 'https://internet-israel.com',
	'class': 'myClass',
	}
);

שנית, באמצעות $ נבחר ספאן חביב שה-id שלו הוא mySpan. נשתמש במתודת wraps של אלמנט הקישור שיצרנו על מנת לעטוף את ה-span:


niceAnchor.wraps($('mySpan'));

וכך זה יראה:

ספאן חביב

מתודת appendText

המתודה הזו מאפשרת לנו להוסיף טקסט לאלמנט. זוכרים שכאשר אני יוצר אלמנט מסוג anchor בדוגמאות לעיל, יש לי תכונה אחת שנקראת text וכוללת את הטקסט של הקישור? אז בדיוק זה, להוסיף טקסט לאלמנט מסוים. נניח ויש לנו קישור שה-id שלו הוא ilAnchor ואני רוצה להוסיף לו טקסט. כל מה שעלי לעשות הוא:


$('ilAnchor').appendText(' Is Great Site! ');

הארגומנט היחידי של המתודה הזו הוא מחרוזת הטקסט שאנו מוסיפים. והנה הדוגמא המיוחלת:

קישור לאינטרנט ישראל!

מתודת dispose

מתודת dispose פשוט מוחקת את האלמנט מה-DOM. מה שטוב בה, היא שהיא מחזירה את האלמנט וכך אנו יכולים להשתמש בו שוב, אם אנו ממש רוצים.

למשל, הקוד הבא יעלים את כל האלמנטים שיש להם class בשם myClass:


$$('.myClass').dispose();

והנה הדוגמא המיוחלת:

זוהי פסקה שיש לה class ששמו בישראל הוא myClass

מתודת clone ומתודת replaces

מדובר בשתי מתודות ששימושיות לאו דווקא בהקשר של שינוי ה-DOM אבל לא מצאתי מקום יותר טוב לדון עליהם מאשר כאן. באופן עקרוני clone משמשת אותנו ליצור העתק אחד לאחד של אלמנט מסוים. לא משהו שאנחנו לא מכירים משפות OOP אחרות. עושים את זה כך:


var copy = myElement.clone([contents, keepid]);

שני הארגומנטים הם contents (בדיפולטיבי הוא true) שבו אנו בוחרים אם לשמור את התוכן של האלמנט או רק את המבנה. הארגומנט השני הוא keepid (בדיפולטיבי הוא false) שבו אנו בוחרים אם לשמור על ה-id המקורי.

מתודת replace היא מתודה שבה אנו מחליפים אלמנט אחד באלמנט אחר. אין הרבה מה לכתוב על המתודה הזו.


var element = myElement.replaces(el);

עד כאן בנוגע למתודות שמשנות דברים ב-DOM, בחלקו השלישי של המאמר על מתודות של אלמנט ב-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 | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

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