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

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

רן בר-זיק יוני 6, 2010 8:03 am אין תגובות

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

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

במאמר הקודם למדנו על מתודות שבאמצעותן הכנסנו או שינינו את מיקומו אל אלמנט MooTools ב-DOM. במאמר זה יובאו מתודות שמסייעות לנו לבחור באלמנטים אחרים חוץ מהאלמנט שאותו בחרנו עם הסלקטור.

מתודת getPrevious

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


<ul>
<li>פריט ראשון</li>
<li>פריט שני</li>
<li id="myListItem">פריט שלישי</li>
<li>פריט רביעי</li>
<li>פריט חמישי</li>
</ul>

ואני בוחר עם הסלקטור את הפריט השלישי (וזה קל, כי יש לו id), שימוש במתודת getPrevious יחזיר לי את הפריט השני. הכל יותר ברור עם דוגמא, לחיצה על הכפתור תבחר את הפריט הקודם ותצבע אותו באדום.

  • פריט ראשון
  • פריט שני
  • פריט שלישי
  • פריט רביעי
  • פריט חמישי

הקוד נראה כך, ראשית אני מצמיד אירוע לכפתור שמפעיל את פונקצית showPrev:


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

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


function showPrev() {
	var previousSibling = $('myListItem').getPrevious();
	previousSibling.setStyle('color', 'red');
}

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

מתודת getNext

המתודה זהה לחלוטין ל-getPrevious רק שהיא מחזירה את אלמנט האח הבא ברשימה. אם אני אשתמש במתודה הזו ברשימה שלעיל, הפריט הרביעי ייצבע (כיוון שאני בוחר את הפריט השלישי ומריץ עליו את מתודת getNext). הנה כפתור, לחצו עליו ושימו לב מה קורה ברשימה למעלה:

הקוד פשוט ביותר, במקום getPrevious, אנו משתמשים ב-getNext:


function showNext() {
	var nextSibling = $('myListItem').getNext();
	nextSibling.setStyle('color', 'red');
}

גם ב-getNext אנו יכולים להשתמש בארגומנט שהוא סלקטור של CSS.

מתודות getAllNext ו-getAllPrevious

בניגוד ל-getNext ול-getPrevious, המתודות getAllNext ו-getAllPrevious מחזירות לנו את כל האלמנטים האחים. אם נמשיך בדוגמא שלנו עם הרשימה:

  • פריט ראשון
  • פריט שני
  • פריט שלישי
  • פריט רביעי
  • פריט חמישי


זה די פשוט, וגם הקוד:


function showNextAll() {
	var nextSiblings = $('myOtherListItem').getAllNext();
	nextSiblings.setStyle('color', 'red');
}

function showPrevAll() {
	var previousSiblings = $('myOtherListItem').getAllPrevious();
	previousSiblings.setStyle('color', 'red');
}
	
window.addEvent('domready', function() {
    $('myButton3').addEvent('click', showPrevAll);
    $('myButton4').addEvent('click', showNextAll);
});

הסינטקס מאד דומה כאן ואין לי מה להוסיף מעבר לדוגמא.

מתודת getFirst ומתודת getLast

המתודות האלו זהות למתודות getPrevious ו-getNext לחלוטין. הן פשוט מחזירות את אלמנט האח הראשון ואת אלמנט האח האחרון מכל האחים.

מתודת getParent

המתודה הזו מחזירה את ההורה המיידי של האלמנט. במקרה שלנו (של הרשימה שבדוגמא) את ה-ul. הכפתור הזה למשל ישנה את ה-list-style של ה-ul למשהו מגניב.


function showParent() {
	var parent = $('myOtherListItem').getParent();
	parent.setStyle('list-style', 'katakana-iroha');
}

בנוסף יש גם את מתודת getParents שמחזירה מערך של כל ההורים של האלמנט שלנו.

מתודת getChildren

במידה ולאלמנט שלנו יש ילדים, מתודת getChildren תסייע לנו לבחור את כולם. כך למשל, בואו ונניח שיש לי רשימה כלשהי:


<ul id="myList">
<li>פריט ראשון</li>
<li>פריט שני</li>
<li>פריט שלישי</li>
<li>פריט רביעי</li>
<li>פריט חמישי</li>
</ul>

אם אני ארצה לבחור את כל הילדים של ה-ul שלי, שה-id שלו הוא myList, מה שאצטרך לעשות הוא לבחור את ה-ul שלי (וזה קל כי יש לו id) ואז להשתמש במתודת getChildren, משם הכל פשוט. הנה דוגמא לפונקציה שבוחרת את הילדים וצובעת אותם באדום:


function showChildren() {
	var children = $('myList').getChildren();
	children.setStyle('color', 'red');
}

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

  • פריט ראשון
  • פריט שני
  • פריט שלישי
  • פריט רביעי
  • פריט חמישי

גם המתודה הזו מקבלת ארגומנט של סלקטור CSS שבאמצעותו אנו יכולים להוריד אלמנטים שאנחנו לא רוצים.

מתודת empty

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

הקוד הוא פשוט עד כדי גיחוך:


function emptyChildren() {
	$('myList').empty();
}

מתודת destroy

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


$('myList').destroy();

מתודות של טפסים

ישנן שתי מתודות ששימושיות במיוחד בטפסים.

מתודת getSelected

מתודה שאפשר להפעיל אותה על אלמנט מסוג select והיא מחזירה לנו את האלמנט option שסומן על ידי המשתמש. עם האלמנט עצמו אפשר לעשות מה שרוצים כמובן.

בוא וניקח כדוגמא רשימה חביבה:


<select id="country-select" name="country">
    <option value="US">United States</option>
    <option value ="IL">Israel</option>
    <option value ="IT">Italy</option>
</select>

נניח שאני רוצה לעשות כפתור שמקפיץ alert עם ה-value שהמשתמש בחר. איך עושים את זה? באמצעות מתודת getSelected. נצמיד אירוע לכפתור וכשהוא יילחץ הוא יפעיל את הפונקציה הבאה:


function showSelected() {
	var country = $('country-select').getSelected();
	alert(country.get('value'));
}

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

מתודת toQueryString

מתודה שימושית למדי כאשר יש לי טופס ואני צריך לקחת את כל הערכים ולהפוך אותם למחרוזת ארוכה לשליחה ב-GET או POST.

דוגמא במקרה הזה היא הכי טובה, בואו ונניח שיש לי טופס חביב:


<form id="myForm" action="submit.php">
    <input name="email" value="[email protected]" />
    <input name="zipCode" value="90210" />
</form>

אם אני רוצה לבצע סיריאליזציה של המידע שיש בו, אני אשתמש במתודת toQueryString באופן הבא:


function showString() {
	var myFormString = $('myForm').toQueryString();
	alert(myFormString);
}

פשוט ונעים – והנה הדוגמא החיה:



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

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